/* ==========================================================================
   DESIGN PALETTE CONFIGURATIONS
   ========================================================================== */
:root {
  --primary-color: rgb(90, 44, 131); /* Deep Purple (Left Text Content & Base Menu) */
  --accent-color: rgb(192, 0, 0);   /* Rich Red (Right Text Content & Hover Effects) */
  --checkmark-color: #2e7d32;       /* Mid-tone Accessible Green for Checkmarks */
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Full-viewport fix: html/body stretch to exactly 100% of the browser
   viewport regardless of device, and never allow horizontal overflow. */
html, body {
  width: 100%;
  min-height: 100%;
}

html {
  /* overflow-x: clip (not hidden) avoids the browser auto-promoting
     overflow-y to "auto" here, which would otherwise turn html/body into
     their own scroll containers and break the header's position: sticky. */
  overflow-x: clip;
}

body {
  position: relative; /* anchors the ::before background layer below */
  font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #333333;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  background-color: #f5f7fa;
}

/* --------------------------------------------------------------------------
   BACKGROUND IMAGE LAYER
   Rendered on body::before (not directly on body) so its opacity can be
   adjusted independently without fading the page's actual content.
   To change how visible the background photo is, edit --bg-image-opacity
   below: 0 = fully transparent/invisible, 1 = fully opaque/solid.
   -------------------------------------------------------------------------- */
body::before {
  --bg-image-opacity: 0.93;

  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: linear-gradient(
    135deg,
    rgb(90, 44, 131) 0%,
    rgba(90, 44, 131, 0.55) 45%,
    rgba(192, 0, 0, 0.5) 75%,
    rgb(192, 0, 0) 100%
  );

  opacity: var(--bg-image-opacity);
}

/* --------------------------------------------------------------------------
   404 PAGE BACKGROUND OVERRIDE
   Amber instead of the site-wide purple/red gradient above - reads as a
   caution/attention colour (it also echoes the amber "Major" severity
   badge on the finding card), and visually signals you've stepped off the
   normal site flow. Scoped to body.page-404 only, so every other page
   keeps the default gradient untouched.
   -------------------------------------------------------------------------- */
body.page-404::before {
  background-image: linear-gradient(
    135deg,
    rgb(180, 83, 9) 0%,
    rgba(217, 119, 6, 0.55) 45%,
    rgba(245, 158, 11, 0.5) 75%,
    rgb(255, 193, 7) 100%
  );
}

/* Centred Watermark */
.site-watermark {
  --watermark-width: 400px;
  --watermark-opacity: 0.1618;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  user-select: none;
  width: var(--watermark-width);
  max-width: 90vw;
  height: auto;
  opacity: var(--watermark-opacity);
}

/* Sticky Header Container */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  gap: 12px;
}

/* Logo */
.logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  cursor: default;
  user-select: none;
}

.logo-column-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-right: 0;
  margin-right: -2px;
  color: var(--primary-color);
}

.logo-column-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  margin-left: 0px;
  padding-left: 0;
  border-left: none;
  color: var(--accent-color);
}

.tier-1, .tier-2, .tier-3 {
  text-transform: none;
  display: block;
  width: 100%;
}

.tier-1 {
  font-size: 3.236rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0px;
}

.tier-2 {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 4px;
  letter-spacing: 0px;
}

/* Underline under "xyloph" / "one" in the header wordmark. Was a repeated
   inline style="" on the <u> elements in header.js - moved here so it
   renders under the site's CSP (style-src has no 'unsafe-inline'). */
