/* ==========================================================================
   QHSE Ltd, site stylesheet
   One file, no build step. Sections:
     1. Tokens
     2. Fonts
     3. Reset and base
     4. Typography
     5. Layout primitives
     6. Buttons
     7. Header and navigation
     8. Hero
     9. Content components (cards, lists, strips, bands)
    10. Forms
    11. Footer
    12. Motion
    13. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette. Sea Green is the logo colour. Everything else is derived. */
  --brand: #338156;
  --brand-dark: #1F5637;
  --brand-deep: #0E2B1C;
  --brand-tint: #EAF3EE;
  --ink: #12211A;
  --ink-muted: #56655D;
  --line: #DCE5DF;
  --white: #ffffff;

  /* Text on dark bands. White at reduced alpha, so it stays a neutral. */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.76);
  --on-dark-line: rgba(255, 255, 255, 0.16);

  /* Type stacks. Venti CF is first so it takes over once the files exist. */
  --font-display: "Venti CF", "Venti", "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-h2: clamp(1.85rem, 1.4rem + 2vw, 2.6rem);
  --text-h1: clamp(2.4rem, 5vw, 4rem);

  /* Spacing and layout */
  --gutter: 16px;
  --container: 1140px;
  --section: clamp(56px, 4rem + 3vw, 96px);
  --radius: 4px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}

@media (min-width: 600px) {
  :root { --gutter: 24px; }
}

@media (min-width: 900px) {
  :root { --gutter: 32px; --header-h: 80px; }
}

/* --------------------------------------------------------------------------
   2. Fonts
   Archivo and Inter load from Google Fonts in each page head.

   Venti CF webfont. When the Venti CF licence has been purchased and the files are available, place them in
   /assets/fonts/ with the names below and remove the comment markers around
   this block. Nothing else needs to change, headings switch over automatically
   because "Venti CF" is first in the display stack.

@font-face {
  font-family: "Venti CF";
  src: url("fonts/VentiCF-Black.woff2") format("woff2"),
       url("fonts/VentiCF-Black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Venti CF";
  src: url("fonts/VentiCF-Bold.woff2") format("woff2"),
       url("fonts/VentiCF-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--brand); }

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

::selection { background: var(--brand); color: var(--white); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

address { font-style: normal; }

/* Skip link: visually hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--brand-deep);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; outline-color: var(--white); }

.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;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: var(--text-h2); line-height: 1.08; }
h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

strong { font-weight: 500; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}

.lede {
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 44rem;
}

.prose { max-width: 42rem; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul li { margin-bottom: 0.5em; }

.muted { color: var(--ink-muted); }
.small { font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(820px + var(--gutter) * 2); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--tint { background: var(--brand-tint); }
.section--dark { background: var(--brand-deep); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark .eyebrow { color: var(--on-dark-muted); }
.section--dark p { color: var(--on-dark-muted); }
.section--dark a { color: var(--on-dark); }
.section--border-top { border-top: 1px solid var(--line); }

/* Section heading block: eyebrow, heading, optional intro, kept to a readable width. */
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 3vw, 3rem); }
.section-head h2 { margin-bottom: 0.5em; }
.section-head p { color: var(--ink-muted); font-size: var(--text-lg); }
.section-head--centre { margin-inline: auto; text-align: center; }

/* Responsive grid. Set --cols on the element for the desktop column count. */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
}

/* Two column split: text on one side, aside on the other. */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

.stack > * + * { margin-top: 1.5rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: var(--white); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--white); }

.btn--ghost { background: transparent; color: var(--brand-dark); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }

.btn--light { background: var(--white); color: var(--brand-deep); border-color: var(--white); }
.btn--light:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-deep); }

.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.btn--outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); color: var(--white); }

.btn--block { width: 100%; }

.btn .icon { width: 1.1em; height: 1.1em; flex: none; }

