/*
 * NLG Elite Organizations Assessment: respondent front end.
 * Everything is scoped under .nlg-eoa (the page is an Elementor site).
 * Controls use 3-class selectors so theme/kit form styles do not win.
 * Mobile first, using container queries on .nlg-eoa (so a narrow Elementor
 * column gets the phone layout); the progress panel becomes a left column
 * once the form itself is 900px wide. Browsers without container queries get
 * the phone layout.
 */

.nlg-eoa {
  --eoa-navy: #102E59;
  --eoa-navy-2: #0B2247;
  --eoa-blue: #18407E;
  --eoa-blue-2: #2F5FA7;
  --eoa-orange: #EF7A11;
  --eoa-orange-2: #F68A26;
  --eoa-orange-text: #B95A00;   /* orange that passes AA on white for small text */
  --eoa-ink: #14233A;
  --eoa-ink-2: #3B4757;
  --eoa-muted: #5E6B7A;         /* 5.4:1 on white */
  --eoa-line: #E6EBF2;
  --eoa-border: #C5CFDD;
  --eoa-border-2: #93A2B8;
  --eoa-control: #6B7A8F;       /* control boundaries: 4.4:1 on white, 4:1 on the error tint (WCAG 1.4.11 needs 3:1) */
  --eoa-sky: #F6F8FB;
  --eoa-tint: #EEF3FA;
  --eoa-error: #A3201E;
  --eoa-error-bg: #FDF2F1;
  /* "!" icons are drawn, not typed, so screen readers have nothing to read out (the text says "Error:"). */
  --eoa-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23A3201E'/%3E%3Cpath d='M10 4.6v6.6' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.9' r='1.35' fill='white'/%3E%3C/svg%3E");
  --eoa-icon-notice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23EF7A11'/%3E%3Cpath d='M10 4.6v6.6' stroke='%23102E59' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.9' r='1.35' fill='%23102E59'/%3E%3C/svg%3E");
  --eoa-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23102E59'/%3E%3Cpath d='M5.8 10.4l2.8 2.8 5.6-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --eoa-focus: #18407E;
  --eoa-radius: 3px;
  --eoa-ease: cubic-bezier(.2, .7, .2, 1);
  --eoa-shadow: 0 1px 2px rgba(16, 46, 89, .06), 0 18px 48px -12px rgba(16, 46, 89, .16);
  --eoa-font: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --eoa-scroll-offset: 96px;
  --eoa-gutter: 20px;

  font-family: var(--eoa-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--eoa-ink);
  background: transparent;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
  scroll-margin-top: var(--eoa-scroll-offset);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Layout follows the width of the column the form sits in, not the window. */
  container-type: inline-size;
  container-name: nlg-eoa;
}

.nlg-eoa *,
.nlg-eoa *::before,
.nlg-eoa *::after { box-sizing: border-box; }

.nlg-eoa [hidden] { display: none !important; }

.nlg-eoa p { margin: 0; }

.nlg-eoa .eoa-sr,
.nlg-eoa .eoa-sr-input {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.nlg-eoa .eoa-hp {
  position: absolute !important;
  left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.nlg-eoa .eoa-loading {
  padding: 72px 16px;
  text-align: center;
  font-size: 15px;
  color: var(--eoa-muted);
}

/* ---------- motion ---------- */

@keyframes eoa-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes eoa-fade { from { opacity: 0; } to { opacity: 1; } }
/* The panel's line art fades in to its own faint level; eoa-fade ended at 1 and overrode it. */
@keyframes eoa-topo-in { from { opacity: 0; } to { opacity: .12; } }
@keyframes eoa-pop {
  0% { transform: scale(1); }
  40% { transform: scale(.94); }
  100% { transform: scale(1); }
}
@keyframes eoa-draw { to { stroke-dashoffset: 0; } }
@keyframes eoa-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.nlg-eoa .eoa-main > .eoa-eyebrow,
.nlg-eoa .eoa-main > .eoa-title,
.nlg-eoa .eoa-main > .eoa-form { animation: eoa-rise .5s var(--eoa-ease) both; }
.nlg-eoa .eoa-main > .eoa-title { animation-delay: .04s; }
.nlg-eoa .eoa-main > .eoa-form { animation-delay: .1s; }

/* ---------- type ---------- */

.nlg-eoa .eoa-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--eoa-orange-text);
  margin: 0 0 14px;
}
.nlg-eoa .eoa-eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--eoa-orange);
}

.nlg-eoa .eoa-title {
  font-family: var(--eoa-font);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--eoa-navy);
  margin: 0 0 18px;
  padding: 0;
  text-transform: none;
}
.nlg-eoa .eoa-title b { font-weight: 700; }
.nlg-eoa .eoa-title { overflow-wrap: anywhere; }
/* Headings take focus only from script (tabindex="-1") so a screen reader starts there; not a control, so no ring. */
.nlg-eoa .eoa-title:focus,
.nlg-eoa .eoa-title:focus-visible { outline: none; }

.nlg-eoa .eoa-lede {
  font-size: 16px;
  line-height: 1.7;
  color: #263246;
  margin: 0 0 16px;
}

.nlg-eoa .eoa-sub {
  font-size: 15px;
  line-height: 1.7;
  color: #263246;
  margin: 0 0 24px;
  max-width: 62ch;
}

.nlg-eoa .eoa-legend {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--eoa-navy);
  margin: 0;
  text-wrap: pretty;
}

.nlg-eoa .eoa-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--eoa-muted);
}
.nlg-eoa .eoa-meta::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%235E6B7A' stroke-width='1.5'/%3E%3Cpath d='M8 4.5V8l2.5 1.5' fill='none' stroke='%235E6B7A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- buttons ---------- */

