/* ============================================================
   CleanReports Design System
   Per brand guidelines: Christine Wilde, May 2026
   Brand colours: #DF0024 (red), #111111 (black), #FFFFFF (white)
   Fonts: Montserrat 400/500/800 + JetBrains Mono 400 (hash displays only)
   ============================================================ */

/* 1. Tokens
   ------------------------------------------------------------ */
:root {
  /* Colour — brand base */
  --cr-red:        #DF0024;
  --cr-black:      #111111;
  --cr-logo-black: #121212;
  --cr-white:      #FFFFFF;

  /* Colour — derived (tints/shades only, no new hues) */
  --cr-off-white:  #FAFAF7;
  --cr-paper:      #F4F3EE;
  --cr-border:     #E8E6DF;
  --cr-ink-2:      #2A2A2A;
  --cr-ink-3:      #6B6B6B;
  --cr-red-tint:   #FCE6EA;
  --cr-red-deep:   #B8001E;

  /* Typography — fluid scale (mobile → desktop) */
  --cr-text-xs:   clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);   /* 11→12px */
  --cr-text-sm:   clamp(0.8125rem, 0.78rem + 0.17vw, 0.875rem);  /* 13→14px */
  --cr-text-base: clamp(0.9375rem, 0.90rem + 0.19vw, 1rem);      /* 15→16px */
  --cr-text-lg:   clamp(1.0625rem, 1.02rem + 0.21vw, 1.125rem);  /* 17→18px */
  --cr-text-xl:   clamp(1.25rem,   1.14rem + 0.54vw, 1.5rem);    /* 20→24px */
  --cr-text-2xl:  clamp(1.625rem,  1.41rem + 1.07vw, 2rem);      /* 26→32px */
  --cr-text-3xl:  clamp(2.25rem,   1.82rem + 2.14vw, 3rem);      /* 36→48px */
  --cr-text-hero: clamp(2.75rem,   1.96rem + 3.93vw, 4.5rem);    /* 44→72px */

  /* Spacing */
  --cr-space-1:  4px;
  --cr-space-2:  8px;
  --cr-space-3:  12px;
  --cr-space-4:  16px;
  --cr-space-5:  24px;
  --cr-space-6:  32px;
  --cr-space-7:  48px;
  --cr-space-8:  64px;
  --cr-space-9:  96px;
  --cr-space-10: 128px;

  /* Layout */
  --cr-max-width:     1180px;
  --cr-reading-width: 680px;

  /* Radius */
  --cr-radius-sm: 4px;
  --cr-radius-md: 8px;

  /* Transitions */
  --cr-transition: 0.2s ease;
}

/* 2. Reset
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 3. Base elements
   ------------------------------------------------------------ */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--cr-text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cr-black);
  background-color: var(--cr-off-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cr-black);
  margin: 0 0 var(--cr-space-4);
}

p {
  margin: 0 0 var(--cr-space-4);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
}

input, textarea, select {
  font-family: 'Montserrat', sans-serif;
}

ul, ol {
  padding-left: var(--cr-space-5);
}

/* 4. Components
   ------------------------------------------------------------ */

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-2);
  background-color: var(--cr-red);
  color: var(--cr-white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--cr-radius-sm);
  border: none;
  text-decoration: none;
  transition: background-color var(--cr-transition), transform var(--cr-transition);
  cursor: pointer;
}
.btn-primary:hover {
  background-color: var(--cr-red-deep);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-2);
  background-color: transparent;
  color: var(--cr-black);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--cr-radius-sm);
  border: 1.5px solid var(--cr-black);
  text-decoration: none;
  transition: background-color var(--cr-transition), color var(--cr-transition);
  cursor: pointer;
}
.btn-secondary:hover {
  background-color: var(--cr-black);
  color: var(--cr-white);
}

.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-2);
  background: none;
  border: none;
  color: var(--cr-black);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: var(--cr-text-base);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
.btn-tertiary:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cards */
.card {
  background: var(--cr-white);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  padding: var(--cr-space-6);
  transition: border-color var(--cr-transition);
  box-shadow: 0 1px 2px rgba(17,17,17,0.04);
}
.card:hover {
  border-color: var(--cr-ink-3);
}

.card-metric {
  background: var(--cr-paper);
  border-radius: var(--cr-radius-md);
  padding: var(--cr-space-6);
}
.card-metric .metric-number {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  color: var(--cr-black);
  line-height: 1;
  margin-bottom: var(--cr-space-2);
}
.card-metric .metric-label {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cr-ink-3);
}

/* Eyebrow labels */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cr-space-3);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cr-red);
  margin-bottom: var(--cr-space-4);
}
.eyebrow::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background-color: var(--cr-red);
  flex-shrink: 0;
}

/* Hash display — JetBrains Mono, hash-only contexts */
.cr-hash {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: var(--cr-text-xs);
  color: var(--cr-ink-3);
  letter-spacing: 0.02em;
}

/* Layout */
.cr-section {
  padding: var(--cr-space-9) var(--cr-space-5);
}
@media (min-width: 1024px) {
  .cr-section {
    padding: var(--cr-space-10) var(--cr-space-6);
  }
}

.cr-container {
  max-width: var(--cr-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cr-space-5);
  padding-right: var(--cr-space-5);
}

.cr-container-reading {
  max-width: var(--cr-reading-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cr-space-5);
  padding-right: var(--cr-space-5);
}

/* 5. Utility helpers
   ------------------------------------------------------------ */
.text-red     { color: var(--cr-red); }
.text-ink-2   { color: var(--cr-ink-2); }
.text-ink-3   { color: var(--cr-ink-3); }
.bg-paper     { background-color: var(--cr-paper); }
.bg-dark      { background-color: var(--cr-black); color: var(--cr-off-white); }
.bg-off-white { background-color: var(--cr-off-white); }

/* Accessible focus ring — global */
:focus-visible {
  outline: 2px solid var(--cr-red);
  outline-offset: 2px;
}

/* Skip-to-content link — accessibility */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--cr-space-5);
  z-index: 9999;
  background: var(--cr-red);
  color: var(--cr-white);
  padding: var(--cr-space-3) var(--cr-space-5);
  border-radius: var(--cr-radius-sm);
  font-weight: 800;
  font-size: var(--cr-text-sm);
  text-decoration: none;
  transition: top 0.1s;
}
.skip-to-content:focus {
  top: var(--cr-space-3);
}

/* Phase B — Auth page layout (full-screen centred card, no nav/footer) */
.page-auth {
  min-height: 100vh;
  background-color: var(--cr-paper);
  display: flex;
  flex-direction: column;
}
.page-auth #main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cr-space-6) var(--cr-space-5);
}

/* Phase B — Body offset for fixed public header */
.page-public #main-content {
  padding-top: 72px;
}
@media (max-width: 768px) {
  .page-public #main-content {
    padding-top: 60px;
  }
}

/* Phase B — Site header
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background-color: var(--cr-off-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--cr-transition);
  z-index: 1000;
}
.site-header.header-scrolled {
  border-bottom-color: var(--cr-border);
}
.site-header__inner {
  max-width: var(--cr-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--cr-space-6);
  display: flex;
  align-items: center;
  gap: var(--cr-space-5);
}
.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.site-header__logo img {
  height: 32px;
  width: auto;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--cr-space-6);
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-right: var(--cr-space-5);
}
.site-header__nav a {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-ink-2);
  text-decoration: none;
  transition: color var(--cr-transition);
}
.site-header__nav a:hover {
  color: var(--cr-black);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cr-space-4);
  flex-shrink: 0;
  margin-left: auto;
}
.site-header__signin {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-ink-2);
  text-decoration: none;
  transition: color var(--cr-transition);
}
.site-header__signin:hover {
  color: var(--cr-black);
}
.site-header__burger {
  display: none;
  background: none;
  border: none;
  padding: var(--cr-space-2);
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}
.site-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--cr-black);
  transition: all 0.2s;
}

/* Platform header (authenticated pages) */
.platform-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: var(--cr-black);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 var(--cr-space-6);
  justify-content: space-between;
}
.platform-header__logo img {
  height: 38px;
  width: auto;
  display: block;
}
.platform-header__right {
  display: flex;
  align-items: center;
  gap: var(--cr-space-5);
}
.platform-header__user {
  font-size: var(--cr-text-xs);
  color: var(--cr-ink-3);
}
.platform-header__signout {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-off-white);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--cr-transition);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.platform-header__signout:hover { opacity: 1; }

/* Mobile nav overlay */
@media (max-width: 768px) {
  .site-header {
    height: 60px;
  }
  .site-header__nav,
  .site-header__actions {
    display: none;
  }
  .site-header__burger {
    display: flex;
  }
  .site-header__nav.nav-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cr-space-4);
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cr-off-white);
    padding: var(--cr-space-6) var(--cr-space-6);
    z-index: 999;
    margin: 0;
  }
  .site-header__nav.nav-open a:not(.btn-primary) {
    font-size: var(--cr-text-xl);
    font-weight: 800;
    color: var(--cr-black);
  }
  .site-header__nav.nav-open .site-header__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--cr-space-5);
    margin-left: 0;
    width: 100%;
  }
}

/* Phase B — Site footer
   ------------------------------------------------------------ */
.site-footer {
  background-color: var(--cr-black);
  color: var(--cr-off-white);
  padding: var(--cr-space-9) var(--cr-space-5) var(--cr-space-6);
}
.site-footer__inner {
  max-width: var(--cr-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--cr-space-8);
  padding-bottom: var(--cr-space-8);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer__brand .site-footer__logo img {
  height: 28px;
  width: auto;
  margin-bottom: var(--cr-space-4);
}
.site-footer__tagline {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-off-white);
  margin-bottom: var(--cr-space-3);
  opacity: 0.9;
}
.site-footer__reg {
  font-size: var(--cr-text-xs);
  color: rgba(250, 250, 247, 0.6);
  line-height: 1.6;
}
.site-footer__col h3 {
  font-size: var(--cr-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250, 250, 247, 0.6);
  margin-bottom: var(--cr-space-4);
}
.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cr-space-3);
}
.site-footer__col a {
  font-size: var(--cr-text-sm);
  color: rgba(250,250,247,0.75);
  text-decoration: none;
  transition: color var(--cr-transition);
}
.site-footer__col a:hover {
  color: var(--cr-off-white);
}
.site-footer__bottom {
  max-width: var(--cr-max-width);
  margin: var(--cr-space-6) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cr-space-4);
  font-size: var(--cr-text-xs);
  color: rgba(250, 250, 247, 0.6);
}
.site-footer__bottom .cr-hash {
  color: rgba(250, 250, 247, 0.6);
}
.site-footer__bottom .text-red {
  font-weight: 500;
  color: var(--cr-off-white);
}
@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--cr-space-6);
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cr-space-3);
  }
}
@media (max-width: 480px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Phase C — Public marketing pages
   ============================================================ */

/* ---- Hero ---- */
.cr-hero {
  padding: 128px 0 96px;
  background-color: var(--cr-off-white);
}
.cr-hero__headline {
  font-size: var(--cr-text-hero);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cr-black);
  max-width: 780px;
  margin-bottom: var(--cr-space-6);
}
.cr-hero__sub {
  font-size: var(--cr-text-lg);
  color: var(--cr-ink-2);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: var(--cr-space-7);
}
.cr-hero__ctas {
  display: flex;
  gap: var(--cr-space-4);
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 640px) {
  .cr-hero {
    padding: 80px 0 64px;
  }
  .cr-hero__headline {
    font-size: 2.25rem;
  }
  .cr-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Trust strip ---- */
.cr-trust-strip {
  border-top: 1px solid var(--cr-border);
  border-bottom: 1px solid var(--cr-border);
  background-color: var(--cr-off-white);
  padding: var(--cr-space-6) var(--cr-space-5);
}
.cr-trust-strip__label {
  font-size: var(--cr-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cr-ink-3);
  text-align: center;
  margin-bottom: var(--cr-space-5);
}
.cr-trust-strip__items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--cr-space-4) var(--cr-space-6);
}
.cr-trust-strip__item {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cr-ink-3);
}

/* ---- Section heading (reusable public) ---- */
.cr-section-heading {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 540px;
  margin-bottom: var(--cr-space-5);
}

/* ---- How it works ---- */
.cr-how-it-works {
  padding: var(--cr-space-9) var(--cr-space-5);
  background-color: var(--cr-paper);
}
@media (min-width: 1024px) {
  .cr-how-it-works { padding: var(--cr-space-10) var(--cr-space-6); }
}
.cr-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--cr-space-5);
  margin-top: var(--cr-space-7);
}
.cr-step-card {
  background: var(--cr-white);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  padding: var(--cr-space-6);
}
.cr-step-number {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  color: var(--cr-red);
  line-height: 1;
  margin-bottom: var(--cr-space-4);
}
.cr-step-title {
  font-size: var(--cr-text-xl);
  font-weight: 800;
  color: var(--cr-black);
  margin-bottom: var(--cr-space-3);
}
.cr-step-body {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.65;
  margin: 0;
}
.cr-section-hash {
  margin-top: var(--cr-space-7);
  display: flex;
  align-items: center;
  gap: var(--cr-space-3);
}
.cr-section-hash::before {
  content: 'Sample SHA-256 seal ·';
  font-size: var(--cr-text-xs);
  color: var(--cr-ink-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ---- Compliance ladder ---- */
.cr-ladder {
  padding: var(--cr-space-9) var(--cr-space-5);
  background-color: var(--cr-off-white);
}
@media (min-width: 1024px) {
  .cr-ladder { padding: var(--cr-space-10) var(--cr-space-6); }
}
.cr-ladder__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cr-space-6);
  padding: var(--cr-space-6) 0;
  border-bottom: 1px solid var(--cr-border);
}
.cr-ladder__row:last-child { border-bottom: none; }
.cr-ladder__framework {
  font-size: var(--cr-text-xl);
  font-weight: 800;
  color: var(--cr-black);
  letter-spacing: -0.02em;
}
.cr-ladder__contribution {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.65;
  padding-top: 3px;
}
@media (max-width: 640px) {
  .cr-ladder__row {
    grid-template-columns: 1fr;
    gap: var(--cr-space-3);
  }
}

/* ---- Metric strip ---- */
.cr-metrics {
  padding: var(--cr-space-8) var(--cr-space-5);
  background-color: var(--cr-paper);
  border-top: 1px solid var(--cr-border);
  border-bottom: 1px solid var(--cr-border);
}
.cr-metrics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cr-space-5);
  max-width: var(--cr-max-width);
  margin: 0 auto;
}
@media (max-width: 640px) {
  .cr-metrics__grid {
    grid-template-columns: 1fr;
    gap: var(--cr-space-4);
  }
}