/* Text link with arrow, used on cards and teasers. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--brand-dark);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 0.9em; height: 0.9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover { color: var(--brand); text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(14, 43, 28, 0.08); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 36px; width: auto; }
@media (min-width: 900px) { .brand img { height: 40px; } }

/* Hamburger button, shown below 900px. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.nav-toggle__icon {
  position: relative;
  width: 22px; height: 16px;
  flex: none;
}
.nav-toggle__icon span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle__icon span:nth-child(1) { top: 0; }
.nav-toggle__icon span:nth-child(2) { top: 7px; }
.nav-toggle__icon span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.site-nav a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--brand-dark); }
.site-nav a[aria-current="page"] { color: var(--brand-dark); }
.site-nav li:last-child a { border-bottom: 0; }

/* Mobile: the nav is a panel under the header bar. */
@media (max-width: 899.98px) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(14, 43, 28, 0.10);
    padding: 0.5rem var(--gutter) 1.25rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .site-nav.is-open { display: block; }
  .site-nav .nav-cta { margin-top: 1rem; }
  .site-nav .nav-cta a {
    border: 0;
    background: var(--brand);
    color: var(--white);
    text-align: center;
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
  }
  .site-nav .nav-cta a[aria-current="page"] { background: var(--brand-dark); }
}

/* Desktop: horizontal nav with a filled contact button. */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 0.25rem; }
  .site-nav a {
    padding: 0.5rem 0.8rem;
    border-bottom: 0;
    border-radius: var(--radius);
    position: relative;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .site-nav a:hover::after,
  .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav .nav-cta { margin-left: 0.75rem; }
  .site-nav .nav-cta a {
    background: var(--brand);
    color: var(--white);
    padding: 0.65rem 1.15rem;
  }
  .site-nav .nav-cta a:hover { background: var(--brand-dark); }
  .site-nav .nav-cta a::after { display: none; }
  .site-nav .nav-cta a[aria-current="page"] { background: var(--brand-dark); }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 6vw, 7rem) clamp(3rem, 5vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* Faint rule grid in the top right corner, echoing the mesh motif. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -12%;
  width: 60vw;
  max-width: 820px;
  aspect-ratio: 1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, black 0%, transparent 62%);
  mask-image: radial-gradient(circle at 70% 30%, black 0%, transparent 62%);
  opacity: 0.9;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.hero h1 { margin-bottom: 1.25rem; max-width: 18ch; }
.hero .lede { margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 479.98px) { .hero__actions .btn, .page-hero__actions .btn { width: 100%; } }

/* Compact page hero for interior pages. */
.page-hero {
  position: relative;
  padding-block: clamp(3rem, 5vw, 5.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: 46vw;
  max-width: 620px;
  aspect-ratio: 1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 70% 35%, black 0%, transparent 60%);
  mask-image: radial-gradient(circle at 70% 35%, black 0%, transparent 60%);
  pointer-events: none;
}
.page-hero h1 { max-width: 18ch; margin-bottom: 1rem; }
.page-hero .lede { margin-bottom: 0; }
.page-hero__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Offer panel that sits beside the home hero: a stacked list with rules. */
.offer-panel {
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-left: 4px solid var(--brand);
}
.offer-panel__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin: 0 0 0.75rem;
}
.offer-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: offer;
}
.offer-panel li {
  counter-increment: offer;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  padding: 0.9rem 0;
  margin: 0;
  border-top: 1px solid rgba(51, 129, 86, 0.22);
}
.offer-panel li:first-child { border-top: 0; padding-top: 0.25rem; }
.offer-panel li:last-child { padding-bottom: 0.25rem; }
.offer-panel li::before {
  content: counter(offer, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--brand);
  line-height: 1.5;
}
.offer-panel strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.15rem;
}
.offer-panel span { font-size: var(--text-sm); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   9. Content components
   -------------------------------------------------------------------------- */

/* Credential strip: quiet band of text credentials. */
.cred-strip {
  background: var(--brand-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 1.25rem;
}
.cred-strip__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin: 0 0 0.6rem;
}
.cred-strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
}
.cred-strip li {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  position: relative;
  padding-left: 1.1rem;
}
.cred-strip li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: var(--brand);
}
@media (min-width: 480px) {
  .cred-strip ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .cred-strip__inner { display: flex; align-items: center; gap: 2rem; }
  .cred-strip__label { margin: 0; flex: none; }
  .cred-strip ul { display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
  .cred-strip li { padding-left: 0; padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid rgba(51, 129, 86, 0.35); }
  .cred-strip li::before { display: none; }
  .cred-strip li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
}

/* Cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card h3 { margin-bottom: 0.5rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card--link:hover h3 a, .card--link:focus-within h3 a { color: var(--brand-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.card p { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; }
.card .link-arrow { margin-top: auto; padding-top: 1.25rem; font-size: var(--text-sm); }
.card--link:hover, .card--link:focus-within {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(14, 43, 28, 0.08);
}
/* Whole card is clickable via a stretched link. */
.card--link .card__link::before { content: ""; position: absolute; inset: 0; }
.card--link .card__link:focus-visible::before { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--radius); }
.card--link .card__link:focus-visible { outline: none; }