.nlg-eoa .eoa-btn.eoa-btn {
  /* Square corners like the site's buttons (Elementor kit: border-radius 0). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 14px 28px;
  font-family: var(--eoa-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background: var(--eoa-navy);
  border: 1px solid var(--eoa-navy);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s var(--eoa-ease);
}
.nlg-eoa .eoa-btn.eoa-btn:hover { background: var(--eoa-blue); border-color: var(--eoa-blue); color: #fff; box-shadow: 0 8px 20px -10px rgba(16, 46, 89, .6); }
.nlg-eoa .eoa-btn.eoa-btn:active { transform: translateY(1px); }
.nlg-eoa .eoa-btn.eoa-btn:focus { outline: none; }
.nlg-eoa .eoa-btn.eoa-btn:focus-visible { outline: 3px solid var(--eoa-focus); outline-offset: 3px; }

/* Forward arrow on Next / Start / Submit (decorative, not part of the name). */
.nlg-eoa .eoa-btn.eoa-btn[type="submit"]::after,
.nlg-eoa .eoa-btn.eoa-btn--cta::after {
  content: "";
  flex: none;
  width: 16px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s var(--eoa-ease);
}
.nlg-eoa .eoa-btn.eoa-btn[type="submit"]:hover::after,
.nlg-eoa .eoa-btn.eoa-btn--cta:hover::after { transform: translateX(3px); }
.nlg-eoa .eoa-btn.eoa-btn:disabled::after,
.nlg-eoa .eoa-btn.eoa-btn[aria-disabled="true"]::after { display: none; }

/* The orange call-to-action matches the site's own Elementor buttons (measured on the homepage
   2026-10-14, Art: "aligned with the rest of the website"): #EF7A11, white text, square corners,
   Montserrat 15px/600, 25px 32px padding, no border, hover #F08B38. Art accepted the lower contrast. */
.nlg-eoa .eoa-btn.eoa-btn--cta {
  padding: 25px 32px;
  font-size: 15px;
  font-weight: 600;
  background: #EF7A11;
  border-color: #EF7A11;
  color: #fff;
}
.nlg-eoa .eoa-btn.eoa-btn--cta:hover { background: #F08B38; border-color: #F08B38; color: #fff; box-shadow: none; }

.nlg-eoa .eoa-btn.eoa-btn--ghost { background: transparent; color: var(--eoa-navy); border-color: var(--eoa-control); }
.nlg-eoa .eoa-btn.eoa-btn--ghost:hover { background: var(--eoa-tint); color: var(--eoa-navy); border-color: var(--eoa-navy); box-shadow: none; }

.nlg-eoa .eoa-btn.eoa-btn:disabled,
.nlg-eoa .eoa-btn.eoa-btn:disabled:hover,
.nlg-eoa .eoa-btn.eoa-btn[aria-disabled="true"],
.nlg-eoa .eoa-btn.eoa-btn[aria-disabled="true"]:hover { opacity: .65; cursor: progress; box-shadow: none; transform: none; }
.nlg-eoa .eoa-form[inert] { cursor: progress; }

.nlg-eoa .eoa-link.eoa-link {
  display: inline;
  margin: 0 0 0 6px;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nlg-eoa .eoa-link.eoa-link:hover { background: none; color: inherit; }
.nlg-eoa .eoa-link.eoa-link:focus-visible { outline: 3px solid var(--eoa-focus); outline-offset: 2px; }

/* An email address in full, one run of text: a narrow line breaks at the <wbr> after the "@";
   a half wider than the line on its own is the only thing ever broken mid-word. */
.nlg-eoa .eoa-email { overflow-wrap: break-word; }

/* Final step, above Submit: where the report goes (GOV.UK inset text). */
.nlg-eoa .eoa-sendto {
  margin: 30px 0 0;
  padding: 12px 0 12px 16px;
  border-left: 4px solid var(--eoa-navy);
  font-size: 16px;
  line-height: 1.6;
  color: var(--eoa-ink);
}
.nlg-eoa .eoa-sendto .eoa-email { font-weight: 700; color: var(--eoa-navy); }
.nlg-eoa .eoa-sendto .eoa-link.eoa-link { margin-left: 0; white-space: nowrap; }
.nlg-eoa .eoa-alert--info .eoa-email { font-weight: 700; }

/* ---------- welcome ---------- */

.nlg-eoa .eoa-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  box-shadow: var(--eoa-shadow);
  border-radius: var(--eoa-radius);
  overflow: hidden;
}
.nlg-eoa .eoa-hero__main { padding: 40px var(--eoa-gutter) 36px; }
.nlg-eoa .eoa-hero__main > * { animation: eoa-rise .6s var(--eoa-ease) both; }
.nlg-eoa .eoa-hero__main > :nth-child(2) { animation-delay: .05s; }
.nlg-eoa .eoa-hero__main > :nth-child(3) { animation-delay: .1s; }
.nlg-eoa .eoa-hero__main > :nth-child(4) { animation-delay: .14s; }
.nlg-eoa .eoa-hero__main > :nth-child(n+5) { animation-delay: .18s; }
.nlg-eoa .eoa-hero__main .eoa-title {
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: 24px;
}
.nlg-eoa .eoa-hero__main .eoa-title b { display: block; }
.nlg-eoa .eoa-hero__main .eoa-lede { max-width: 54ch; }
.nlg-eoa .eoa-hero__main .eoa-lede--snapshot {
  margin-top: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--eoa-orange);
  font-weight: 500;
  color: var(--eoa-navy);
  line-height: 1.65;
}
.nlg-eoa .eoa-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 32px;
}
.nlg-eoa .eoa-hero__cta .eoa-btn.eoa-btn { width: 100%; }
.nlg-eoa .eoa-hero__panel {
  position: relative;
  overflow: hidden;
  background: var(--eoa-navy);
  background-image: radial-gradient(120% 80% at 100% 0%, rgba(47, 95, 167, .45), rgba(16, 46, 89, 0) 60%);
  color: #fff;
  padding: 36px var(--eoa-gutter) 32px;
}
.nlg-eoa .eoa-topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .12;
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  pointer-events: none;
  animation: eoa-topo-in 1.2s ease both;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .35) 62%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 30%, rgba(0, 0, 0, .35) 62%, transparent 80%);
}
.nlg-eoa .eoa-hero__kicker {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFC48A;
  margin: 0 0 10px;
}
.nlg-eoa .eoa-hero__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.nlg-eoa .eoa-hero__list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0;
  padding: 15px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  animation: eoa-rise .6s var(--eoa-ease) both;
  animation-delay: calc(.12s + var(--i, 0) * .06s);
}
.nlg-eoa .eoa-hero__list span { font-size: 18px; font-weight: 700; color: #fff; }
.nlg-eoa .eoa-hero__list b {
  flex: none;
  width: 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--eoa-orange);
  font-variant-numeric: tabular-nums;
}
.nlg-eoa .eoa-hero__note {
  position: relative;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
  color: #E4EBF5;
}

/* ---------- step shell ---------- */

.nlg-eoa .eoa-app {
  background: #fff;
  box-shadow: var(--eoa-shadow);
  border-radius: var(--eoa-radius);
}