/* ---- Dark CTA section ---- */
.cr-dark-cta {
  background-color: var(--cr-black);
  color: var(--cr-off-white);
  padding: var(--cr-space-9) var(--cr-space-5);
}
@media (min-width: 1024px) {
  .cr-dark-cta { padding: var(--cr-space-10) var(--cr-space-6); }
}
.cr-dark-cta__inner {
  max-width: 680px;
}
.cr-dark-cta__heading {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  color: var(--cr-off-white);
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-5);
}
.cr-dark-cta__body {
  font-size: var(--cr-text-lg);
  color: rgba(250,250,247,0.8);
  line-height: 1.65;
  margin-bottom: var(--cr-space-7);
}

/* ---- Consultation strip ---- */
.cr-consult-strip {
  background-color: var(--cr-off-white);
  border-top: 1px solid var(--cr-border);
  padding: var(--cr-space-6) var(--cr-space-5);
  text-align: center;
}
.cr-consult-strip p {
  font-size: var(--cr-text-sm);
  color: var(--cr-ink-3);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}
.cr-consult-strip a {
  color: var(--cr-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- About Us ---- */
.cr-about {
  max-width: var(--cr-reading-width);
  margin: 0 auto;
  padding: var(--cr-space-9) var(--cr-space-5);
}
.cr-about h1 {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-6);
}
.cr-about__lead {
  font-size: var(--cr-text-lg);
  color: var(--cr-ink-2);
  line-height: 1.7;
  margin-bottom: var(--cr-space-8);
}
.cr-about__section h2 {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: var(--cr-space-9);
  margin-bottom: var(--cr-space-5);
}
.cr-about__section p {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.75;
  margin-bottom: var(--cr-space-5);
}
.cr-about__section p:last-child { margin-bottom: 0; }
.cr-pull-quote {
  margin: var(--cr-space-8) 0;
  padding: var(--cr-space-6) 0;
  border-top: 1px solid var(--cr-border);
  border-bottom: 1px solid var(--cr-border);
}
.cr-pull-quote__line {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--cr-red);
  margin-bottom: var(--cr-space-5);
}
.cr-pull-quote__text {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  color: var(--cr-black);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.cr-about__cta {
  margin-top: var(--cr-space-9);
  padding-top: var(--cr-space-7);
  border-top: 1px solid var(--cr-border);
  display: flex;
  align-items: center;
  gap: var(--cr-space-6);
  flex-wrap: wrap;
}
.cr-about__cta-text {
  font-size: var(--cr-text-sm);
  color: var(--cr-ink-3);
}

/* ---- Portal page ---- */
.cr-portal-intro {
  max-width: var(--cr-max-width);
  margin: 0 auto;
  padding: var(--cr-space-8) var(--cr-space-5) var(--cr-space-5);
}
.cr-portal-intro h1 {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-4);
}
.cr-portal-intro__sub {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  max-width: 600px;
  line-height: 1.65;
  margin-bottom: var(--cr-space-4);
}
.cr-portal-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-3);
  background: var(--cr-paper);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-sm);
  padding: var(--cr-space-3) var(--cr-space-4);
  font-size: var(--cr-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cr-ink-3);
}
.cr-portal-notice::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cr-ink-3);
  flex-shrink: 0;
}
.cr-portal-cta-strip {
  max-width: var(--cr-max-width);
  margin: 0 auto;
  padding: var(--cr-space-7) var(--cr-space-5) var(--cr-space-9);
  border-top: 1px solid var(--cr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cr-space-5);
  flex-wrap: wrap;
}
.cr-portal-cta-strip__text h3 {
  font-size: var(--cr-text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-2);
}
.cr-portal-cta-strip__text p {
  font-size: var(--cr-text-sm);
  color: var(--cr-ink-3);
  margin: 0;
}

/* ---- Awaab's Law page ---- */
.cr-awaab {
  max-width: var(--cr-reading-width);
  margin: 0 auto;
  padding: var(--cr-space-9) var(--cr-space-5);
}
.cr-awaab__section h2 {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: var(--cr-space-8);
  margin-bottom: var(--cr-space-5);
  padding-bottom: var(--cr-space-4);
  border-bottom: 1px solid var(--cr-border);
}
.cr-awaab__section p {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.75;
  margin-bottom: var(--cr-space-5);
}
.cr-awaab__section p em { font-style: italic; color: var(--cr-black); font-weight: 500; }
.cr-awaab__section ul { margin-bottom: var(--cr-space-5); }
.cr-awaab__section li {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.75;
  margin-bottom: var(--cr-space-3);
}
.cr-awaab__clock-block {
  background: var(--cr-black);
  color: var(--cr-off-white);
  border-radius: var(--cr-radius-md);
  padding: var(--cr-space-8) var(--cr-space-6);
  margin: var(--cr-space-7) 0;
  text-align: center;
}
.cr-awaab__clock-num {
  font-size: var(--cr-text-hero);
  font-weight: 800;
  color: var(--cr-red);
  line-height: 1;
  display: block;
  margin-bottom: var(--cr-space-3);
}
.cr-awaab__clock-label {
  font-size: var(--cr-text-lg);
  font-weight: 800;
  color: var(--cr-off-white);
  display: block;
  margin-bottom: var(--cr-space-3);
}
.cr-awaab__clock-sub {
  font-size: var(--cr-text-sm);
  color: rgba(250,250,247,0.6);
}
.cr-awaab__key-point {
  border-left: 3px solid var(--cr-black);
  padding: var(--cr-space-5) var(--cr-space-6);
  margin-top: var(--cr-space-6);
  margin-bottom: var(--cr-space-6);
  background: var(--cr-paper);
  border-radius: 0 var(--cr-radius-sm) var(--cr-radius-sm) 0;
}
.cr-awaab__key-point p {
  font-size: var(--cr-text-base);
  font-weight: 500;
  color: var(--cr-black);
  line-height: 1.65;
  margin: 0;
}
.cr-awaab__sources {
  margin-top: var(--cr-space-9);
  padding-top: var(--cr-space-6);
  border-top: 1px solid var(--cr-border);
}
.cr-awaab__sources h3 {
  font-size: var(--cr-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cr-ink-3);
  margin-bottom: var(--cr-space-5);
}
.cr-awaab__sources ol {
  padding-left: var(--cr-space-5);
  margin: 0;
}
.cr-awaab__sources li {
  font-size: var(--cr-text-sm);
  color: var(--cr-ink-3);
  margin-bottom: var(--cr-space-3);
  line-height: 1.55;
}
.cr-awaab__sources a {
  color: var(--cr-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cr-awaab__sources a:hover { color: var(--cr-black); }
.cr-citation {
  font-size: 0.75em;
  color: var(--cr-ink-3);
  text-decoration: none;
  font-weight: 500;
  margin-left: 1px;
  vertical-align: super;
}
.cr-citation:hover { text-decoration: underline; }

/* ---- Case study index ---- */
.cr-case-index {
  padding: var(--cr-space-9) var(--cr-space-5);
}
@media (min-width: 1024px) {
  .cr-case-index { padding: var(--cr-space-10) var(--cr-space-6); }
}
.cr-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cr-space-5);
  margin-top: var(--cr-space-7);
}
@media (max-width: 640px) {
  .cr-case-grid { grid-template-columns: 1fr; }
}
.cr-case-card {
  display: block;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  padding: var(--cr-space-6);
  background: var(--cr-white);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--cr-transition), box-shadow var(--cr-transition);
}
.cr-case-card:hover {
  border-color: var(--cr-ink-3);
  box-shadow: 0 2px 8px rgba(17,17,17,0.06);
}
.cr-case-card__label {
  font-size: var(--cr-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cr-ink-3);
  margin-bottom: var(--cr-space-2);
}
.cr-case-card__title {
  font-size: var(--cr-text-xl);
  font-weight: 800;
  color: var(--cr-black);
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-4);
}
.cr-case-card__blurb {
  font-size: var(--cr-text-sm);
  color: var(--cr-ink-2);
  line-height: 1.65;
  margin-bottom: var(--cr-space-5);
}
.cr-case-card__read {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-ink-3);
}

/* ---- Individual case study ---- */
.cr-case-study {
  max-width: var(--cr-reading-width);
  margin: 0 auto;
  padding: var(--cr-space-9) var(--cr-space-5);
}
.cr-case-back {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-2);
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-ink-3);
  text-decoration: none;
  margin-bottom: var(--cr-space-7);
  transition: color var(--cr-transition);
}
.cr-case-back:hover { color: var(--cr-black); }
.cr-case-study__hero {
  margin-bottom: var(--cr-space-8);
  padding-bottom: var(--cr-space-8);
  border-bottom: 1px solid var(--cr-border);
}
.cr-case-study__location {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-ink-3);
  margin-bottom: var(--cr-space-4);
}
.cr-case-study__headline {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  color: var(--cr-black);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.cr-case-section {
  margin-bottom: var(--cr-space-7);
  padding-bottom: var(--cr-space-7);
  border-bottom: 1px solid var(--cr-border);
}
.cr-case-section:last-of-type { border-bottom: none; }
.cr-case-section h2 {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  color: var(--cr-black);
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-5);
}
.cr-case-section p {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.75;
  margin-bottom: var(--cr-space-5);
}
.cr-case-section p:last-child { margin-bottom: 0; }
.cr-case-section p em { font-style: italic; color: var(--cr-black); font-weight: 500; }
.cr-case-section p strong { font-weight: 700; color: var(--cr-black); }
.cr-case-section ul { margin-bottom: var(--cr-space-5); }
.cr-case-section li {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.75;
  margin-bottom: var(--cr-space-3);
}
.cr-case-key-point {
  border-left: 3px solid var(--cr-black);
  padding: var(--cr-space-5) var(--cr-space-6);
  margin-top: var(--cr-space-6);
  background: var(--cr-paper);
  border-radius: 0 var(--cr-radius-sm) var(--cr-radius-sm) 0;
}
.cr-case-key-point p {
  font-size: var(--cr-text-base);
  font-weight: 500;
  color: var(--cr-black);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}
.cr-case-sources {
  margin-top: var(--cr-space-8);
  padding-top: var(--cr-space-6);
  border-top: 1px solid var(--cr-border);
}
.cr-case-sources h3 {
  font-size: var(--cr-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cr-ink-3);
  margin-bottom: var(--cr-space-4);
}
.cr-case-sources ol { padding-left: var(--cr-space-5); margin: 0; }
.cr-case-sources li {
  font-size: var(--cr-text-sm);
  color: var(--cr-ink-3);
  margin-bottom: var(--cr-space-3);
  line-height: 1.55;
}
.cr-case-sources a {
  color: var(--cr-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cr-case-sources a:hover { color: var(--cr-black); }

/* ---- Roadmap ---- */
.cr-roadmap {
  padding: var(--cr-space-9) var(--cr-space-5);
}
@media (min-width: 1024px) {
  .cr-roadmap { padding: var(--cr-space-10) var(--cr-space-6); }
}
.cr-roadmap__phases {
  margin-top: var(--cr-space-8);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cr-roadmap__phase {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--cr-space-6);
  padding: var(--cr-space-7) 0;
  border-bottom: 1px solid var(--cr-border);
}
.cr-roadmap__phase:last-child { border-bottom: none; }
.cr-roadmap__phase-num {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  color: var(--cr-red);
  line-height: 1;
  padding-top: 4px;
}
.cr-roadmap__phase-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cr-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--cr-space-3);
}
.cr-roadmap__phase-label {
  font-size: var(--cr-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cr-ink-3);
  margin-bottom: var(--cr-space-2);
}
.cr-roadmap__phase-title {
  font-size: var(--cr-text-xl);
  font-weight: 800;
  color: var(--cr-black);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.cr-roadmap__phase-body {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.7;
  margin-top: var(--cr-space-4);
  margin-bottom: 0;
}
.cr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-2);
  font-size: var(--cr-text-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.cr-status-badge--live { background: #e8f5e9; color: #2e7d32; }
.cr-status-badge--active { background: var(--cr-paper); color: var(--cr-ink-2); border: 1px solid var(--cr-border); }
.cr-status-badge--planned { background: var(--cr-paper); color: var(--cr-ink-3); border: 1px solid var(--cr-border); }
.cr-status-badge--investor { background: var(--cr-paper); color: var(--cr-ink-3); border: 1px solid var(--cr-border); opacity: 0.7; }
@media (max-width: 480px) {
  .cr-roadmap__phase { grid-template-columns: 1fr; gap: var(--cr-space-3); }
  .cr-roadmap__phase-num { font-size: var(--cr-text-2xl); }
}

/* ---- Privacy/GDPR ---- */
.cr-privacy {
  max-width: var(--cr-reading-width);
  margin: 0 auto;
  padding: var(--cr-space-9) var(--cr-space-5);
}
.cr-privacy h1 {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-5);
}
.cr-ico-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-3);
  background: var(--cr-paper);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-sm);
  padding: var(--cr-space-3) var(--cr-space-4);
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-ink-2);
  margin-bottom: var(--cr-space-8);
  text-decoration: none;
}
.cr-privacy__section { margin-bottom: var(--cr-space-8); }
.cr-privacy__section h2 {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-5);
  padding-bottom: var(--cr-space-4);
  border-bottom: 1px solid var(--cr-border);
}
.cr-privacy__section h4 {
  font-size: var(--cr-text-base);
  font-weight: 700;
  color: var(--cr-black);
  margin-top: var(--cr-space-6);
  margin-bottom: var(--cr-space-3);
}
.cr-privacy__section p {
  font-size: var(--cr-text-base);
  color: var(--cr-ink-2);
  line-height: 1.75;
  margin-bottom: var(--cr-space-4);
}
.cr-privacy__section p:last-child { margin-bottom: 0; }
.cr-privacy__section a {
  color: var(--cr-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cr-privacy__section a:hover { color: var(--cr-black); }

/* ---- Public page intro (generic — about, portal, roadmap, privacy) ---- */
.cr-page-intro {
  padding: var(--cr-space-8) var(--cr-space-5) var(--cr-space-6);
  border-bottom: 1px solid var(--cr-border);
  background-color: var(--cr-off-white);
}
.cr-page-intro__inner {
  max-width: var(--cr-reading-width);
  margin: 0 auto;
}
.cr-page-intro h1 {
  font-size: var(--cr-text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-4);
}
.cr-page-intro p {
  font-size: var(--cr-text-lg);
  color: var(--cr-ink-2);
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
}

/* ============================================================
   Phase E — Platform pages (dashboards, buildings, inspections)
   ============================================================ */

/* Platform body canvas */
.page-platform {
  background-color: var(--cr-paper);
  min-height: 100vh;
  font-family: 'Montserrat', sans-serif;
  color: var(--cr-black);
}

/* Platform header inner layout (used by onboard, coming_soon etc.) */
.platform-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 var(--cr-space-6);
}

.platform-header__back {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-ink-3);
  text-decoration: none;
  transition: color var(--cr-transition);
}
.platform-header__back:hover { color: var(--cr-off-white); }

