.elementor-1023 .elementor-element.elementor-element-0884948{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-b415cd5 );--border-color:var( --e-global-color-b415cd5 );--padding-top:24px;--padding-bottom:24px;--padding-left:40px;--padding-right:40px;}.elementor-1023 .elementor-element.elementor-element-0884948:not(.elementor-motion-effects-element-type-background), .elementor-1023 .elementor-element.elementor-element-0884948 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-b0da8c1 );}.elementor-1023 .elementor-element.elementor-element-ffcdc36{width:var( --container-widget-width, 220px );max-width:220px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:220px;--container-widget-flex-grow:0;text-align:start;}.elementor-1023 .elementor-element.elementor-element-ffcdc36 img{border-style:none;}.elementor-1023 .elementor-element.elementor-element-769a784{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#D8D1C7;--border-color:#D8D1C7;--padding-top:40px;--padding-bottom:20px;--padding-left:40px;--padding-right:40px;}.elementor-1023 .elementor-element.elementor-element-4a8eaf2 .elementor-heading-title{font-size:36px;font-weight:700;color:#5C4636;}.elementor-1023 .elementor-element.elementor-element-de1f455{font-size:14px;letter-spacing:0.08px;color:#34383A;}.elementor-1023 .elementor-element.elementor-element-a18c851{--display:flex;--padding-top:20px;--padding-bottom:60px;--padding-left:40px;--padding-right:40px;}.elementor-1023 .elementor-element.elementor-element-7dd2634{padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1023 .elementor-element.elementor-element-0884948{--content-width:780px;}.elementor-1023 .elementor-element.elementor-element-769a784{--content-width:780px;}.elementor-1023 .elementor-element.elementor-element-a18c851{--content-width:780px;}}/* Start custom CSS *//* ============================================================
   TBM SCAN — BRAND-ALIGNED STYLES
   Brand Manual v0.2 · Monochrome-first · Warm neutrals · Trust Sage accent
   Layout/width handled by the Elementor container (~720px boxed).

   VERSION HISTORY
   v1  — Initial build. All pillars, scoring, responsive Likert.
   v2  — June 2026. Fix: dropdown selected value invisible on Safari/Chrome Mac
          (added -webkit-text-fill-color, option colour rules, disabled state).
   v3  — June 2026. Likert fix attempt — reverted. Absolute label overlay
          hid the radio input visually.
   v4  — June 2026. Likert fix attempt — reverted. label width:100% caused
          tiles to wrap and lose the sharp rectangular border-radius.
   v5  — June 2026. Likert fix — minimal targeted approach (partial). Visual code
          restored exactly to v2. Click registration fixed by one addition
          only: user-select:none on the label so the browser does not
          intercept the click for text-selection before passing it to the
          input, plus pointer-events:none on the radio input so the input
          see v6).

   v6  — June 2026. Likert fix — removed pointer-events:none from radio input.
          Clicking the circle was a dead zone because clicks passed through
          the input but did not land on the label hit area. Native input
          click handling restored. user-select:none on the label retained
          to prevent multi-click text-selection interference.
   v7  — June 2026. Fix: functional area dropdown selected value still not
          showing after v2 fix. GF applies its own stylesheet to .gfield_select
          overriding text colour. Added higher-specificity body.elementor-page-1023 targeting
          .gfield_select directly to ensure --ink colour wins.
   v8  — June 2026. Fix: metadata radio fields on Page 8 rendering with wrong
          layout and pill-shaped borders. Three new layout classes added:
          .tbm-radio-grid-2 (role level — 2 columns)
          .tbm-radio-stack (leadership — single column)
          .tbm-radio-grid-3 (functional area — 3 columns)
          All three override the Likert single-row flex and restore
          sharp border-radius:2px to match the rest of the form.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Montserrat:wght@400;500;600&display=swap');

/* ── Colour tokens ── */
.tbm-scan-page {
  --ink:     #1F2424;
  --charcoal:#34383A;
  --black:   #111111;
  --ivory:   #F7F2EA;
  --stone:   #D8D1C7;
  --taupe:   #B7A89A;
  --sage:    #8A9A8A;
  --umber:   #5C4636;
  --clay:    #A46F56;
  --white:   #FFFFFF;
}

/* ── Base wrapper ── */
.tbm-scan-page .gform_wrapper {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  color: var(--ink);
}