.nlg-eoa .eoa-mbar {
  padding: 16px var(--eoa-gutter) 0;
}
.nlg-eoa .eoa-mbar__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eoa-muted);
  padding-bottom: 10px;
}
.nlg-eoa .eoa-mbar__step { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlg-eoa .eoa-mbar__pct { flex: none; color: var(--eoa-navy); font-size: 13px; font-weight: 600; }

/* Seven segments, one per step. */
.nlg-eoa .eoa-bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  height: 4px;
}
.nlg-eoa .eoa-bar i {
  display: block;
  height: 100%;
  background: var(--eoa-line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.nlg-eoa .eoa-bar i.is-done { background: var(--eoa-navy); }
.nlg-eoa .eoa-bar i.is-current { background: #F9DDC2; }
.nlg-eoa .eoa-bar i.is-current::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eoa-orange);
  transform-origin: left;
  transform: scaleX(var(--share, 0));
  transition: transform .35s var(--eoa-ease);
}

.nlg-eoa .eoa-rail { display: none; }

.nlg-eoa .eoa-main {
  padding: 28px var(--eoa-gutter) 0;
  min-width: 0;
  /* The two-column grids follow the form column itself, not the whole form (rail included). */
  container-type: inline-size;
  container-name: eoa-main;
}

/* ---------- fields ---------- */

.nlg-eoa .eoa-form { margin: 0; }

.nlg-eoa .eoa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 24px;
}

.nlg-eoa .eoa-field { margin: 0 0 22px; min-width: 0; scroll-margin-top: var(--eoa-scroll-offset); }
.nlg-eoa .eoa-field--sub {
  margin-top: -8px;
  padding: 14px 0 0 18px;
  border-left: 2px solid var(--eoa-orange);
  animation: eoa-rise .35s var(--eoa-ease) both;
}

.nlg-eoa .eoa-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.nlg-eoa .eoa-label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--eoa-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.003em;
  color: var(--eoa-navy);
  border: 0;
}
.nlg-eoa .eoa-opt { font-weight: 500; color: var(--eoa-muted); }

.nlg-eoa .eoa-field .eoa-input,
.nlg-eoa .eoa-field .eoa-select,
.nlg-eoa .eoa-field .eoa-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 13px 14px;
  min-height: 52px;
  font-family: var(--eoa-font);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  font-weight: 500;
  line-height: 1.45;
  color: var(--eoa-ink);
  background-color: #fff;
  border: 1px solid var(--eoa-control);
  border-radius: var(--eoa-radius);
  box-shadow: none;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.nlg-eoa .eoa-field .eoa-input::placeholder,
.nlg-eoa .eoa-field .eoa-textarea::placeholder { color: #8592A3; font-weight: 400; }
.nlg-eoa .eoa-field .eoa-textarea { min-height: 120px; resize: none; overflow: hidden; line-height: 1.6; }
.nlg-eoa .eoa-field .eoa-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23102E59' stroke-width='1.8' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.nlg-eoa .eoa-field .eoa-select:disabled { color: var(--eoa-muted); background-color: var(--eoa-sky); cursor: progress; }
.nlg-eoa .eoa-field .eoa-input:hover,
.nlg-eoa .eoa-field .eoa-select:hover,
.nlg-eoa .eoa-field .eoa-textarea:hover { border-color: var(--eoa-navy); }
.nlg-eoa .eoa-field .eoa-input:focus,
.nlg-eoa .eoa-field .eoa-select:focus,
.nlg-eoa .eoa-field .eoa-textarea:focus {
  border-color: var(--eoa-navy);
  box-shadow: 0 0 0 3px rgba(24, 64, 126, .22);
  outline: none;
}
.nlg-eoa .eoa-field .eoa-select.is-prefilled { border-color: var(--eoa-blue-2); background-color: #F5F8FD; }

.nlg-eoa .eoa-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--eoa-blue);
}
.nlg-eoa .eoa-hint::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%2318407E' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

.nlg-eoa .eoa-sub + .eoa-grid,
.nlg-eoa .eoa-grid + .eoa-sub { margin-top: 6px; }
.nlg-eoa .eoa-app--start .eoa-form > .eoa-sub {
  max-width: none;
  padding-top: 26px;
  border-top: 1px solid var(--eoa-line);
  font-weight: 600;
  color: var(--eoa-navy);
  margin-bottom: 18px;
}

/* Final questions read as questions, not form labels; lines stay readable. */
.nlg-eoa .eoa-app--final .eoa-field .eoa-textarea,
.nlg-eoa .eoa-app--final .eoa-field .eoa-input,
.nlg-eoa .eoa-app--final .eoa-field--sub { max-width: 680px; }
.nlg-eoa .eoa-app--final .eoa-label {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.008em;
  margin-bottom: 14px;
  max-width: 60ch;
}
.nlg-eoa .eoa-app--final .eoa-field--sub .eoa-label { margin-bottom: 10px; }
.nlg-eoa .eoa-app--final .eoa-form > .eoa-field,
.nlg-eoa .eoa-app--final .eoa-grid > .eoa-field { margin-bottom: 34px; }
.nlg-eoa .eoa-app--final .eoa-form > .eoa-field + .eoa-field:not(.eoa-field--sub),
.nlg-eoa .eoa-app--final .eoa-form > .eoa-field--sub + .eoa-field,
.nlg-eoa .eoa-app--final .eoa-form > .eoa-field + .eoa-grid,
.nlg-eoa .eoa-app--final .eoa-form > .eoa-sub + .eoa-field { --eoa-edge-top: 30px; padding-top: 30px; border-top: 1px solid var(--eoa-line); }
.nlg-eoa .eoa-app--final .eoa-grid > .eoa-field { --eoa-edge-top: 0px; }

/* "Who is your Guide?" revealed under "Are you a current client?" (Yes): GOV.UK's conditional reveal,
   an indented block with the form's orange sub-question rule down its left edge (as under "Other" on
   the final step), as wide as one column of the details grid below. It only fades and rises in
   place (transform), so nothing under the finger moves on a phone. */
.nlg-eoa .eoa-clientq > .eoa-field:first-child { margin-bottom: 18px; }
.nlg-eoa .eoa-field--sub.eoa-cond {
  margin: 0 0 24px 12px;
  padding: 4px 0 4px 20px;
  max-width: 460px;
}