/* Platform content wrapper */
.cr-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--cr-space-6) var(--cr-space-6);
}
@media (max-width: 600px) {
  .cr-main { padding: var(--cr-space-5) var(--cr-space-4); }
}

/* Shared platform heading */
.cr-platform-title {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  color: var(--cr-black);
  letter-spacing: -0.02em;
  margin-bottom: var(--cr-space-1);
}
.cr-platform-sub {
  color: var(--cr-ink-3);
  font-size: var(--cr-text-sm);
  margin-bottom: var(--cr-space-6);
}

/* ============================================================
   Phase D — Auth pages (login, verify, password reset, onboard)
   ============================================================ */

/* Centred card on full-page --cr-paper canvas
   .page-auth body class (Phase B) handles the page layout;
   these classes provide the card component itself */

.cr-auth-card {
  background: var(--cr-white);
  border: 1px solid var(--cr-border);
  border-radius: 8px;
  padding: var(--cr-space-7) var(--cr-space-6);
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.cr-auth-card--wide {
  max-width: 560px;
  text-align: left;
}

.cr-auth-logo {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto var(--cr-space-5) auto;
}

.cr-auth-subtitle {
  color: var(--cr-ink-3);
  font-size: var(--cr-text-sm);
  line-height: 1.5;
  margin-bottom: var(--cr-space-6);
}

.cr-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--cr-space-5);
  text-align: left;
}

.cr-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cr-form-group label {
  font-size: var(--cr-text-sm);
  font-weight: 500;
  color: var(--cr-black);
}

.cr-form-group input,
.cr-form-group select {
  padding: 12px 16px;
  border: 1px solid var(--cr-border);
  border-radius: 4px;
  font-size: var(--cr-text-base);
  font-family: 'Montserrat', sans-serif;
  color: var(--cr-black);
  background: var(--cr-white);
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
}

.cr-form-group input:focus,
.cr-form-group select:focus {
  border-color: var(--cr-black);
}

.cr-form-group .cr-form-hint {
  font-size: var(--cr-text-xs);
  color: var(--cr-ink-3);
}

.cr-auth-submit {
  background: var(--cr-red);
  color: var(--cr-white);
  border: none;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s, transform 0.1s;
}

.cr-auth-submit:hover {
  background: var(--cr-red-deep);
  transform: translateY(-1px);
}

.cr-auth-submit:disabled {
  background: var(--cr-border);
  color: var(--cr-ink-3);
  cursor: not-allowed;
  transform: none;
}

.cr-auth-tertiary {
  display: block;
  text-align: center;
  color: var(--cr-ink-3);
  font-size: var(--cr-text-sm);
  font-weight: 500;
  text-decoration: none;
  margin-top: var(--cr-space-3);
}

.cr-auth-tertiary:hover {
  color: var(--cr-black);
  text-decoration: underline;
}

/* ============================================================
   Legacy styles below — to be pruned in Phase F
   ============================================================ */

/* [PRUNABLE — superseded by site-header design system]
body, html {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #111111;
  background-color: #FFFFFF;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 5%;
  flex-wrap: wrap;
}

.signup-btn {
  border: 2px solid #df0024;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  transition: 0.3s;
}

.signup-btn:hover {
  background-color: #df0024;
  color: white;
}

.login-btn {
   border: 2px solid #df0024;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  transition: 0.3s;
}

.login-btn:hover {
  background-color: #df0024;
  color: white;
}

header .logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 38px;
  width: auto;
  display: block;
  text-decoration: none;
  flex-shrink: 0;
  pointer-events: none;
}

@media (max-width: 480px) {
  header {
    position: relative;
    padding: 12px 16px;
    min-height: 52px;
  }
  header .logo {
    height: 30px;
    pointer-events: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  .menu-btn {
    z-index: 2;
    position: relative;
  }
  .nav-buttons {
    z-index: 2;
    position: relative;
  }
}

.top-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 20px 30px;
}
*/

/* [PRUNABLE — left-nav-group class removed from base.html nav; fully orphaned]
.left-nav-group {
  display: flex;
  gap: 20px;
  z-index: 2000;
}
*/

/* [PRUNABLE — superseded by site-header design system]
.auth-buttons {
  display: flex;
  gap: 15px;
  align-items: center;
}

.mobile-auth {
  display: none;
}
*/

/* [PRUNABLE — public pages rewritten in Phase C rebrand; no template references]
.mission-container {
  max-width: 800px;
  margin: 40px auto;
  text-align: center;
  line-height: 1.6;
  border: 2px solid #df0024;
  background-color: transparent;
  color: #111111;
  padding: 40px 20px;
}

.mission-statement {
  padding: 40px 30px;
  max-width: 800px;
  margin: 40px auto;
  border-radius: 8px;
  color: #111111;
  line-height: 1.8;
  font-weight: 700;
}

.three-facts {
  font-weight: 500;
}

.tagline {
color: #df0024;
font-weight: 900;
margin-top: 20px;
font-size: 1.5rem;
}

.apply-to-join-btn {
  display: inline-block;
  color: #df0024;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #df0024;
  border-radius: 4px;
  font-weight: 700;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.apply-to-join-btn:hover {
  background-color: #df0024;
  color: white;

}

.hero-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0px;
}

.background-gallery {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.gallery-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: scroll 40s linear infinite;
}

.gallery-track img {
  width: auto;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.mission-overlay {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 8px;
}
*/

/* [PRUNABLE — replaced by .site-header__burger; class removed from base.html button]
.menu-burger {
  display: block;
  flex-direction: column;
  background: #df0024;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
*/

/* [PRUNABLE — global display:none overrides desktop nav visibility;
   mobile nav is now handled by .site-header__nav.nav-open via JS]
.left-nav-group {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 20px;
}
.left-nav-group.active {
    display: flex;
}
*/

/* [PRUNABLE — public pages rewritten in Phase C rebrand; no template references]
.process-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.process-section {
  background-color: #f9f9f9;
  padding: 80px 0;
  text-align: center;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
  text-align: left;
}

.process-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.process-cta {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 60px auto 0;
  padding: 50px 30px;
  background-color: #111111;
  color: #df0024;
  border-radius: 20px;
  text-align: center;
  max-width: 800px;
}

.process-cta .signup-btn {
  display: inline-block;
  background-color: #df0024;
  color: white;
  padding: 18px 40px;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 20px;
  border: none;
  transition: 0.3s;
}

.process-cta .signup-btn:hover{
  background-color: white;
  color: #df0024;
  transform: scale(1.05);
}

.cta-main {
  display: inline block;
  padding: 15px 30px;
  font-size: 1.2rem;
  text-decoration: none;
  margin-bottom: 10px;
}

.cta-note {
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.7;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}
*/

/* [PRUNABLE — superseded by site-footer design system; no template references]
.main-footer {
  background-color: #111111;
  color: #FFFFFF;
  padding: 60px 20px 20px;
  margin-top: 0;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

.footer-info h3 {
  color: #df0024;
  font-size: 1.8rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.company-no {
  color: #888;
}

.footer-info p {
  opacity: 0.8;
  line-height: 1.6;
}

.footer-contact h4, .footer-links h4 {
margin-bottom: 15px;
font-size: 1.2rem;
border-bottom: 2px solid #df0024;
display: inline-block;
padding-bottom: 5px;
}

.footer-contact a, .footer-links a {
  color: #FFFFFF;
  text-decoration: none;
  opacity: 1;
  transition: 0.3s;
  font-size: 0.95rem;
}

.footer-contact a:hover, .footer-links a:hover {
  opacity: 1;
  color: #df0024;
  text-underline-offset: 5px;
  text-decoration: underline;
}

.footer-contact p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer.content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-bottom {
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  opacity: 0.5;
}

@keyframes scroll {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}

}
*/

/* [PARTIALLY PRUNABLE — this block mixes orphaned rules with the active
   .left-nav-group mobile hide rule (line ~2051). Review before deleting.] */
@media (max-width: 600px) {
  .mission-overlay {
    margin: 0 10px;
    padding: 20px;
  }
  .mission-statement {
    font-size: 1rem;
  }

  .hero-section {
    min-height: 100svh;
}

.background-gallery {
    width: 100%;
    height: 100%;
}

.gallery-track {
    height: 100%;
    width: 100%;
    animation: none;
}

.gallery-track img {
    height: 100%;
    min-width: 100vw;
    width: 100vw;
    flex-shrink: 0;
    object-fit: cover;
}

.main-footer {
    width: 100%;
    box-sizing: border-box;
}

.process-grid {
    grid-template-columns: 1fr;
}

.process-container {
    padding: 0 16px;
    box-sizing: border-box;
}

.process-cta {
    padding: 30px 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.process-cta iframe {
    max-width: 100%;
    box-sizing: border-box;
}

.top-navigation {
    padding: 12px 16px;
    gap: 0;
}

.logo {
    height: 32px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

.auth-buttons {
    display: none;
}

.left-nav-group {
    display: none;
}

}

  @media (max-width: 768px) {
    .header {
      flex-direction: column;
      justify-content: center;
      gap: 20px;
      padding: 20px 5%;
    }

    .header .logo {
      position: relative;
      left: auto;
      transform: none;
      text-align: center;
      margin: 0 auto;
    }

    .header .auth-buttons {
    display: none;
    width: 120px;
    justify-content: center;
    flex-wrap: wrap;
  }

    .mobile-auth {
    display: list-item;
  }

    .footer-container {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .footer.contact h4, .footer-links h4 {
      display: block;
    }
  }

/* [PRUNABLE — not used in any template]
.portal-body {
  background-color: #f4f7f9;
}
*/

.portal-sub-nav {
  background-color: #FFFFFF;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.sub-nav-container {
  max-width: 1200px;
  width: 100%;
}

.sub-nav-container ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0 16px;
margin: 0;
gap: 40px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
white-space: nowrap;
}

.sub-nav-container ul::-webkit-scrollbar {
  display: none;
}

.sub-nav-container li {
  flex-shrink: 0;
}

.sub-nav-container a {
  text-decoration: none;
  color: #666;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.3s;
}

.sub-nav-container a:hover {
  color: #df0024;
}

.sub-nav-container li.active a {
  color: #df0024;
  border-bottom: 2px solid #df0024;
  padding-bottom: 12px;
}

.portal-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .portal-container {
    margin: 16px auto;
    padding: 0 12px;
  }
}

.building-identity-row {
  display: grid;
  grid-template-columns: 250px 1fr 280px;
  gap: 30px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  align-items: start;
}

@media (max-width: 900px) {
  .building-identity-row {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }
  .building-photo-box {
    height: 200px;
    width: 100%;
  }
  .building-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .building-identity-row {
    padding: 16px 12px;
    gap: 16px;
  }
}

.building-photo-box {
  position: relative;
  width: 100%;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
}

.property-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 20px 15px 10px;
}

.photo-overlay .building-id {
  color: white !important;
  font-weight: 800;
  font-size: 0.8rem;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.building-id {
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  color: #333;
}

.building-title {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #111111;
}

.details-grid {
  margin-bottom: 8px;
  color: #444;
}

.idicator-group {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.status-pill {
  padding: 6px 15px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.85rem;
}

.status-secure {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.active-dot {
  height: 8px;
  width: 8px;
  background-color: #4caf50;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.stat-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  text-align: center;
  border-left: 5px solid #111111;
}

.stat-card.warning {
  border-left-color: #df0024;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 5px;
}

.compliance-clock-card {
  background: #111111;
  color: white;
  padding: 30px;
  border-radius: 12px;
  margin-top: 30px;
  text-align: center;
}

#clock-display {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.timer-unit {
  font-size: 2.5rem;
  font-weight: 800;
  display: flex;
  flex-direction: column;
}

.timer-unit small {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* activity log styles */
  .page-header {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8e8e8;
  }
  .page-header h1 {
    margin: 0 0 6px;
    font-size: 1.6rem;
    color: #1a1a1a;
  }
  .page-subtitle {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
  }
  .activity-log {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 20px;
  }

  .log-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }

  .log-filter-btn {
    padding: 6px 16px;
    border: 1px solid var(--cr-border);
    background: var(--cr-white);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    color: var(--cr-ink-2);
    transition: all 0.2s;
  }

  .log-filter-btn.active {
    background: var(--cr-red);
    color: var(--cr-white);
    border-color: var(--cr-red);
  }

  .log-entry {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0 20px;
    margin-bottom: 0;
    position: relative;
  }

  .log-entry::before {
    content: '';
    position: absolute;
    left: 139px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--cr-border);
  }

  .log-entry:last-child::before { bottom: 50%; }
  .log-entry:first-child::before { top: 50%; }

  .log-time {
    text-align: right;
    padding: 18px 20px 18px 0;
    font-size: 12px;
    color: var(--cr-ink-3);
    line-height: 1.4;
    position: relative;
  }

  .log-time strong {
    display: block;
    color: var(--cr-black);
    font-size: 13px;
    margin-bottom: 2px;
  }

  .log-dot {
    position: absolute;
    right: -7px;
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--cr-white);
    box-shadow: 0 0 0 2px var(--cr-border);
    background: var(--cr-white);
    z-index: 1;
  }

  .log-dot.flag    { background: var(--cr-red); box-shadow: 0 0 0 2px var(--cr-red); }
  .log-dot.works   { background: #e07b00; box-shadow: 0 0 0 2px #e07b00; }
  .log-dot.clear   { background: #2e7d32; box-shadow: 0 0 0 2px #2e7d32; }
  .log-dot.notify  { background: #1565c0; box-shadow: 0 0 0 2px #1565c0; }

  .log-body {
    padding: 14px 0 14px 20px;
  }

  .log-card {
    background: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color 0.2s;
  }

  .log-card:hover { border-color: var(--cr-ink-3); }

  .log-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 10px;
  }

  .log-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cr-black);
  }

  .log-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .badge-clear    { background: #e8f5e9; color: #2e7d32; }
  .badge-flag     { background: var(--cr-red-tint); color: var(--cr-red); }
  .badge-works    { background: #fff3e0; color: #e07b00; }
  .badge-notify   { background: #e3f0ff; color: #1565c0; }
  .badge-immutable { background: var(--cr-paper); color: var(--cr-ink-3); font-size: 10px; }

  .log-card-detail {
    font-size: 13px;
    color: var(--cr-ink-2);
    line-height: 1.5;
    margin-bottom: 8px;
  }

  .log-card-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--cr-ink-3);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cr-border);
  }

  .log-card-meta span { display: flex; align-items: center; gap: 4px; }

  .log-photo-thumb {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    background: var(--cr-paper);
    border: 1px solid var(--cr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--cr-ink-3);
    margin-top: 8px;
    overflow: hidden;
    cursor: pointer;
  }

  .log-immutable-note {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--cr-ink-3);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .log-section-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--cr-ink-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cr-border);
  }

  @media (max-width: 768px) {
    .activity-log {
      padding: 20px 16px;
    }

    .page-header {
      text-align: left;
    }

    .log-filter-bar {
      justify-content: flex-start;
      gap: 10px;
    }

    .log-filter-btn {
      flex: 1 1 120px;
      min-width: 0;
    }

    .log-entry {
      display: block;
    }

    .log-entry::before {
      display: none;
    }

    .log-time {
      text-align: left;
      padding: 12px 0 8px;
    }

    .log-body {
      padding: 0;
    }

    .log-card {
      margin-top: 12px;
    }

    .log-card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .log-card-meta {
      flex-direction: column;
      gap: 10px;
    }

    .log-photo-thumb {
      width: 100%;
      height: auto;
      min-height: 100px;
    }
  }

  @media (max-width: 480px) {
    .page-header h1 {
      font-size: 1.4rem;
    }

    .log-filter-bar {
      justify-content: stretch;
    }

    .log-filter-btn {
      flex: 1 1 100%;
    }
  }

