/*
 * BIM Core — application styles
 *
 * Direction: every service PAT-iT sells runs on a statutory clock. Their
 * customer is the "responsible person" whose real fear is an inspector asking
 * to see the records. So the page is built around the calendar, and the
 * schedule is the opening statement rather than a section two-thirds down.
 *
 * Dark-dominant: pine is the ground, light bands are relief. Green is the only
 * decorative colour; amber and red are reserved for genuine status.
 *
 * Contents
 *   1.  Base
 *   2.  Sections, wrap, section furniture
 *   3.  Masthead
 *   4.  Hero
 *   5.  The Compliance Year        <- signature
 *   6.  Photo bands
 *   7.  Services as cadences
 *   8.  Evidence
 *   9.  Sectors mosaic
 *   10. Coverage
 *   11. Proof
 *   12. CTA and footer
 *   13. Block styles
 *   14. Motion, reduced motion, print
 */

/* ----------------------------------------------------------------------------
 * 1. Base
 * ------------------------------------------------------------------------- */

:root {
  --t-fast: 150ms cubic-bezier(0.2, 0, 0.1, 1);
  --t-base: 320ms cubic-bezier(0.2, 0, 0.1, 1);
  --t-slow: 800ms cubic-bezier(0.16, 1, 0.3, 1);
  --masthead-h: 78px;

  --on-dark: #C9D6CF;
  --on-dark-dim: #7E9689;
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --hairline-light: #D6DBD5;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  background: var(--wp--preset--color--pine);
}

body {
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background: var(--wp--preset--color--pine);
  color: var(--on-dark);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--green-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

.bim-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1rem 1.5rem;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--green);
  color: #fff;
  font-weight: 600;
}

.bim-skip-link:focus { left: 1rem; top: 1rem; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

img { max-width: 100%; height: auto; }

:where(h1, h2, h3) {
  color: #fff;
  text-wrap: balance;
  font-variation-settings: 'opsz' 48, 'wdth' 90;
}

p { text-wrap: pretty; }

/* ----------------------------------------------------------------------------
 * 2. Sections
 * ------------------------------------------------------------------------- */

/*
 * Sections break out of whatever container they land in, then re-establish
 * their measure with .bim-wrap. The class is doubled because WordPress's
 * constrained layout emits `.wp-container-x > * { max-width: … }`, a single
 * class that would otherwise tie.
 * --sbw is the scrollbar width, measured in app.js — 100vw includes it, and
 * without subtracting it every section overflows sideways.
 */
.bim-section.bim-section,
.bim-hero.bim-hero,
.bim-band.bim-band,
.bim-cta.bim-cta,
.bim-footer.bim-footer {
  width: calc(100vw - var(--sbw, 0px));
  max-width: none;
  margin-inline: calc(50% - 50vw + var(--sbw, 0px) / 2);
}

.bim-wrap {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4.5rem);
}

.bim-section {
  position: relative;
  padding-block: var(--wp--preset--spacing--70);
}

.bim-section--tight { padding-block: var(--wp--preset--spacing--50); }

/* Light relief band. Everything inside flips to ink on paper. */
.bim-section--light {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}

.bim-section--light :where(h1, h2, h3) { color: var(--wp--preset--color--ink); }
.bim-section--light a { color: var(--wp--preset--color--green-deep); }
.bim-section--light .bim-eyebrow { color: var(--wp--preset--color--slate); }
.bim-section--light .bim-eyebrow::after { background: var(--hairline-light); }
.bim-section--light .bim-lead { color: var(--wp--preset--color--slate); }

/* Section label — a rule that runs out to the edge of the measure. */
.bim-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.bim-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline-dark);
}

.bim-lead {
  max-width: 58ch;
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.45;
  color: var(--on-dark-dim);
}

/* ----------------------------------------------------------------------------
 * 3. Masthead
 * ------------------------------------------------------------------------- */

.bim-masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: transparent;
  transition: background var(--t-base), box-shadow var(--t-base);
}

/* Only gains a surface once it leaves the hero. */
.bim-masthead.is-stuck {
  background: color-mix(in srgb, var(--wp--preset--color--pine) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 1px 0 var(--hairline-dark);
}

.bim-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  min-height: var(--masthead-h);
}

.bim-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
  text-decoration: none;
  color: #fff;
}

.bim-masthead__brand img {
  display: block;
  width: auto;
  height: 36px;
  /* The supplied logo is dark type on transparent; invert it onto pine. */
  filter: brightness(0) invert(1);
}