/* Yes/No: two radio tiles side by side, each with its circle (the same tile as the lists below). */
.nlg-eoa .eoa-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 300px;
}
.nlg-eoa .eoa-seg .eoa-seg__opt { min-height: 52px; }

/* Checkbox and radio lists, as quiet tiles. */
.nlg-eoa .eoa-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.nlg-eoa .eoa-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  margin: 0;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--eoa-ink);
  background: #fff;
  border: 1px solid var(--eoa-control);
  border-radius: var(--eoa-radius);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.nlg-eoa .eoa-choice:hover { border-color: var(--eoa-navy); background: var(--eoa-sky); }
.nlg-eoa .eoa-choice:has(.eoa-check:checked) { border-color: var(--eoa-navy); background: var(--eoa-tint); color: var(--eoa-navy); font-weight: 600; }
.nlg-eoa .eoa-choice .eoa-check {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: #fff;
  border: 1.5px solid var(--eoa-control);
  border-radius: 2px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.nlg-eoa .eoa-choice .eoa-check[type="radio"] { border-radius: 50%; }
.nlg-eoa .eoa-choice .eoa-check:checked { background: var(--eoa-navy); border-color: var(--eoa-navy); }
.nlg-eoa .eoa-choice .eoa-check[type="checkbox"]:checked {
  background: var(--eoa-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 14px;
}
.nlg-eoa .eoa-choice .eoa-check[type="radio"]:checked { box-shadow: inset 0 0 0 4px #fff; }
.nlg-eoa .eoa-choice .eoa-check:focus { outline: none; }
.nlg-eoa .eoa-choice .eoa-check:focus-visible { outline: 3px solid var(--eoa-focus); outline-offset: 3px; }

/* ---------- obsession items ---------- */

.nlg-eoa .eoa-scalehelp { margin: 0 0 6px; }
.nlg-eoa .eoa-scalehelp .eoa-sub { margin-bottom: 14px; }

.nlg-eoa .eoa-items { margin-top: 22px; counter-reset: none; }

.nlg-eoa .eoa-field.eoa-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  margin: 0;
  padding: 24px 0 22px;
  border-top: 1px solid var(--eoa-line);
  transition: background-color .25s ease;
}
.nlg-eoa .eoa-field.eoa-item > * { grid-column: 2; }
.nlg-eoa .eoa-field.eoa-item > .eoa-item__num { grid-column: 1; grid-row: 1; }

.nlg-eoa .eoa-item__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border: 1px solid var(--eoa-border);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--eoa-muted);
  font-variant-numeric: tabular-nums;
  background: #fff;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.nlg-eoa .eoa-item.is-answered .eoa-item__num {
  background: var(--eoa-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23102E59' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 13px;
  border-color: var(--eoa-tint);
}
.nlg-eoa .eoa-item.is-answered .eoa-item__n { opacity: 0; }

.nlg-eoa .eoa-item__text {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -.003em;
  color: var(--eoa-ink);
  max-width: 68ch;
  transition: color .25s ease;
}
.nlg-eoa .eoa-item.is-answered .eoa-item__text { color: var(--eoa-ink-2); }

/* 1 to 5, a divider, then N/A last. */
.nlg-eoa .eoa-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 1px minmax(0, 1.3fr);
  gap: 6px;
  max-width: 560px;
}
.nlg-eoa .eoa-scale__or {
  display: block;
  width: 1px;
  margin: 8px 0;
  background: var(--eoa-border);
}
.nlg-eoa .eoa-scale .eoa-scale__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding: 0;
  font-family: var(--eoa-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--eoa-ink-2);
  background: #fff;
  border: 1px solid var(--eoa-control);
  border-radius: var(--eoa-radius);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.nlg-eoa .eoa-scale .eoa-scale__btn--na {
  margin-left: 6px;
  font-size: 15px;
  letter-spacing: .02em;
}
.nlg-eoa .eoa-scale .eoa-scale__btn:hover { background: var(--eoa-tint); border-color: var(--eoa-navy); color: var(--eoa-navy); }
.nlg-eoa .eoa-scale .eoa-scale__btn[aria-checked="true"],
.nlg-eoa .eoa-scale .eoa-scale__btn[aria-checked="true"]:hover {
  background: var(--eoa-navy);
  border-color: var(--eoa-navy);
  border-style: solid;
  color: #fff;
  font-weight: 700;
}
.nlg-eoa .eoa-scale .eoa-scale__btn.is-picked { animation: eoa-pop .22s var(--eoa-ease); }
.nlg-eoa .eoa-scale .eoa-scale__btn:focus { outline: none; }
.nlg-eoa .eoa-scale .eoa-scale__btn:focus-visible {
  outline: 3px solid var(--eoa-focus);
  outline-offset: 2px;
  z-index: 1;
}
/* Labels sit under 1 and 5, on the same grid as the buttons. */
.nlg-eoa .eoa-scale__ends {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 1px minmax(0, 1.3fr);
  gap: 6px;
  max-width: 560px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--eoa-muted);
}
.nlg-eoa .eoa-scale__ends span { grid-row: 1; min-width: 0; }
/* "Strongly disagree" starts at the left edge of 1, "Strongly agree" ends at the right edge of 5:
   each wraps inside its own columns (1 to 3, and 4 to 5) and never hangs past the buttons. */
.nlg-eoa .eoa-scale__ends span:first-child { grid-column: 1 / span 3; justify-self: start; text-align: left; }
.nlg-eoa .eoa-scale__ends span:last-child { grid-column: 4 / span 2; justify-self: end; text-align: right; }

/* Answered count, shown in the action bar. */
.nlg-eoa .eoa-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--eoa-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nlg-eoa .eoa-count__ticks { display: flex; gap: 3px; }
.nlg-eoa .eoa-count__ticks i {
  display: block;
  width: 8px;
  height: 4px;
  border-radius: 1px;
  background: var(--eoa-line);
  transition: background-color .25s ease;
}
.nlg-eoa .eoa-count__ticks i.is-on { background: var(--eoa-navy); }
.nlg-eoa .eoa-count.is-complete { color: var(--eoa-navy); }
.nlg-eoa .eoa-count.is-complete .eoa-count__ticks i { background: var(--eoa-orange); }

/* ---------- errors and notices (GOV.UK error summary + error message) ---------- */

/* Error message: between the question and the control, with a hidden "Error:" before it. */
.nlg-eoa .eoa-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--eoa-error);
  animation: eoa-rise .3s var(--eoa-ease) both;
}
.nlg-eoa .eoa-error::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--eoa-icon-error) no-repeat center / contain;
}
.nlg-eoa .eoa-item .eoa-error { margin: -4px 0 12px; }