/* summaery log container */

.summary-log-container {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.summary-log-container h3 {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.summary-item:last-of-type {
  border-bottom: none;
}

/* sticker styles */

.sticker {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 0;
  border-radius: 4px;
  color: #fff;
  width: 75px;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.sticker-red {
  background-color: #df0024;
}  /* urgent */
.sticker-yellow {
  background-color: #fc0;
}  /* warning */
.sticker-green {
  background-color: #2e7d32;
}  /* secure */

.summary-text {
  flex-grow: 1;
}

.summary-text strong {
  display: block;
  font-size: 0.9rem;
  color: #333;
}

.summary-text p {
  font-size: 0.8rem;
  color: #777;
  margin: 2px 0 0 0;
}

.veiw-all-link {
  display: block;
  margin-top: 15px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #df0024;
  text-decoration: none;
  text-align: center;
}

.veiw-all-link:hover {
  text-decoration: underline;
}

/* [PRUNABLE — about-us page rewritten in Phase C rebrand; no template references]

.about-us-overlay {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 8px;
  align-items: center;
}

.about-us-container {
  max-width: 800px;
  margin: 40px auto;
  text-align: center;
  line-height: 1.6;
  border: 2px solid #df0024;
  background-color: transparent;
  color: #111111;
  padding: 40px 20px;
}


.about-mission-title {
   color: #df0024;
   font-weight: 800;
   text-decoration: underline;
}

.about-why-we .problem {
  color: #df0024;
   font-weight: 600;
   text-decoration: underline;
}

.about-why-we .black-box {
  color: #111111;
  font-weight: 600;
}

.about-goal .goal {
  color: #111111;
  font-weight: 600;
  text-decoration: underline;
}

.about-goal .golden {
  color: #B8860B;
  font-weight: 600;
}

.about-vision .vision {
  color: #111111;
  font-weight: 600;
  text-decoration: underline;
}

.how-we-title {
  color: #df0024;
   font-weight: 800;
   text-decoration: underline;
   margin: 0;
}

.how-we-property-agents .property {
 color: #111111;
  font-weight: 600;
  text-decoration: underline;
}

.duty {
   color: #df0024;
   font-weight: 600;
   text-decoration: underline;
}

.how-we-contractors .contractors {
 color: #111111;
  font-weight: 600;
  text-decoration: underline;
}

.how-we-residents .residents {
  color: #111111;
  font-weight: 600;
  text-decoration: underline;
}

.how-you-title {
  color: #df0024;
  font-weight: 800;
  text-decoration: underline;
  margin: 0;
}

.how-you-accuracy .data {
   color: #111111;
  font-weight: 600;
  text-decoration: underline;
}

.how-you-randv .randv {
   color: #111111;
  font-weight: 600;
  text-decoration: underline;
}

.join-statement .pilot {
  color: #df0024;
  font-weight: 600;
  text-decoration: underline;
}

.join-statement {
  font-weight: 500;
}
/* end of about us

start of roadmap*/
/* [PRUNABLE — roadmap, GDPR, case-studies, awaab pages rewritten in Phase C rebrand]
.roadmap-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px;
  row-gap: 48px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px;
}

.roadmap-card {
  padding: 0 10px;
  border: 2px solid #df0024;
  border-radius: 8px;
  background-color: whitesmoke;
  opacity: 0.7;
}

.roadmap-title {
  color: #df0024;
  font-weight: 800;
  text-decoration: underline;
}

.roadmap-description .cleanreports {
  font-weight: bold;
}

.roadmap-description .golden {
  color: #B8860B;
  font-weight: 600;
}

.roadmap-description .compliance {
  color: #df0024;
   font-weight: 600;
   text-decoration: underline;
}

@media (max-width: 600px) {
  .roadmap-container { grid-template-columns: 1fr; }
}

.gdpr-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

@media (max-width: 600px) {
  .gdpr-container { grid-template-columns: 1fr; }
}

.gdpr-statement,
.privacy-policy {
  height: 600px;
  overflow-y: auto;
  padding: 20px;
  border: 2px solid #df0024;
  border-radius: 6px;
  box-shadow: 4px 8x #777;
}

.case-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.study-container {
  display: block;
  border: 2px solid #df0024;
  border-radius: 8px;
  column-gap: 36px;
  row-gap: 48px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 20px;
  text-decoration: none;
  color: inherit;
}

.study-container:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.7);
  cursor: pointer;
}

.study-date {
  font-size: 12px;
  font-weight: 700;
  color: #999;
}

@media (max-width: 600px) {
  .case-container { grid-template-columns: 1fr; }
}

.awaab-study-container {
  max-width: 800px;
  margin: 40px auto;
  text-align: center;
  line-height: 1.6;
  border: 2px solid #df0024;
  background-color: transparent;
  color: #111111;
  padding: 40px 20px;
}
*/

.citation-ref {
        font-size: 0.75em;
        color: #1B7A7A;
        text-decoration: none;
        font-weight: 600;
        margin-left: 1px;
      }
      .citation-ref:hover { text-decoration: underline; }
      .sources h3 {
        font-size: 0.9rem;
        font-weight: 700;
        color: #555;
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .sources-list {
        list-style: decimal;
        padding-left: 1.5rem;
        margin: 0;
        text-align: left;
      }
      .sources-list li {
        font-size: 0.85rem;
        color: #666;
        margin-bottom: 0.5rem;
        line-height: 1.5;
        font-weight: normal;
      }
      .sources-list li a { color: #1B7A7A; text-decoration: none; }
      .sources-list li a:hover { text-decoration: underline; }
      .key-point {
        border-left: 4px solid #1B7A7A;
        padding-left: 1rem;
        color: #1B7A7A;
        font-weight: 600;
        margin-top: 1.5rem;
      }

      /* Log In Styles */

/* [PRUNABLE — login page rewritten in Phase D rebrand with cr-auth-* classes]
.login-container {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: #f4f7f9;
}

.login-card {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 420px;
}

.login-logo {
  height: 45px;
  width: auto;
  display: block;
  margin: 0 auto 16px auto;
}

.login-subtitle {
  color: #666;
  font-size: 0.9rem;
  margin: 0 0 28px 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
*/

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111111;
}

.form-group input {
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: 'Montserrat', sans-serif;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus {
  border-color: #df0024;
}

/* [PRUNABLE — login page rewritten in Phase D rebrand with cr-auth-* classes]
.login-submit-btn {
  background-color: #df0024;
  color: white;
  border: none;
  padding: 14px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-submit-btn:hover {
  background-color: #b0001c;
}

.forgot-password {
  text-align: center;
  font-size: 0.85rem;
  color: #df0024;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}
*/

/* ============================================================
   Print stylesheet — F.7
   Compliance tool: printed audit pages are a real use case.
   ============================================================ */

@media print {
  /* Strip chrome */
  .platform-header,
  .site-header,
  .site-footer,
  .burger-btn,
  .skip-to-content,
  .hero-btn,
  .btn-primary,
  .btn-outline,
  .filter-select,
  .export-pdf-btn,
  .log-filter-bar,
  .back-dashboard-btn {
    display: none !important;
  }

  /* White background, black text throughout */
  body,
  .page-public,
  .page-auth,
  .page-platform {
    background: #ffffff !important;
    color: #111111 !important;
  }

  /* Remove box shadows and borders for cleaner print */
  .card,
  .log-card,
  .building-hero,
  .stat-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  /* Dark hero becomes white on print */
  .building-hero {
    background: #ffffff !important;
    color: #111111 !important;
  }

  .building-hero h1,
  .building-hero p {
    color: #111111 !important;
  }

  /* Show full URLs after links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #666;
  }

  /* Suppress link expansion for nav/button links */
  a[href^="javascript"]::after,
  a[href^="#"]::after,
  .btn-primary[href]::after,
  .btn-outline[href]::after {
    content: "";
  }

  /* Monospaced hash values stay legible */
  .hash-display,
  .hash-value,
  .insp-hash,
  .casc-confirmed-ref,
  .log-immutable-note {
    font-family: 'Courier New', monospace !important;
    font-size: 0.7rem !important;
    word-break: break-all;
  }

  /* Avoid page breaks inside log entries */
  .log-entry,
  .log-card,
  .card {
    page-break-inside: avoid;
  }

  /* Page margins */
  @page {
    margin: 20mm;
  }
}

/* ── Page: coming_soon.html ── */
body.page-coming-soon .coming-soon-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: calc(100vh - 60px);
}
body.page-coming-soon .coming-soon-card {
  background: var(--cr-white);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  max-width: 520px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--cr-border);
}
body.page-coming-soon .version-badge {
  display: inline-block;
  background: var(--cr-black);
  color: var(--cr-red);
  font-size: var(--cr-text-xs);
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
body.page-coming-soon .coming-soon-title {
  font-size: var(--cr-text-2xl);
  font-weight: 800;
  color: var(--cr-black);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
body.page-coming-soon .coming-soon-title span { color: var(--cr-red); }
body.page-coming-soon .coming-soon-desc {
  color: var(--cr-ink-3);
  font-size: var(--cr-text-sm);
  line-height: 1.6;
  margin-bottom: 2rem;
}
body.page-coming-soon .roadmap-items { text-align: left; margin-bottom: 2rem; }
body.page-coming-soon .roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cr-paper);
}
body.page-coming-soon .roadmap-item:last-child { border-bottom: none; }
body.page-coming-soon .roadmap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr-red);
  flex-shrink: 0;
  margin-top: 0.35rem;
}
body.page-coming-soon .roadmap-text { font-size: var(--cr-text-sm); color: var(--cr-ink-2); }
body.page-coming-soon .roadmap-version { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: 0.15rem; }
body.page-coming-soon .back-dashboard-btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--cr-black);
  color: var(--cr-white);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 800;
  font-size: var(--cr-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--cr-transition);
}
body.page-coming-soon .back-dashboard-btn:hover { background: var(--cr-red); }
body.page-coming-soon .consultation-note {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--cr-paper);
  border-radius: 4px;
  font-size: var(--cr-text-xs);
  color: var(--cr-ink-3);
  line-height: 1.5;
}
body.page-coming-soon .consultation-note strong { color: var(--cr-black); }