.logo-underline {
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Tagline under each half of the header wordmark. Named by which column
   they sit in (matching .logo-column-left/.logo-column-right) rather than
   by their text-align value, since that value differs between the two -
   left column's tagline aligns right (inward), right column's aligns left
   (also inward). Color is intentionally not set here: both already inherit
   it from .logo-column-left/.logo-column-right. */
.logo-tagline-left {
  text-align: right;
  font-style: italic;
}

.logo-tagline-right {
  text-align: left;
  font-style: normal;
}

/* Small green checkmark used after "one" in the header wordmark. Was a
   repeated inline style="" on a <span> in header.js - moved here for the
   same CSP reason as .logo-underline above. Uses the shared checkmark
   color variable already used elsewhere on the site instead of a
   hardcoded "green". */
.header-checkmark {
  font-size: 0.28em;
  color: var(--checkmark-color);
  vertical-align: super;
  line-height: 0;
  font-weight: 900;
}

.tier-3 {
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 4px;
  letter-spacing: 0px;
}

/* Menu */
.menu-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 48.54px;
}

.menu-link {
  position: relative;
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 500;
  font-size: 1rem;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transform-origin: bottom center;
  transition: transform 0.25s ease-out;
}

.menu-link:hover,
.menu-link:focus-visible {
  color: var(--accent-color);
}

.menu-link:hover::after,
.menu-link:focus-visible::after {
  transform: scaleX(1);
}

/* Keyboard focus ring, kept separate from the color/underline rules above
   so tabbing through the nav is clearly visible without duplicating the
   hover treatment's timing/appearance. */
.menu-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Active page indicator in the nav */
.menu-link.active {
  color: var(--accent-color);
  font-weight: 700;
}

.menu-link.active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   NAV DROPDOWN ("Readiness" menu group)
   Revealed on :hover/:focus-within (desktop/keyboard) and via a JS-toggled
   .open class as a fallback for touch devices, which don't fire :hover.
   The menu sits flush against the trigger (no margin-top gap) so moving
   the pointer from trigger to menu can't slip through a dead zone and
   cause the hover chain to break mid-transition.
   -------------------------------------------------------------------------- */
.has-dropdown {
  position: relative;
}

.menu-link--dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.dropdown-caret {
  width: 9px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.has-dropdown:hover .dropdown-caret,
.has-dropdown:focus-within .dropdown-caret,
.has-dropdown.open .dropdown-caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 10px 6px 6px;
  margin: 0;
  min-width: 150px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #e3dfe8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 20;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 6px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:last-child {
  margin-bottom: 0;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background-color: rgba(90, 44, 131, 0.08);
  color: var(--accent-color);
}

.dropdown-item:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
}

.dropdown-item.active {
  color: var(--accent-color);
  font-weight: 700;
  background-color: rgba(90, 44, 131, 0.08);
}

/* NOTE: the "Readiness" dropdown used to center itself as a floating
   popover here (left: 50%, transform: translate(-50%, ...)) at this
   width. That's what caused it to render only partially on-screen in
   portrait on a phone: a ~150px popover centered on a trigger button that
   itself sits inside a wrapping nav row can easily overflow the edge of a
   narrow viewport, and the site's overflow-x: clip then hides whatever
   overflowed rather than letting the page scroll to reveal it - which is
   also exactly why it looked "fully visible" in landscape (same popover,
   just enough spare width there for it not to overflow in the first
   place). Replaced entirely by the accordion version in the
   @media (max-width: 980px) block further down, which drops the popover
   positioning altogether below that width - no floating, no centering
   math, so nothing to overflow. This rule is intentionally gone rather
   than narrowed - kept side-by-side, it would only reintroduce doubt
   about which one actually wins at a given width. */