.bim-masthead__wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--wp--custom--tracking--tight);
  font-variation-settings: 'wdth' 88;
}

.bim-masthead__right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.bim-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 2rem);
  margin: 0; padding: 0; list-style: none;
}

.bim-nav li { position: relative; }

.bim-nav a {
  display: block;
  padding-block: 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}

.bim-nav a:hover,
.bim-nav .current-menu-item > a { color: var(--wp--preset--color--green-hi); }

.bim-nav ul ul {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -1rem;
  z-index: 20;
  display: grid;
  gap: 0.1rem;
  min-width: 250px;
  margin: 0; padding: 0.7rem;
  list-style: none;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--wp--custom--radius--md);
  background: color-mix(in srgb, var(--wp--preset--color--pine-deep) 96%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.bim-nav li:hover > ul,
.bim-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }

.bim-nav ul ul a { padding: 0.6rem 0.8rem; border-radius: var(--wp--custom--radius--sm); white-space: normal; }
.bim-nav ul ul a:hover { background: rgba(255, 255, 255, 0.06); }

.bim-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--wp--custom--radius--pill);
  background: transparent;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.bim-nav__toggle svg { width: 18px; height: 18px; flex: none; }

.bim-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.3rem;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--green);
  color: #fff;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast);
}

.bim-tel::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.bim-tel:hover,
.bim-tel:focus-visible {
  background: var(--wp--preset--color--green-hi);
  color: var(--wp--preset--color--pine);
  transform: translateY(-1px);
}

@media (max-width: 1000px) {
  .bim-nav__toggle { display: inline-flex; }

  /* Visibility is decided here, never by JS setting [hidden], so a stray JS
     state cannot leave the desktop menu invisible. */
  .bim-nav {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    padding: 1rem clamp(1.25rem, 5vw, 4.5rem) 1.75rem;
    background: var(--wp--preset--color--pine-deep);
    border-block-end: 1px solid var(--hairline-dark);
  }

  .bim-masthead.is-nav-open .bim-nav { display: block; }
  .bim-masthead.is-nav-open { background: var(--wp--preset--color--pine-deep); }

  .bim-nav > ul { display: grid; gap: 0.15rem; align-items: stretch; }
  .bim-nav a { padding-block: 0.7rem; font-size: var(--wp--preset--font-size--md); }

  .bim-nav ul ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 0.4rem 1rem;
    background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
  }

  .bim-nav ul ul a { padding-block: 0.5rem; font-size: var(--wp--preset--font-size--sm); color: var(--on-dark-dim); }
}

@media (max-width: 620px) {
  .bim-nav__toggle span { display: none; }
  .bim-nav__toggle { padding: 0.6rem; }
  .bim-masthead__right { gap: 0.6rem; }
  .bim-tel { padding: 0.55rem 0.85rem; font-size: var(--wp--preset--font-size--xs); gap: 0.4rem; }
  .bim-tel::before { width: 6px; height: 6px; }

  /* Cap against the viewport — client logos vary wildly in aspect and a wide
     one would otherwise push the phone number off screen. */
  .bim-masthead__brand img { height: 28px; max-width: 32vw; object-fit: contain; object-position: left center; }
  .bim-masthead__wordmark { font-size: 1.125rem; max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ----------------------------------------------------------------------------
 * 4. Hero — the opening statement
 * ------------------------------------------------------------------------- */

.bim-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - var(--masthead-h));
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  overflow: hidden;
}

/* Ambient glow, drifting slowly. The only ornament on the page. */
.bim-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -25%;
  inset-inline-end: -15%;
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, rgba(0, 162, 75, 0.30) 0%, transparent 62%);
  filter: blur(60px);
  animation: bim-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes bim-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-8%, 6%, 0) scale(1.2); }
}

.bim-hero > * { position: relative; z-index: 1; }

.bim-hero h1 {
  margin: 0;
  font-size: var(--wp--preset--font-size--4xl);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variation-settings: 'opsz' 96, 'wdth' 86;
  max-width: 15ch;
}

/* The clause carrying the promise takes the brand colour — the only place it
   appears in running type. */
.bim-hero h1 em {
  font-style: normal;
  color: var(--wp--preset--color--green-hi);
}