/* Invalid answers: a 2px error-coloured edge (1px border + 1px shadow, so nothing shifts).
   Radio and checkbox tiles (Yes/No, role, how it grows) keep their own borders: as in GOV.UK, only
   the group's left edge and the message turn red, so no option looks wrong in itself. */
.nlg-eoa .eoa-field.is-invalid .eoa-input,
.nlg-eoa .eoa-field.is-invalid .eoa-select,
.nlg-eoa .eoa-field.is-invalid .eoa-textarea,
.nlg-eoa .eoa-field.is-invalid .eoa-scale .eoa-scale__btn:not([aria-checked="true"]) {
  border-color: var(--eoa-error);
  box-shadow: inset 0 0 0 1px var(--eoa-error);
}
.nlg-eoa .eoa-field.is-invalid .eoa-input:focus,
.nlg-eoa .eoa-field.is-invalid .eoa-select:focus,
.nlg-eoa .eoa-field.is-invalid .eoa-textarea:focus { box-shadow: inset 0 0 0 1px var(--eoa-error), 0 0 0 3px rgba(24, 64, 126, .22); }
.nlg-eoa .eoa-field.is-invalid .eoa-scale { animation: eoa-shake .3s ease 1; }
/* A left rule ties the message to its question, like GOV.UK's error form group. It is drawn as a
   background starting below the field's own top spacing (--eoa-edge-top), so on the final step the
   section divider stays above it and no red runs through the empty space. */
.nlg-eoa .eoa-field.is-invalid:not(.eoa-item):not(.eoa-field--sub) {
  padding-left: 19px;
  background: linear-gradient(var(--eoa-error), var(--eoa-error)) no-repeat 0 var(--eoa-edge-top, 0px) / 4px calc(100% - var(--eoa-edge-top, 0px));
}
.nlg-eoa .eoa-field.eoa-field--sub.is-invalid { border-left-color: var(--eoa-error); }
.nlg-eoa .eoa-field.eoa-item.is-invalid {
  background: var(--eoa-error-bg);
  margin: 0 calc(-1 * var(--eoa-gutter));
  padding-left: var(--eoa-gutter);
  padding-right: var(--eoa-gutter);
  box-shadow: inset 4px 0 0 var(--eoa-error);
  border-top-color: transparent;
}
.nlg-eoa .eoa-field.eoa-item.is-invalid + .eoa-item { border-top-color: transparent; }
.nlg-eoa .eoa-field.eoa-item.is-invalid .eoa-item__num { border-color: var(--eoa-error); color: var(--eoa-error); }