/* ── Progress bar ── */
.tbm-scan-page .gf_progressbar_wrapper {
  margin-bottom: 36px;
}
.tbm-scan-page .gf_progressbar {
  background-color: #D8D1C7 !important;
  border-radius: 2px;
  height: 6px;
}
.tbm-scan-page .gf_progressbar_percentage,
.tbm-scan-page .gf_progressbar .gf_progressbar_percentage {
  background-color: #8A9A8A !important;
  border-radius: 2px;
  height: 6px;
}
.tbm-scan-page .gf_progressbar_title {
  color: var(--charcoal);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

/* ── Intro block (Page 1) ── */
.tbm-scan-page .tbm-intro-block {
  background-color: var(--charcoal);
  color: var(--white);
  padding: 32px 36px;
  border-radius: 2px;
  margin-bottom: 36px;
}
.tbm-scan-page .tbm-intro-block p {
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  margin-bottom: 14px;
}
.tbm-scan-page .tbm-intro-lead {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  color: var(--white) !important;
  margin-bottom: 18px !important;
}
.tbm-scan-page .tbm-intro-note {
  color: var(--ivory) !important;
  border-left: 2px solid var(--sage);
  padding-left: 16px;
  font-size: 14px !important;
}

/* ── Pillar intro block (Pages 2–7) ── */
.tbm-scan-page .tbm-pillar-intro {
  background-color: var(--ivory);
  border-left: 3px solid var(--sage);
  padding: 22px 26px;
  border-radius: 0 2px 2px 0;
  margin-bottom: 30px;
}
.tbm-scan-page .tbm-pillar-intro p {
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.75;
  margin: 10px 0 0 0;
}
.tbm-scan-page .tbm-pillar-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--umber);
  margin-bottom: 8px;
}

/* ── Field labels ── */
.tbm-scan-page .gfield_label {
  color: var(--charcoal);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* ── Text inputs, dropdowns, textarea ── */
.tbm-scan-page input[type='text'],
.tbm-scan-page input[type='email'],
.tbm-scan-page select,
.tbm-scan-page textarea {
  border: 1px solid var(--stone);
  border-radius: 2px;
  padding: 12px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background-color: var(--white);
  width: 100%;
  transition: border-color 0.2s ease;
}
.tbm-scan-page input[type='text']:focus,
.tbm-scan-page input[type='email']:focus,
.tbm-scan-page select:focus,
.tbm-scan-page textarea:focus {
  border-color: var(--sage);
  outline: none;
  box-shadow: 0 0 0 1px var(--sage);
}

/* ── Dropdown selected value fix (v2) ── */
.tbm-scan-page select {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  opacity: 1 !important;
}
.tbm-scan-page select option {
  color: var(--ink);
  background-color: var(--white);
}
.tbm-scan-page select option:disabled {
  color: var(--taupe);
}

/* ── Dropdown selected value — high specificity override (v7)
      GF adds class .gfield_select to dropdowns and its own stylesheet
      overrides colour at a level the generic select rule cannot reach.
      Targeting .gfield_select directly with !important on all colour
      properties ensures the selected value is always visible. ── */
.tbm-scan-page .gfield_select,
.tbm-scan-page select.gfield_select,
.tbm-scan-page .ginput_container_select .gfield_select {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  opacity: 1 !important;
  background-color: var(--white) !important;
}
.tbm-scan-page .gfield_select option {
  color: var(--ink) !important;
  background-color: var(--white) !important;
}

/* ── Locked Organisation Code field (if ever shown visible) ── */
.tbm-scan-page .tbm-org-code input {
  pointer-events: none;
  background-color: var(--ivory);
  color: var(--charcoal);
  font-weight: 600;
  cursor: not-allowed;
}

/* ── Radio Likert — single row on desktop ──
   Visual code identical to v2. Click fix (v5): the radio input gets
   pointer-events:none so clicks always fall through to the label, which
   is the correct toggle target via its for/id binding. The label gets
   user-select:none so the browser doesn't intercept the click to begin
   a text selection before the input toggles. ── */
.tbm-scan-page .gfield_radio {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
}
.tbm-scan-page .gfield_radio div,
.tbm-scan-page .gfield_radio .gchoice {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 2px;
  padding: 13px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tbm-scan-page .gfield_radio div:hover,
.tbm-scan-page .gfield_radio .gchoice:hover {
  background: var(--ivory);
  border-color: var(--sage);
}
.tbm-scan-page .gfield_radio input[type='radio'] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  accent-color: var(--sage);
  flex-shrink: 0;
  /* pointer-events left as default — input registers clicks natively;
     user-select:none on the label handles the multi-click issue */
}
.tbm-scan-page .gfield_radio label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  margin: 0;
  user-select: none;    /* prevents text-selection intercepting the click */
  -webkit-user-select: none;
}