.bim-hero__foot {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  align-items: end;
  margin-block-start: var(--wp--preset--spacing--40);
  padding-block-start: var(--wp--preset--spacing--30);
  border-block-start: 1px solid var(--hairline-dark);
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .bim-hero__foot { grid-template-columns: 1.2fr auto; gap: var(--wp--preset--spacing--50); }
}

.bim-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.bim-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 2rem;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--green);
  color: #fff;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--wide);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.bim-btn:hover,
.bim-btn:focus-visible {
  background: var(--wp--preset--color--green-hi);
  color: var(--wp--preset--color--pine);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -18px rgba(52, 215, 126, 0.8);
}

.bim-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--hairline-dark);
}

.bim-btn--ghost:hover,
.bim-btn--ghost:focus-visible {
  background: transparent;
  color: var(--wp--preset--color--green-hi);
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--green-hi);
}

.bim-section--light .bim-btn--ghost {
  color: var(--wp--preset--color--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline-light);
}

/* ----------------------------------------------------------------------------
 * 5. The Compliance Year — signature
 *
 * A real table: services down the side, months across the top, a marker in
 * every cell where something falls due. Marked up as a schedule because it is
 * one; screen readers get proper row and column headers.
 * ------------------------------------------------------------------------- */

.bim-year { position: relative; }

.bim-year__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: var(--wp--preset--spacing--30);
}

.bim-year__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2xl);
  font-weight: 600;
  color: #fff;
  letter-spacing: var(--wp--custom--tracking--tight);
  max-width: 18ch;
}

.bim-year__note {
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--on-dark-dim);
}

/* Twelve columns of data stay readable rather than being crushed to fit. */
.bim-year__scroll {
  overflow-x: auto;
  padding-block-end: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #2C4438 transparent;
}

.bim-year table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
}

.bim-year th,
.bim-year td { padding: 0; text-align: left; font-weight: 400; }

.bim-year thead th {
  padding-block-end: 1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: #5F7A6C;
  text-align: center;
}

.bim-year thead th:first-child { text-align: left; }

/* Service name stays put while the months scroll under the thumb. */
.bim-year tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  width: 32%;
  min-width: 210px;
  padding: 0.85rem 1.25rem 0.85rem 0;
  background: var(--wp--preset--color--pine);
  border-block-start: 1px solid var(--hairline-dark);
  vertical-align: middle;
}

.bim-year tbody td { border-block-start: 1px solid var(--hairline-dark); }

.bim-year__service {
  display: block;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}

.bim-year__cadence {
  display: block;
  margin-block-start: 3px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  color: var(--on-dark-dim);
}

.bim-year tbody tr { transition: opacity var(--t-base); }
.bim-year td { padding: 0.5rem 0.2rem; text-align: center; }

/* Size encodes weight: the small bar is a routine check, the tall one is the
   annual event that takes equipment out of use. */
.bim-mark {
  display: inline-block;
  width: 100%;
  max-width: 26px;
  height: 12px;
  border-radius: 3px;
  background: #22362C;
  transition: transform var(--t-base), background var(--t-base), box-shadow var(--t-base);
}

.bim-mark--due { background: var(--wp--preset--color--green); }

.bim-mark--major {
  height: 22px;
  background: var(--wp--preset--color--green-hi);
  box-shadow: 0 0 18px -2px rgba(52, 215, 126, 0.6);
}

/* Hovering a lane dims the rest so one obligation reads across the year. */
.bim-year tbody:hover tr { opacity: 0.35; }
.bim-year tbody tr:hover,
.bim-year tbody tr:focus-within { opacity: 1; }

.bim-year tbody tr:hover .bim-mark--due,
.bim-year tbody tr:focus-within .bim-mark--due { transform: scaleY(1.4); }

.bim-year__key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block-start: var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  color: var(--on-dark-dim);
}

.bim-year__key span { display: inline-flex; align-items: center; gap: 0.6rem; }
.bim-year__key i { width: 20px; height: 10px; border-radius: 3px; background: var(--wp--preset--color--green); }
.bim-year__key i.is-major { height: 16px; background: var(--wp--preset--color--green-hi); }
.bim-year__key i.is-idle { background: #22362C; }

/* ----------------------------------------------------------------------------
 * 6. Photo bands — full-bleed dividers
 * ------------------------------------------------------------------------- */

.bim-band {
  position: relative;
  min-height: clamp(320px, 55vh, 620px);
  display: grid;
  align-items: end;
  overflow: hidden;
}

.bim-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bim-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 29, 23, 0.55) 0%, rgba(15, 29, 23, 0.35) 45%, rgba(15, 29, 23, 0.95) 100%);
}