/* ── Page: verify.html ── */
body.page-verify .verify-card {
  background: var(--cr-white);
  border-radius: 8px;
  padding: var(--cr-space-7) var(--cr-space-6);
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--cr-border);
  text-align: center;
}
body.page-verify .verify-logo {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto var(--cr-space-5) auto;
}
body.page-verify .verify-subtitle {
  color: var(--cr-black);
  font-size: var(--cr-text-base);
  font-weight: 500;
  margin-bottom: var(--cr-space-2);
}
body.page-verify .verify-hint {
  color: var(--cr-ink-3);
  font-size: var(--cr-text-sm);
  margin-bottom: var(--cr-space-6);
  line-height: 1.5;
}
body.page-verify .code-input {
  width: 100%;
  padding: 16px;
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.5rem;
  border: 1px solid var(--cr-border);
  border-radius: 4px;
  margin-bottom: var(--cr-space-5);
  font-family: 'JetBrains Mono', monospace;
  color: var(--cr-black);
  transition: border-color 0.2s;
  outline: none;
}
body.page-verify .code-input:focus { border-color: var(--cr-black); }
body.page-verify .verify-btn {
  width: 100%;
  padding: 14px 28px;
  background: var(--cr-red);
  color: var(--cr-white);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
body.page-verify .verify-btn:hover {
  background: var(--cr-red-deep);
  transform: translateY(-1px);
}
body.page-verify .verify-back {
  display: block;
  text-align: center;
  color: var(--cr-ink-3);
  font-size: var(--cr-text-sm);
  font-weight: 500;
  text-decoration: none;
  margin-top: var(--cr-space-4);
}
body.page-verify .verify-back:hover {
  color: var(--cr-black);
  text-decoration: underline;
}
body.page-verify .error-msg {
  color: var(--cr-red);
  font-size: var(--cr-text-sm);
  margin-top: var(--cr-space-4);
  display: none;
}

/* ── Page: settings.html ── */
body.page-settings .main { max-width: 600px; margin: 2rem auto; padding: 0 2rem; }
body.page-settings .page-title { font-size: var(--cr-text-2xl); font-weight: 800; color: var(--cr-black); letter-spacing: -0.02em; margin-bottom: 0.25rem; }
body.page-settings .page-sub { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-bottom: 2rem; }
body.page-settings .card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: 1.5rem; margin-bottom: 1.5rem; }
body.page-settings .card-title { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); font-weight: 700; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--cr-paper); }
body.page-settings .profile-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
body.page-settings .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--cr-red); display: flex; align-items: center; justify-content: center; color: var(--cr-white); font-weight: 800; font-size: 1.3rem; flex-shrink: 0; }
body.page-settings .profile-name { font-size: 1rem; font-weight: 700; color: var(--cr-black); }
body.page-settings .profile-role { font-size: var(--cr-text-sm); color: var(--cr-red); margin-top: 0.2rem; }
body.page-settings .profile-email { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: 0.2rem; }
body.page-settings .form-group { margin-bottom: 1.25rem; }
body.page-settings .form-group:last-child { margin-bottom: 0; }
body.page-settings label { display: block; font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-ink-2); margin-bottom: 0.4rem; }
body.page-settings input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--cr-border); border-radius: 4px; font-size: var(--cr-text-sm); font-family: 'Montserrat', sans-serif; color: var(--cr-black); }
body.page-settings input:focus { outline: none; border-color: var(--cr-black); }
body.page-settings input:disabled { background: var(--cr-paper); color: var(--cr-ink-3); cursor: not-allowed; }
body.page-settings .save-btn { width: 100%; padding: 0.875rem; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-size: var(--cr-text-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; font-family: 'Montserrat', sans-serif; margin-top: 0.5rem; }
body.page-settings .save-btn:hover { background: var(--cr-red-deep); }
body.page-settings .save-btn:disabled { background: var(--cr-border); color: var(--cr-ink-3); cursor: not-allowed; }
body.page-settings .success-msg { display: none; background: #e8f5e9; border: 1px solid #2e7d32; border-radius: 4px; padding: 0.75rem 1rem; color: #2e7d32; font-size: var(--cr-text-sm); margin-top: 1rem; }
body.page-settings .error-msg { display: none; background: var(--cr-red-tint); border: 1px solid var(--cr-red); border-radius: 4px; padding: 0.75rem 1rem; color: var(--cr-red); font-size: var(--cr-text-sm); margin-top: 1rem; }
body.page-settings .danger-zone { border-color: var(--cr-red-tint); }
body.page-settings .danger-title { color: var(--cr-red); }
body.page-settings .sign-out-btn { width: 100%; padding: 0.875rem; background: var(--cr-white); color: var(--cr-red); border: 2px solid var(--cr-red); border-radius: 4px; font-size: var(--cr-text-sm); font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; }
body.page-settings .sign-out-btn:hover { background: var(--cr-red-tint); }
body.page-settings .password-hint { color: #999; font-size: 0.78rem; margin-top: 0.3rem; display: block; }

/* ── Shared: Platform side nav (dashboard, buildings, inspections, admin, contractor) ── */
.burger-btn { background: none; border: none; color: var(--cr-white); font-size: 1.3rem; cursor: pointer; margin-left: 1rem; padding: 0.2rem 0.5rem; }
.side-nav { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: var(--cr-black); z-index: 1000; transition: right 0.3s ease; display: flex; flex-direction: column; padding: 0; }
.side-nav.open { right: 0; }
.nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; border-bottom: 1px solid #1a2a3a; }
.nav-logo { color: var(--cr-white); font-weight: 800; font-size: 1.1rem; }
.nav-logo-accent { color: var(--cr-red); }
.nav-close { background: none; border: none; color: var(--cr-ink-3); font-size: 1.2rem; cursor: pointer; }
.nav-links { list-style: none; padding: 1rem 0; flex: 1; }
.nav-link { display: block; padding: 0.875rem 1.5rem; color: #aaa; text-decoration: none; font-size: var(--cr-text-sm); transition: background 0.2s; }
.nav-link:hover { background: #1a2a3a; color: var(--cr-white); }
.nav-link.active { color: var(--cr-white); background: #1a2a3a; }
.nav-link.coming-soon { opacity: 0.5; }
.badge { font-size: var(--cr-text-xs); background: #1a3a5c; color: #7eb3e0; padding: 0.1rem 0.4rem; border-radius: 10px; margin-left: 0.5rem; }
.nav-footer { padding: 1.5rem; border-top: 1px solid #1a2a3a; }
.sign-out-btn { width: 100%; padding: 0.75rem; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-size: var(--cr-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; font-family: 'Montserrat', sans-serif; }
.sign-out-btn:hover { background: var(--cr-red-deep); }
.nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
.nav-overlay.open { display: block; }

/* ── Page: dashboard.html ── */
body.page-dashboard .main { max-width: 1100px; margin: 2rem auto; padding: 0 2rem; }
body.page-dashboard .welcome { font-size: var(--cr-text-2xl); font-weight: 800; color: var(--cr-black); letter-spacing: -0.02em; margin-bottom: 0.25rem; }
body.page-dashboard .welcome-sub { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-bottom: 2rem; }
body.page-dashboard .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
body.page-dashboard .card { background: var(--cr-white); border-radius: 8px; padding: 1.5rem; border: 1px solid var(--cr-border); }
body.page-dashboard .card-label { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); margin-bottom: 0.5rem; }
body.page-dashboard .card-value { font-size: 2rem; font-weight: 800; color: var(--cr-black); }
body.page-dashboard .card-value--green { color: #2e7d32; }
body.page-dashboard .card-sub { font-size: var(--cr-text-sm); color: var(--cr-ink-3); margin-top: 0.25rem; }
body.page-dashboard .card-accent { border-top: 3px solid var(--cr-red); }
body.page-dashboard .profile-card { background: var(--cr-white); border-radius: 8px; padding: 2rem; border: 1px solid var(--cr-border); display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
body.page-dashboard .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--cr-red); display: flex; align-items: center; justify-content: center; color: var(--cr-white); font-weight: 800; font-size: 1.5rem; flex-shrink: 0; }
body.page-dashboard .profile-name { font-size: var(--cr-text-xl); font-weight: 700; color: var(--cr-black); }
body.page-dashboard .profile-role { font-size: var(--cr-text-sm); color: var(--cr-red); margin-top: 0.2rem; }
body.page-dashboard .profile-email { font-size: var(--cr-text-sm); color: var(--cr-ink-3); margin-top: 0.2rem; }
body.page-dashboard .activity-log { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); overflow: hidden; }
body.page-dashboard .activity-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-border); font-weight: 600; font-size: var(--cr-text-sm); color: var(--cr-black); }
body.page-dashboard .activity-item { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-paper); display: flex; align-items: center; gap: 1rem; }
body.page-dashboard .activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-red); flex-shrink: 0; }
body.page-dashboard .activity-text { font-size: var(--cr-text-sm); color: var(--cr-ink-2); }
body.page-dashboard .activity-time { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-left: auto; }
body.page-dashboard .hash-display { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--cr-ink-3); background: var(--cr-paper); padding: 0.2rem 0.4rem; border-radius: 3px; }
@media (max-width: 768px) { body.page-dashboard .two-col { grid-template-columns: 1fr; } }

/* ── Page: building_list.html ── */
body.page-building-list .main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 2rem; }
body.page-building-list .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
body.page-building-list .page-title { font-size: var(--cr-text-2xl); font-weight: 800; color: var(--cr-black); letter-spacing: -0.02em; }
body.page-building-list .page-sub { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-top: 0.2rem; }
body.page-building-list .add-building-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-size: var(--cr-text-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; font-family: 'Montserrat', sans-serif; text-decoration: none; }
body.page-building-list .add-building-btn:hover { background: var(--cr-red-deep); }
body.page-building-list .summary-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
body.page-building-list .summary-card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: 1rem 1.25rem; }
body.page-building-list .summary-label { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); margin-bottom: 0.3rem; }
body.page-building-list .summary-value { font-size: 1.75rem; font-weight: 800; color: var(--cr-black); }
body.page-building-list .summary-value--active { color: #2e7d32; font-size: 1.1rem; margin-top: 0.3rem; }
body.page-building-list .buildings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
body.page-building-list .building-card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); overflow: hidden; cursor: pointer; transition: box-shadow 0.2s, transform 0.1s; text-decoration: none; display: block; }
body.page-building-list .building-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
body.page-building-list .card-status-bar { height: 4px; background: #2e7d32; }
body.page-building-list .card-status-bar.amber { background: #f59e0b; }
body.page-building-list .card-status-bar.red { background: var(--cr-red); }
body.page-building-list .card-status-bar.grey { background: var(--cr-border); }
body.page-building-list .card-body { padding: 1.25rem; }
body.page-building-list .building-name { font-size: 1rem; font-weight: 700; color: var(--cr-black); margin-bottom: 0.25rem; }
body.page-building-list .building-address { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-bottom: 1rem; }
body.page-building-list .card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
body.page-building-list .meta-label { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cr-ink-3); margin-bottom: 0.15rem; }
body.page-building-list .meta-value { font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-ink-2); }
body.page-building-list .card-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; background: var(--cr-paper); border-top: 1px solid var(--cr-border); }
body.page-building-list .card-footer-text { font-size: var(--cr-text-xs); color: var(--cr-ink-3); }
body.page-building-list .card-arrow { color: var(--cr-red); font-size: 1rem; }
body.page-building-list .empty-state { text-align: center; padding: 4rem 2rem; color: var(--cr-ink-3); grid-column: 1/-1; }
body.page-building-list .empty-icon { font-size: 3rem; margin-bottom: 1rem; }
body.page-building-list .empty-title { font-size: 1.1rem; font-weight: 600; color: var(--cr-ink-2); margin-bottom: 0.5rem; }
body.page-building-list .loading-card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: 1.25rem; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
body.page-building-list .loading-line { height: 12px; background: var(--cr-paper); border-radius: 4px; margin-bottom: 8px; }
body.page-building-list .loading-line.short { width: 60%; }
@media (max-width: 600px) {
  body.page-building-list .main { padding: 1rem; }
  body.page-building-list .buildings-grid { grid-template-columns: 1fr; }
  body.page-building-list .summary-bar { grid-template-columns: 1fr 1fr; }
}