/* Error summary: top of the step, "There is a problem", one link per answer. */
.nlg-eoa .eoa-summary {
  margin: 0 0 28px;
  padding: 18px 18px 18px 20px;
  border: 3px solid var(--eoa-error);
  border-radius: var(--eoa-radius);
  background: #fff;
  color: var(--eoa-ink);
  animation: eoa-rise .3s var(--eoa-ease) both;
  scroll-margin-top: var(--eoa-scroll-offset);
}
.nlg-eoa .eoa-summary:focus { outline: 3px solid var(--eoa-orange); outline-offset: 3px; }
.nlg-eoa .eoa-summary .eoa-summary__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--eoa-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--eoa-navy);
}
.nlg-eoa .eoa-summary .eoa-summary__title::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--eoa-icon-error) no-repeat center / contain;
}
.nlg-eoa .eoa-summary__list { list-style: none; margin: 0; padding: 0; }
.nlg-eoa .eoa-summary__list li {
  margin: 0;
  padding: 3px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--eoa-error);
}
.nlg-eoa .eoa-summary__list a,
.nlg-eoa .eoa-summary__list a:visited {
  color: var(--eoa-error);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  box-shadow: none;
}
.nlg-eoa .eoa-summary__list a:hover { color: #7A1717; text-decoration-thickness: 2px; }
.nlg-eoa .eoa-summary__list a:focus { outline: none; }
.nlg-eoa .eoa-summary__list a:focus-visible {
  outline: 3px solid transparent;
  color: var(--eoa-navy);
  background: #FFD8AE;
  box-shadow: 0 -2px #FFD8AE, 0 4px var(--eoa-navy);
  text-decoration: none;
}

.nlg-eoa .eoa-alert {
  display: block;
  margin: 24px 0 0;
  padding: 14px 16px 14px 46px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid #F0C9C6;
  border-radius: var(--eoa-radius);
  background: var(--eoa-error-bg);
  color: #7A1717;
  animation: eoa-rise .3s var(--eoa-ease) both;
}
.nlg-eoa .eoa-alert::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 20px;
  height: 20px;
  background: var(--eoa-icon-error) no-repeat center / contain;
}
.nlg-eoa .eoa-alert:focus { outline: none; }
.nlg-eoa .eoa-alert:focus-visible { outline: 3px solid var(--eoa-focus); outline-offset: 2px; }
.nlg-eoa .eoa-alert--notice { border-color: #F6D3AE; background: #FFF7EE; color: #5A3200; }
.nlg-eoa .eoa-alert--notice::before { background-image: var(--eoa-icon-notice); }
.nlg-eoa .eoa-alert--info { margin: 0 0 26px; border-color: #C9D6EA; background: var(--eoa-tint); color: var(--eoa-navy); font-weight: 500; }
.nlg-eoa .eoa-alert--info::before { background-image: var(--eoa-icon-info); }
.nlg-eoa .eoa-alert--info .eoa-link.eoa-link { margin-left: 0; white-space: nowrap; }
.nlg-eoa .eoa-hero .eoa-alert { margin: 12px 0 0; }

/* ---------- step navigation: an action bar that stays in reach ---------- */

.nlg-eoa .eoa-nav {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 32px calc(-1 * var(--eoa-gutter)) 0;
  padding: 12px var(--eoa-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--eoa-line);
  border-radius: 0 0 var(--eoa-radius) var(--eoa-radius);
}
/* On the rating steps the bar stays in reach (Next and the answered count).
   Text-heavy steps keep it in the flow, so it never sits over a field. */
.nlg-eoa .eoa-app--obsession .eoa-nav {
  position: sticky;
  bottom: 0;
  box-shadow: 0 -10px 24px -18px rgba(16, 46, 89, .35);
}
/* Keyboard focus and error scrolling keep a statement clear of the bar. */
.nlg-eoa .eoa-app--obsession .eoa-item,
.nlg-eoa .eoa-app--obsession .eoa-item [role="radio"] { scroll-margin-bottom: 140px; scroll-margin-top: var(--eoa-scroll-offset); }
.nlg-eoa .eoa-nav .eoa-btn.eoa-btn { padding-left: 20px; padding-right: 20px; }
.nlg-eoa .eoa-nav .eoa-btn--ghost.eoa-btn { flex: none; }
.nlg-eoa .eoa-nav [type="submit"].eoa-btn { flex: 0 1 auto; min-width: 128px; }
.nlg-eoa .eoa-nav .eoa-count { flex: 1 1 auto; }

/* ---------- thank you (GOV.UK confirmation page) ---------- */

.nlg-eoa .eoa-thanks {
  background: #fff;
  box-shadow: var(--eoa-shadow);
  border-radius: var(--eoa-radius);
  text-align: left;
  overflow: hidden;
}
.nlg-eoa .eoa-thanks > * { animation: eoa-rise .6s var(--eoa-ease) both; }
.nlg-eoa .eoa-thanks > :nth-child(2) { animation-delay: .25s; }
/* The panel: navy, white text, the heading and the reference. */
.nlg-eoa .eoa-panel {
  padding: 44px var(--eoa-gutter) 40px;
  background: var(--eoa-navy);
  color: #fff;
  text-align: center;
  border-bottom: 4px solid var(--eoa-orange);
}
.nlg-eoa .eoa-panel .eoa-title { margin: 0 auto; max-width: 18em; font-size: 32px; letter-spacing: -.02em; color: #fff; overflow-wrap: normal; }
.nlg-eoa .eoa-panel .eoa-title b { display: block; color: #fff; }
.nlg-eoa .eoa-panel__body { margin: 22px 0 0; font-size: 18px; line-height: 1.4; color: #fff; }
.nlg-eoa .eoa-panel__label { display: block; margin-bottom: 4px; font-weight: 500; }
.nlg-eoa .eoa-thanks__id {
  display: inline-block;
  max-width: 100%;
  font-size: 24px;
  font-weight: 700;
  overflow-wrap: anywhere; /* only if the reference is wider than the panel on its own (320px phones) */
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  -webkit-user-select: all;
  user-select: all;
}
.nlg-eoa .eoa-thanks__tick {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
}
.nlg-eoa .eoa-thanks__tick svg { display: block; width: 100%; height: 100%; }
.nlg-eoa .eoa-thanks__ring { fill: var(--eoa-orange); stroke: none; }
.nlg-eoa .eoa-thanks__check {
  fill: none;
  stroke: var(--eoa-navy);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: eoa-draw .5s var(--eoa-ease) .35s forwards;
}
/* Below the panel: centred under the navy panel (Art, 2026-10-14), paragraph and button. */
.nlg-eoa .eoa-thanks__content { max-width: 680px; margin: 0 auto; padding: 32px var(--eoa-gutter) 40px; text-align: center; }
.nlg-eoa .eoa-thanks__body { margin: 0 0 30px; font-size: 16px; line-height: 1.7; color: var(--eoa-ink-2); }
.nlg-eoa .eoa-thanks .eoa-btn.eoa-btn--ghost { min-width: 260px; }

/* A reminder link: whose assessment, before anything opens. Two saved assessments: which one? */
.nlg-eoa .eoa-card {
  background: #fff;
  box-shadow: var(--eoa-shadow);
  border-radius: var(--eoa-radius);
  padding: 40px var(--eoa-gutter) 36px;
}
.nlg-eoa .eoa-ask { max-width: 760px; margin: 0 auto; }
/* The address at body size on its own line under the question, so it is read whole. */
.nlg-eoa .eoa-ask .eoa-title .eoa-ask__who {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  overflow-wrap: normal;
}
.nlg-eoa .eoa-ask .eoa-lede { max-width: 56ch; }
.nlg-eoa .eoa-ask__list { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--eoa-line); }
.nlg-eoa .eoa-ask__list div { padding: 14px 0; border-bottom: 1px solid var(--eoa-line); }
.nlg-eoa .eoa-ask__list dt { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--eoa-orange-text); }
.nlg-eoa .eoa-ask__list dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--eoa-navy); }
.nlg-eoa .eoa-ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.nlg-eoa .eoa-ask__actions .eoa-btn.eoa-btn { white-space: normal; }
/* "Start a new one" claims nothing and is the quieter way out: a text link, not a button. */
.nlg-eoa .eoa-ask__actions .eoa-ask__new.eoa-link { margin: 0; padding: 8px 0; font-weight: 600; color: var(--eoa-navy); }

/* ---------- phone ---------- */

/* Only below the 600px container width: the card dissolves into the page so
   the statements get the full column, and the action bar spans the screen. */
@container nlg-eoa (max-width: 599px) {
  /* A container query styles descendants only, so the gutter is reset one level down
     (setting it on .nlg-eoa itself never applied, leaving 20px of extra side padding). */
  .nlg-eoa > * { --eoa-gutter: 0px; }
  .nlg-eoa .eoa-app,
  .nlg-eoa .eoa-hero,
  .nlg-eoa .eoa-card,
  .nlg-eoa .eoa-thanks { box-shadow: none; background: transparent; border-radius: 0; }
  .nlg-eoa .eoa-card { padding: 28px 0 24px; }
  .nlg-eoa .eoa-ask__actions .eoa-btn.eoa-btn { width: 100%; padding-left: 12px; padding-right: 12px; }
  /* Long labels stay on one line on phones: no arrow on the three-way choice, and a smaller title. */
  .nlg-eoa .eoa-ask__actions--choice .eoa-btn.eoa-btn::after { display: none; }
  .nlg-eoa .eoa-ask .eoa-title { font-size: 26px; }
  .nlg-eoa .eoa-hero { display: flex; flex-direction: column; background: transparent; }
  .nlg-eoa .eoa-hero__main { display: contents; }
  .nlg-eoa .eoa-hero__main > .eoa-eyebrow { order: 1; margin-bottom: 12px; }
  .nlg-eoa .eoa-hero__main > .eoa-title { order: 2; font-size: 36px; margin-bottom: 16px; }
  .nlg-eoa .eoa-hero__main > .eoa-lede--snapshot { order: 3; margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
  .nlg-eoa .eoa-hero__main > .eoa-alert { order: 4; margin: 0 0 18px; }
  /* Start sits in the first screen, before the Five Obsessions panel. */
  .nlg-eoa .eoa-hero__main > .eoa-hero__cta { order: 5; margin: 0 0 24px; gap: 12px; justify-content: center; }
  .nlg-eoa .eoa-hero__panel { order: 6; padding: 18px 20px 16px; border-radius: var(--eoa-radius); }
  .nlg-eoa .eoa-hero__main > .eoa-lede--intro { order: 7; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--eoa-line); font-size: 15px; line-height: 1.7; }
  .nlg-eoa .eoa-hero__kicker { margin-bottom: 4px; font-size: 13px; }
  .nlg-eoa .eoa-hero__list li { padding: 8px 0; font-size: 15px; gap: 14px; }
  .nlg-eoa .eoa-hero__list span { font-size: 16px; }
  .nlg-eoa .eoa-hero__list li:last-child { border-bottom: 0; }
  .nlg-eoa .eoa-hero__list b { width: 20px; font-size: 12px; }
  .nlg-eoa .eoa-hero__note { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .13); font-size: 13.5px; line-height: 1.5; }
  .nlg-eoa .eoa-mbar { padding-top: 4px; }
  .nlg-eoa .eoa-thanks { margin-top: 0; overflow: visible; }
  .nlg-eoa .eoa-panel { padding: 32px 16px 28px; border-radius: var(--eoa-radius); }
  .nlg-eoa .eoa-panel .eoa-title { font-size: 27px; }
  .nlg-eoa .eoa-panel__body { font-size: 17px; }
  .nlg-eoa .eoa-thanks__id { font-size: 19px; letter-spacing: 0; }
  .nlg-eoa .eoa-thanks__tick { width: 52px; height: 52px; margin-bottom: 14px; }
  .nlg-eoa .eoa-thanks__content { padding: 26px 0 24px; }
  .nlg-eoa .eoa-thanks .eoa-btn.eoa-btn--ghost { width: 100%; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: normal; }

  /* Number floats beside the first line; the text then uses the full width. */
  .nlg-eoa .eoa-field.eoa-item { display: block; padding: 22px 0 20px; }
  .nlg-eoa .eoa-item__num { position: absolute; left: 0; top: 22px; width: 24px; height: 24px; margin: 0; font-size: 12px; }
  .nlg-eoa .eoa-item__text { padding-left: 36px; font-size: 16px; line-height: 1.5; }
  .nlg-eoa .eoa-field.eoa-item.is-invalid .eoa-item__num { left: 12px; }
  .nlg-eoa .eoa-scale__ends { font-size: 13px; line-height: 1.25; }
  .nlg-eoa .eoa-field.eoa-item.is-invalid { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .nlg-eoa .eoa-summary { padding: 16px 14px 16px 16px; }
  .nlg-eoa .eoa-scale .eoa-scale__btn--na { margin-left: 3px; font-size: 14px; letter-spacing: .01em; }

  /* Action bar: count on its own line, Back compact, Next takes the rest. */
  .nlg-eoa .eoa-nav { flex-wrap: wrap; gap: 10px; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; border-radius: 0; }
  .nlg-eoa .eoa-nav .eoa-count { order: -1; flex: 1 0 100%; flex-direction: row; justify-content: space-between; gap: 12px; }
  .nlg-eoa .eoa-nav .eoa-count__ticks { flex: 1 1 auto; max-width: 180px; }
  .nlg-eoa .eoa-nav .eoa-count__ticks i { flex: 1 1 0; width: auto; }
  .nlg-eoa .eoa-nav .eoa-btn--ghost.eoa-btn { padding-left: 18px; padding-right: 18px; }
  .nlg-eoa .eoa-nav [type="submit"].eoa-btn { flex: 1 1 auto; min-width: 0; }
}
/* Role titles are short: two columns on phones once the column can hold "Director/VP" on a line. */
@container nlg-eoa (min-width: 340px) and (max-width: 599px) {
  .nlg-eoa .eoa-choices--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlg-eoa .eoa-choices--compact .eoa-choice { gap: 10px; padding: 9px 10px; font-size: 14px; hyphens: manual; }
}
@media (max-width: 599px) {
  /* Bleed the sticky bar to the screen edges on real phones. */
  .nlg-eoa .eoa-nav { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
}

/* ---------- larger screens ---------- */

/* Step 1 and the final step: two columns only when each holds a label and its error message on a
   line or two (a column under ~360px wraps "Enter an email address in the correct format..." to 4+). */
@container eoa-main (min-width: 760px) {
  .nlg-eoa .eoa-grid { grid-template-columns: 1fr 1fr; }
}

@container nlg-eoa (min-width: 600px) {
  /* A container query styles descendants only, so the gutter is set on the children (as on phones). */
  .nlg-eoa > * { --eoa-gutter: 36px; }
  .nlg-eoa .eoa-choices--cols { grid-template-columns: 1fr 1fr; }
  .nlg-eoa .eoa-main { padding-top: 40px; }
  .nlg-eoa .eoa-title { font-size: 36px; }
  .nlg-eoa .eoa-scale { gap: 8px; }
  .nlg-eoa .eoa-scale__ends { gap: 8px; }
  .nlg-eoa .eoa-scale .eoa-scale__btn { min-height: 48px; }
  .nlg-eoa .eoa-scale .eoa-scale__btn--na { margin-left: 10px; }
  .nlg-eoa .eoa-field.eoa-item { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 28px 0 26px; }
  .nlg-eoa .eoa-item__text { font-size: 16.5px; }
  .nlg-eoa .eoa-nav { padding-top: 16px; padding-bottom: 16px; }
  .nlg-eoa .eoa-nav [type="submit"].eoa-btn { min-width: 160px; }
  .nlg-eoa .eoa-hero__cta .eoa-btn.eoa-btn { width: auto; }
  .nlg-eoa .eoa-hero__main .eoa-title { font-size: 46px; }
  .nlg-eoa .eoa-panel { padding: 56px 48px 48px; }
  .nlg-eoa .eoa-panel .eoa-title { font-size: 40px; }
  .nlg-eoa .eoa-thanks__content { padding: 40px 48px 48px; }
}

@container nlg-eoa (min-width: 768px) {
  .nlg-eoa .eoa-hero { grid-template-columns: 1.2fr 1fr; min-height: 560px; }
  .nlg-eoa .eoa-hero__main { padding: 72px 64px 64px; display: flex; flex-direction: column; justify-content: center; }
  .nlg-eoa .eoa-hero__main .eoa-title { font-size: 54px; }
  .nlg-eoa .eoa-hero__panel { padding: 72px 52px 56px; display: flex; flex-direction: column; justify-content: center; }
}

@container nlg-eoa (min-width: 900px) {
  .nlg-eoa > * { --eoa-gutter: 56px; }
  .nlg-eoa .eoa-app {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
  }
  .nlg-eoa .eoa-mbar { display: none; }
  .nlg-eoa .eoa-rail {
    display: block;
    background: var(--eoa-sky);
    border-right: 1px solid var(--eoa-line);
    border-radius: var(--eoa-radius) 0 0 var(--eoa-radius);
    padding: 48px 28px;
  }
  .nlg-eoa .eoa-rail__inner { position: sticky; top: calc(var(--eoa-scroll-offset) + 8px); }
  .nlg-eoa .eoa-rail__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--eoa-muted);
    margin: 0 0 18px;
  }
  .nlg-eoa .eoa-rail__list { list-style: none; margin: 0; padding: 0; position: relative; }
  .nlg-eoa .eoa-rail__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 0 0 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--eoa-muted);
  }
  /* connector line between steps */
  .nlg-eoa .eoa-rail__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: 2px;
    width: 1px;
    background: #D3DBE6;
  }
  .nlg-eoa .eoa-rail__item.is-done:not(:last-child)::after { background: var(--eoa-navy); }
  .nlg-eoa .eoa-rail__item::before {
    content: "";
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.5px solid #A9B5C4;
    background: #fff;
    position: relative;
    z-index: 1;
  }
  .nlg-eoa .eoa-rail__item.is-done { color: var(--eoa-navy); }
  .nlg-eoa .eoa-rail__item.is-done::before {
    background: var(--eoa-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 12px;
    border-color: var(--eoa-navy);
  }
  .nlg-eoa .eoa-rail__item.is-current { color: var(--eoa-navy); font-weight: 700; }
  .nlg-eoa .eoa-rail__item.is-current::before { background: var(--eoa-orange); border-color: var(--eoa-orange); box-shadow: inset 0 0 0 3.5px #fff, 0 0 0 4px rgba(239, 122, 17, .16); }
  .nlg-eoa .eoa-rail__pct { margin: 18px 0 10px; padding-top: 18px; border-top: 1px solid var(--eoa-line); font-size: 13px; font-weight: 600; color: var(--eoa-navy); }
  .nlg-eoa .eoa-main { padding-top: 52px; }
  .nlg-eoa .eoa-title { font-size: 40px; }
  .nlg-eoa .eoa-nav { border-radius: 0 0 var(--eoa-radius) 0; }
  .nlg-eoa .eoa-choices--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .nlg-eoa *,
  .nlg-eoa *::before,
  .nlg-eoa *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .nlg-eoa .eoa-thanks__check { stroke-dashoffset: 0; }
}

@media (forced-colors: active) {
  .nlg-eoa .eoa-scale .eoa-scale__btn[aria-checked="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .nlg-eoa .eoa-choice .eoa-check { forced-color-adjust: auto; -webkit-appearance: auto; appearance: auto; }
  .nlg-eoa .eoa-bar i.is-done, .nlg-eoa .eoa-bar i.is-current::after { background: Highlight; }
}

/* Phones: the form's text sits a fixed 20px from the screen edge (more only for a notch), whatever
   side padding the theme's column has: none on an Elementor full-width template, 10px in an
   Elementor container, 30px in Twenty Twenty-Five. The theme's own padding is (100vw - 100cqw) / 2,
   100cqw being the form's own width, so the form's blocks are inset by what is missing, or reach
   out into the theme's padding by what is extra (24px at most, in case the column is not the full
   screen). Only the form's own boxes move; the theme's
   styles are untouched. The pinned action bar still spans the screen through its 50vw offsets.
   Browsers without container units keep a plain 16px inset. */
@media (max-width: 599px) {
  .nlg-eoa { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  /* The page template adds no space around the form on phones, so the welcome eyebrow touched the
     site header and the last lines touched the footer (Art, 2026-10-15). The form brings its own. */
  .nlg-eoa { padding-top: 32px; padding-bottom: 48px; }
  .nlg-eoa .eoa-app--obsession .eoa-item [role="radio"] { scroll-margin-bottom: 190px; }
}
@supports (width: 1cqw) {
  @media (max-width: 599px) {
    .nlg-eoa { padding-left: 0; padding-right: 0; }
    /* Doubled class: beats the reminder card's own centring (.eoa-ask { margin: 0 auto }). */
    .nlg-eoa.nlg-eoa > * {
      margin-left: max(-24px, calc(max(20px, env(safe-area-inset-left, 0px)) - (100vw - 100cqw) / 2));
      margin-right: max(-24px, calc(max(20px, env(safe-area-inset-right, 0px)) - (100vw - 100cqw) / 2));
    }
  }
}

/* The site's floating iubenda "Privacy preferences" tab sits over the form's text on phones.
   form.css loads only on the form page, so this hides it there alone. Consent stays reachable
   from the footer's privacy-choices links. */
/* Repeated class: iubenda's own rule is .iubenda-tp-btn:not(..):not(..) (specificity 0,3,0) with !important. */
html body .iubenda-tp-btn.iubenda-tp-btn.iubenda-tp-btn[data-tp-float] { display: none !important; }

/* The site's Delphi chat bubble (fixed, bottom right, 44px, max z-index) sits on the right end of
   the pinned Next button on phones, so a tap there opens the chat instead (QA 2026-10-06). Hidden
   only while a rating step's bar is pinned on a phone; on every other step and on wider screens it
   stays where the site puts it. */
@media (max-width: 599px) {
  /* Art 2026-10-14: hidden on phones while the form is being filled in (steps 1-7); back on the welcome and thank-you screens. */
  html body:has(.nlg-eoa .eoa-app) #delphi-bubble-container,
  html body:has(.nlg-eoa .eoa-app) #delphi-bubble-trigger { display: none !important; }
}

/* The site footer (Elementor template 18081) opens with a "We're Not for Everyone" call-to-action
   box ("Talk with a Business Guide"). Art asked to drop it from the assessment page (2026-10-14);
   form.css loads only on the form page, so the footer keeps it everywhere else. */
html body .elementor-location-footer .elementor-element-74f3196 { display: none !important; }