.bim-band__caption {
  position: relative;
  z-index: 2;
  padding-block: var(--wp--preset--spacing--50);
}

.bim-band__caption h2 {
  margin: 0;
  max-width: 18ch;
  font-size: var(--wp--preset--font-size--2xl);
}

/* ----------------------------------------------------------------------------
 * 7. Services as cadences
 *
 * The interval leads each row because it is the fact a responsible person is
 * actually trying to establish.
 * ------------------------------------------------------------------------- */

.bim-cadences {
  display: grid;
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--hairline-light);
}

.bim-cadence {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2.5rem;
  padding-block: var(--wp--preset--spacing--40);
  border-block-end: 1px solid var(--hairline-light);
  transition: background var(--t-base), padding-inline var(--t-base);
}

@media (min-width: 860px) {
  .bim-cadence {
    grid-template-columns: 16rem 1fr auto;
    align-items: center;
    gap: 3rem;
  }
}

.bim-cadence:hover { background: rgba(0, 162, 75, 0.05); }

.bim-cadence__interval {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--green-deep);
}

.bim-cadence__name {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--wp--custom--tracking--tight);
  font-variation-settings: 'opsz' 40, 'wdth' 92;
}

.bim-cadence__name a { color: inherit; text-decoration: none; }
.bim-cadence__name a::after { content: ""; position: absolute; inset: 0; }

.bim-cadence__desc {
  margin: 0.35rem 0 0;
  max-width: 52ch;
  color: var(--wp--preset--color--slate);
  font-size: var(--wp--preset--font-size--sm);
}

.bim-cadence__std {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--slate);
  white-space: nowrap;
}

.bim-cadence__arrow { display: none; }

@media (min-width: 860px) {
  .bim-cadence__arrow {
    display: block;
    color: var(--wp--preset--color--green);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--t-base), transform var(--t-base);
  }

  .bim-cadence:hover .bim-cadence__arrow,
  .bim-cadence:focus-within .bim-cadence__arrow { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------------
 * 8. Evidence
 * ------------------------------------------------------------------------- */

.bim-evidence {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .bim-evidence { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--wp--preset--spacing--60); }
}

.bim-evidence__media {
  position: relative;
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #16241D;
}

.bim-evidence__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bim-deliverables {
  display: grid;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
  list-style: none;
}

.bim-deliverables li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding-block: 1.35rem;
  border-block-end: 1px solid var(--hairline-dark);
}

.bim-deliverables li:last-child { border-block-end: 0; }

.bim-deliverables svg {
  width: 22px; height: 22px;
  margin-block-start: 2px;
  color: var(--wp--preset--color--green-hi);
  flex: none;
}

.bim-deliverables strong { display: block; color: #fff; font-size: var(--wp--preset--font-size--md); font-weight: 600; }
.bim-deliverables span { color: var(--on-dark-dim); font-size: var(--wp--preset--font-size--sm); }

/* ----------------------------------------------------------------------------
 * 9. Sectors mosaic
 *
 * Photography carries this section, so the images are visible at rest rather
 * than hidden behind a hover state. Two tiles run wide to break the grid.
 * ------------------------------------------------------------------------- */

.bim-sectors {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 780px) {
  .bim-sectors { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .bim-sector:nth-child(1),
  .bim-sector:nth-child(8) { grid-column: span 2; grid-row: span 2; }
  .bim-sector:nth-child(5) { grid-column: span 2; }
}

.bim-sector {
  position: relative;
  display: block;
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #16241D;
  text-decoration: none;
  isolation: isolate;
}

.bim-sector img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--t-slow), filter var(--t-slow);
  filter: saturate(0.8);
}

.bim-sector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 19, 16, 0) 40%, rgba(8, 19, 16, 0.9) 100%);
  transition: background var(--t-base);
}

.bim-sector:hover img,
.bim-sector:focus-visible img { transform: scale(1.05); filter: saturate(1.1); }

.bim-sector__label {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  color: #fff;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--snug);
}