.card__marker {
  width: 40px; height: 4px;
  background: var(--brand);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.card__index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--brand);
  margin-bottom: 1rem;
}

/* Pillar columns: heading with a top rule. */
.pillar { border-top: 3px solid var(--brand); padding-top: 1.25rem; }
.pillar h3 { margin-bottom: 0.5rem; }
.pillar p { color: var(--ink-muted); font-size: var(--text-sm); }

/* Service detail blocks on services.html */
.service-band { padding-block: clamp(2.75rem, 4vw, 4.5rem); }
.service-band:nth-of-type(even) { background: var(--brand-tint); }
.service {
  display: grid;
  gap: 1.25rem 3rem;
  grid-template-columns: 1fr;
}
.service-band:nth-of-type(even) .service__suits { background: var(--white); }
@media (min-width: 900px) {
  .service { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.service__head h2 { margin-bottom: 0.5rem; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); }
.service__head .eyebrow { margin-bottom: 0.6rem; }
.service__body p { margin-bottom: 1em; }
.service__body ul { padding-left: 1.2em; }
.service__body ul li { margin-bottom: 0.4em; }
.service__suits {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
}
.service__suits strong { display: block; color: var(--brand-dark); font-weight: 500; margin-bottom: 0.2rem; }

/* In-page jump list at the top of long pages. */
.jump-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.jump-list li { margin: 0; }
.jump-list a {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.jump-list a:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }

/* Definition-style feature list: label and copy pairs. */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.feature-list li {
  display: grid;
  gap: 0.35rem 2rem;
  grid-template-columns: 1fr;
  padding: 1.25rem 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .feature-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.feature-list strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--ink);
}
.feature-list p { color: var(--ink-muted); font-size: var(--text-sm); }

/* Tick list */
.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 1rem; height: 1rem;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
}

/* Numbered steps, used for "how a course runs". */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  counter-increment: step;
  margin: 0;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brand);
  margin-bottom: 1rem;
}
.steps h3 { font-size: var(--text-lg); margin-bottom: 0.4rem; }
.steps p { font-size: var(--text-sm); color: var(--ink-muted); }

/* Sector blocks */
.sector {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.sector h2 { font-size: var(--text-h3); margin-bottom: 0.6rem; }
.sector p { color: var(--ink-muted); font-size: var(--text-sm); }
.sector ul { padding-left: 1.1em; margin: 0.75rem 0 0; font-size: var(--text-sm); color: var(--ink); }
.sector ul li { margin-bottom: 0.3em; }
.sector--feature, .sector--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .sector--feature, .sector--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 3rem; align-items: start; }
  .sector--feature h2 { font-size: var(--text-h2); }
  .sector--feature > div:first-child p, .sector--wide > div:first-child p { font-size: var(--text-md); }
}
.sector--wide .tick-list { margin-top: 0; }

/* Credentials list on experience page. */
.cred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cred-list li {
  margin: 0;
  padding: 0.85rem 0 0.85rem 1.75rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-weight: 500;
}
.cred-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--brand);
}

/* Career timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: var(--line);
}
.timeline li { position: relative; padding-left: 2.25rem; margin: 0 0 2rem; }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--brand);
}
.timeline h3 { margin-bottom: 0.35rem; font-size: var(--text-lg); }
.timeline p { color: var(--ink-muted); font-size: var(--text-sm); }

/* Name block with post-nominals. */
.name-block { margin-bottom: 1.5rem; }
.name-block__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.01em; line-height: 1.2; }
.name-block__post { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 0.15rem; }