/* --------------------------------------------------------------------------
   MOBILE NAV TOGGLE
   Hidden entirely above the breakpoint - the desktop wrapping row from
   .menu-list above still applies down to 860px. Below that, the row is
   replaced with a collapsible panel behind a hamburger button, and the
   dropdown switches from a floating popover to an inline accordion (an
   absolutely-positioned 9-item popover doesn't work well once the trigger
   itself is inside a narrow stacked column).
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(90, 44, 131, 0.2);
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--primary-color);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background-color: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 980px) {
  .site-header {
    /* Overrides flex-direction: column inherited from the 1400px rule
       above - that rule was still in effect down here too (it's a
       max-width query), which is what caused the logo, hamburger, and CTA
       button to each render as their own full-width stacked row before
       the menu was even opened. This restores a single compact bar. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    gap: 0;
  }

  /* Logo shrinks further here on top of the 600px rule further down -
     the two-column wordmark plus tagline was the single biggest
     contributor to closed-state header height on a phone. */
  .tier-1 {
    font-size: 1.6rem;
  }
  .tier-2 {
    font-size: 0.68rem;
  }

  .nav-toggle {
    display: inline-flex;
    width: 40px;
    height: 40px;
    order: 2;
  }

  /* Hidden by default - only appears once the panel is opened (see the
     sibling rule below), rather than permanently occupying its own row. */
  .header-actions {
    display: none;
    order: 4;
    flex-basis: 100%;
    width: 100%;
    padding-top: 12px;
  }

  .header-actions .cta-button {
    width: 100%;
    padding: 12px 20px;
  }

  /* Panel is collapsed by default; JS toggles .open on tap. Sits full-width
     under the compact logo+toggle row, rather than overlapping content. */
  .main-navigation {
    display: none;
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }

  .main-navigation.open {
    display: block;
  }

  /* The CTA button (a later sibling of .main-navigation in the markup)
     only appears while the panel is open - keeps the closed-state header
     down to just the logo and hamburger. */
  .main-navigation.open ~ .header-actions {
    display: block;
  }

  .menu-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 0 4px;
    border-top: 1px solid rgba(90, 44, 131, 0.12);
    margin-top: 12px;
  }

  /* Larger tap targets (44px+ tall) now that items stack full-width
     instead of competing for space in a single wrapping row. */
  .menu-link {
    width: 100%;
    padding: 12px 8px;
  }

  .menu-link--dropdown-trigger {
    width: 100%;
    justify-content: space-between;
  }

  /* Accordion, not popover: static in normal flow, shown/hidden by the
     same .open class script.js already toggles on click - no JS change
     needed there, only the presentation changes at this width. */
  .dropdown-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    left: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background-color: rgba(90, 44, 131, 0.03);
    min-width: 0;
    width: 100%;
    padding: 4px 0 4px 16px;
  }

  .has-dropdown.open .dropdown-menu {
    display: block;
  }

  .dropdown-item {
    white-space: normal;
    padding: 10px 12px;
  }
}

/* CTA Button */
.cta-button {
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.1s ease;
}
.cta-button:hover,
.cta-button:focus-visible {
  background-color: var(--accent-color);
}
.cta-button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}
.cta-button:active {
  transform: scale(0.98);
}

/* Page Content Container */
.main-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1715px;
  margin: 40px auto;
  padding: 32.32px;
  min-height: 900px;
  height: auto;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.page-title {
  font-size: 1.618rem;
  width: 100%;
  line-height: 1;
  margin-bottom: 25px;
  color: #1a1a1a;
  letter-spacing: -1px;
  font-weight: 900;
}

/* Responsive Breakpoints */
@media (max-width: 1400px) {
  .site-header {
    flex-direction: column;
    gap: 15px;
    padding: 15px 20px;
  }
  .menu-list {
    gap: 15px;
  }
  .page-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 900px) {
  .main-content {
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    min-height: auto;
  }
  .checkmark-list {
    padding-left: 30px;
  }
  .checkmark-list li {
    padding-left: 32px;
  }
  .site-watermark {
    --watermark-width: 260px;
  }
}

@media (max-width: 600px) {
  .tier-1 {
    font-size: 1.4rem;
  }
  .menu-list {
    gap: 10px;
    justify-content: center;
  }
  .page-title {
    font-size: 1.8rem;
  }
  .action-dialog {
    width: 92vw;
    padding: 20px;
  }
}

/* Entity inline logo constructs */
.compl-logo {
  font-family: Roboto;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0px;
}
.compl-part {
  color: rgb(90, 44, 131);
}
.iso-part {
  color: rgb(192, 0, 0);
}
.logo-group {
  display: flex;
  align-items: left;
  gap: 0.5rem;
}
.highlight-text {
  font-style: normal;
}