.bim-sector__label em {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-style: normal;
  color: var(--wp--preset--color--green-hi);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.bim-sector:hover .bim-sector__label em,
.bim-sector:focus-visible .bim-sector__label em { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------------
 * 10. Coverage
 * ------------------------------------------------------------------------- */

.bim-coverage {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 940px) {
  .bim-coverage { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--60); }
}

.bim-map { width: 100%; height: auto; color: var(--on-dark-dim); }
.bim-map__ring { fill: none; stroke: currentColor; stroke-opacity: 0.25; stroke-dasharray: 2 6; }
.bim-map__depot { fill: var(--wp--preset--color--green-hi); }

.bim-map__pin {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill var(--t-fast), transform var(--t-fast);
  cursor: pointer;
}

.bim-map__pin:hover,
.bim-map__pin.is-active { fill: var(--wp--preset--color--green-hi); transform: scale(1.6); }

.bim-map__label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--on-dark-dim);
  pointer-events: none;
}

.bim-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
  list-style: none;
}

.bim-areas button {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--wp--custom--radius--pill);
  background: transparent;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--on-dark);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.bim-areas button:hover,
.bim-areas button[aria-pressed="true"] {
  background: var(--wp--preset--color--green);
  border-color: var(--wp--preset--color--green);
  color: #fff;
}

/* ----------------------------------------------------------------------------
 * 11. Proof
 * ------------------------------------------------------------------------- */

.bim-awards {
  display: grid;
  gap: 0;
  margin-block: var(--wp--preset--spacing--40);
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--hairline-light);
}

@media (min-width: 780px) {
  .bim-awards { grid-template-columns: repeat(3, 1fr); }
  .bim-award + .bim-award { border-inline-start: 1px solid var(--hairline-light); padding-inline-start: var(--wp--preset--spacing--30); }
}

.bim-award { padding-block: var(--wp--preset--spacing--30); border-block-end: 1px solid var(--hairline-light); }

@media (min-width: 780px) { .bim-award { border-block-end: 0; } }

.bim-award__year {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--wp--preset--color--green-deep);
}

.bim-award__name {
  display: block;
  margin-block-start: 0.6rem;
  font-size: var(--wp--preset--font-size--md);
  color: var(--wp--preset--color--ink);
}

.bim-award__meta {
  display: block;
  margin-block-start: 0.2rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--slate);
}

.bim-quotes {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.bim-quote {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
  padding: var(--wp--preset--spacing--30);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--chalk);
}

.bim-quote blockquote {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: var(--wp--custom--tracking--snug);
  color: var(--wp--preset--color--ink);
}

.bim-quote cite {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-style: normal;
  color: var(--wp--preset--color--slate);
}

.bim-standards { display: grid; margin: 0; padding: 0; list-style: none; }

.bim-standards li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1rem;
  border-block-end: 1px solid var(--hairline-dark);
  font-size: var(--wp--preset--font-size--sm);
}

.bim-section--light .bim-standards li { border-block-end-color: var(--hairline-light); }

.bim-standards strong {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  color: var(--wp--preset--color--green-hi);
  white-space: nowrap;
}

.bim-section--light .bim-standards strong { color: var(--wp--preset--color--green-deep); }

.bim-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--40); }

.bim-badges img {
  height: clamp(30px, 4.5vw, 46px);
  width: auto;
  opacity: 0.5;
  filter: grayscale(1) brightness(0) invert(1);
  transition: opacity var(--t-base), filter var(--t-base);
}

.bim-badges img:hover { opacity: 1; }

/* Third-party marks sit on light backgrounds without inversion. */
.bim-section--light .bim-badges img { filter: grayscale(1); opacity: 0.55; }
.bim-section--light .bim-badges img:hover { filter: none; opacity: 1; }

/* ----------------------------------------------------------------------------
 * 12. CTA and footer
 * ------------------------------------------------------------------------- */

.bim-cta {
  position: relative;
  padding-block: var(--wp--preset--spacing--70);
  background: var(--wp--preset--color--green-deep);
  overflow: hidden;
}

.bim-cta::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -10%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(52, 215, 126, 0.35) 0%, transparent 62%);
  filter: blur(70px);
  pointer-events: none;
}

.bim-cta > * { position: relative; z-index: 1; }