/* Highlight aside panel, tinted, used to the side of prose. */
.panel {
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-top: 4px solid var(--brand);
}
.panel h2, .panel h3 { font-size: var(--text-lg); margin-bottom: 0.75rem; }
.panel p { font-size: var(--text-sm); }
.panel ul { font-size: var(--text-sm); }
@media (min-width: 900px) { .panel--sticky { position: sticky; top: calc(var(--header-h) + 24px); } }
.section--tint .panel { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--brand); }

/* Contact details on the contact page. */
.contact-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.contact-details li { margin: 0; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
.contact-details .icon-wrap {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--brand-dark);
}
.contact-details .icon { width: 1.25rem; height: 1.25rem; }
.contact-details strong { display: block; font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 0.2rem; }
.contact-details a { font-size: var(--text-lg); font-weight: 500; color: var(--ink); text-decoration: none; }
.contact-details a:hover { color: var(--brand-dark); text-decoration: underline; }
.contact-details span.plain { font-size: var(--text-lg); font-weight: 500; }
.contact-details small { display: block; color: var(--ink-muted); font-size: var(--text-sm); margin-top: 0.15rem; }

/* Dark call to action band with a faint mesh watermark. */
.cta-band {
  position: relative;
  background: var(--brand-deep);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: skewY(-6deg) scale(1.3);
  transform-origin: right top;
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, black 100%);
  mask-image: linear-gradient(115deg, transparent 35%, black 100%);
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  top: -40%;
  width: 55vw;
  max-width: 720px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(51, 129, 86, 0.35) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band h2 { color: var(--on-dark); margin-bottom: 0.75rem; }
.cta-band p { color: var(--on-dark-muted); font-size: var(--text-lg); max-width: 40rem; }
.cta-band .eyebrow { color: var(--on-dark-muted); }
.cta-band__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cta-band__actions { justify-self: end; }
}
.cta-band__actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
@media (min-width: 480px) { .cta-band__actions { flex-direction: row; flex-wrap: wrap; } }
.cta-band__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--on-dark);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.cta-band__phone:hover { color: var(--on-dark); text-decoration: underline; }
.cta-band__phone .icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* Simple stat-free highlight row used on training page: format facts. */
.fact-row {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .fact-row { grid-template-columns: repeat(3, 1fr); } }
.fact-row div { background: var(--white); padding: 1.25rem 1.5rem; }
.fact-row strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: 0.2rem; }
.fact-row span { font-size: var(--text-sm); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-weight: 500; font-size: var(--text-sm); color: var(--ink); }
.field label .req { color: var(--brand-dark); margin-left: 0.15rem; }
.field .hint { font-size: var(--text-xs); color: var(--ink-muted); }

.input, .select, .textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(51, 129, 86, 0.22);
}
.textarea { min-height: 160px; resize: vertical; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312211A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.1rem;
}

/* Invalid state. A thicker ink border plus a text message, so colour is never
   the only carrier of meaning. */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--ink); border-width: 2px; }
.field__error {
  display: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  padding-left: 1.4rem;
  position: relative;
}
.field.is-invalid .field__error { display: block; }
.field__error::before {
  content: "!";
  position: absolute;
  left: 0; top: 0.2em;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--brand-deep);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