/* Checkmark list */
.checkmark-list {
  list-style: none;
  padding-left: 75px;
  margin: 5px 0;
}
.checkmark-list li {
  position: relative;
  font-size: 1.1rem;
  margin-bottom: 8.09px;
  color: #4a5568;
  padding-left: 50px;
}
.checkmark-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--checkmark-color);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.4;
}

/* Methodology step list (used on methodology.html) */
.methodology-steps {
  list-style: none;
  counter-reset: step-counter;
  margin: 25px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.methodology-steps li {
  position: relative;
  padding: 18px 20px 18px 70px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 4px solid var(--primary-color);
  border-radius: 6px;
  counter-increment: step-counter;
}
.methodology-steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 700;
}
.methodology-steps li strong {
  display: block;
  color: #1a1a1a;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

/* Contact page layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
.contact-details p {
  margin-bottom: 12px;
  color: #4a5568;
}

/* Dialog + Form (shared by header "Request a Callback" and Contact page) */
.action-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 12px;
  padding: 30px;
  width: 450px;
  max-width: 90vw;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 2000;
}
.action-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}
.dialog-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 25px;
}
.title-heading {
  font-size: 1.6rem;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.2;
}
.title-subheading {
  font-size: 1.1rem;
  font-weight: 400;
  color: #4a5568;
  line-height: 1.3;
}
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus {
  border-color: var(--primary-color);
}
.form-textarea {
  resize: vertical;
  min-height: 80px;
  max-height: 160px;
  font-family: inherit;
}
.error-msg {
  font-size: 0.8rem;
  color: rgb(255, 0, 0);
  margin-top: 5px;
  font-weight: 500;
  display: none;
}
.form-input.invalid-field {
  border: 1.5px solid rgb(255, 0, 0);
  background-color: #fff5f5;
}
.form-status-msg {
  font-size: 0.9rem;
  color: var(--checkmark-color);
  margin-top: 12px;
  font-weight: 600;
  display: none;
}
.form-status-msg.is-visible {
  display: block;
}
.form-status-msg.is-error {
  color: rgb(255, 0, 0);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
}
/* Used only on the Readiness assessment's own Cancel/Check/Submit row -
   floats it above the fixed site footer, right-aligned, rather than
   sitting flush against the right edge like the Request a Callback
   dialog's buttons do.
   Previously positioned relative to the checkmark badge, back when the
   badge itself floated as a separate fixed element above the footer; now
   that the badge lives inside .site-footer (see .checkmark-container--
   footer-badge), this only needs to clear the footer bar itself.
   bottom: footer's own height (~41px, padding + one line of text) + a
   ~19px gap, rounded to 60px.
   Note: position:fixed removes this row from the form's normal document
   flow - it now floats over the page rather than sitting inline after
   the last question. */
.dialog-actions--float-left-of-badge {
  position: fixed;
  bottom: 60px;
  right: 24px;
  z-index: 9;
}

/* Below this width, the fixed positioning above breaks down: a
   right-anchored fixed row has much less room to work with on a phone/
   small-tablet viewport, and can end up sitting awkwardly close to the
   screen edge instead of reading as a normal button row. Returned to
   normal in-flow document position here instead: a plain row at the end
   of the form, same as it would be without the float-left-of-badge
   modifier at all. */
@media (max-width: 700px) {
  .dialog-actions--float-left-of-badge {
    position: static;
    bottom: auto;
    right: auto;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
  }
}

/* Universal - every page now has the fixed .site-footer bar (41.47px
   tall) at the true bottom of the viewport; this reserves space so
   scrolled content on any page never disappears behind it. */