/* ── Page: inspections.html ── */
body.page-inspections .main { max-width: 1100px; margin: 2rem auto; padding: 0 2rem; }
body.page-inspections .page-title { font-size: var(--cr-text-2xl); font-weight: 800; color: var(--cr-black); letter-spacing: -0.02em; margin-bottom: 0.25rem; }
body.page-inspections .page-sub { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-bottom: 2rem; }
body.page-inspections .filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
body.page-inspections .filter-select { padding: 0.5rem 1rem; border: 1px solid var(--cr-border); border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: var(--cr-text-sm); background: var(--cr-white); color: var(--cr-black); cursor: pointer; }
body.page-inspections .filter-select:focus { outline: none; border-color: var(--cr-black); }
body.page-inspections .inspections-table { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); overflow: hidden; }
body.page-inspections .table-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-border); display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr 2fr; gap: 1rem; font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); font-weight: 700; }
body.page-inspections .table-row { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-paper); display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr 2fr; gap: 1rem; align-items: center; transition: background 0.15s; }
body.page-inspections .table-row:hover { background: var(--cr-paper); }
body.page-inspections .table-row:last-child { border-bottom: none; }
body.page-inspections .building-name { font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-black); }
body.page-inspections .building-address { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: 0.1rem; }
body.page-inspections .timestamp { font-size: var(--cr-text-sm); color: var(--cr-ink-2); }
body.page-inspections .timestamp-time { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: 0.1rem; }
body.page-inspections .operative { font-size: var(--cr-text-sm); color: var(--cr-ink-2); }
body.page-inspections .hash-display { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--cr-ink-3); background: var(--cr-paper); padding: 0.2rem 0.4rem; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
body.page-inspections .status-badge { font-size: var(--cr-text-xs); font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; display: inline-block; }
body.page-inspections .status-complete { background: #e8f5e9; color: #2e7d32; }
body.page-inspections .status-draft { background: #fef3c7; color: #92400e; }
body.page-inspections .status-flagged { background: var(--cr-red-tint); color: var(--cr-red); }
body.page-inspections .status-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
body.page-inspections .status-tag { font-size: 0.6rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 10px; display: inline-block; }
body.page-inspections .tag-access { background: #fef3c7; color: #92400e; }
body.page-inspections .tag-issue { background: #fecaca; color: #991b1b; }
body.page-inspections .empty-state { padding: 4rem 2rem; text-align: center; color: var(--cr-ink-3); }
body.page-inspections .empty-icon { font-size: 3rem; margin-bottom: 1rem; }
body.page-inspections .empty-title { font-size: 1.1rem; font-weight: 600; color: var(--cr-ink-2); margin-bottom: 0.5rem; }
body.page-inspections .empty-sub { font-size: var(--cr-text-sm); }
body.page-inspections .loading { padding: 2rem; text-align: center; color: var(--cr-ink-3); font-size: var(--cr-text-sm); }
body.page-inspections .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
body.page-inspections .summary-card { background: var(--cr-white); border-radius: 8px; padding: 1.25rem 1.5rem; border: 1px solid var(--cr-border); border-top: 3px solid var(--cr-red); }
body.page-inspections .summary-label { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); margin-bottom: 0.4rem; }
body.page-inspections .summary-value { font-size: 1.75rem; font-weight: 800; color: var(--cr-black); }
body.page-inspections .export-pdf-btn { padding: 0.5rem 1.2rem; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: var(--cr-text-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; margin: 1rem 1.5rem 1.5rem; display: block; }
body.page-inspections .export-pdf-btn:hover { background: var(--cr-red-deep); }
@media (max-width: 768px) {
  body.page-inspections .table-header { display: none; }
  body.page-inspections .table-row { grid-template-columns: 1fr; gap: 0.5rem; }
  body.page-inspections .hash-display { max-width: 100%; }
}

/* ── Page: contractor_dashboard.html ── */
body.page-contractor-dashboard .main { max-width: 560px; margin: 0 auto; padding: 1.5rem 1.25rem; }
body.page-contractor-dashboard .loading { text-align: center; padding: 4rem 1rem; color: var(--cr-ink-3); font-size: var(--cr-text-sm); }
body.page-contractor-dashboard .error-card { background: var(--cr-red-tint); border: 1px solid #ffcdd2; border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--cr-red); }
body.page-contractor-dashboard .greeting { font-size: 1.1rem; font-weight: 700; color: var(--cr-black); margin-bottom: 0.25rem; }
body.page-contractor-dashboard .greeting-sub { font-size: var(--cr-text-sm); color: var(--cr-ink-3); margin-bottom: 1.75rem; }
body.page-contractor-dashboard .resume-card { background: var(--cr-white); border-radius: 8px; border: 2px solid var(--cr-black); padding: 1.5rem; margin-bottom: 1.25rem; }
body.page-contractor-dashboard .resume-label { font-size: var(--cr-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #f59e0b; margin-bottom: 0.75rem; }
body.page-contractor-dashboard .resume-building { font-size: 1.25rem; font-weight: 700; color: var(--cr-black); margin-bottom: 0.25rem; }
body.page-contractor-dashboard .resume-address { font-size: var(--cr-text-sm); color: var(--cr-ink-3); margin-bottom: 1rem; }
body.page-contractor-dashboard .progress-bar-wrap { background: var(--cr-paper); border-radius: 99px; height: 6px; margin-bottom: 0.5rem; }
body.page-contractor-dashboard .progress-bar-fill { background: var(--cr-black); border-radius: 99px; height: 6px; transition: width 0.3s; }
body.page-contractor-dashboard .progress-label { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-bottom: 1.25rem; }
body.page-contractor-dashboard .resume-started { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-bottom: 1.5rem; }
body.page-contractor-dashboard .btn-primary { display: block; width: 100%; padding: 1rem; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 800; cursor: pointer; text-align: center; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; }
body.page-contractor-dashboard .btn-primary:hover { background: var(--cr-red-deep); }
body.page-contractor-dashboard .btn-primary:active { background: var(--cr-red-deep); }
body.page-contractor-dashboard .building-card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: 1.5rem; margin-bottom: 1rem; cursor: pointer; }
body.page-contractor-dashboard .building-card.primary { border: 2px solid var(--cr-red); }
body.page-contractor-dashboard .building-tag { font-size: var(--cr-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-red); margin-bottom: 0.75rem; }
body.page-contractor-dashboard .building-name { font-size: 1.2rem; font-weight: 700; color: var(--cr-black); margin-bottom: 0.2rem; }
body.page-contractor-dashboard .building-address { font-size: var(--cr-text-sm); color: var(--cr-ink-3); margin-bottom: 1.25rem; }
body.page-contractor-dashboard .building-buid { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-bottom: 1.25rem; }
body.page-contractor-dashboard .section-label { font-size: var(--cr-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); margin: 1.5rem 0 0.75rem; }
body.page-contractor-dashboard .btn-secondary { display: block; width: 100%; padding: 0.875rem; background: var(--cr-white); color: var(--cr-black); border: 1px solid var(--cr-border); border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: var(--cr-text-sm); font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; margin-top: 0.75rem; }
body.page-contractor-dashboard .btn-secondary:hover { border-color: var(--cr-black); }

/* ── Page: admin_dashboard.html ── */
body.page-admin-dashboard .admin-logo-group { display: flex; align-items: center; }
body.page-admin-dashboard .admin-badge { background: var(--cr-red); color: var(--cr-white); font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; margin-left: 0.5rem; letter-spacing: 0.5px; }
body.page-admin-dashboard .main { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
body.page-admin-dashboard .page-title { font-size: var(--cr-text-2xl); font-weight: 800; color: var(--cr-black); letter-spacing: -0.02em; margin-bottom: 0.25rem; }
body.page-admin-dashboard .page-sub { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-bottom: 2rem; }
body.page-admin-dashboard .onboard-btn { display: inline-block; margin-bottom: 1.5rem; padding: 0.75rem 1.5rem; background: var(--cr-red); color: var(--cr-white); border-radius: 4px; font-weight: 800; font-size: var(--cr-text-sm); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; }
body.page-admin-dashboard .onboard-btn:hover { background: var(--cr-red-deep); }
body.page-admin-dashboard .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
body.page-admin-dashboard .stat-card { background: var(--cr-white); border: 1px solid var(--cr-border); border-radius: 8px; padding: 1.25rem; }
body.page-admin-dashboard .stat-label { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); margin-bottom: 0.5rem; }
body.page-admin-dashboard .stat-value { font-size: 2rem; font-weight: 800; color: var(--cr-black); }
body.page-admin-dashboard .stat-sub { font-size: var(--cr-text-sm); color: var(--cr-ink-3); margin-top: 0.25rem; }
body.page-admin-dashboard .stat-card.red { border-top: 3px solid var(--cr-red); }
body.page-admin-dashboard .stat-card.blue { border-top: 3px solid #1a6ab5; }
body.page-admin-dashboard .stat-card.green { border-top: 3px solid #2e7d32; }
body.page-admin-dashboard .stat-card.amber { border-top: 3px solid #f59e0b; }
body.page-admin-dashboard .stat-card.purple { border-top: 3px solid #7c3aed; }
body.page-admin-dashboard .stat-card.teal { border-top: 3px solid #0d9488; }
body.page-admin-dashboard .section-label { font-size: var(--cr-text-xs); font-weight: 700; color: var(--cr-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
body.page-admin-dashboard .data-table { background: var(--cr-white); border: 1px solid var(--cr-border); border-radius: 8px; overflow: hidden; margin-bottom: 2rem; }
body.page-admin-dashboard .table-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-border); display: flex; justify-content: space-between; align-items: center; }
body.page-admin-dashboard .table-title { font-weight: 600; font-size: var(--cr-text-sm); color: var(--cr-black); }
body.page-admin-dashboard .table-meta { font-size: var(--cr-text-xs); color: var(--cr-ink-3); }
body.page-admin-dashboard .table-row { padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--cr-paper); display: flex; align-items: center; gap: 1rem; }
body.page-admin-dashboard .table-row:last-child { border-bottom: none; }
body.page-admin-dashboard .row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
body.page-admin-dashboard .dot-red { background: var(--cr-red); }
body.page-admin-dashboard .dot-green { background: #2e7d32; }
body.page-admin-dashboard .dot-blue { background: #1a6ab5; }
body.page-admin-dashboard .dot-amber { background: #f59e0b; }
body.page-admin-dashboard .row-main { font-size: var(--cr-text-sm); color: var(--cr-ink-2); }
body.page-admin-dashboard .row-sub { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: 0.2rem; }
body.page-admin-dashboard .row-time { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-left: auto; white-space: nowrap; }
body.page-admin-dashboard .hash-display { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--cr-ink-3); background: var(--cr-paper); padding: 0.2rem 0.4rem; border-radius: 3px; }
body.page-admin-dashboard .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
body.page-admin-dashboard .health-item { padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--cr-paper); display: flex; justify-content: space-between; align-items: center; }
body.page-admin-dashboard .health-item:last-child { border-bottom: none; }
body.page-admin-dashboard .health-label { font-size: var(--cr-text-sm); color: var(--cr-ink-2); }
body.page-admin-dashboard .health-status { font-size: var(--cr-text-xs); font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; }
body.page-admin-dashboard .status-ok { background: #e8f5e9; color: #2e7d32; }
body.page-admin-dashboard .status-warn { background: #fff8e1; color: #f59e0b; }
body.page-admin-dashboard .status-error { background: var(--cr-red-tint); color: var(--cr-red); }
@media (max-width: 768px) { body.page-admin-dashboard .two-col { grid-template-columns: 1fr; } }

/* ── Page: password_reset.html ── */
body.page-password-reset .card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: var(--cr-space-7) var(--cr-space-6); width: 100%; max-width: 420px; }
body.page-password-reset .logo { height: 40px; width: auto; display: block; margin: 0 auto var(--cr-space-5) auto; }
body.page-password-reset .subtitle { color: var(--cr-ink-3); font-size: var(--cr-text-sm); line-height: 1.5; margin-bottom: var(--cr-space-6); text-align: center; }
body.page-password-reset .form-group { margin-bottom: var(--cr-space-5); }
body.page-password-reset label { display: block; font-size: var(--cr-text-sm); font-weight: 500; color: var(--cr-black); margin-bottom: 6px; }
body.page-password-reset input { width: 100%; padding: 12px 16px; border: 1px solid var(--cr-border); border-radius: 4px; font-size: var(--cr-text-base); font-family: 'Montserrat', sans-serif; color: var(--cr-black); outline: none; transition: border-color 0.2s; }
body.page-password-reset input:focus { border-color: var(--cr-black); }
body.page-password-reset .btn { width: 100%; padding: 14px 28px; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-size: 14px; font-weight: 800; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; margin-top: var(--cr-space-3); transition: background 0.2s, transform 0.1s; }
body.page-password-reset .btn:hover { background: var(--cr-red-deep); transform: translateY(-1px); }
body.page-password-reset .btn:disabled { background: var(--cr-border); color: var(--cr-ink-3); cursor: not-allowed; transform: none; }
body.page-password-reset .success-msg { display: none; background: #f0f7f0; border: 1px solid #2e7d32; border-radius: 4px; padding: var(--cr-space-3) var(--cr-space-4); color: #2e7d32; font-size: var(--cr-text-sm); margin-top: var(--cr-space-4); line-height: 1.5; }
body.page-password-reset .error-msg { display: none; background: var(--cr-red-tint); border: 1px solid var(--cr-red); border-radius: 4px; padding: var(--cr-space-3) var(--cr-space-4); color: var(--cr-red); font-size: var(--cr-text-sm); margin-top: var(--cr-space-4); }
body.page-password-reset .back-link { display: block; text-align: center; margin-top: var(--cr-space-5); color: var(--cr-ink-3); font-size: var(--cr-text-sm); font-weight: 500; text-decoration: none; }
body.page-password-reset .back-link:hover { color: var(--cr-black); text-decoration: underline; }
body.page-password-reset .hint { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: var(--cr-space-1); }
body.page-password-reset .reset-success-link { color: #2e7d32; font-weight: 600; }

/* ── Page: invite.html ── */
/* Shares cr-auth-* classes with login.html — only invite-specific rules here */
body.page-invite .cr-auth-hint { font-size: 0.875rem; color: var(--cr-ink-3); margin-bottom: var(--cr-space-4); text-align: center; line-height: 1.5; }
body.page-invite .cr-input-readonly { background: var(--cr-background); color: var(--cr-ink-3); cursor: default; }
body.page-invite .cr-auth-error { display: block; color: var(--cr-red); font-size: 0.875rem; min-height: 1.25rem; text-align: center; margin-top: var(--cr-space-2); }

/* ── Page: onboard.html ── */
body.page-onboard .onboard-main { max-width: 700px; margin: 2rem auto; padding: 0 2rem; }
body.page-onboard .page-title { font-size: var(--cr-text-2xl); font-weight: 800; color: var(--cr-black); margin-bottom: 0.25rem; letter-spacing: -0.02em; }
body.page-onboard .page-sub { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-bottom: var(--cr-space-6); }
body.page-onboard .section { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: var(--cr-space-6); margin-bottom: var(--cr-space-5); }
body.page-onboard .section-title { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--cr-ink-3); margin-bottom: var(--cr-space-5); padding-bottom: var(--cr-space-4); border-bottom: 1px solid var(--cr-border); font-weight: 500; }
body.page-onboard .section-title-note { font-weight: 400; color: var(--cr-ink-3); font-size: 0.85rem; text-transform: none; letter-spacing: 0; }
body.page-onboard .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cr-space-4); }
body.page-onboard .form-group { margin-bottom: var(--cr-space-4); }
body.page-onboard .form-group:last-child { margin-bottom: 0; }
body.page-onboard label { display: block; font-size: var(--cr-text-sm); font-weight: 500; color: var(--cr-black); margin-bottom: 6px; }
body.page-onboard input, body.page-onboard select { width: 100%; padding: 12px 16px; border: 1px solid var(--cr-border); border-radius: 4px; font-size: var(--cr-text-sm); font-family: 'Montserrat', sans-serif; color: var(--cr-black); background: var(--cr-white); outline: none; transition: border-color 0.2s; }
body.page-onboard input:focus, body.page-onboard select:focus { border-color: var(--cr-black); }
body.page-onboard #org-postcode, body.page-onboard #building-postcode { text-transform: uppercase; }
body.page-onboard .required { color: var(--cr-red); }
body.page-onboard .hint { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: var(--cr-space-1); }
body.page-onboard .submit-btn { width: 100%; padding: 14px 28px; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-size: 14px; font-weight: 800; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: var(--cr-space-3); }
body.page-onboard .submit-btn:hover { background: var(--cr-red-deep); transform: translateY(-1px); }
body.page-onboard .submit-btn:disabled { background: var(--cr-border); color: var(--cr-ink-3); cursor: not-allowed; transform: none; }
body.page-onboard .success-msg { display: none; background: #f0f7f0; border: 1px solid #2e7d32; border-radius: 8px; padding: var(--cr-space-6); margin-top: var(--cr-space-5); }
body.page-onboard .success-title { font-size: var(--cr-text-base); font-weight: 700; color: #2e7d32; margin-bottom: var(--cr-space-4); }
body.page-onboard .success-detail { font-size: var(--cr-text-sm); color: var(--cr-ink-2); margin-bottom: 0.4rem; }
body.page-onboard .success-detail strong { color: var(--cr-black); }
body.page-onboard .success-detail--header { font-weight: 600; margin-bottom: 0.5rem; }
body.page-onboard .success-detail--note { color: var(--cr-ink-3); margin-top: 0.5rem; }
body.page-onboard .success-creds { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #c8e6c9; }
body.page-onboard .error-msg { display: none; background: var(--cr-red-tint); border: 1px solid var(--cr-red); border-radius: 4px; padding: var(--cr-space-3) var(--cr-space-4); color: var(--cr-red); font-size: var(--cr-text-sm); margin-top: var(--cr-space-4); }
body.page-onboard .checklist { margin-top: var(--cr-space-4); }
body.page-onboard .check-item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--cr-text-sm); color: var(--cr-ink-2); margin-bottom: 0.4rem; }
body.page-onboard .check-item strong { margin-left: 0.3rem; }
body.page-onboard .check-item--warn { color: #f59e0b; }
body.page-onboard .check-icon { color: #2e7d32; font-weight: 700; }
body.page-onboard .admin-badge { background: var(--cr-red-tint); color: var(--cr-red); font-size: var(--cr-text-xs); font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 10px; margin-left: 0.5rem; }
body.page-onboard .postcode-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: end; }
body.page-onboard .lookup-btn { padding: 12px 16px; background: var(--cr-black); color: var(--cr-white); border: none; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: var(--cr-text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
body.page-onboard .lookup-btn:hover { background: var(--cr-ink-2); }
body.page-onboard .lookup-result { font-size: var(--cr-text-xs); margin-top: var(--cr-space-1); display: none; }
body.page-onboard .lookup-success { color: #2e7d32; }
body.page-onboard .lookup-error { color: var(--cr-red); }
@media (max-width: 600px) { body.page-onboard .form-row { grid-template-columns: 1fr; } }

/* ── Page: task_form.html ── */
body.page-task .main { max-width: 600px; margin: 0 auto; padding: 1.5rem; }
body.page-task .page-title { font-size: var(--cr-text-2xl); font-weight: 800; color: var(--cr-black); letter-spacing: -0.02em; margin-bottom: 0.25rem; }
body.page-task .page-sub { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-bottom: 1.5rem; }
body.page-task .form-card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: 1.5rem; margin-bottom: 1rem; }
body.page-task .form-section-title { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--cr-paper); }
body.page-task .form-group { margin-bottom: 1.25rem; }
body.page-task .form-group:last-child { margin-bottom: 0; }
body.page-task label { display: block; font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-ink-2); margin-bottom: 0.4rem; }
body.page-task .label-optional { color: #999; font-weight: 400; }
body.page-task .required { color: var(--cr-red); }
body.page-task input, body.page-task select, body.page-task textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--cr-border); border-radius: 4px; font-size: var(--cr-text-sm); font-family: 'Montserrat', sans-serif; color: var(--cr-black); background: var(--cr-white); transition: border-color 0.2s; }
body.page-task input:focus, body.page-task select:focus, body.page-task textarea:focus { outline: none; border-color: var(--cr-black); }
body.page-task textarea { resize: vertical; min-height: 100px; }
body.page-task .radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
body.page-task .radio-option { border: 2px solid var(--cr-border); border-radius: 4px; padding: 0.75rem; cursor: pointer; text-align: center; font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-ink-3); transition: all 0.2s; }
body.page-task .radio-option.selected-pass { border-color: #2e7d32; background: #e8f5e9; color: #2e7d32; }
body.page-task .radio-option.selected-fail { border-color: var(--cr-red); background: var(--cr-red-tint); color: var(--cr-red); }
body.page-task .radio-option.selected-advisory { border-color: #f59e0b; background: #fff8e1; color: #f59e0b; }
body.page-task .radio-option.selected-na { border-color: var(--cr-ink-3); background: var(--cr-paper); color: var(--cr-ink-3); }
body.page-task #confirm-btn { text-align: left; padding: 0.875rem 1rem; }
body.page-task .timestamp-display { background: var(--cr-paper); border: 1px solid var(--cr-border); border-radius: 4px; padding: 0.75rem 1rem; font-size: var(--cr-text-sm); color: var(--cr-ink-2); font-family: 'JetBrains Mono', monospace; }
body.page-task .submit-btn { width: 100%; padding: 1rem; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 4px; font-size: 1rem; font-weight: 800; cursor: pointer; font-family: 'Montserrat', sans-serif; margin-top: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
body.page-task .submit-btn:hover { background: var(--cr-red-deep); }
body.page-task .submit-btn:disabled { background: var(--cr-border); color: var(--cr-ink-3); cursor: not-allowed; }
body.page-task .success-card { display: none; background: var(--cr-white); border-radius: 8px; border: 2px solid #2e7d32; padding: 2rem; text-align: center; margin-top: 1rem; }
body.page-task .success-icon { font-size: 2.5rem; margin-bottom: 1rem; }
body.page-task .success-title { font-size: 1.2rem; font-weight: 700; color: #2e7d32; margin-bottom: 0.5rem; }
body.page-task .success-desc { color: #666; font-size: 0.9rem; }
body.page-task .success-hash { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--cr-ink-3); background: var(--cr-paper); padding: 0.5rem; border-radius: 4px; word-break: break-all; margin-top: 1rem; }
body.page-task .new-task-btn { display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem; background: var(--cr-black); color: var(--cr-white); border: none; border-radius: 4px; font-size: var(--cr-text-sm); font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; text-decoration: none; }
body.page-task .new-task-btn--red { display: inline-block; margin-left: 0.5rem; background: var(--cr-red); text-decoration: none; }
body.page-task .photo-btn { width: 100%; padding: 0.875rem; border: 2px dashed var(--cr-border); border-radius: 4px; background: var(--cr-paper); color: var(--cr-ink-3); font-size: var(--cr-text-sm); cursor: pointer; font-family: 'Montserrat', sans-serif; transition: border-color 0.2s; }
body.page-task .photo-btn:hover { border-color: var(--cr-red); color: var(--cr-red); }
body.page-task #video-btn { margin-top: 0.5rem; }
body.page-task .media-container { display: flex; flex-direction: column; }
body.page-task .photo-preview { display: none; margin-top: 0.75rem; }
body.page-task .preview-img { width: 100%; border-radius: 6px; max-height: 200px; object-fit: cover; }
body.page-task .remove-media-btn { margin-top: 0.5rem; background: none; border: none; color: var(--cr-red); font-size: 0.85rem; cursor: pointer; }
body.page-task .video-preview { display: none; margin-top: 0.75rem; }
body.page-task .preview-video { width: 100%; border-radius: 6px; max-height: 200px; }
body.page-task .video-filename { font-size: 0.8rem; color: #666; margin-top: 0.4rem; }

/* ── Page: building_detail.html ── */
body.page-building-detail .building-hero { background: var(--cr-black); padding: 1.5rem 2rem; border-bottom: 3px solid var(--cr-red); }
body.page-building-detail .hero-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
body.page-building-detail .building-title { font-size: 1.6rem; font-weight: 800; color: var(--cr-white); margin-bottom: 0.25rem; letter-spacing: -0.02em; }
body.page-building-detail .building-address { color: var(--cr-ink-3); font-size: var(--cr-text-sm); margin-bottom: 0.5rem; }
body.page-building-detail .building-ref { color: var(--cr-red); font-size: var(--cr-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
body.page-building-detail .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
body.page-building-detail .hero-btn { padding: 0.65rem 1.25rem; border-radius: 4px; font-size: var(--cr-text-sm); font-weight: 800; cursor: pointer; font-family: 'Montserrat', sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; }
body.page-building-detail .btn-primary { background: var(--cr-red); color: var(--cr-white); border: none; }
body.page-building-detail .btn-primary:hover { background: var(--cr-red-deep); }
body.page-building-detail .btn-outline { background: transparent; color: var(--cr-white); border: 1px solid rgba(255,255,255,0.35); }
body.page-building-detail .btn-outline:hover { border-color: var(--cr-white); background: rgba(255,255,255,0.05); }
body.page-building-detail .main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 2rem; }
body.page-building-detail .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
body.page-building-detail .stat-card { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); padding: 1rem 1.25rem; }
body.page-building-detail .stat-label { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); margin-bottom: 0.3rem; }
body.page-building-detail .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--cr-black); }
body.page-building-detail .stat-value--sm { font-size: 1rem; margin-top: 0.3rem; }
body.page-building-detail .stat-value--green { color: #2e7d32; }
body.page-building-detail .stat-sub { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: 0.2rem; }
body.page-building-detail .section { background: var(--cr-white); border-radius: 8px; border: 1px solid var(--cr-border); margin-bottom: 1.5rem; overflow: hidden; }
body.page-building-detail .section-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-border); display: flex; align-items: center; justify-content: space-between; }
body.page-building-detail .section-title { font-size: var(--cr-text-sm); font-weight: 700; color: var(--cr-black); display: flex; align-items: center; gap: 0.5rem; }
body.page-building-detail .section-action { font-size: var(--cr-text-xs); color: var(--cr-red); text-decoration: none; cursor: pointer; background: none; border: none; font-family: 'Montserrat', sans-serif; font-weight: 700; }
body.page-building-detail .sib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
body.page-building-detail .sib-item { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-paper); border-right: 1px solid var(--cr-paper); }
body.page-building-detail .sib-item:nth-child(even) { border-right: none; }
body.page-building-detail .sib-item--full { grid-column: 1/-1; }
body.page-building-detail .sib-label { font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cr-ink-3); margin-bottom: 0.4rem; }
body.page-building-detail .sib-value { font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-black); }
body.page-building-detail .sib-verified { font-size: var(--cr-text-xs); color: #2e7d32; margin-top: 0.2rem; }
body.page-building-detail .sib-unset { font-size: var(--cr-text-sm); color: var(--cr-border); font-style: italic; }
body.page-building-detail .status-pill { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: var(--cr-text-xs); font-weight: 700; }
body.page-building-detail .pill-green { background: #e8f5e9; color: #2e7d32; }
body.page-building-detail .pill-amber { background: #fff8e1; color: #f59e0b; }
body.page-building-detail .pill-red { background: var(--cr-red-tint); color: var(--cr-red); }
body.page-building-detail .pill-grey { background: var(--cr-paper); color: var(--cr-ink-3); }
body.page-building-detail .inspection-row { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-paper); display: flex; align-items: center; gap: 1rem; }
body.page-building-detail .inspection-row:last-child { border-bottom: none; }
body.page-building-detail .insp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-red); flex-shrink: 0; }
body.page-building-detail .insp-main { flex: 1; }
body.page-building-detail .insp-title { font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-black); }
body.page-building-detail .insp-hash { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--cr-ink-3); background: var(--cr-paper); padding: 0.1rem 0.3rem; border-radius: 3px; margin-top: 0.15rem; display: inline-block; }
body.page-building-detail .insp-time { font-size: var(--cr-text-xs); color: var(--cr-ink-3); white-space: nowrap; }
body.page-building-detail .asset-row { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-paper); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.page-building-detail .asset-row:last-child { border-bottom: none; }
body.page-building-detail .asset-name { font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-black); }
body.page-building-detail .asset-type { font-size: var(--cr-text-xs); color: var(--cr-ink-3); margin-top: 0.15rem; }
body.page-building-detail .asset-due { font-size: var(--cr-text-xs); text-align: right; }
body.page-building-detail .asset-due--overdue { color: #df0024; }
body.page-building-detail .asset-due--due-soon { color: #f59e0b; }
body.page-building-detail .asset-due--scheduled { color: #2e7d32; }
body.page-building-detail .asset-due--unknown { color: #999; }
body.page-building-detail .asset-due-label { font-weight: 700; }
body.page-building-detail .rp-row { padding: 1rem 1.5rem; border-bottom: 1px solid var(--cr-paper); display: flex; align-items: center; gap: 1rem; }
body.page-building-detail .rp-row:last-child { border-bottom: none; }
body.page-building-detail .rp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cr-black); display: flex; align-items: center; justify-content: center; color: var(--cr-white); font-size: 0.8rem; font-weight: 700; flex-shrink: 0; }
body.page-building-detail .rp-name { font-size: var(--cr-text-sm); font-weight: 600; color: var(--cr-black); }
body.page-building-detail .rp-role { font-size: var(--cr-text-xs); color: var(--cr-ink-3); }
body.page-building-detail .rp-contact { font-size: var(--cr-text-xs); color: var(--cr-red); margin-left: auto; }
body.page-building-detail .empty-section { padding: 2rem; text-align: center; color: var(--cr-ink-3); font-size: var(--cr-text-sm); }
body.page-building-detail .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) {
  body.page-building-detail .building-hero { padding: 1.25rem 1rem; }
  body.page-building-detail .main { padding: 1rem; }
  body.page-building-detail .sib-grid { grid-template-columns: 1fr; }
  body.page-building-detail .sib-item { border-right: none; }
  body.page-building-detail .two-col { grid-template-columns: 1fr; }
  body.page-building-detail .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ── Page: inspection_capture.html ── */
body.page-inspection-capture { padding-bottom: 140px; }
body.page-inspection-capture * { -webkit-tap-highlight-color: transparent; }
body.page-inspection-capture .header { background: var(--cr-black); height: 56px; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 200; }
body.page-inspection-capture .logo { height: 38px; width: auto; display: block; }
body.page-inspection-capture .save-indicator { font-size: 0.78rem; color: var(--cr-ink-3); min-width: 60px; text-align: right; }
body.page-inspection-capture .save-indicator.saving { color: #f59e0b; }
body.page-inspection-capture .save-indicator.saved  { color: #4caf50; }
body.page-inspection-capture .save-indicator.error  { color: var(--cr-red); }
body.page-inspection-capture .progress-wrap { background: var(--cr-black); padding: 0 1.25rem 0.75rem; position: sticky; top: 56px; z-index: 190; }
body.page-inspection-capture .progress-track { background: #1a2a3a; border-radius: 99px; height: 4px; }
body.page-inspection-capture .progress-fill  { background: var(--cr-red); border-radius: 99px; height: 4px; transition: width 0.3s; }
body.page-inspection-capture .progress-label { color: var(--cr-ink-3); font-size: 0.75rem; margin-top: 0.4rem; }
body.page-inspection-capture .main { max-width: 560px; margin: 0 auto; padding: 1.25rem; }
body.page-inspection-capture .loading { text-align: center; padding: 4rem 1rem; color: var(--cr-ink-3); }
body.page-inspection-capture .area-header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.25rem; }
body.page-inspection-capture .area-name { font-size: 1.4rem; font-weight: 800; color: var(--cr-black); }
body.page-inspection-capture .area-counter { font-size: 0.85rem; color: var(--cr-ink-3); white-space: nowrap; }
body.page-inspection-capture .area-req-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cr-red); margin-bottom: 0.5rem; }
body.page-inspection-capture .toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
body.page-inspection-capture .toggle-btn { padding: 1.1rem 0.5rem; border: 2px solid var(--cr-border); border-radius: 10px; background: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--cr-ink-3); cursor: pointer; transition: all 0.15s; text-align: center; }
body.page-inspection-capture .toggle-btn:active { transform: scale(0.97); }
body.page-inspection-capture .toggle-btn.pass      { border-color: #2e7d32; background: #e8f5e9; color: #2e7d32; }
body.page-inspection-capture .toggle-btn.attention { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
body.page-inspection-capture .field-label { font-size: 0.8rem; font-weight: 600; color: var(--cr-ink-3); margin-bottom: 0.4rem; }
body.page-inspection-capture .note-input { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--cr-border); border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; color: var(--cr-black); resize: none; min-height: 90px; background: var(--cr-white); }
body.page-inspection-capture .note-input:focus { outline: none; border-color: var(--cr-black); }
body.page-inspection-capture .photo-section { margin-top: 1rem; }
body.page-inspection-capture .photo-btn { width: 100%; padding: 0.875rem; border: 2px dashed var(--cr-border); border-radius: 8px; background: var(--cr-white); color: var(--cr-ink-3); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; cursor: pointer; transition: border-color 0.2s; text-align: center; }
body.page-inspection-capture .photo-btn:hover { border-color: var(--cr-black); }
body.page-inspection-capture .photo-preview { margin-top: 0.75rem; position: relative; }
body.page-inspection-capture .photo-preview img { width: 100%; border-radius: 8px; max-height: 220px; object-fit: cover; display: block; }
body.page-inspection-capture .photo-remove { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(0,0,0,0.6); color: var(--cr-white); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
body.page-inspection-capture .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--cr-white); border-top: 1px solid var(--cr-border); padding: 0.75rem 1.25rem 1rem; z-index: 200; }
body.page-inspection-capture .bottom-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.6rem; }
body.page-inspection-capture .btn-ghost { padding: 0.6rem 0.5rem; border: 1px solid var(--cr-border); border-radius: 8px; background: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--cr-ink-2); cursor: pointer; text-align: center; }
body.page-inspection-capture .btn-ghost:hover { border-color: var(--cr-black); }
body.page-inspection-capture .btn-ghost.hazard { color: var(--cr-red); border-color: #ffcdd2; background: var(--cr-red-tint); }
body.page-inspection-capture .btn-next { width: 100%; padding: 0.95rem; background: var(--cr-black); color: var(--cr-white); border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; }
body.page-inspection-capture .btn-next:hover { background: #1a2a3a; }
body.page-inspection-capture .btn-complete { width: 100%; padding: 0.95rem; background: var(--cr-red); color: var(--cr-white); border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; margin-bottom: 0.5rem; }
body.page-inspection-capture .btn-complete:disabled { background: var(--cr-border); color: var(--cr-ink-3); cursor: not-allowed; }
body.page-inspection-capture .btn-complete:not(:disabled):hover { background: var(--cr-red-deep); }
body.page-inspection-capture .completion-screen { text-align: center; padding: 3rem 1.5rem; }
body.page-inspection-capture .completion-icon { font-size: 3rem; margin-bottom: 1rem; }
body.page-inspection-capture .completion-title { font-size: 1.4rem; font-weight: 800; color: var(--cr-black); margin-bottom: 0.5rem; }
body.page-inspection-capture .completion-sub { font-size: 0.9rem; color: var(--cr-ink-3); margin-bottom: 1.5rem; }
body.page-inspection-capture .hash-box { background: var(--cr-paper); border: 1px solid var(--cr-border); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; text-align: left; }
body.page-inspection-capture .hash-box--confirmed { margin-bottom: 1rem; }
body.page-inspection-capture .hash-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-ink-3); margin-bottom: 0.4rem; }
body.page-inspection-capture .hash-value { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--cr-ink-2); word-break: break-all; line-height: 1.5; }
body.page-inspection-capture .btn-done { display: block; width: 100%; padding: 1rem; background: var(--cr-black); color: var(--cr-white); border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
body.page-inspection-capture .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 500; align-items: flex-end; justify-content: center; }
body.page-inspection-capture .modal-overlay.open { display: flex; }
body.page-inspection-capture .modal { background: var(--cr-white); border-radius: 16px 16px 0 0; padding: 1.5rem 1.25rem 2rem; width: 100%; max-width: 560px; }
body.page-inspection-capture .modal-title { font-size: 1.1rem; font-weight: 700; color: var(--cr-black); margin-bottom: 1rem; }
body.page-inspection-capture .modal-field { margin-bottom: 1rem; }
body.page-inspection-capture .modal-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--cr-border); border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; }
body.page-inspection-capture .modal-input:focus { outline: none; border-color: var(--cr-black); }
body.page-inspection-capture .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
body.page-inspection-capture .btn-modal-cancel { padding: 0.875rem; border: 1px solid var(--cr-border); border-radius: 8px; background: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
body.page-inspection-capture .btn-modal-save { padding: 0.875rem; border: none; border-radius: 8px; background: var(--cr-black); color: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
body.page-inspection-capture .casc-overlay { display: none; position: fixed; inset: 0; background: var(--cr-paper); z-index: 400; overflow-y: auto; padding-bottom: 100px; }
body.page-inspection-capture .casc-overlay.open { display: block; }
body.page-inspection-capture .casc-header { background: var(--cr-black); height: 56px; padding: 0 0.75rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
body.page-inspection-capture .casc-back { background: none; border: none; color: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0.5rem 0.5rem; min-width: 70px; }
body.page-inspection-capture .casc-title { color: var(--cr-white); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
body.page-inspection-capture .casc-cancel { background: none; border: none; color: var(--cr-ink-3); font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 0.5rem 0.5rem; min-width: 70px; text-align: right; }
body.page-inspection-capture .casc-step-counter { color: var(--cr-ink-3); font-size: 0.78rem; font-weight: 600; }
body.page-inspection-capture .casc-body { max-width: 560px; margin: 0 auto; padding: 1.5rem 1.25rem; }
body.page-inspection-capture .casc-next-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--cr-white); border-top: 1px solid var(--cr-border); padding: 0.75rem 1.25rem 1rem; z-index: 10; }
body.page-inspection-capture .casc-next-btn { width: 100%; padding: 0.95rem; background: var(--cr-black); color: var(--cr-white); border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; }
body.page-inspection-capture .casc-next-btn:disabled { background: var(--cr-border); color: var(--cr-ink-3); cursor: not-allowed; }
body.page-inspection-capture .casc-cats { display: flex; flex-direction: column; gap: 0.75rem; }
body.page-inspection-capture .casc-cat-btn { padding: 1.1rem 1.25rem; border: 2px solid var(--cr-border); border-radius: 12px; background: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--cr-ink-2); cursor: pointer; text-align: left; display: flex; align-items: center; gap: 0.875rem; transition: all 0.15s; }
body.page-inspection-capture .casc-cat-btn:active { transform: scale(0.98); border-color: var(--cr-black); }
body.page-inspection-capture .casc-cat-icon { font-size: 1.4rem; }
body.page-inspection-capture .casc-cat-label { flex: 1; }
body.page-inspection-capture .casc-cat-arrow { color: var(--cr-ink-3); font-size: 1.2rem; }
body.page-inspection-capture .casc-q-text { font-size: 1.15rem; font-weight: 700; color: var(--cr-black); margin-bottom: 0.5rem; line-height: 1.35; }
body.page-inspection-capture .casc-q-text--intro { margin-bottom: 1.25rem; }
body.page-inspection-capture .casc-q-sub { font-size: 0.85rem; color: var(--cr-ink-3); margin-bottom: 1.25rem; line-height: 1.4; }
body.page-inspection-capture .casc-opts { display: flex; flex-direction: column; gap: 0.5rem; }
body.page-inspection-capture .casc-opt { padding: 0.95rem 1.1rem; border: 2px solid var(--cr-border); border-radius: 10px; background: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--cr-ink-2); cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s; }
body.page-inspection-capture .casc-opt:active { transform: scale(0.98); }
body.page-inspection-capture .casc-opt.sel  { border-color: var(--cr-black); background: var(--cr-paper); color: var(--cr-black); }
body.page-inspection-capture .casc-opt.msel { border-color: #1a3a5c; background: #e8f0f8; color: #1a3a5c; }
body.page-inspection-capture .casc-text-input { width: 100%; padding: 0.875rem 1rem; border: 2px solid var(--cr-border); border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; color: var(--cr-black); resize: none; min-height: 120px; background: var(--cr-white); }
body.page-inspection-capture .casc-text-input:focus { outline: none; border-color: var(--cr-black); }
body.page-inspection-capture .casc-safety-warn { background: #fff3cd; border: 1px solid #f59e0b; border-radius: 8px; padding: 0.875rem 1rem; margin-bottom: 1.25rem; font-size: 0.85rem; font-weight: 700; color: #92400e; text-align: center; line-height: 1.4; }
body.page-inspection-capture .casc-photo-btn { width: 100%; padding: 1.4rem; border: 2px dashed var(--cr-border); border-radius: 10px; background: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; color: var(--cr-ink-3); cursor: pointer; text-align: center; margin-bottom: 0.75rem; }
body.page-inspection-capture .casc-skip-photo { width: 100%; padding: 0.75rem; border: 1px solid var(--cr-border); border-radius: 8px; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: var(--cr-ink-3); cursor: pointer; text-align: center; }
body.page-inspection-capture .casc-photo-wrap { position: relative; margin-bottom: 0.75rem; }
body.page-inspection-capture .casc-photo-wrap img { width: 100%; border-radius: 8px; max-height: 200px; object-fit: cover; display: block; }
body.page-inspection-capture .casc-vuln-note { font-size: 0.82rem; color: var(--cr-ink-3); background: var(--cr-paper); padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; line-height: 1.4; }
body.page-inspection-capture .casc-fs-title { font-size: 1.2rem; font-weight: 700; color: var(--cr-red); margin-bottom: 0.75rem; }
body.page-inspection-capture .casc-fs-reassurance { font-size: 0.875rem; color: var(--cr-ink-2); background: var(--cr-paper); padding: 0.875rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; line-height: 1.45; }
body.page-inspection-capture .casc-fs-opts { display: flex; flex-direction: column; gap: 0.75rem; }
body.page-inspection-capture .casc-fs-opt { padding: 1.1rem 1.25rem; border: 2px solid var(--cr-border); border-radius: 10px; background: var(--cr-white); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--cr-ink-2); cursor: pointer; text-align: left; transition: all 0.12s; }
body.page-inspection-capture .casc-fs-opt:active { transform: scale(0.98); }
body.page-inspection-capture .casc-fs-opt.emergency { border-color: var(--cr-red); color: var(--cr-red); background: var(--cr-red-tint); }
body.page-inspection-capture .casc-fs-opt.inspect   { border-color: #1a3a5c; color: #1a3a5c; background: #f0f6ff; }
body.page-inspection-capture .casc-override-icon { font-size: 2.5rem; text-align: center; margin-bottom: 0.75rem; }
body.page-inspection-capture .casc-override-title { font-size: 1.2rem; font-weight: 700; color: var(--cr-red); margin-bottom: 0.75rem; text-align: center; }
body.page-inspection-capture .casc-override-text { font-size: 0.9rem; color: var(--cr-ink-2); margin-bottom: 1.25rem; line-height: 1.5; }
body.page-inspection-capture .casc-override-reassurance { font-size: 0.85rem; color: var(--cr-ink-2); background: var(--cr-paper); padding: 0.875rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; line-height: 1.45; }
body.page-inspection-capture .casc-sum-wrap { background: var(--cr-white); border: 1px solid var(--cr-border); border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; }
body.page-inspection-capture .casc-sum-row { padding: 0.875rem 1rem; border-bottom: 1px solid var(--cr-paper); display: flex; gap: 0.75rem; align-items: flex-start; }
body.page-inspection-capture .casc-sum-row:last-child { border-bottom: none; }
body.page-inspection-capture .casc-sum-label { font-size: 0.75rem; font-weight: 700; color: var(--cr-ink-3); min-width: 100px; flex-shrink: 0; padding-top: 1px; }
body.page-inspection-capture .casc-sum-val { font-size: 0.88rem; color: var(--cr-ink-2); font-weight: 600; flex: 1; line-height: 1.4; }
body.page-inspection-capture .casc-submit-btn { width: 100%; padding: 1rem; background: var(--cr-black); color: var(--cr-white); border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; margin-bottom: 0.75rem; }
body.page-inspection-capture .casc-submit-btn.emergency { background: var(--cr-red); }
body.page-inspection-capture .casc-submit-btn.emergency:hover { background: var(--cr-red-deep); }
body.page-inspection-capture .casc-submit-btn--spaced { margin-top: 0.5rem; }
body.page-inspection-capture .casc-back-link { display: block; width: 100%; padding: 0.75rem; background: none; border: none; font-family: 'Montserrat', sans-serif; font-size: 0.875rem; color: var(--cr-ink-3); cursor: pointer; text-align: center; }
body.page-inspection-capture .casc-confirmed { text-align: center; padding: 1rem 0; }
body.page-inspection-capture .casc-confirmed-icon { font-size: 3rem; margin-bottom: 0.75rem; }
body.page-inspection-capture .casc-confirmed-title { font-size: 1.3rem; font-weight: 800; color: var(--cr-black); margin-bottom: 0.5rem; }
body.page-inspection-capture .casc-confirmed-ref { font-size: 1.5rem; font-weight: 800; color: var(--cr-black); margin-bottom: 1.25rem; font-family: 'JetBrains Mono', monospace; }
body.page-inspection-capture .casc-lanes-wrap { margin: 0.75rem 0 1rem; }
body.page-inspection-capture .lane-tag { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 99px; font-size: 0.78rem; font-weight: 700; margin: 0.2rem 0.15rem; }
body.page-inspection-capture .lt-emergency   { background: #fecaca; color: #991b1b; }
body.page-inspection-capture .lt-significant { background: #fef3c7; color: #92400e; }
body.page-inspection-capture .lt-fsr2022     { background: #dbeafe; color: #1e3a8a; }
body.page-inspection-capture .lt-phase2      { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
body.page-inspection-capture .lt-inspector   { background: #d1fae5; color: #065f46; }
body.page-inspection-capture .lt-triage      { background: #ede9fe; color: #5b21b6; }
body.page-inspection-capture .casc-urgency-note { font-size: 0.88rem; font-weight: 700; padding: 0.875rem 1rem; border-radius: 8px; margin-bottom: 1rem; line-height: 1.45; }
body.page-inspection-capture .casc-urgency-note.emergency   { background: var(--cr-red-tint); color: #991b1b; }
body.page-inspection-capture .casc-urgency-note.significant { background: #fef3c7; color: #92400e; }
body.page-inspection-capture .casc-urgency-note.standard    { background: #d1fae5; color: #065f46; }
body.page-inspection-capture .casc-confirmed-sub { font-size: 0.85rem; color: var(--cr-ink-3); margin-bottom: 1.5rem; line-height: 1.4; }
body.page-inspection-capture .casc-loading { text-align: center; padding: 4rem 1rem; color: var(--cr-ink-3); font-size: 0.95rem; }
body.page-inspection-capture .area-flags { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
body.page-inspection-capture .area-flag { font-size: 0.78rem; font-weight: 700; padding: 0.4rem 0.75rem; border-radius: 6px; }
body.page-inspection-capture .area-flag--access { background: #fff8e1; color: #92400e; border: 1px solid #f59e0b; }
body.page-inspection-capture .area-flag--obs { background: var(--cr-red-tint); color: var(--cr-red); border: 1px solid #ffcdd2; }