/* ── Metadata radio layouts (Page 8) ──
   These fields use custom CSS classes set in GF Advanced tab.
   All three override the Likert single-row flex layout and
   restore sharp border-radius to match the form aesthetic. ── */

/* Role level — 2 columns */
.tbm-scan-page .tbm-radio-grid-2 .gfield_radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tbm-scan-page .tbm-radio-grid-2 .gfield_radio div,
.tbm-scan-page .tbm-radio-grid-2 .gfield_radio .gchoice {
  flex: unset;
  white-space: normal;
  border-radius: 2px;
  justify-content: flex-start;
  padding: 13px 16px;
}

/* Leadership responsibility — single column */
.tbm-scan-page .tbm-radio-stack .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tbm-scan-page .tbm-radio-stack .gfield_radio div,
.tbm-scan-page .tbm-radio-stack .gfield_radio .gchoice {
  flex: unset;
  white-space: normal;
  border-radius: 2px;
  justify-content: flex-start;
  padding: 13px 16px;
}

/* Functional area — 3 columns */
.tbm-scan-page .tbm-radio-grid-3 .gfield_radio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.tbm-scan-page .tbm-radio-grid-3 .gfield_radio div,
.tbm-scan-page .tbm-radio-grid-3 .gfield_radio .gchoice {
  flex: unset;
  white-space: normal;
  border-radius: 2px;
  justify-content: flex-start;
  padding: 13px 16px;
}

/* ── Consent checkbox ── */
.tbm-scan-page .gfield_checkbox div,
.tbm-scan-page .gfield_checkbox .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--ivory);
  border: 1px solid var(--taupe);
  border-radius: 2px;
  padding: 16px 18px;
}
.tbm-scan-page .gfield_checkbox input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sage);
  flex-shrink: 0;
}
.tbm-scan-page .gfield_checkbox label {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

/* ── Navigation buttons ── */
.tbm-scan-page .gform_next_button,
.tbm-scan-page .gform_previous_button,
.tbm-scan-page .gform_button[type='submit'] {
  font-family: 'Montserrat', sans-serif;
  border-radius: 2px;
  padding: 14px 34px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tbm-scan-page .gform_next_button,
.tbm-scan-page .gform_button[type='submit'] {
  background-color: var(--charcoal);
  color: var(--white);
  border: none;
}
.tbm-scan-page .gform_next_button:hover,
.tbm-scan-page .gform_button[type='submit']:hover {
  background-color: var(--umber);
}
.tbm-scan-page .gform_previous_button {
  background-color: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}
.tbm-scan-page .gform_previous_button:hover {
  background-color: var(--ivory);
}

/* ── Validation errors (Muted Clay — sparing, max ~5%) ── */
.tbm-scan-page .gfield_error .gfield_label {
  color: var(--clay);
}
.tbm-scan-page .gfield_error input,
.tbm-scan-page .gfield_error select {
  border-color: var(--clay) !important;
}
.tbm-scan-page .validation_message {
  color: var(--clay);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  margin-top: 8px;
}

/* ── Field descriptions ── */
.tbm-scan-page .gfield_description {
  color: var(--umber);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
}

/* ── Confirmation message ── */
.tbm-scan-page .tbm-confirmation,
.tbm-confirmation {
  max-width: 640px;
  margin: 48px auto;
  padding: 48px;
  background: var(--ivory);
  border-top: 3px solid var(--sage);
  border-radius: 2px;
  text-align: center;
}
.tbm-confirmation h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #34383A;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 18px;
}
.tbm-confirm-lead {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #34383A;
  margin-bottom: 16px;
}
.tbm-confirmation p {
  font-family: 'Montserrat', sans-serif;
  color: #1F2424;
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 12px;
}
.tbm-confirmation a {
  color: #5C4636;
  text-decoration: underline;
}

/* ── Tablet (601px – 1024px) ── */
@media (min-width: 601px) and (max-width: 1024px) {
  .tbm-scan-page .gfield_radio label { font-size: 13px; }
  .tbm-scan-page .gfield_radio div,
  .tbm-scan-page .gfield_radio .gchoice { padding: 12px 10px; }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
  .tbm-scan-page .tbm-intro-block { padding: 24px 20px; }
  .tbm-scan-page .tbm-intro-lead { font-size: 22px !important; }
  .tbm-scan-page .gfield_radio { flex-direction: column; }
  .tbm-scan-page .gfield_radio div,
  .tbm-scan-page .gfield_radio .gchoice { justify-content: flex-start; text-align: left; }
  .tbm-scan-page .gform_next_button,
  .tbm-scan-page .gform_button[type='submit'] { width: 100%; text-align: center; }
}/* End custom CSS */