.main-content {
  padding-bottom: 80px;
}
/* Scoped to assessment pages only (not the other 5 pages, which don't
   have a fixed button row to collide with). The checkmark badge no
   longer floats independently above the footer (it's now inside the
   footer bar itself, see .checkmark-container--footer-badge), so the
   only other fixed element to clear here is the Cancel/Check/Submit
   toolbar: it sits at bottom:60px and is ~37px tall, so its top edge
   lands at ~97px from the true bottom of the viewport. This reserves a
   buffer above that (~40px margin, rounded to 140px) so scrolled content
   in a long results panel always stops clear of it. Overrides the
   universal 80px above for these pages specifically, since it appears
   later in the cascade at equal specificity. */
.main-content--assessment {
  padding-bottom: 140px;
}

/* Below 700px the submit toolbar is back in normal flow (see above), so
   the large reserve above is no longer needed there - only the fixed
   footer itself still needs space set aside, same as every other page. */
@media (max-width: 700px) {
  .main-content--assessment {
    padding-bottom: 80px;
  }
}
.btn-dialog {
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s;
}
.btn-cancel {
  background-color: #f1f5f9;
  color: #4a5568;
}
.btn-cancel:hover {
  background-color: #e2e8f0;
}
.btn-submit {
  background-color: var(--primary-color);
  color: #ffffff;
}
.btn-submit:hover {
  background-color: var(--accent-color);
}

/* "Check" button on the Readiness assessment - logo-purple by default,
   turns checkmark-green for a moment while the score is being calculated,
   then returns to purple. See script.js's checkAssessmentBtn handler for
   when .calculating gets added/removed; the colour transition itself is
   inherited from .btn-dialog's transition: background-color rule above. */
.btn-check {
  background-color: var(--primary-color);
  color: #ffffff;
}
.btn-check:hover {
  background-color: var(--accent-color);
}
.btn-check.calculating {
  background-color: var(--checkmark-color);
  cursor: progress;
}

