/* Shared by all 3 samples: the font, the states site.js toggles, and the sample certificate
   (a document looks the same whatever site it sits on). Everything else is the theme's.
   Selectors use :where() so a theme overrides them without fighting specificity.

   A theme must define these tokens on :root:
   --c-bg --c-surface --c-ink --c-muted --c-line --c-accent --c-on-accent --c-ok --c-ask --c-no --font-body */

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body) { margin: 0; }
:where(img, svg) { max-width: 100%; height: auto; }
:where(img) { display: block; }
:where(a) { color: inherit; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(.nb) { white-space: nowrap; }
:where(.sr) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.ico) { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }
:where(:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* lists with an icon per line */
:where(.checks, .takes ul, .docrows, .desk-c, .loc-c, .files, .ticklist, .certchips, .finder-results, .steps, .rf-progress) { list-style: none; margin: 0; padding: 0; }
:where(.checks li, .takes li, .desk-c li, .loc-c li) { display: flex; gap: 0.6em; align-items: flex-start; }
:where(.checks li > span, .takes li > span, .loc-c li > span) { min-width: 0; }
:where(.takes) { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
:where(.takes-yes .li-ico) { color: var(--c-ok); }
:where(.takes-no .li-ico) { color: var(--c-no); }

/* questions */
:where(.qa summary) { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
:where(.qa summary)::-webkit-details-marker { display: none; }
:where(.qa .qa-ico) { transition: transform 0.2s; }
:where(.qa[open] .qa-ico) { transform: rotate(180deg); }

/* tables scroll inside their own box, never the page */
:where(.tablewrap, .cod-scroll) { overflow-x: auto; max-width: 100%; }
:where(.tbl) { border-collapse: collapse; width: 100%; min-width: 34rem; }
:where(.tbl th, .tbl td) { text-align: left; vertical-align: top; }

/* cards grid default */
:where(.cards, .docs, .certs, .cases, .quotes, .desks, .locs) { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
:where(.card-link) { text-decoration: none; display: flex; flex-direction: column; }
:where(.facts) { margin: 0; }
:where(.facts dd) { margin: 0; }

/* the reach map */
:where(.reach) { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: center; }
:where(.reachsvg) { width: 100%; height: auto; display: block; }
:where(.reach-band) { stroke: var(--c-accent); stroke-opacity: 0.14; stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; }
:where(.reach-line) { stroke: var(--c-accent); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
:where(.reach-city) { fill: var(--c-bg); stroke: var(--c-ink); stroke-width: 2; }
:where(.reach-site) { fill: var(--c-accent); }
:where(.reach-site-ring) { fill: var(--c-accent); fill-opacity: 0.22; }
:where(.reach-label) { font: 500 17px var(--font-body); fill: var(--c-ink); }
:where(.reach-label-site) { font-weight: 700; font-size: 20px; }
:where(.reach-sub) { font: 400 14px var(--font-body); fill: var(--c-muted); }
/* the drawing shrinks with the screen, so the lettering grows to stay readable on a phone */
@media (max-width: 40rem) {
  :where(.reach-label) { font-size: 25px; }
  :where(.reach-label-site) { font-size: 28px; }
  :where(.reach-sub) { display: none; }
}

/* material finder */
:where(.finder-input) { position: relative; display: flex; align-items: center; }
:where(.finder-input > .ico) { position: absolute; left: 0.9rem; pointer-events: none; }
:where(.finder-input input) { width: 100%; padding: 0.85rem 2.75rem; min-width: 0; }
.finder-input input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
:where(.finder-clear) { position: absolute; right: 0.5rem; background: none; border: 0; padding: 0.4rem; cursor: pointer; display: flex; }
:where(.chips) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
:where(.chip) { cursor: pointer; }
:where(.fi-head) { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: baseline; }
:where(.fi-status) { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }
:where(.fi-yes .fi-status) { color: var(--c-ok); }
:where(.fi-ask .fi-status) { color: var(--c-ask); }
:where(.fi-no .fi-status) { color: var(--c-no); }
:where(.fi-meta) { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
:where(.findbox-row) { display: flex; flex-wrap: wrap; gap: 0.75rem; }
:where(.findbox-row .finder-input) { flex: 1 1 16rem; }

/* forms */
:where(fieldset) { border: 0; margin: 0; padding: 0; min-width: 0; }
:where(.field) { display: grid; gap: 0.4rem; margin-block: 0 1.25rem; }
:where(.field-row) { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
:where(.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea) { width: 100%; min-width: 0; }
:where(.opts) { display: flex; flex-wrap: wrap; gap: 0.6rem; }
:where(.opts-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
:where(.opt) { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
:where(.opt input) { margin: 0.2em 0 0; flex: none; accent-color: var(--c-accent); width: 1.1em; height: 1.1em; }
:where(.err) { color: var(--c-no); margin: 0; font-weight: 600; }
:where(.rf-progress) { display: flex; gap: 0.5rem; flex-wrap: wrap; counter-reset: none; }
:where(.rf-dot) { display: flex; align-items: center; gap: 0.45rem; }
:where(.rf-nav) { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
:where(.rf-h):focus { outline: none; }
:where(.rf-summary) { margin: 0; }
:where(.rf-row) { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: baseline; }
:where(.rf-row dd) { margin: 0; overflow-wrap: anywhere; }
:where(.rf-edit, .file-x) { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; color: var(--c-accent); }
@media (max-width: 30rem) { :where(.rf-row) { grid-template-columns: minmax(0, 1fr) auto; } :where(.rf-row dt) { grid-column: 1 / -1; } }
:where(.drop) { position: relative; text-align: center; padding: 1.5rem 1rem; border: 2px dashed var(--c-line); }
:where(.drop.is-over) { border-color: var(--c-accent); }
:where(.drop input) { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
:where(.drop p) { margin: 0.25rem 0; }
:where(.files li) { display: flex; gap: 0.75rem; align-items: baseline; padding-block: 0.35rem; }
:where(.file-n) { min-width: 0; overflow-wrap: anywhere; flex: 1; }
:where(.ticklist label) { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; }
:where(.ticklist input) { margin-top: 0.25em; flex: none; width: 1.15em; height: 1.15em; accent-color: var(--c-accent); }
:where(.ticklist input:checked + span) { text-decoration: line-through; opacity: 0.65; }
:where(.cf.is-sent) > :where(.field, .field-row, .rf-nav) { display: none; }

/* the sample certificate: white paper, dark ink, whatever the theme */
.codwrap { max-width: 52rem; }
.cod { position: relative; overflow: hidden; background: #ffffff; color: #1d1f1f; border: 1px solid #c9cfcc; padding: clamp(1.1rem, 4vw, 2.5rem);
  font: 400 0.9rem/1.5 "Jost", "Century Gothic", "Segoe UI", sans-serif; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.25); }
.cod p { margin: 0 0 0.6rem; }
.cod-stamp { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: clamp(4rem, 17vw, 9rem); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(12, 133, 102, 0.1); pointer-events: none; user-select: none; white-space: nowrap; }
.cod-head { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; padding-bottom: 1rem; border-bottom: 3px solid #0c8566; }
.cod-logo { width: 10rem; height: auto; }
.cod-co { font-weight: 700; margin: 0; }
.cod-ad { margin: 0; color: #55605b; }
.cod-title { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em; margin: 1.1rem 0 0.9rem; color: #1d1f1f; }
.cod-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.6rem 1.5rem; margin: 0 0 0.5rem; }
.cod-meta dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #55605b; }
.cod-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cod-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: #0c8566; margin: 1.3rem 0 0.5rem; }
.cod-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cod-items { min-width: 36rem; }
.cod-table th, .cod-table td { text-align: left; padding: 0.35rem 0.6rem 0.35rem 0; border-bottom: 1px solid #e1e5e3; vertical-align: top; }
.cod-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #55605b; border-bottom: 2px solid #1d1f1f; }
.cod-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid #1d1f1f; }
.cod-table .num { text-align: right; }
.cod-table tbody th + td { white-space: nowrap; }
.cod-sign { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem 2rem; margin-top: 1.5rem; }
.cod-sign p { margin: 0; color: #55605b; font-size: 0.82rem; }
.cod-sign .cod-sig { font: italic 600 1.35rem/1.6 Georgia, "Times New Roman", serif; color: #1d1f1f; border-bottom: 1px solid #1d1f1f; margin-bottom: 0.3rem; }
.cod-foot { margin-top: 1.5rem; padding-top: 0.8rem; border-top: 1px solid #c9cfcc; font-size: 0.78rem; color: #55605b; }
.cod-note { font-size: 0.85rem; margin: 0.75rem 0 0; color: var(--c-muted); }

/* photo gallery: a plain grid that works in any theme */
:where(.gallery-chips) { margin-bottom: 1.25rem; }
:where(.gallery) { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); grid-auto-flow: dense; }
:where(.gallery-item) { margin: 0; min-width: 0; }
:where(.gallery-item img) { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
:where(.gallery-tall) { grid-row: span 2; }
:where(.gallery-tall img) { aspect-ratio: auto; height: calc(100% - 2.2rem); min-height: 20rem; }
:where(.gallery-wide img) { aspect-ratio: 4 / 3; }
:where(.gallery-item figcaption) { font-size: 0.9rem; padding-top: 0.45rem; color: var(--c-muted); }
:where(.case-photo img) { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* a strip of photos */
:where(.photostrip) { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
:where(.strip-item) { margin: 0; min-width: 0; }
:where(.strip-item img) { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
:where(.strip-item figcaption) { font-size: 0.9rem; padding-top: 0.45rem; color: var(--c-muted); }

/* Sample 1: today's ediinc.ca, kept. The measurements below are the live theme's own (header, hero,
   service tiles, two-column bands, check lists, process chevrons, testimonials, footer), so the pages
   added here sit in the same shapes as the pages that already exist.
   Layout idea: full-width bands, 1200px content, white and #f7f7f7 alternating, charcoal and green for emphasis.
   Colour system: the website pair, green #0C8566 on charcoal #2C2D2D. Typeface: Jost, the open stand-in for Futura PT. */
:root {
  color-scheme: light;
  --c-bg: #ffffff;
  --c-surface: #f7f7f7;
  --c-ink: #2c2d2d;
  --c-muted: #5d6462;
  --c-line: #d9dddc;
  --c-accent: #0c8566;
  --c-accent-hover: #0e9c78;
  --c-on-accent: #ffffff;
  --c-dark: #2c2d2d;
  --c-process: #24322e;
  --c-process-2: #147265;
  --c-pale: #b9e2e0;
  --c-highlight: #83d6d6;
  --c-ok: #0c8566;
  --c-ask: #8a5a00;
  --c-no: #b3261e;
  --font-body: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
}

body { background: var(--c-bg); color: var(--c-ink); font: 400 20px/1.4 var(--font-body); }
.site { overflow-x: clip; }
.container { margin: 0 auto; max-width: 1200px; padding: 0 20px; }
.container--narrow { max-width: 950px; }
h1, h2, h3, h4 { font-family: var(--font-body); margin: 0; }
h1 { font-size: 42px; line-height: 56px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04px; }
h3 { font-size: 28px; line-height: 38px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04px; }
p { margin: 0 0 1em; }
a { color: var(--c-accent); transition: all 0.2s ease-in-out; }
a:hover { color: #0a6e54; }
.center-text { text-align: center; }
.section { color: var(--c-ink); }
.background-gray { background-color: var(--c-surface); }
.background-white { background-color: var(--c-bg); }
.siteBody h2 { font-size: 42px; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: var(--c-accent); }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: var(--c-ink); padding: 12px 16px; z-index: 2000; }
.skip:focus { left: 0; }

/* buttons, as the live theme draws them */
.button, .btn { color: #fff; text-align: center; cursor: pointer; padding: 20px 40px; display: inline-block; border-radius: 4px; font-size: 18px; line-height: 1.2;
  font-weight: 600; text-transform: uppercase; text-decoration: none; transition: all 0.2s ease-in-out; border: 2px solid var(--c-accent); font-family: var(--font-body); }
.button--ctaSolidGreen, .btn-primary { background-color: var(--c-accent); color: #fff; }
.button--ctaSolidGreen:hover, .btn-primary:hover { background-color: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #fff; }
.button--ctaGreen, .btn-ghost { background-color: transparent; color: var(--c-accent); }
.button--ctaGreen:hover, .btn-ghost:hover { background-color: var(--c-accent); color: #fff; }
.button--ctaSolidWhite { border-color: #fff; background-color: #fff; color: var(--c-accent); }
.button--ctaSolidWhite:hover { opacity: 0.5; color: var(--c-accent); }
.buttonContainer { text-align: center; margin-top: 10px; }

/* ------------------------------------------------------------------ header */
.primaryNav { background-color: var(--c-dark); position: relative; z-index: 100; }
.primaryNav .container { display: flex; align-items: center; justify-content: space-between; max-width: 1600px; padding: 0 20px; }
.primaryNav-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.primaryNav-logo a { display: inline-block; line-height: 0; }
.nav-logo { max-height: 40px; width: auto; }
.nav-r2 { height: 32px; width: auto; filter: grayscale(1); opacity: 0.85; transition: opacity 0.2s, filter 0.2s; }
.primaryNav-logo .nav-badge { display: inline-flex; align-items: center; gap: 8px; line-height: normal; text-decoration: none; }
.nav-badge:hover .nav-r2, .nav-badge:focus-visible .nav-r2 { filter: none; opacity: 1; }
.nav-cg { height: 30px; width: auto; }
.nav-cgText { display: flex; flex-direction: column; font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.nav-cgText span:last-child { color: var(--c-accent-2, #12b386); }
.nav-cgBadge:hover .nav-cgText span:first-child, .nav-cgBadge:focus-visible .nav-cgText span:first-child { text-decoration: underline; }
@media (max-width: 1280px) and (min-width: 1100px) { .nav-cgText { display: none; } }
.primaryNav-logo { margin-right: 20px; }
@media (max-width: 1199px) and (min-width: 1100px) { .nav-logo { max-height: 32px; } .nav-r2 { height: 26px; } .nav-cg { height: 24px; } .primaryNav-logo { gap: 8px; } }
.menuToggle, .subToggle { display: none; }
.navigation-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.navigation-list > li { margin-left: 35px; position: relative; padding: 33px 0; }
.navigation-list > li:first-child { margin-left: 0; }
.navigation-list > li > a { font-size: 18px; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; padding: 30px 0; position: relative; white-space: nowrap; }
.navigation-list > li > a:hover { color: #ccc; }
.navigation-list > li:hover > a::after, .navigation-list > li.current > a::after, .navigation-list > li:focus-within > a::after {
  content: ""; position: absolute; bottom: 3px; left: 0; width: 100%; border-bottom: 6px solid var(--c-accent); }
.navigation-list > li.nav-cta > a { background-color: var(--c-accent); border-radius: 4px; padding: 20px 40px; font-weight: 600; }
.navigation-list > li.nav-cta > a::after { display: none; }
.navigation-list > li.nav-cta > a:hover { background-color: var(--c-accent-hover); color: #fff; }
.sub-menu { position: absolute; z-index: 10; top: 100%; left: -30px; width: 290px; background-color: var(--c-dark); color: #fff; padding: 8px 0; visibility: hidden; opacity: 0;
  pointer-events: none; transition: visibility 0s 0.3s, opacity 0.3s linear; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25); }
.navigation-list > li:hover > .sub-menu, .navigation-list > li:focus-within > .sub-menu, .navigation-list > li.is-open > .sub-menu { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.3s linear; }
.sub-menu ul { list-style: none; margin: 0; padding: 0; }
.sub-menu li { padding: 11px 24px; }
.sub-menu a { color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; display: block; }
.sub-menu a:hover { color: #14b088; }
.sub-menu--wide { width: 720px; left: -30px; padding: 18px 0 8px; }
.sub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.sub-h { margin: 6px 24px 2px; color: #14b088; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; }
.sub-foot { display: flex; gap: 0; margin-top: 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.sub-foot a { font-weight: 600; }
@media (max-width: 1439px) {
  .navigation-list > li { margin-left: 22px; }
  .navigation-list > li > a { font-size: 16px; }
  .navigation-list > li.nav-cta > a { padding: 16px 26px; }
}

/* the phone and tablet header: logo, Menu button, and the bar at the bottom, as on today's site */
.mobileActions { display: none; }
@media (max-width: 1099px) {
  .site { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .primaryNav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1000; }
  .primaryNav .container { flex-wrap: wrap; min-height: 66px; padding: 8px 15px; }
  .nav-logo { max-height: 34px; max-width: 184px; height: auto; }
  .primaryNav-logo .nav-badge { display: none; }
  .menuToggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 82px; min-height: 44px; margin: 0; padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 2px; background: transparent; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; text-transform: uppercase; cursor: pointer; }
  .menuToggle-icon { font-size: 22px; font-weight: 400; line-height: 1; }
  .primaryNav-items { display: none; flex-basis: 100%; margin: 8px -15px -8px; max-height: calc(100vh - 66px); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 15px 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); background: #252626; }
  .primaryNav-items.is-open { display: block; }
  .navigation-list { display: block; }
  .navigation-list > li { display: block; margin: 0; padding: 0; position: relative; }
  .navigation-list > li > a { display: flex; align-items: center; min-height: 46px; padding: 10px 48px 10px 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); font-size: 14px; line-height: 1.25; letter-spacing: 0; white-space: normal; }
  .navigation-list > li:hover > a::after, .navigation-list > li.current > a::after, .navigation-list > li:focus-within > a::after { display: none; }
  .subToggle { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 46px; margin: 0; padding: 0; border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
  .has-sub.is-open > .subToggle span { display: inline-block; transform: rotate(45deg); }
  .sub-menu, .sub-menu--wide { position: static; display: none; width: auto; padding: 0 0 6px 12px; background: #303332; visibility: visible; opacity: 1; pointer-events: auto; box-shadow: none; transition: none; }
  .navigation-list > li.is-open > .sub-menu { display: block; }
  .navigation-list > li:hover > .sub-menu, .navigation-list > li:focus-within > .sub-menu { visibility: visible; }
  .sub-cols { grid-template-columns: 1fr; }
  .sub-menu li { padding: 0; }
  .sub-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px; font-size: 13px; letter-spacing: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .sub-h { margin: 10px 8px 2px; }
  .sub-foot { display: block; border-top: 0; margin-top: 0 !important; }
  .navigation-list > li.nav-cta > a { justify-content: center; min-height: 46px; margin-top: 10px; padding: 10px; border-bottom: 0; font-weight: 700; }
  .mobileActions { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1001; display: flex; gap: 8px; padding: 9px 15px calc(9px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.25); background: var(--c-dark); }
  .mobileActions a { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: 46px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.75);
    color: #fff; font-size: 14px; font-weight: 700; line-height: 1.1; text-decoration: none; text-transform: uppercase; }
  .mobileActions a:last-child { border-color: var(--c-accent); background: var(--c-accent); }
}

/* ------------------------------------------------------------------ the home page top */
.videoCta { position: relative; height: min(850px, calc(100vh - 110px)); min-height: 540px; overflow: hidden; background: var(--c-process); }
#bgvid { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; transform: translateX(-50%) translateY(-50%); object-fit: cover; }
.greenOverlay { position: relative; background-color: rgba(20, 114, 101, 0.6); height: 100%; display: flex; flex-wrap: wrap; align-items: center; z-index: 2; }
.videoCta .content { padding: 0 20px; color: #fff; text-align: center; max-width: 1120px; margin: 0 auto; }
.videoCta .content h1 { font-size: 76px; line-height: 1.1; text-align: center; font-weight: 400; text-transform: none; text-shadow: 2.08px 2.16px 24px rgba(0, 0, 0, 0.54); letter-spacing: 0; }
.videoCta .content h1 strong { font-weight: 700; }
.videoCta .content h2 { margin-top: 60px; font-weight: 500; font-size: 28px; line-height: 1.3; color: #fff; text-transform: none; text-shadow: 2.08px 2.16px 24px rgba(0, 0, 0, 0.54); }
@media (max-width: 1200px) { .videoCta { height: 650px; } .videoCta .content h1 { font-size: 64px; } .videoCta .content h2 { margin-top: 40px; } }
@media (max-width: 850px) { .videoCta { height: 500px; min-height: 0; } .videoCta br { display: none; } .videoCta .content { max-width: 600px; } .videoCta .content h1 { font-size: 54px; } .videoCta .content h2 { margin-top: 20px; font-size: 24px; } }
@media (max-width: 600px) { .videoCta { height: 340px; } .videoCta .content { max-width: 400px; } .videoCta .content h1 { font-size: 35px; } .videoCta .content h2 { font-size: 20px; } }

/* ------------------------------------------------------------------ the dark band and the photo tiles */
.serviceLinks { background-color: var(--c-dark); color: #fff; padding: 80px 0; }
.serviceLinks p { color: #fff; }
.siteBody .serviceLinks h2 { text-transform: uppercase; font-size: 36px; color: #fff; }
.serviceLinks-introText { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 24px; line-height: 36px; color: #fff; margin-bottom: 30px; }
.intro-text-container { flex-grow: 1; max-width: 720px; margin-right: 6%; }
.intro-text-container p { font-size: 24px; line-height: 1.4; margin: 10px 0 0; }
.intro-text-container.no-button { margin-right: 0; max-width: 100%; text-align: center; }
.serviceLinks--servicesPage { background-color: var(--c-surface); }
.siteBody .serviceLinks--servicesPage h2 { color: var(--c-ink); }
.services-items { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.service-item { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; position: relative; min-width: 0; padding: 30px; text-decoration: none !important; overflow: hidden; aspect-ratio: 4 / 5; grid-column: span 3; background: var(--c-process); }
.edi-services-grid .service-item:nth-child(-n+3) { grid-column: span 4; aspect-ratio: 1 / 1; }
.service-item img, .service-item::before { top: 0; left: 0; width: 100%; position: absolute; height: 100%; }
.service-item img { object-fit: cover; object-position: center; transition: transform 8s ease-out; z-index: 1; }
.service-item:hover img { transform: scale(1.12); }
.service-item::before { content: ""; background: rgba(44, 45, 45, 0.45); z-index: 2; transition: opacity 0.2s; }
.service-item-container, .service-item-default { transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 3; color: #fff; width: 100%; }
.service-item-default { position: absolute; text-align: center; padding: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.services-items .service-item:nth-child(n+4), .edi-tiles--small .service-item { padding: 16px; }
.services-items .service-item:nth-child(n+4) .service-item-default .service-item-title, .edi-tiles--small .service-item-default .service-item-title { font-size: clamp(14px, 7.2cqw, 20px); }
.service-item-title { font-size: clamp(16px, 7cqw, 26px); line-height: 1.1; position: relative; margin-bottom: 20px; padding-bottom: 20px; color: #fff; text-shadow: 2.08px 2.16px 24px rgba(0, 0, 0, 0.54); overflow-wrap: normal; word-break: normal; hyphens: none; }
.service-item-default .service-item-title { margin: 0; padding: 0; }
.service-item-title::before { content: ""; width: 60px; height: 3px; background: #fff; position: absolute; bottom: 0; left: 0; }
.service-item-default .service-item-title::before { display: none; }
.service-item:focus::before, .service-item:hover::before { opacity: 0; }
.service-item:focus .service-item-default, .service-item:hover .service-item-default { visibility: hidden; opacity: 0; }
.service-item-container { opacity: 0; transform: scale(0.9); visibility: hidden; position: relative; background: rgba(12, 133, 102, 0.55); padding: 20px 20px 44px; width: 100%; height: 100%; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.service-item:focus .service-item-container, .service-item:hover .service-item-container { opacity: 1; transform: scale(1); visibility: visible; }
.service-item-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(12, 133, 102, 0.7); mix-blend-mode: multiply; z-index: 1; }
.service-item-container::after { content: "\2192"; position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; background-color: var(--c-dark); z-index: 2; color: #fff; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.service-item-info { position: relative; z-index: 2; width: 100%; min-width: 0; }
.service-item-container .service-item-title { font-size: clamp(13px, 6.4cqw, 20px); margin-bottom: 12px; padding-bottom: 12px; }
.edi-services-grid .service-item:nth-child(-n+3) .service-item-container .service-item-title { font-size: clamp(15px, 6cqw, 22px); margin-bottom: 16px; padding-bottom: 16px; }
.service-item-excerpt { font-size: clamp(12.5px, 5.4cqw, 16px); line-height: 1.3; margin: 0; color: #fff; text-shadow: 2.08px 2.16px 24px rgba(0, 0, 0, 0.54); overflow-wrap: break-word; }
.edi-tiles--small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.edi-tiles--small .service-item { grid-column: auto; aspect-ratio: 1 / 1; }
.edi-tiles--small { display: flex; flex-wrap: wrap; justify-content: center; }
.edi-tiles--small .service-item { flex: 0 0 calc((100% - 72px) / 4); }
@media (max-width: 1023px) { .edi-tiles--small .service-item { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px) { .edi-tiles--small { display: grid; } }
@media (max-width: 1023px) {
  .services-items, .edi-tiles--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-items .service-item:nth-child(n) { grid-column: span 1; aspect-ratio: 1 / 1; }
}
@media (max-width: 767px) {
  .serviceLinks { padding: 40px 0; }
  .intro-text-container { margin-right: 0; margin-bottom: 24px; }
  .intro-text-container p { font-size: 20px; }
  /* today's phone layout: each tile becomes a readable row with its picture on the left */
  .services-items, .edi-tiles--small { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .services-items .service-item:nth-child(n) { display: grid; grid-template-columns: 105px minmax(0, 1fr) 38px; align-items: stretch; width: 100%; height: 96px; min-height: 96px; margin: 0; padding: 0;
    aspect-ratio: auto; background: #21423c; text-align: left; }
  .services-items .service-item::before { display: none; }
  .services-items .service-item::after { content: "\203A"; grid-column: 3; grid-row: 1; display: grid; place-items: center; align-self: center; width: 32px; height: 38px; background: var(--c-accent); color: #fff; font-size: 26px; line-height: 1; }
  .services-items .service-item > img, .services-items .service-item:hover > img { position: static; grid-column: 1; grid-row: 1; display: block; width: 105px; height: 96px; max-width: none; object-fit: cover; transform: none; }
  .services-items .service-item .service-item-default, .services-items .service-item:hover .service-item-default, .services-items .service-item:focus .service-item-default {
    position: static; grid-column: 2; grid-row: 1; display: flex; align-items: center; width: auto; height: 100%; margin: 0; padding: 10px 8px 10px 12px; opacity: 1; visibility: visible; transform: none; }
  .services-items .service-item:nth-child(n) .service-item-default .service-item-title { font-size: 16px; font-weight: 700; line-height: 1.18; text-align: left; text-shadow: none; }
  .services-items .service-item .service-item-container { display: none !important; }
  .serviceLinks--servicesPage .service-item .service-item-default .service-item-title { color: #fff; }
}
@media (max-width: 359px) {
  /* the smallest phones: a narrower picture so the longest word in a title still fits its row */
  .services-items .service-item:nth-child(n) { grid-template-columns: 78px minmax(0, 1fr) 30px; }
  .services-items .service-item > img, .services-items .service-item:hover > img { width: 78px; }
  .services-items .service-item .service-item-default, .services-items .service-item:hover .service-item-default, .services-items .service-item:focus .service-item-default { padding: 10px 6px 10px 10px; }
  .services-items .service-item:nth-child(n) .service-item-default .service-item-title { font-size: 14px; }
  .services-items .service-item::after { width: 26px; }
}
.cod { overflow: hidden; }

/* ------------------------------------------------------------------ two columns: words beside a picture */
.two-col { padding: 80px 0; }
.two-col .container { display: flex; flex-wrap: wrap; align-items: center; }
.two-col .col { flex-grow: 1; flex-basis: 0; min-width: 0; }
.two-col .col:first-child { padding-left: 0; padding-right: 7%; }
.two-col.text-pos-right .col:first-child { order: 2; padding-left: 7%; padding-right: 0; }
.two-col h2 { margin-bottom: 15px; }
.two-col p { font-size: 22px; line-height: 1.4; margin-top: 0; }
.two-col .button { margin-top: 20px; }
.kind-home .two-col h2 { font-size: 36px; color: var(--c-ink); }
.kind-home .two-col p { font-size: 24px; line-height: 1.3; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { font-size: 16px; color: var(--c-muted); padding-top: 8px; }
@media (max-width: 800px) {
  .two-col .col { flex-basis: 100%; }
  .two-col .col:first-child { padding-right: 0; margin-bottom: 40px; }
  .two-col.text-pos-right .col { order: 2; }
  .two-col.text-pos-right .col:first-child { order: 1; padding-left: 0; }
}
@media (max-width: 700px) { .two-col { padding: 40px 0; } }
.postContent { padding: 70px 0; }
.postContent h2 { margin-bottom: 15px; }
.postContent p { font-size: 22px; line-height: 1.4; max-width: 900px; }

/* ------------------------------------------------------------------ inner page tops */
.rightCta { overflow: hidden; }
.rightCta .bgImage { background-size: cover; background-position: center; }
.rightCta .container { height: 520px; }
.rightCta .content { position: relative; height: 100%; width: 100%; }
.rightCta .content::before { content: ""; height: 746px; width: 746px; background-color: rgba(18, 114, 87, 0.78); border-radius: 373px; position: absolute; top: -120px; right: -160px; }
.rightCtaContainer { position: absolute; z-index: 2; max-width: 460px; right: 0; top: 80px; }
.rightCta-title { color: #fff; margin-bottom: 22px; font-size: 28px; line-height: 38px; font-weight: 700; text-transform: uppercase; }
.rightCta-text { font-size: 21px; line-height: 32px; color: #fff; margin-bottom: 36px; }
@media (max-width: 1023px) {
  .rightCtaContainer { max-width: 375px; top: 60px; }
  .rightCtaContainer .button { font-size: 16px; padding: 16px 22px; }
  .rightCta .container { height: 491px; }
  .rightCta .content::before { height: 620px; width: 620px; border-radius: 310px; top: -65px; right: -140px; }
  .rightCta-text { font-size: 19px; line-height: 29px; margin-bottom: 30px; }
}
@media (max-width: 640px) {
  .rightCtaContainer { position: static; text-align: center; max-width: 100%; padding: 60px 0; }
  .rightCta .container { height: auto; background-color: rgba(18, 114, 87, 0.78); }
  .rightCta .content::before { display: none; }
  .rightCta-title { font-size: 24px; line-height: 32px; }
  .rightCta-text { font-size: 18px; line-height: 29px; }
}
.pageBand { background-size: cover; background-position: center; background-color: var(--c-process); }
.pageBand .greenOverlay { padding: 96px 0; background-color: rgba(20, 114, 101, 0.72); }
.pageBand h1 { color: #fff; text-align: center; max-width: 820px; margin: 0 auto; text-shadow: 2.08px 2.16px 24px rgba(0, 0, 0, 0.54); }
.pageBand-sub { color: #fff; text-align: center; font-size: 26px; line-height: 1.35; font-weight: 500; max-width: 820px; margin: 18px auto 0; text-shadow: 2.08px 2.16px 24px rgba(0, 0, 0, 0.54); }
.pageBand-sub a { color: #fff; }
.pageTitle { padding: 50px 0 20px; }
.entry-title { text-align: center; color: var(--c-accent); }
.entry-subTitle { text-align: center; font-size: 28px; line-height: 1.25; max-width: 900px; margin: 5px auto 0; }
.glance { background: var(--c-surface); padding: 60px 0; }
.glance-kicker { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--c-accent); font-size: 17px; margin-bottom: 8px; }
.glance-lede { font-size: 26px; line-height: 1.35; max-width: 980px; margin: 0; }
.glanceList { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; padding-top: 30px; border-top: 2px solid var(--c-accent); }
.glanceItem dt { text-transform: uppercase; font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--c-accent); margin-bottom: 6px; }
.glanceItem dd { margin: 0; font-size: 18px; line-height: 1.35; }
.glanceItem dd a { color: var(--c-ink); font-weight: 600; white-space: nowrap; }
.tally { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; margin-top: 30px; padding-top: 24px; border-top: 2px solid var(--c-accent); }
.tally p { margin: 0; font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.tally .button { padding: 12px 24px; font-size: 16px; }
@media (max-width: 1023px) { .glanceList { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .glance { padding: 40px 0; } .glance-lede, .pageBand-sub { font-size: 21px; } .glanceList { grid-template-columns: 1fr; gap: 16px; } .pageBand .greenOverlay { padding: 60px 0; } .entry-subTitle { font-size: 21px; } }

/* ------------------------------------------------------------------ title on the left, points on the right */
.rightPoints { padding: 90px 0; }
.rightPoints .grid, .rightVideo .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
.rightPoints-title, .rightVideo-title { text-align: right; color: var(--c-accent); font-size: 42px; line-height: 56px; font-weight: 700; text-transform: uppercase; }
.rightPointsContainer { margin-left: 130px; }
.rightPoints-point { font-size: 24px; line-height: 1.5; margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-start; }
.rightPoints-point:last-child { margin-bottom: 0; }
.point-ico { width: 26px; height: 26px; flex: none; margin-top: 5px; border: 2px solid currentColor; border-radius: 50%; padding: 3px; stroke-width: 2.6; }
.point-check { color: var(--c-accent); }
.point-cross { color: var(--c-no); }
.rightPoints-point span { color: var(--c-ink); min-width: 0; }
.rightPoints-sub { font-weight: 700; text-transform: uppercase; font-size: 22px; margin: 34px 0 14px; color: var(--c-ink); }
.rightPoints-intro, .rightPoints-note { font-size: 20px; color: var(--c-muted); }
.rightPoints-note { margin: 18px 0 0; }
.rightVideo { padding: 80px 0; }
.rightVideo .videoContainer { margin-left: 60px; }
@media (max-width: 1023px) { .rightPoints { padding: 75px 0; } .rightPointsContainer { margin-left: 30px; } .rightPoints-point { font-size: 22px; } .rightPoints-title, .rightVideo-title { font-size: 32px; line-height: 42px; } }
@media (max-width: 700px) {
  .rightPoints { padding: 50px 0; }
  .rightPoints .grid, .rightVideo .grid { grid-template-columns: 1fr; }
  .rightPoints-title, .rightVideo-title { text-align: center; margin-bottom: 30px; font-size: 28px; line-height: 36px; }
  .rightPointsContainer, .rightVideo .videoContainer { margin-left: 0; }
  .rightPoints-point { font-size: 20px; }
  .rightVideo { padding: 50px 0; }
}

/* ------------------------------------------------------------------ the process chevrons, as on the data centre page */
.edi-process { padding: 60px 0 70px; background: var(--c-process); color: #fff; }
/* long-standing customers: a white band edged in EDI green, each logo in its own colours, moving steadily right to left.
   White, not green, so the logos' own reds and dark blues stay readable (Ruben, 2026-10-21). */
.customerBand { background: #fff; color: #0a5f4a; padding: 40px 0 44px; border-top: 4px solid #0a5f4a; border-bottom: 4px solid #0a5f4a; }
.siteBody .customerBand-h { color: #0a5f4a; text-align: center; font-size: 22px; letter-spacing: 1px; margin: 0 0 26px; }
.logoMarquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logoTrack { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; animation: logoScroll 44s linear infinite; }
.logoItem { flex: none; display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 40px; }
.logoItem img { display: block; height: calc(var(--h, 36) * 1px); width: auto; max-width: none; }
.logoItem--name { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; color: #0a5f4a; }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .logoMarquee { -webkit-mask-image: none; mask-image: none; justify-content: center; } .logoTrack { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 8px; } .logoTrack[aria-hidden] { display: none; } }
@media (max-width: 600px) { .logoItem { padding: 0 22px; height: 52px; } .logoItem--name { font-size: 19px; } .logoItem img { height: calc(var(--h, 36) * 0.62px); } }
.siteBody .edi-process h2 { color: #fff; text-transform: none; font-size: 30px; }
.edi-process p { color: #fff; }
.edi-process-grid { display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 4px; row-gap: 0; margin-top: 42px; overflow: hidden; }
.edi-process-grid article { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 38px 30px 40px 38px; background: var(--c-accent);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); }
.edi-process-grid article:first-child { padding-left: 28px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
.edi-process-grid article:nth-child(even) { background: var(--c-process-2); }
.edi-process-grid span { display: block; margin-bottom: 18px; color: var(--c-highlight); font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; }
.edi-process-grid h3 { margin-bottom: 10px; color: #fff; font-size: 21px; line-height: 1.2; }
.edi-process-grid p { margin: 0; font-size: 16px; line-height: 1.35; }
@media (max-width: 1099px) {
  .edi-process-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 4px; }
  .edi-process-grid article { display: block; grid-row: auto; }
  .edi-process-grid article, .edi-process-grid article:first-child { min-height: 0; padding: 25px 30px; clip-path: none; }
}

/* ------------------------------------------------------------------ plain facts, notes, questions, tables */
.specs, .faqBand, .tableBand, .guideFoot, .noteBand, .ctaBand, .photoBand, .checkBand { padding: 70px 0; }
.specs h2, .faqBand h2, .tableBand h2, .docsBand h2, .textCardsBand h2, .leavesBand h2, .projectBand h2, .locationsBand h2, .reachBand h2, .docsFullBand h2, .sampleBand h2 { margin-bottom: 25px; }
.specList { margin: 0; border-top: 2px solid var(--c-accent); }
.spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 6px 30px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.spec dt { font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: 0.5px; padding-top: 3px; }
.spec dd { margin: 0; font-size: 21px; line-height: 1.4; }
@media (max-width: 640px) { .spec { grid-template-columns: 1fr; } }
.edi-note { background: var(--c-accent); color: #fff; padding: 34px 38px; }
.edi-note h3 { color: #fff; font-size: 24px; line-height: 1.25; margin-bottom: 10px; }
.edi-note p { margin: 0; font-size: 21px; line-height: 1.4; }
.edi-note a { color: #fff; }
.qas { border-top: 2px solid var(--c-accent); }
.qa { border-bottom: 1px solid var(--c-line); }
.qa summary { padding: 20px 0; font-weight: 600; font-size: 22px; line-height: 1.3; align-items: center; }
.qa summary:hover { color: var(--c-accent); }
.qa-ico { color: var(--c-accent); width: 26px; height: 26px; }
.qa-a { padding: 0 40px 22px 0; font-size: 21px; line-height: 1.45; }
.qa-a p { margin: 0; }
.faqGroup + .faqGroup { margin-top: 60px; }
.qa-a p { max-width: 900px; }
.tbl th, .tbl td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--c-line); font-size: 19px; }
.tbl thead th { text-transform: uppercase; font-size: 16px; letter-spacing: 0.5px; border-bottom: 2px solid var(--c-accent); color: var(--c-accent); }
.tbl tbody th { font-weight: 700; white-space: nowrap; }
.checkBand { padding: 34px 0 10px; }
.checkBand .blk-h { font-size: 28px; color: var(--c-accent); text-transform: uppercase; margin-bottom: 10px; }
.ticklist li { border-bottom: 1px solid var(--c-line); }
.ticklist label { padding: 14px 0; font-size: 21px; }
.ticklist input { width: 22px; height: 22px; margin-top: 4px; }
.guide-src, .guide-disclaimer { color: var(--c-muted); font-size: 18px; }
.ctaBand { text-align: center; }
.ctaBand p { font-size: 24px; margin: 8px 0 22px; }

/* ------------------------------------------------------------------ small blocks of words */
.textCardsBand, .leavesBand, .docsBand, .projectBand, .locationsBand, .reachBand, .docsFullBand, .sampleBand, .guidesBand, .finderBand, .stripBand { padding: 80px 0; }
.textCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 50px; }
.textCards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.textCard h3 { font-size: 22px; line-height: 1.25; margin-bottom: 8px; color: var(--c-ink); }
.textCard p { margin: 0; font-size: 20px; line-height: 1.4; }
.textCard { border-top: 4px solid var(--c-accent); padding-top: 18px; }
.textCard-k { text-transform: uppercase; font-size: 15px !important; letter-spacing: 1px; font-weight: 600; color: var(--c-accent); margin-bottom: 4px !important; }
.textCard-tel { margin-top: 10px !important; font-weight: 600; }
.textCard-tel a { color: var(--c-ink); }
.textCards-intro { font-size: 22px; margin-bottom: 30px; }
.textCard--link { text-decoration: none; color: var(--c-ink); display: block; }
.textCard--link span { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; color: var(--c-accent); font-weight: 600; }
.textCard--link:hover h3 { color: var(--c-accent); }
.leaveRows { border-top: 2px solid var(--c-accent); }
.leaveRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 30px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); }
.leaveRow-text { font-size: 21px; line-height: 1.4; }
.leaveRow-text strong { display: block; text-transform: uppercase; font-size: 22px; }
.leaveRow-to { color: var(--c-accent); font-weight: 600; text-transform: uppercase; font-size: 16px; letter-spacing: 0.5px; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.leaveRow:hover { background: rgba(12, 133, 102, 0.06); color: var(--c-ink); }
.docList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.docItem { display: flex; gap: 16px; background: var(--c-bg); padding: 24px; border-top: 4px solid var(--c-accent); }
.background-white .docItem { background: var(--c-surface); }
.docItem-ico { width: 34px; height: 34px; color: var(--c-accent); }
.docItem h3 { font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.docItem p { margin: 0; font-size: 18px; line-height: 1.4; }
.docList-intro { font-size: 22px; margin-bottom: 26px; }
.docList-more { margin: 26px 0 0; font-weight: 600; }
.docs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.doc { background: var(--c-surface); padding: 26px; border-top: 4px solid var(--c-accent); }
.doc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.doc-ico { width: 30px; height: 30px; color: var(--c-accent); }
.doc-t { font-size: 20px; line-height: 1.25; margin: 0; }
.doc-d { font-size: 19px; }
.doc-k { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--c-muted); margin: 14px 0 6px; }
.doc-shows { margin: 0; padding-left: 20px; font-size: 18px; }
.doc-who { font-size: 17px; color: var(--c-muted); margin: 14px 0 0; }
.doc-who span { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.doc-sample { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; font-weight: 600; }
.guideCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.guideCard { text-decoration: none; color: var(--c-ink); background: var(--c-surface); display: flex; flex-direction: column; padding-bottom: 24px; transition: transform 0.2s, box-shadow 0.2s; }
.guideCard:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.5); color: var(--c-ink); }
.guideCard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.guideCard > *:not(img) { padding: 0 24px; }
.guideCard-k { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 600; color: var(--c-accent); margin-top: 20px; }
.guideCard h3 { font-size: 22px; line-height: 1.25; margin: 6px 0 10px; }
.guideCard p { font-size: 18px; line-height: 1.4; margin-bottom: 14px; }
.guideCard-meta { margin-top: auto; font-size: 15px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 900px) { .textCards, .docList, .docs, .guideCards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .textCards, .textCards--two, .docList, .docs, .guideCards { grid-template-columns: 1fr; }
  .leaveRow { grid-template-columns: minmax(0, 1fr); }
  .leaveRow-to { white-space: normal; text-align: left; }
  .textCardsBand, .leavesBand, .docsBand, .projectBand, .locationsBand, .reachBand, .docsFullBand, .sampleBand, .guidesBand, .finderBand, .stripBand, .specs, .faqBand, .tableBand, .postContent { padding: 45px 0; }
}

/* ------------------------------------------------------------------ certifications */
.certifications { padding: 60px 0 45px; }
.certifications .container { text-align: center; }
.siteBody .certifications h2 { font-size: 24px; text-transform: none; color: var(--c-ink); line-height: 1.3; }
.certifications-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 40px auto; max-width: 750px; }
.certification { text-align: center; display: inline-block; width: 25%; margin-bottom: 20px; }
.certification img { max-height: 85px; width: auto; max-width: 86%; display: inline-block; }
.certificationsIntro { color: var(--c-ink); font-size: 36px; line-height: 44px; max-width: 750px; margin: 0 auto 50px; }
.certifications--recycling { padding: 80px 0 60px; }
.certifications--recycling .certification { width: 20%; }
.certifications-more { margin: 0; font-size: 18px; font-weight: 600; }
.certs { padding: 40px 0 60px; }
.certRow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); align-items: center; margin-bottom: 50px; }
.certLogo { text-align: center; }
.certLogo img { display: inline-block; max-height: 110px; max-width: 80%; width: auto; height: auto; }
.certDescription { margin-left: 40px; }
.certRow-plain { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
.certRow-covers { font-size: 19px; color: var(--c-muted); margin-bottom: 6px; }
.certRow-meta { font-size: 19px; font-weight: 600; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.certDescription a { font-size: 18px; font-weight: 600; }
@media (max-width: 640px) {
  .certification, .certifications--recycling .certification { width: 49%; }
  .certificationsIntro { font-size: 28px; line-height: 36px; }
  .certRow { grid-template-columns: 1fr; text-align: center; }
  .certLogo { margin-bottom: 15px; }
  .certDescription { margin-left: 0; }
  .certRow-plain { font-size: 22px; }
}

/* ------------------------------------------------------------------ what customers say */
.testimonials { padding: 100px 0 110px; background: var(--c-accent); color: #fff; }
.siteBody .testimonials h2 { font-size: 36px; text-transform: uppercase; margin-bottom: 15px; color: #fff; }
.testimonials .container { position: relative; max-width: 1300px; }
.testimonials-list { margin: 2vw 0 0; padding: 0 60px; position: relative; }
.testimonials .slides { list-style: none; padding: 0; overflow: hidden; max-width: 770px; margin: 0 auto; display: grid; }
.testimonials .slide { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.testimonials .slide.is-on, .testimonials-list:not([data-slider]) .slide, .testimonials-list:not(.is-ready) .slide:first-child { opacity: 1; visibility: visible; }
.testimonials blockquote { position: relative; font-size: 24px; line-height: 30px; margin: 0 0 20px; text-align: center; }
.testimonial-meta { text-align: center; font-size: 19px; }
.testimonial-name { font-weight: 700; margin: 0; }
.testimonial-company-name { font-weight: 500; margin: 0; text-transform: uppercase; }
.slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; cursor: pointer; padding: 10px; }
.slider-prev { left: 6%; } .slider-next { right: 6%; }
.slider-prev .ico, .slider-next .ico { width: 44px; height: 44px; stroke-width: 1.4; }
.slider-prev .ico { transform: rotate(90deg); } .slider-next .ico { transform: rotate(-90deg); }
.slider-prev:hover, .slider-next:hover { opacity: 0.6; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.slider-dots button { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background: #fff; padding: 0; cursor: pointer; }
.slider-dots button[aria-current="true"] { background: transparent; }
.testimonials :focus-visible { outline-color: #fff; }
@media (max-width: 1100px) { .slider-prev { left: 0; } .slider-next { right: 0; } }
@media (max-width: 700px) { .testimonials { padding: 40px 0 50px; } .testimonials blockquote { font-size: 20px; line-height: 1.3; } .testimonials-list { padding: 0 36px; } .slider-prev { left: -10px; } .slider-next { right: -10px; } }

/* ------------------------------------------------------------------ About */
.circlePoints { padding: 60px 0 90px; }
.circlePoints-title { color: var(--c-accent); text-align: center; margin-bottom: 70px; }
.point { margin-bottom: 50px; display: flex; align-items: center; }
.pointCircle { border-radius: 50%; background-color: var(--c-pale); text-align: center; text-transform: uppercase; color: #000; height: 200px; width: 200px; display: grid; place-items: center; flex: none; font-size: 18px; }
.pointCircle-small { margin-bottom: 5px; }
.pointCircle-bold { font-weight: 700; color: var(--c-accent); }
.point-rightText { font-size: 35px; line-height: 1.1; margin-left: 40px; }
.personLeftGreen { background-color: var(--c-accent); overflow: hidden; }
.personLeftGreen .container, .personRightGrey .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 40px; min-height: 600px; }
.leftCircle, .rightCircle { position: relative; align-self: end; text-align: center; padding-top: 50px; }
.leftCircle::before, .rightCircle::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; background: rgba(185, 226, 224, 0.3); bottom: -160px; left: 50%; transform: translateX(-50%); }
.rightCircle::before { background: var(--c-pale); }
.leftCircle img, .rightCircle img { position: relative; max-height: 560px; width: auto; max-width: 100%; display: block; margin: 0 auto; }
.person-name { position: relative; margin: -46px 0 0; padding-bottom: 22px; font-size: 15px; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 1px #000; }
.personLeft-rightContent, .personRight-leftContent { align-self: center; padding: 60px 0; }
.siteBody .personLeft-rightContent h2 { color: #fff; margin-bottom: 20px; }
.personLeft-rightContent p { color: #fff; font-size: 24px; line-height: 38px; }
.personRightGrey { background: var(--c-surface); overflow: hidden; }
.personRight-leftContent h2 { margin-bottom: 20px; }
.personRight-leftContent p { font-size: 24px; line-height: 38px; }
.personLeft-rightContent .button, .personRight-leftContent .button { margin-top: 20px; }
@media (max-width: 800px) {
  .point { flex-direction: column; text-align: center; } .point-rightText { margin: 15px 0 0; font-size: 24px; } .pointCircle { height: 170px; width: 170px; }
  .personLeftGreen .container, .personRightGrey .container { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .personRightGrey .rightCircle { order: -1; }
  .leftCircle img, .rightCircle img { max-height: 380px; }
  .leftCircle::before, .rightCircle::before { width: 420px; height: 420px; bottom: -110px; }
  .personLeft-rightContent, .personRight-leftContent { padding: 40px 0; }
  .personLeft-rightContent p, .personRight-leftContent p { font-size: 20px; line-height: 28px; }
}

/* ------------------------------------------------------------------ Contact */
.contactUs { padding: 50px 0 30px; }
.contactUs-title { text-align: center; color: var(--c-accent); margin-bottom: 5px; }
.contactUs-subTitle { text-align: center; font-size: 30px; margin-bottom: 60px; line-height: 1.2; }
.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; max-width: 960px; margin: 0 auto; }
.contact-photo { border-radius: 50%; background-color: var(--c-pale); aspect-ratio: 1 / 1; overflow: hidden; max-width: 290px; margin: 0 auto 26px; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-details { max-width: 290px; margin: 0 auto; }
.contact-details p { margin: 0; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
/* name, then the title on one line of its own, so every card's phone and email sit at the same height (Ruben, 2026-10-21) */
.contact-details .contact-name { font-weight: 600; }
.contact-details .contact-role { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 900px) { .contact-details p { font-size: 16px; } }
.contactBody { padding: 30px 0 80px; }
.contactGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px 60px; align-items: start; }
.contactBody-lead { font-size: 20px; margin-bottom: 26px; }
.contactForm .field { margin-bottom: 26px; gap: 10px; }
.contactForm label { font-size: 18px; }
.contactForm input, .contactForm select, .contactForm textarea { border: 2px solid var(--c-accent); border-radius: 4px; padding: 12px 14px; font-size: 18px; background: #fff; color: var(--c-ink); width: 100%; }
.contactForm select { max-width: 100%; }
.contactForm input:focus, .contactForm select:focus, .contactForm textarea:focus { outline: 3px solid rgba(12, 133, 102, 0.3); outline-offset: 1px; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--c-no); }
.err { font-size: 17px; }
.sendButton { background: var(--c-accent); color: #fff; border: 0; border-radius: 30px; padding: 12px 30px; font-size: 18px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.sendButton:hover { background: var(--c-accent-hover); }
.cf-done { border: 2px solid var(--c-accent); border-radius: 4px; padding: 26px; }
.cf-done.is-error { border-color: #b3261e; }
.cf-done.is-error h3 { color: #b3261e; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* a field only robots fill in */
.cf-done h3 { color: var(--c-accent); margin-bottom: 8px; }
.rf-sample { background: var(--c-dark); color: #fff; padding: 12px 16px; font-size: 18px; margin: 14px 0 0; }
.contactLocs h2 { font-size: 28px; margin-bottom: 14px; }
.contactLoc { margin-bottom: 22px; font-size: 18px; line-height: 1.4; }
.contactLoc p { margin: 0; }
.contactLoc-name { font-weight: 700; }
.contactLocs .button { padding: 16px 30px; font-size: 16px; }
.contactLocs-more { margin-top: 44px; }
.contactLocs-more p { font-size: 18px; }
@media (max-width: 900px) { .contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; } .contactGrid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .contacts { grid-template-columns: 1fr; } }      /* 3 across is too narrow for the titles */
@media (max-width: 480px) { .contactUs-subTitle { font-size: 22px; margin-bottom: 40px; } }

/* ------------------------------------------------------------------ Our Work */
.ourWork { padding: 20px 0 50px; }
.workJump { display: flex; gap: 10px; justify-content: center; margin: 0 0 40px; }
.workJump .button { padding: 14px 34px; font-size: 16px; }
.workGroup { margin-bottom: 50px; scroll-margin-top: 90px; }
.workGroup h2 { margin-bottom: 26px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-surface); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s, opacity 0.3s; }
.thumb:hover img { transform: scale(1.06); opacity: 0.85; }
.ourWork--videos { border-top: 1px solid var(--c-ink); padding-top: 50px; }
.ourWork--videos .container > div { scroll-margin-top: 90px; }
.ourWork--videos h2 { margin-bottom: 26px; }
.workVideos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.workVideo p { font-size: 18px; margin: 12px 0 0; }
.videoCard { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-dark); color: #fff; text-decoration: none; }
.videoCard img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.75; transition: opacity 0.2s, transform 0.4s; }
.videoCard:hover img { opacity: 0.55; transform: scale(1.04); }
.videoCard-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 50px; border-radius: 12px; background: var(--c-accent); display: grid; place-items: center; }
.videoCard-play .ico { width: 26px; height: 26px; fill: #fff; stroke: none; }
.videoCard-title { position: absolute; left: 16px; top: 12px; font-weight: 600; font-size: 18px; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); color: #fff; }
/* the player: a dark sheet over the page, the video in the middle */
.videoBox { position: fixed; inset: 0; z-index: 3000; background: rgba(20, 22, 22, 0.94); display: grid; place-items: center; padding: 60px 20px 24px; }
.videoBox-in { width: min(1100px, 100%); }
.videoBox video { display: block; width: 100%; max-height: calc(100vh - 110px); background: #000; }
.videoBox .vb-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: #fff; cursor: pointer; padding: 12px; }
.videoBox .ico { width: 36px; height: 36px; }
.videoBox :focus-visible { outline-color: #fff; }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project { background: #0f1f1c; color: #fff; display: flex; flex-direction: column; }
.project-photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; height: auto; display: block; }
.project-body { padding: 30px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.project-k { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 600; color: var(--c-highlight); margin-bottom: 6px; }
.project h3 { color: #fff; font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
.project p { font-size: 19px; line-height: 1.4; color: #dfe7e5; }
.projectStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px 24px; margin: 16px 0 18px; }
.projectStat dd { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.projectStat:nth-child(even) dd { color: #b9d856; }
.projectStat--words dd { font-size: 20px; line-height: 1.25; }
.projectBand-lede { font-size: 22px; margin: -10px 0 26px; }
.pageTitle--work { padding-bottom: 10px; }
.pageTitle--work p { font-size: 24px; line-height: 1.35; max-width: 900px; margin: 0 auto 10px; text-align: center; }
.pageTitle--work .entry-title { margin-bottom: 16px; }
.projectStat dt { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #a9b9b5; margin-top: 4px; }
.project-link { color: #fff; font-weight: 600; margin-top: auto; display: inline-flex; gap: 8px; align-items: center; }
.project-link:hover { color: var(--c-highlight); }
.projectBand > .container > .project { max-width: 1000px; }
.projects .project:not(.has-photo), .projects--lead .project:first-child { grid-column: 1 / -1; }
/* the first project runs the full width: its picture across the top in its own shape, words on the left, figures on the right */
.projects--lead .project.has-photo:first-child .project-photo img { aspect-ratio: 2 / 1; }
@media (min-width: 900px) {
  .projects--lead .project.has-photo:first-child .project-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; align-content: start; }
  .projects--lead .project.has-photo:first-child .project-body > * { grid-column: 1; }
  .projects--lead .project.has-photo:first-child .projectStats { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .projects .project:not(.has-photo) .project-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; align-content: start; }
  .projects .project:not(.has-photo) .project-body > * { grid-column: 1; }
  .projects .project:not(.has-photo) .projectStats { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .projectBand > .container > .project.has-photo { display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; } .projectBand > .container > .project.has-photo .project-photo img { height: 100%; aspect-ratio: auto; } }
@media (max-width: 900px) { .projects, .workVideos { grid-template-columns: 1fr; } }
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(20, 22, 22, 0.94); display: grid; place-items: center; padding: 20px; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); text-align: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; display: block; margin: 0 auto; }
.lightbox figcaption { color: #fff; font-size: 18px; padding-top: 12px; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; padding: 12px; }
.lightbox .lb-close { top: 10px; right: 14px; }
.lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .ico { width: 36px; height: 36px; }
.lightbox .lb-prev .ico { transform: rotate(90deg); } .lightbox .lb-next .ico { transform: rotate(-90deg); }
.lightbox :focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------ locations, the map, the finder, the sample certificate */
.locs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1100px) { .locs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loc { background: var(--c-surface); display: flex; flex-direction: column; }
.loc-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; height: auto; display: block; }
.loc-b { padding: 28px; }
.loc-k { text-transform: uppercase; letter-spacing: 1px; font-size: 15px; font-weight: 600; color: var(--c-accent); margin-bottom: 4px; }
.loc-t { font-size: 28px; margin-bottom: 12px; }
.loc-c { display: grid; gap: 8px; margin-bottom: 16px; font-size: 19px; }
.loc-c .ico { color: var(--c-accent); margin-top: 4px; }
.loc-c a { color: var(--c-ink); font-weight: 600; }
.loc-does { margin: 0 0 14px; padding-left: 22px; font-size: 18px; }
.loc-note { font-size: 17px; color: var(--c-muted); }
.loc-map { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; font-size: 18px; }
@media (max-width: 800px) { .locs { grid-template-columns: 1fr; } }
.reach { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; }
.reach-map { background: #fff; border: 1px solid var(--c-line); padding: 12px; }
.reach-item h3 { font-size: 22px; line-height: 1.25; display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.reach-item h3 .ico { color: var(--c-accent); width: 26px; height: 26px; }
.reach-item p { font-size: 20px; }
.reach-item + .reach-item { margin-top: 26px; }
@media (max-width: 800px) { .reach { grid-template-columns: 1fr; } }
.strip-item figcaption, .shot figcaption { font-size: 16px; }
.stripBand .photostrip { gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.stripBand .strip-item img { aspect-ratio: 3 / 2; }
.finder-label, .findbox-label { display: block; font-weight: 700; text-transform: uppercase; font-size: 18px; margin-bottom: 10px; }
.finder-input input { border: 2px solid var(--c-accent); border-radius: 4px; background: #fff; font-size: 20px; padding-top: 14px; padding-bottom: 14px; color: var(--c-ink); }
.finder-input input:focus { outline: 3px solid rgba(12, 133, 102, 0.3); outline-offset: 1px; }
.finder-input > .ico { color: var(--c-accent); }
.finder-filters { display: grid; gap: 12px; margin: 22px 0; }
.chip { background: #fff; border: 2px solid var(--c-line); border-radius: 30px; padding: 7px 18px; font-size: 17px; color: var(--c-ink); font-family: var(--font-body); }
.chip:hover { border-color: var(--c-accent); }
.chip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.finder-count { color: var(--c-muted); font-size: 18px; font-variant-numeric: tabular-nums; }
.finder-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.fi { background: var(--c-surface); border-top: 4px solid var(--c-ok); padding: 22px 24px; }
.fi-ask { border-top-color: var(--c-ask); } .fi-no { border-top-color: var(--c-no); }
.fi-t { font-size: 20px; line-height: 1.25; margin: 0; }
.fi-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.fi-status { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.fi-what { margin: 12px 0; font-size: 18px; line-height: 1.4; }
.fi-meta { margin: 0; font-size: 16px; color: var(--c-muted); }
.fi-to { font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.finder-empty { border: 2px dashed var(--c-line); padding: 40px 24px; text-align: center; }
.findbox { margin-top: 10px; }
.findbox .btn { padding: 14px 28px; }
.findbox-ex { margin-top: 16px; }
.findbox-label { font-size: 16px; letter-spacing: 0.5px; }
.sampleBand p { font-size: 21px; }
/* the sample certificate is the feature of its band: heading, note and certificate share one centred column */
.sampleBand #sample { max-width: 900px; margin: 0 auto; }
.sampleBand #sample > h2, .sampleBand #sample > p { text-align: center; }
.codwrap { margin-top: 24px; }

/* ------------------------------------------------------------------ footer, as on today's site */
.footerCta { padding: 48px 0; background-color: var(--c-accent); text-align: center; }
.footerCta .container { font-size: 36px; line-height: 44px; color: #fff; }
.footerCta .container a { color: #fff; text-decoration: none; transition: opacity 0.2s; white-space: nowrap; }
.footerCta .container a:hover { opacity: 0.5; }
.footer { background-color: var(--c-dark); }
.footer a, .footerInfo { font-size: 18px; color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #fff; }
.footer ul { list-style-type: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 5px; }
.footerInfo { display: flex; flex-wrap: wrap; padding: 55px 0; line-height: 1.3; }
.footerInfo .col { width: 25%; padding-right: 40px; }
.footerLogo img { max-height: 40px; width: auto; margin-bottom: 40px; display: block; }
.footerInfo h3 { font-size: 22px; margin-bottom: 20px; line-height: 1.2; color: #fff; }
.u-bottom5 { margin-bottom: 5px; } .u-bottom15 { margin-bottom: 15px; } .u-semiBold { font-weight: 600; }
.company-links a { font-weight: 700; text-transform: uppercase; font-size: 22px; }
.company-links li { margin-bottom: 12px !important; }
.family-links { margin-top: 22px !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.footerLegal { font-size: 16px; padding-bottom: 25px; color: #fff; text-align: center; }
.footer-secondary-nav { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 4px !important; }
.footer-secondary-nav li { padding: 0 10px; border-right: 1px solid #fff; line-height: 1; margin-bottom: 0 !important; }
.footer-secondary-nav li:last-child { border-right: 0; }
.footer-secondary-nav a { font-size: 16px; }
.sampleNote { margin: 14px 0 0; font-size: 14px; opacity: 0.7; }
@media (max-width: 900px) { .footerInfo .col { width: 50%; margin-bottom: 20px; } }
@media (max-width: 700px) { .footerCta { padding: 24px 0; } .footerCta .container { font-size: 26px; line-height: 34px; } }
@media (max-width: 600px) { .footerInfo .col { width: 100%; padding-right: 0; } .footerCta strong { display: block; } }

/* ------------------------------------------------------------------ smaller screens: type steps down as the live theme does */
@media (max-width: 1023px) {
  h1, .siteBody h2, .circlePoints-title, .contactUs-title, .entry-title { font-size: 32px; line-height: 42px; }
  .siteBody .serviceLinks h2, .siteBody .testimonials h2 { font-size: 30px; }
}
@media (max-width: 480px) {
  body { font-size: 18px; }
  .container { padding: 0 15px; }
  h1, .siteBody h2, .circlePoints-title, .contactUs-title, .entry-title { font-size: 28px; line-height: 36px; }
  h3 { font-size: 21px; line-height: 31px; }
  .button, .btn { font-size: 16px; padding: 16px 24px; }
  .two-col p, .kind-home .two-col p, .postContent p, .qa-a, .spec dd, .edi-note p, .ticklist label { font-size: 19px; }
  .qa summary { font-size: 20px; }
}