.bim-cta h2 { color: #fff; max-width: 20ch; font-size: var(--wp--preset--font-size--2xl); }
.bim-cta .bim-eyebrow { color: rgba(255, 255, 255, 0.7); }
.bim-cta .bim-eyebrow::after { background: rgba(255, 255, 255, 0.25); }
.bim-cta .bim-lead { color: rgba(255, 255, 255, 0.85); }

.bim-cta__grid { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: 1fr; align-items: end; }

@media (min-width: 880px) { .bim-cta__grid { grid-template-columns: 1.4fr 1fr; } }

.bim-cta .bim-btn { background: #fff; color: var(--wp--preset--color--green-deep); }
.bim-cta .bim-btn:hover { background: var(--wp--preset--color--pine); color: #fff; box-shadow: none; }

.bim-cta .bim-tel {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}

.bim-cta .bim-tel:hover { background: #fff; color: var(--wp--preset--color--green-deep); }

.bim-footer {
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--pine-deep);
  color: var(--on-dark-dim);
  font-size: var(--wp--preset--font-size--sm);
}

.bim-footer :where(h2, h3, h4) { color: #fff; }
.bim-footer a { color: var(--on-dark); text-decoration: none; }
.bim-footer a:hover,
.bim-footer a:focus-visible { color: var(--wp--preset--color--green-hi); }

.bim-footer__grid { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: 1fr; }

@media (min-width: 760px) {
  .bim-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--wp--preset--spacing--50); }
}

.bim-footer__logo { height: 36px; width: auto; display: block; filter: brightness(0) invert(1); }
.bim-footer__nav ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.bim-footer__badges { margin-block-start: var(--wp--preset--spacing--50); }
.bim-footer .bim-address { margin-block-start: 0.85rem; font-style: normal; line-height: 1.65; }

.bim-footer .bim-tel { background: transparent; color: #fff; padding: 0; }
.bim-footer .bim-tel::before { background: var(--wp--preset--color--green-hi); }
.bim-footer .bim-tel:hover { background: transparent; color: var(--wp--preset--color--green-hi); transform: none; }

.bim-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem var(--wp--preset--spacing--30);
  justify-content: space-between;
  margin-block-start: var(--wp--preset--spacing--40);
  padding-block-start: var(--wp--preset--spacing--20);
  border-block-start: 1px solid var(--hairline-dark);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: #5F7A6C;
}

/* ----------------------------------------------------------------------------
 * 13. Registered block styles
 * ------------------------------------------------------------------------- */

.is-style-bim-chalk {
  padding: var(--wp--preset--spacing--40);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--chalk);
  color: var(--wp--preset--color--ink);
}

.is-style-bim-pine {
  padding: var(--wp--preset--spacing--40);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--pine-deep);
  color: var(--on-dark);
}

.is-style-bim-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.is-style-bim-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hairline-dark); }

.is-style-bim-lead { max-width: 58ch; font-size: var(--wp--preset--font-size--lg); line-height: 1.45; }
.is-style-bim-data { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--sm); }

.is-style-bim-checks { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.is-style-bim-checks li { position: relative; padding-inline-start: 2rem; }

.is-style-bim-checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  width: 1rem; height: 0.5rem;
  border-inline-start: 2px solid var(--wp--preset--color--green-hi);
  border-block-end: 2px solid var(--wp--preset--color--green-hi);
  transform: rotate(-45deg);
}

.bim-section--light .is-style-bim-checks li::before {
  border-color: var(--wp--preset--color--green);
}

/* ----------------------------------------------------------------------------
 * 14. Motion
 * ------------------------------------------------------------------------- */

/* .js is set by a blocking inline script in <head>, so these apply before
   first paint — no flash of content that then hides. */
.js :where(.bim-section, .bim-hero, .bim-band):not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
}

.js :where(.bim-section, .bim-hero, .bim-band) {
  transition: opacity var(--t-slow), transform var(--t-slow);
}

/* One orchestrated moment: the schedule builds column by column. */
.js .bim-year .bim-mark { transform: scaleX(0.08); opacity: 0; }

.js .bim-year.is-revealed .bim-mark {
  animation: bim-mark-in 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--col, 0) * 42ms + var(--row, 0) * 70ms);
}

@keyframes bim-mark-in {
  from { opacity: 0; transform: scaleX(0.08); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js :where(.bim-section, .bim-hero, .bim-band),
  .js :where(.bim-section, .bim-hero, .bim-band):not(.is-revealed),
  .js .bim-year .bim-mark,
  .js .bim-year.is-revealed .bim-mark {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .bim-hero::before { animation: none; }
}

@media print {
  .bim-masthead, .bim-cta, .bim-band { display: none; }
  body, .bim-section { background: #fff !important; color: #000 !important; }
  :where(h1, h2, h3) { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}