/* Thank you success card */
.thank-you-card {
  text-align: center;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(15px);
  animation: smoothFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.success-icon {
  width: 70px;
  height: 70px;
  background-color: #e8f5e9;
  color: var(--checkmark-color);
  border-radius: 50%;
  font-size: 2.2rem;
  line-height: 70px;
  margin: 0 auto 20px auto;
  font-weight: bold;
  transform: scale(0.7);
  animation: popScale 0.35s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes smoothFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes popScale {
  to { transform: scale(1); }
}

/* Checkmark watermark fixed container */
.checkmark-container {
  --checkmark-size: 120px;
  color: var(--checkmark-color);
  position: fixed;
  z-index: 6;
  padding: calc(var(--checkmark-size) * 0.25);
  /* Purely decorative in every placement - never intercepts clicks/hover
     on whatever it happens to be floating over. This is the root-cause
     fix for the "unresponsive area of the Check button" issue: a fixed,
     high z-index element with no pointer-events rule sits on top of
     anything underneath it regardless of scroll position, and silently
     swallows pointer events there. The repositioning/resizing below
     reduces how often that overlap happens at all; this makes sure it's
     harmless even when it still does. */
  pointer-events: none;
}
.checkmark-container[data-position="bottom-right"] { bottom: 30px; right: 10px; }
.checkmark-container[data-position="bottom-left"] { bottom: 30px; left: 30px; }
.checkmark-container[data-position="top-right"] { top: 30px; right: 30px; }
.checkmark-container[data-position="top-left"] { top: 30px; left: 30px; }

/* Footer-badge placement for the small SVG checkmark used on every page.
   Sits as a normal in-flow item at the end of the footer's flex row (see
   .site-footer), pinned to its bottom-right by virtue of being the
   footer's last child - not independently fixed-positioned any more, so
   it always aligns with wherever the footer bar actually sits rather than
   needing separately-maintained pixel offsets that can drift out of sync
   with the footer's own height/padding. Sized down from the general-
   purpose .checkmark-container default (120px, meant for a large page
   watermark) to something that reads as a small inline icon next to the
   copyright text instead of dominating the footer bar. */
.checkmark-container--footer-badge {
  --checkmark-size: 22px;
  position: static;
  padding: 0;
  flex-shrink: 0;
}

/* Small green trademark-style checkmark used after the "xylophone" wordmark
   inline in body copy. Was a repeated inline style="" on <sup> elements. */
.trademark-mark {
  font-weight: 900;
  color: green;
  font-size: 0.4em;
  margin-left: 0;
}

/* Lets a nested compliso-logo span pick up the font-size of its surrounding
   text instead of the component's own default size. */
.compliso-logo--inherit-size {
  font-size: inherit;
}

/* Visually hides an element (used for the honeypot field) without using
   display:none, which some screen readers/bots treat differently. Kept as a
   real CSS class instead of an inline style so it works under a strict CSP. */
.visually-hidden-offscreen {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* Left-align the action buttons in a dialog/form footer, used where the
   default .dialog-actions centering isn't wanted (e.g. the single button
   on the Contact page's quick-preview form). */
.dialog-actions--start {
  justify-content: flex-start;
}

/* Spacing helper for a paragraph that follows a list/section and needs a
   bit of breathing room above it. */
.mt-25 {
  margin-top: 25px;
}

.check {
  fill: rgba(76, 175, 80, 0.15);
  stroke: rgba(76, 175, 80, 0.20);
  stroke-width: 1;
  animation: fadeIn 0.3s ease-out 1s forwards;
}
@keyframes fadeIn {
  to { fill: rgba(76, 175, 80, 1); }
}
.circle {
  stroke: #4CAF50;
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards, fillIn 0.3s ease-out 1.0s forwards;
}

/* ==========================================================================
   404 PAGE - "non-conformance finding" card (used on 404.html only)
   Deliberately reuses the site's existing tokens (--primary-color,
   --accent-color) and the same card/left-border language as
   .methodology-steps li, so this reads as part of the site rather than a
   bolted-on error template.
   ========================================================================== */
.finding-card {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  margin: 25px 0;
  padding: 20px 24px;
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 4px solid var(--accent-color);
  border-radius: 6px;
}
.finding-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finding-field dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 700;
}
.finding-field dd {
  margin: 0;
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 500;
}
.severity-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--accent-color);
  width: fit-content;
}
.evidence-path {
  font-family: 'Courier New', monospace;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #333333;
  word-break: break-all;
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 28px;
  align-items: center;
}
.secondary-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}
.secondary-link:hover,
.secondary-link:focus-visible {
  color: var(--accent-color);
}
.secondary-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .finding-card {
    flex-direction: column;
    gap: 14px;
  }
}

/* ==========================================================================
   READINESS ASSESSMENT (iso/readiness.html)
   Reuses .finding-card/.finding-field (defined above, for the 404 page) and
   .btn-dialog/.btn-submit/.btn-cancel (defined above, for the callback
   dialog) rather than introducing parallel button/card styles.
   ========================================================================== */