/* Honeypot: hidden from people, present for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  display: none;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--brand);
  background: var(--brand-tint);
  color: var(--ink);
  font-weight: 500;
}
.form__status.is-visible { display: block; }
.form__status--error { border-color: var(--ink); background: var(--white); }
.form__status p { margin: 0; }
.form__status p + p { margin-top: 0.35rem; font-weight: 400; color: var(--ink-muted); font-size: var(--text-sm); }

.form__footer { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.form__footer .small { max-width: 28rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-deep);
  color: var(--on-dark-muted);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
  font-size: var(--text-sm);
}
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--on-dark); }
.site-footer__grid {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--on-dark-line);
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) 1fr 1fr 1fr; } }
.site-footer__brand img { height: 40px; width: auto; margin-bottom: 1.25rem; }
.site-footer__brand p { max-width: 30rem; margin-bottom: 0.75rem; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 0.55rem; }
.site-footer address a { font-weight: 500; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: var(--text-xs);
}
.site-footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   12. Motion
   Fade and rise on scroll. Only active when JS has added the "js" class, so
   content is always visible when scripts are unavailable.
   -------------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal-group > .reveal:nth-child(2) { transition-delay: 80ms; }
html.js .reveal-group > .reveal:nth-child(3) { transition-delay: 160ms; }
html.js .reveal-group > .reveal:nth-child(4) { transition-delay: 240ms; }
html.js .reveal-group > .reveal:nth-child(n + 5) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:hover, .card--link:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .skip-link, .hero::before, .page-hero::before { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 1.5rem; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* Client band. Names only, no detail. Kept quiet so it reads as fact, not boast. */
.clients {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  background: var(--white);
}
.clients__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin: 0 0 1.25rem;
}
.clients__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 2.5rem;
}
.clients__list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  color: var(--ink);
}
@media (min-width: 720px) {
  .clients__list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .clients__list li { border-left: 2px solid var(--brand); padding-left: 1rem; }
}

/* Credential grid. Each qualification carries a plain explanation of what it means. */
.cred-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
  margin: 0;
}
@media (min-width: 760px) { .cred-grid { grid-template-columns: 1fr 1fr; } }
.cred-grid__item {
  padding-top: 1.1rem;
  border-top: 2px solid var(--brand);
}
.cred-grid dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.cred-grid dd {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 34rem;
}

/* Act change band. A dated notice that needs to read as current and urgent
   without shouting, so it uses the deep green ground rather than a colour alarm. */
.actband {
  background: var(--brand-deep);
  color: var(--on-dark);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.actband__date {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.actband h2 {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  max-width: 22ch;
  text-wrap: balance;
}
.actband__lede {
  max-width: 62ch;
  margin: 0 0 2.5rem;
  color: rgba(255, 255, 255, 0.82);
}
.actband__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
  margin-bottom: 2.25rem;
}
@media (min-width: 760px) { .actband__grid { grid-template-columns: repeat(3, 1fr); } }
.actband__grid > div { padding-top: 1rem; border-top: 2px solid var(--brand); }
.actband__grid h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 0.5rem;
  color: var(--on-dark);
}
.actband__grid p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: var(--text-sm); line-height: 1.6; }
.actband__cta { margin: 0; }

/* Credentials head. The HASANZ Registered quality mark sits beside the text because
   HASANZ require it to appear only where the page content is specific to the
   registered individual. Displayed as supplied: no recolouring, rotation or effects. */
.cred-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 3rem;
}
@media (min-width: 820px) {
  .cred-head { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}
.cred-head h2 { margin-bottom: 1rem; }
.cred-head p { max-width: 62ch; margin: 0; }
.cred-head__mark {
  height: 112px;
  width: auto;
  justify-self: start;
}
@media (min-width: 820px) { .cred-head__mark { height: 132px; justify-self: end; } }

/* Accreditation marks. Each mark sits with the credential it belongs to, shown
   exactly as the issuing body supplies it: no recolouring, cropping or background
   removal. Each sits on a white tile because NZISM require their accreditation logo
   to appear only on white, and this section is tinted. The note below ties them to
   Rob as an individual, which NZISM and HASANZ both require. */
.cred-grid__item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.cred-grid__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.6rem;
  min-height: 72px;
}
.cred-grid__mark--none { background: none; border: 0; min-height: 0; }
.cred-grid__mark img {
  max-width: 100%;
  max-height: 58px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.marks__note {
  margin: 2rem 0 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
@media (max-width: 560px) {
  .cred-grid__item { grid-template-columns: 78px minmax(0, 1fr); gap: 0.9rem; }
  .cred-grid__mark { min-height: 60px; padding: 0.5rem; }
  .cred-grid__mark img { max-height: 46px; }
}

/* Invisible alias anchor so old deep links still land in the right place */
.anchor-alias { display: block; height: 0; overflow: hidden; }

/* Build marker in the footer. Hidden on the live site.
   The build number is still in an HTML comment on line 2 of every page.
   To show it on the page again, change 'none' to 'block' on the line below. */
.build-tag { display: none; font-size: 0.75rem; letter-spacing: 0.04em; opacity: 0.5; }