.assessment-legend {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #e3dfe8;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 25px 0 35px;
}
.assessment-legend h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 0 0 14px;
  font-weight: 700;
}
.legend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.legend-item {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
}
.legend-score {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.legend-desc {
  font-size: 0.78rem;
  color: #4a5568;
  line-height: 1.3;
}

.assessment-form fieldset {
  border: none;
  margin: 0 0 36px;
  padding: 0;
}
.assessment-form legend {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  padding: 0 0 16px;
  width: 100%;
  border-bottom: 2px solid #e3dfe8;
  margin-bottom: 20px;
}

.question {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #e3dfe8;
  border-left: 4px solid var(--primary-color);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.question.unanswered {
  border-left-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(192, 0, 0, 0.12);
}

/* Informational-only entries (Clauses 1-3 intro content) - visually
   distinct from scored .question cards: dashed border and no left accent
   bar, signalling "read this" rather than "answer this". No .scale inside. */
.info-block {
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px dashed #d5d0dc;
  border-radius: 8px;
  padding: 14px 22px;
  margin-bottom: 14px;
}
.info-block .q-clause {
  color: #6b7280;
}
.info-block .q-text {
  margin: 0;
  color: #4a5568;
}

.q-clause {
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 6px;
}
.q-text {
  margin: 0 0 16px;
  font-size: 1rem;
  color: #24322b;
}

.scale {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Combines a .scale (radio group) with an inline "Process :" text field on
   the same line - used on the Annex A / ISO 27002:2022 control assessment,
   where each control benefits from a free-text note alongside its score.
   Wraps to two lines on narrow viewports rather than compressing either
   part illegibly. */
.control-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.process-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 240px;
}
.process-field .process-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}
.process-field input[type="text"] {
  flex: 1;
  min-width: 160px;
  padding: 7px 10px;
  border: 1px solid #e3dfe8;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.85rem;
  color: #24322b;
  background-color: rgba(255, 255, 255, 0.7);
}
.process-field input[type="text"]:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
  border-color: var(--primary-color);
}
.process-field input[type="text"]::placeholder {
  color: #9aa5b1;
}
.scale-option {
  position: relative;
}
.scale-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.scale-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #e3dfe8;
  color: #4a5568;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.scale-option input:checked + span {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
  transform: scale(1.05);
}
.scale-option input:focus-visible + span {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}
.scale-option span:hover {
  border-color: var(--primary-color);
}

.validation-note {
  color: var(--accent-color);
  font-size: 0.9rem;
  margin: -10px 0 20px;
  font-weight: 500;
}

/* Results panel */
.results-panel {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 2px solid #e3dfe8;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  align-items: center;
}
/* Author-origin CSS always wins over the browser's built-in [hidden]
   rule at equal specificity, regardless of selector order - so
   .results-panel's own display:flex above silently overrides hidden's
   display:none, and the panel would stay visible (empty) at all times
   without this explicit override. */
.results-panel[hidden] {
  display: none;
}
.gauge-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.gauge {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.gauge-track {
  fill: none;
  stroke: #e3dfe8;
  stroke-width: 14;
}
.gauge-fill {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 534.07;
  stroke-dashoffset: 534.07;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.9, 0.3, 1), stroke 0.4s ease;
}
.gauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gauge-label #scorePercent {
  font-size: 2.1rem;
  font-weight: 900;
  color: #1f2430;
}
.gauge-caption {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}
.results-detail {
  flex: 1;
  min-width: 260px;
}
.band-label {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
  margin: 0 0 14px;
}
.band-note {
  color: #4a5568;
  font-size: 0.92rem;
  margin: 0;
}
.band-note--cta {
  margin-top: 10px;
}
.band-note--cta a {
  color: var(--primary-color);
  text-decoration: underline;
}
.band-note--cta a:hover,
.band-note--cta a:focus-visible {
  color: var(--accent-color);
}

@media (prefers-reduced-motion: reduce) {
  .gauge-fill {
    transition: none;
  }
}

@media (max-width: 560px) {
  .scale-option span {
    width: 38px;
    height: 38px;
  }
  .results-panel {
    flex-direction: column;
    align-items: flex-start;
  }
  .control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .process-field {
    min-width: 0;
  }
}

/* Site-wide copyright footer, rendered once via chrome.js on every page. */
/* Fixed bottom bar - always visible regardless of scroll position, same
   technique as the checkmark badge and (on assessment pages) the
   Cancel/Check/Submit row. Sits below both of those in the stacking of
   fixed bottom elements (see their repositioned `bottom` values further
   down) so nothing overlaps. */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
  background-color: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #e3dfe8;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  margin: 0;
}
.site-footer__copyright {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
}
.site-footer__copyright a {
  color: var(--primary-color);
  text-decoration: underline;
  margin-left: 4px;
}
.site-footer__copyright a:hover,
.site-footer__copyright a:focus-visible {
  color: var(--accent-color);
}
.site-footer__copyright a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* (Prior assessment-only footer margin removed - now handled by the fixed
   positioning + universal .main-content padding-bottom below.) */