:root {
  --oc-navy: #005eb8;
  --oc-blue: #005eb8;
  --oc-blue-dark: #004a91;
  --oc-green: #78be20;
  --oc-green-dark: #477900;
  --oc-amber: #f4b000;
  --oc-red: #c43b3b;
  --oc-grey-50: #f6f7f8;
  --oc-grey-100: #edf0f2;
  --oc-grey-300: #cdd4d9;
  --oc-grey-600: #5b6670;
  --oc-text: #17212b;
  --oc-white: #fff;
  --oc-shadow: 0 18px 50px rgba(0, 94, 184, .14);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--oc-text); background: var(--oc-white); font-family: "Noto Sans", Arial, sans-serif; }
#outage-app { overflow-x: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.oc-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.oc-hidden { display: none !important; }

.oc-hero {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--oc-blue) 0%, var(--oc-blue-dark) 100%);
  color: var(--oc-white);
  padding: 72px 0 84px;
  text-align: center;
}
.oc-kicker { text-transform: uppercase; letter-spacing: .13em; font-size: 13px; font-weight: 700; color: var(--oc-green); margin-bottom: 10px; }
.oc-hero h1, .oc-section h2 { margin: 0; line-height: 1.12; }
.oc-hero h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 600; }
.oc-hero-copy { max-width: 760px; margin: 20px auto 0; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.88); }

.oc-search-card { max-width: 900px; margin: 42px auto -140px; background: var(--oc-white); color: var(--oc-text); border-radius: 12px; box-shadow: var(--oc-shadow); text-align: left; overflow: hidden; position: relative; z-index: 3; }
.oc-search-step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 28px 30px; border-bottom: 1px solid var(--oc-grey-100); }
.oc-search-step:last-of-type { border-bottom: 0; }
.oc-step-number { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--oc-green); color: #10203a; font-weight: 800; font-size: 19px; }
.oc-step-content label { display: block; font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.oc-input-row { display: flex; gap: 12px; }
.oc-input-row input, .oc-input-row select { min-width: 0; flex: 1; height: 52px; border: 2px solid var(--oc-grey-300); border-radius: 6px; padding: 0 15px; background: var(--oc-white); color: var(--oc-text); outline: none; }
.oc-input-row input:focus, .oc-input-row select:focus { border-color: var(--oc-blue); box-shadow: 0 0 0 3px rgba(0,94,184,.16); }
.oc-input-row select:disabled { background: var(--oc-grey-50); }
.oc-help { margin: 8px 0 0; font-size: 13px; color: var(--oc-grey-600); }
.oc-btn { min-height: 52px; border-radius: 6px; padding: 0 24px; border: 0; font-weight: 700; transition: .18s ease; }
.oc-btn-primary { background: var(--oc-green); color: #10203a; }
.oc-btn-primary:hover:not(:disabled) { transform: translateY(-1px); background: #8acb35; }
.oc-btn:disabled { opacity: .55; cursor: not-allowed; }
.oc-inline-message { margin: 0 30px 28px 112px; padding: 13px 15px; border-radius: 6px; background: #fff3cd; color: #594600; line-height: 1.4; overflow-wrap: anywhere; position: relative; z-index: 4; }
.oc-inline-message.is-error { background: #fdecec; color: #7b2020; }

.oc-section { padding: 68px 0; }
#property-result-section { padding-top: 118px; }
.oc-section-alt { background: var(--oc-grey-50); padding-top: 150px; position: relative; z-index: 1; }
.oc-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.oc-section-heading h2 { font-size: clamp(30px, 4vw, 44px); color: var(--oc-navy); font-weight: 600; }
.oc-section-heading p { max-width: 770px; margin: 12px 0 0; line-height: 1.6; color: var(--oc-grey-600); }
.oc-last-updated { white-space: nowrap; color: var(--oc-grey-600); font-size: 13px; }

.oc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.oc-tab { border: 1px solid var(--oc-grey-300); background: var(--oc-white); color: var(--oc-navy); border-radius: 999px; padding: 10px 16px; font-weight: 700; }
.oc-tab span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--oc-grey-100); font-size: 12px; }
.oc-tab.is-active { background: var(--oc-navy); color: var(--oc-white); border-color: var(--oc-navy); }
.oc-tab.is-active span { color: var(--oc-navy); background: var(--oc-white); }

.oc-list { display: grid; gap: 16px; }
.oc-loading, .oc-empty { text-align: center; padding: 42px 24px; border: 1px dashed var(--oc-grey-300); border-radius: 10px; color: var(--oc-grey-600); background: var(--oc-white); }
.oc-notice-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: center; padding: 24px 26px; background: var(--oc-white); border: 1px solid #e1e6e9; border-left: 6px solid var(--oc-red); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,94,184,.08); }
.oc-notice-card[data-category="planned"] { border-left-color: var(--oc-amber); }
.oc-notice-card[data-category="resolved"] { border-left-color: var(--oc-green); }
.oc-notice-card h3 { margin: 6px 0 8px; font-size: 22px; color: var(--oc-navy); }
.oc-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--oc-red); }
.oc-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
[data-category="planned"] .oc-badge, .oc-badge[data-category="planned"] { color: #8a6200; }
[data-category="resolved"] .oc-badge, .oc-badge[data-category="resolved"] { color: var(--oc-green-dark); }
.oc-card-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--oc-grey-600); font-size: 14px; line-height: 1.5; }
.oc-card-meta strong { color: var(--oc-text); }
.oc-view-button { background: transparent; border: 2px solid var(--oc-navy); color: var(--oc-navy); border-radius: 6px; padding: 11px 18px; font-weight: 700; white-space: nowrap; }
.oc-view-button:hover { background: var(--oc-navy); color: var(--oc-white); }

.oc-result-hero { border-radius: 12px; overflow: hidden; box-shadow: var(--oc-shadow); border: 1px solid #e2e7ea; width: 100%; max-width: 100%; min-width: 0; }
.oc-result-top { padding: 34px; background: var(--oc-navy); color: var(--oc-white); }
.oc-result-top h2 { color: var(--oc-white); font-size: clamp(29px, 4vw, 42px); }
.oc-result-top p { color: rgba(255,255,255,.86); line-height: 1.6; }
.oc-result-top > * { min-width: 0; }
.oc-result-top p { max-width: 900px; margin-bottom: 0; }
.oc-result-top h2, .oc-result-top p, .oc-result-status { max-width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: normal; }
.oc-result-status { color: var(--oc-green); font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.oc-result-map-section { padding: 0 34px 34px; background: var(--oc-white); }
.oc-map { position: relative; width: 100%; max-width: 100%; min-width: 0; height: 460px; border-radius: 9px; overflow: hidden; background: #dfe7eb; }
.oc-map-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--oc-grey-600); background: var(--oc-grey-100); font-size: 14px; line-height: 1.5; }
.oc-map-note { font-size: 12px; color: var(--oc-grey-600); margin: 8px 0 0; }
.oc-postcodes { margin-top: 22px; border: 1px solid var(--oc-grey-300); border-radius: 8px; overflow: visible; background: var(--oc-white); }
.oc-postcodes summary { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; padding: 16px 22px; color: var(--oc-navy); font-size: 19px; font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
.oc-postcodes summary::-webkit-details-marker { display: none; }
.oc-postcodes summary:hover { background: var(--oc-grey-50); }
.oc-postcodes summary:focus-visible { outline: 3px solid rgba(0,94,184,.22); outline-offset: -3px; }
.oc-postcodes-chevron { width: 16px; height: 16px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .18s ease; flex: 0 0 auto; }
.oc-postcodes[open] .oc-postcodes-chevron { transform: rotate(225deg) translate(-2px, -1px); }
.oc-postcodes-list { border-top: 1px solid var(--oc-grey-300); padding: 18px 24px 22px; text-align: center; color: var(--oc-navy); font-weight: 600; line-height: 1.8; overflow-wrap: anywhere; }
.oc-result-body { padding: 34px; background: var(--oc-white); }
.oc-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.oc-stat { border: 1px solid var(--oc-grey-300); border-radius: 8px; padding: 18px; min-height: 112px; }
.oc-stat-label { color: var(--oc-grey-600); font-size: 13px; margin-bottom: 7px; }
.oc-stat-value { color: var(--oc-navy); font-size: 18px; font-weight: 700; line-height: 1.35; }
.oc-update-box { background: var(--oc-grey-50); border-left: 4px solid var(--oc-blue); padding: 20px 22px; border-radius: 6px; }
.oc-update-box h3 { margin: 0 0 8px; color: var(--oc-navy); font-size: 20px; }
.oc-update-box p { margin: 0; line-height: 1.65; }
.oc-no-issue { text-align: center; border-radius: 12px; padding: 46px 32px; background: #f3faea; border: 1px solid #d6eeb7; }
.oc-no-issue-icon { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--oc-green); color: var(--oc-navy); font-size: 34px; font-weight: 900; }
.oc-no-issue h2 { color: var(--oc-navy); font-size: clamp(28px, 4vw, 40px); }
.oc-no-issue p { max-width: 700px; margin: 12px auto 0; line-height: 1.6; }
.oc-multi-result { display: grid; gap: 28px; }
.oc-property-heading { margin-bottom: 20px; }
.oc-property-heading h2 { color: var(--oc-navy); font-size: 32px; margin: 0 0 6px; }
.oc-property-heading p { color: var(--oc-grey-600); }

.oc-text-button { border: 0; background: transparent; color: var(--oc-blue-dark); padding: 0; margin-bottom: 24px; font-weight: 700; }
#outage-detail-section { background: var(--oc-white); min-height: 100vh; padding-top: 38px; }

@media (max-width: 800px) {
  .oc-container { width: min(100% - 26px, 1180px); }
  .oc-hero { padding: 52px 0 72px; }
  .oc-search-card { margin-bottom: -125px; }
  .oc-search-step { grid-template-columns: 46px 1fr; padding: 22px 18px; gap: 12px; }
  .oc-step-number { width: 38px; height: 38px; font-size: 16px; }
  .oc-input-row { flex-direction: column; }
  .oc-btn { width: 100%; }
  .oc-inline-message { margin: 0 18px 22px 76px; }
  .oc-section-alt { padding-top: 135px; }
  .oc-section-heading { align-items: flex-start; flex-direction: column; }
  .oc-notice-card { grid-template-columns: 1fr; gap: 18px; }
  .oc-view-button { width: 100%; }
  .oc-result-top { padding: 22px; }
  .oc-result-top h2 { font-size: clamp(27px, 6vw, 36px); }
  .oc-result-status { font-size: 16px; line-height: 1.35; }
  .oc-result-top p { font-size: 16px; margin-bottom: 0; }
  .oc-result-map-section { padding: 0 22px 22px; }
  .oc-map { height: 340px; }
  .oc-result-body { padding: 22px; }
  .oc-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .oc-stat { min-width: 0; min-height: 104px; padding: 16px; }
  .oc-stat-value { overflow-wrap: anywhere; }
}

@media (max-width: 500px) {
  .oc-hero-copy { font-size: 16px; }
  .oc-search-card { margin-top: 28px; }
  .oc-search-step { grid-template-columns: 1fr; }
  .oc-step-number { display: none; }
  .oc-inline-message { margin: 0 18px 20px; }
  .oc-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .oc-tab { text-align: center; }
  .oc-result-top { padding: 18px; }
  .oc-result-top h2 { font-size: clamp(25px, 8vw, 32px); }
  .oc-result-map-section { padding: 0 18px 18px; }
  .oc-map { height: 280px; }
  .oc-postcodes { margin-top: 16px; }
  .oc-postcodes summary { min-height: 56px; padding: 14px 16px; font-size: 17px; }
  .oc-postcodes-list { padding: 15px 16px 18px; font-size: 14px; }
  .oc-result-body { padding: 18px; }
  .oc-stat-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .oc-stat { min-height: 0; padding: 14px 15px; }
  .oc-update-box { padding: 17px 18px; }
}

/* B4RN brand refresh */
:root {
  --oc-navy: #214545;
  --oc-blue: #1f5ea9;
  --oc-blue-dark: #17487f;
  --oc-green: #b0ca57;
  --oc-green-dark: #45582d;
  --oc-grey-50: #f1efec;
  --oc-grey-100: #e8e5e0;
  --oc-grey-300: #c4c1bb;
  --oc-grey-600: #56635f;
  --oc-text: #214545;
  --oc-white: #fff;
  --oc-shadow: 0 18px 50px rgba(33, 69, 69, .13);
}
body { color: var(--oc-text); background: #d9d6d1; }
.oc-container { width: min(1240px, calc(100% - 48px)); }
.oc-hero { text-align: left; color: var(--oc-text); padding: 54px 0 60px; background: radial-gradient(ellipse at 5% 0%, rgba(176,202,87,.23), transparent 44%), #d9d6d1; }
.oc-kicker { color: var(--oc-green-dark); }
.oc-hero h1 { max-width: 900px; font-size: clamp(40px, 5.3vw, 68px); letter-spacing: -.045em; color: var(--oc-navy); }
.oc-hero-copy { max-width: 800px; margin: 12px 0 0; color: #435451; font-size: 18px; }
.oc-dashboard { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: stretch; gap: 22px; margin-top: 36px; }
.oc-overview-card, .oc-search-card { margin: 0; max-width: none; border: 1px solid rgba(33,69,69,.1); border-radius: 18px; background: #fff; color: var(--oc-text); box-shadow: var(--oc-shadow); }
.oc-overview-card { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.oc-overview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.oc-eyebrow { display: block; color: #596862; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 9px; }
.oc-overview-head h2, .oc-search-intro h2 { margin: 0; color: var(--oc-navy); font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; letter-spacing: -.025em; }
.oc-health-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: #e8eddd; color: #334923; font-size: 12px; font-weight: 800; white-space: nowrap; }
.oc-health-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #45582d; }
.oc-health-pill.is-issue { background: #fbe8e5; color: #8a3027; }
.oc-health-pill.is-issue::before { background: #ad3e31; }
.oc-overview-copy { max-width: 600px; margin: 14px 0 0px; color: #586762; line-height: 1.55; }
.oc-overview-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #e6e8e1; border-radius: 12px; background: #fafbf8; }
.oc-overview-stats > div { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.oc-overview-stats > div + div { border-left: 1px solid #e6e8e1; }
.oc-overview-stats strong { color: var(--oc-navy); font-size: 27px; line-height: 1; }
.oc-overview-stats span { color: #5c6863; font-size: 12px; }
.oc-area-overview { margin-top: 22px; }
.oc-area-overview h3 { margin: 0 0 11px; font-size: 14px; color: var(--oc-navy); }
#overview-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-area-chip { display: inline-flex; padding: 7px 11px; border: 1px solid #dfe4d7; border-radius: 999px; color: #31472a; background: #f1f4eb; font-size: 12px; font-weight: 700; }
.oc-muted { color: #68736e; font-size: 13px; }
.oc-overview-card .oc-last-updated { margin-top: auto; padding-top: 24px; white-space: normal; }
.oc-search-card { overflow: visible; padding: clamp(24px, 3vw, 36px); }
.oc-search-intro { margin-bottom: 24px; }
.oc-search-intro p { margin: 9px 0 0; color: #586762; line-height: 1.5; }
.oc-search-step { display: block; padding: 0; border: 0; }
.oc-step-content label { color: var(--oc-navy); font-size: 14px; margin-bottom: 8px; }
.oc-input-row { gap: 9px; }
.oc-input-row input, .oc-input-row select { height: 54px; border: 1px solid #bcc7c2; border-radius: 9px; padding: 0 14px; }
.oc-input-row input:focus, .oc-input-row select:focus { border-color: var(--oc-blue); box-shadow: 0 0 0 4px rgba(31,94,169,.17); }
.oc-btn { min-height: 54px; border-radius: 9px; }
.oc-btn-primary { background: var(--oc-green); color: #203327; }
.oc-btn-primary:hover:not(:disabled) { background: #c0d76f; }
.oc-location-wrap { margin-top: 18px; }
.oc-or-divider { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #74807b; font-size: 12px; }
.oc-or-divider::before, .oc-or-divider::after { content: ""; flex: 1; border-top: 1px solid #e2e6e2; }
.oc-btn-location { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #b9c8c0; color: var(--oc-blue); background: #fff; }
.oc-btn-location:hover:not(:disabled) { background: #f0f5fa; border-color: var(--oc-blue); }
.oc-location-icon { font-size: 20px; line-height: 1; }
.oc-location-wrap > .oc-help { text-align: center; }
.oc-inline-message { margin: 16px 0 0; border-radius: 9px; }
.oc-section { padding: 62px 0; }
.oc-section-alt { padding-top: 62px; background: #ece9e4; }
.oc-section-heading h2 { color: var(--oc-navy); letter-spacing: -.03em; }
.oc-tab { color: var(--oc-navy); border-color: #c4c7c0; }
.oc-tab.is-active { background: var(--oc-navy); border-color: var(--oc-navy); }
.oc-notice-card { border-left-width: 5px; border-radius: 14px; box-shadow: 0 5px 20px rgba(33,69,69,.06); }
.oc-notice-card h3 { color: var(--oc-navy); }
.oc-result-top { background: var(--oc-navy); }
.oc-result-status { color: #d0e58c; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #1f5ea9; outline-offset: 3px; }
@media (max-width: 900px) {
  .oc-dashboard { grid-template-columns: minmax(0, 1fr); }
  .oc-hero { padding: 42px 0 48px; }
}
@media (max-width: 600px) {
  .oc-container { width: min(100% - 28px, 1240px); }
  .oc-hero h1 { font-size: clamp(36px, 10vw, 48px); }
  .oc-hero-copy { font-size: 16px; }
  .oc-dashboard { gap: 14px; margin-top: 26px; }
  .oc-overview-card, .oc-search-card { padding: 21px; }
  .oc-overview-head { flex-direction: column; }
  .oc-overview-stats > div { padding: 12px 10px; }
  .oc-overview-stats strong { font-size: 23px; }
  .oc-overview-stats span { font-size: 11px; }
}

.oc-support-links { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 30px; padding: 26px 28px; border: 1px solid #d6d8d1; border-radius: 14px; background: #f8f7f5; }
.oc-support-links h3 { margin: 0 0 6px; color: var(--oc-navy); font-size: 21px; }
.oc-support-links p { margin: 0; color: #596762; line-height: 1.5; }
.oc-support-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; }
.oc-support-actions a { color: var(--oc-blue); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.oc-support-actions a span { color: #52625c; font-weight: 500; }
.oc-support-actions .oc-support-form {
  padding: 0;
  border: 0;
  border-radius: 2px;
  color: var(--oc-blue);
  background: none;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.oc-support-actions .oc-support-form:hover { color: var(--oc-blue-dark); }
.oc-support-actions .oc-support-form:focus-visible { outline: 3px solid rgba(0, 94, 184, .35); outline-offset: 3px; }
@media (max-width: 800px) { .oc-support-links { align-items: flex-start; flex-direction: column; } .oc-support-actions { justify-content: flex-start; } }

/* Refined type, control and motion details */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.oc-hero { padding-top: clamp(42px, 6vw, 76px); }
.oc-kicker, .oc-eyebrow { letter-spacing: .14em; }
.oc-hero h1 { line-height: 1.02; }
.oc-dashboard { gap: clamp(16px, 2vw, 24px); }
.oc-overview-card, .oc-search-card { box-shadow: 0 2px 4px rgba(33,69,69,.025), 0 18px 48px rgba(33,69,69,.09); }
.oc-overview-card { min-height: 100%; }
.oc-search-card { display: flex; flex-direction: column; justify-content: center; }
.oc-overview-stats { overflow: hidden; }
.oc-overview-stats > div { transition: background-color .18s ease; }
.oc-overview-stats > div:hover { background: #f1f4eb; }
.oc-area-chip { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.oc-area-chip:hover { color: #263d25; background: #e7eddc; border-color: #b8c99b; }
.oc-input-row input, .oc-input-row select, .oc-btn { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease; }
.oc-btn-primary { box-shadow: inset 0 -2px 0 rgba(46,68,31,.13); }
.oc-btn-primary:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(74,97,43,.2), inset 0 -2px 0 rgba(46,68,31,.13); }
.oc-btn-location { box-shadow: 0 1px 2px rgba(33,69,69,.04); }
.oc-btn-location:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(33,69,69,.1); }
.oc-location-icon { font-size: 22px; font-weight: 400; }
.oc-tab, .oc-view-button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.oc-tab:hover:not(.is-active) { background: #eef0e9; border-color: #9aa69e; }
.oc-notice-card { transition: transform .2s ease, box-shadow .2s ease; }
.oc-notice-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(33,69,69,.1); }
.oc-support-links { box-shadow: 0 4px 18px rgba(33,69,69,.035); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 600px) {
  .oc-container { width: calc(100% - 28px); }
  .oc-dashboard > *, .oc-overview-card, .oc-search-card { min-width: 0; max-width: 100%; }
  .oc-overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-overview-stats span { overflow-wrap: anywhere; line-height: 1.25; }
  .oc-hero h1 { max-width: 100%; font-size: clamp(32px, 9vw, 42px); letter-spacing: -.035em; }
  .oc-hero-copy, .oc-overview-copy, .oc-search-intro p { overflow-wrap: break-word; }
}

@media (max-width: 600px) {
  .oc-hero > .oc-container, .oc-section > .oc-container { width: calc(100vw - 28px); max-width: 100%; }
  .oc-dashboard { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .oc-dashboard > section { flex: 0 0 auto; width: 100%; min-width: 0; }
  .oc-overview-card, .oc-search-card { box-sizing: border-box; width: 100%; overflow-wrap: anywhere; }
  .oc-overview-stats { width: 100%; }
  .oc-overview-stats > div { padding: 11px 7px; }
  .oc-overview-stats span { white-space: normal; overflow-wrap: anywhere; }
  .oc-hero-copy { width: 100%; max-width: 100%; }
  .oc-input-row, .oc-step-content { min-width: 0; }
  #postcode { width: 100%; }
}

@media (max-width: 600px) {
  .oc-hero { padding: 26px 0 30px; }
  .oc-hero h1 { font-size: clamp(31px, 8.5vw, 35px); line-height: 1.04; }
  .oc-hero-copy { margin-top: 7px; font-size: 14px; line-height: 1.4; }
  .oc-dashboard { gap: 12px; margin-top: 18px; }
  .oc-overview-card, .oc-search-card { padding: 17px; border-radius: 15px; }
  .oc-overview-head { flex-direction: row; align-items: center; gap: 8px; }
  .oc-overview-head h2 { font-size: 23px; }
  .oc-overview-head .oc-eyebrow, .oc-search-intro .oc-eyebrow { font-size: 10px; margin-bottom: 6px; }
  .oc-health-pill { flex: 0 0 auto; gap: 6px; padding: 7px 9px; font-size: 10px; }
  .oc-health-pill::before { width: 7px; height: 7px; }
  .oc-overview-copy { margin: 10px 0 13px; font-size: 14px; line-height: 1.4; }
  .oc-overview-stats > div { padding: 9px 6px; }
  .oc-overview-stats strong { font-size: 21px; }
  .oc-overview-stats span { font-size: 10px; }
  .oc-area-overview { margin-top: 15px; }
  .oc-area-overview h3 { margin-bottom: 8px; font-size: 13px; }
  .oc-area-chip { padding: 6px 9px; font-size: 11px; }
  .oc-overview-card .oc-last-updated { padding-top: 14px; font-size: 11px; }
  .oc-search-intro { margin-bottom: 15px; }
  .oc-search-intro h2 { font-size: 23px; }
  .oc-search-intro p { margin-top: 6px; font-size: 13px; }
  .oc-btn, .oc-input-row input, .oc-input-row select { min-height: 48px; height: 48px; }
}

/* Incident result headers: calm surfaces, clear status hierarchy, brand-led category color. */
.oc-result-hero[data-category="live"] { --oc-incident-accent: #a93b32; --oc-incident-soft: #fbefed; --oc-incident-ink: #792b25; }
.oc-result-hero[data-category="planned"] { --oc-incident-accent: #1f5ea9; --oc-incident-soft: #eff4fa; --oc-incident-ink: #194e88; }
.oc-result-hero[data-category="resolved"] { --oc-incident-accent: #45582d; --oc-incident-soft: #f0f3eb; --oc-incident-ink: #394927; }
.oc-result-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: clamp(24px, 3vw, 34px);
  border-top: 4px solid var(--oc-incident-accent, #214545);
  border-bottom: 1px solid rgba(33, 69, 69, .08);
  background: var(--oc-incident-soft, #f3f2ed);
  color: var(--oc-navy);
}
.oc-result-top .oc-badge {
  grid-column: 1;
  width: fit-content;
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--oc-incident-ink, var(--oc-navy));
  font-size: 11px;
  letter-spacing: .07em;
}
.oc-result-top .oc-badge::before { width: 7px; height: 7px; background: var(--oc-incident-accent, var(--oc-navy)); }
.oc-result-top .oc-result-status {
  grid-column: 2;
  width: fit-content;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--oc-incident-ink, var(--oc-navy));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.oc-result-top h2 {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--oc-navy);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 650;
  line-height: 1.13;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.oc-result-top p {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: #53615c;
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .oc-result-top { grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 20px 18px; }
  .oc-result-top .oc-badge { font-size: 10px; padding: 7px 9px; }
  .oc-result-top .oc-result-status { grid-column: 1 / -1; font-size: 12px; }
  .oc-result-top h2 { font-size: 26px; line-height: 1.14; }
  .oc-result-top p { font-size: 14px; }
}

/* B4RN bridge palette: legacy service blue leads, the new rural/natural palette supports it. */
.oc-hero {
  background: linear-gradient(132deg, #1f5ea9 0%, #1b5598 58%, #17487f 100%);
  color: #fff;
}
.oc-hero .oc-kicker { color: #fff; }
.oc-hero .oc-kicker::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 9px 1px 0;
  border-radius: 50%;
  background: #b0ca57;
}
.oc-hero h1 { color: #fff; }
.oc-hero-copy { color: #e9f1fa; }
.oc-overview-head h2, .oc-search-intro h2, .oc-overview-stats strong { color: #1f5ea9; }
.oc-overview-stats > div { --oc-stat-color: #214545; --oc-stat-marker: #8c9891; }
.oc-overview-stats > div[data-state="issue"] { --oc-stat-color: #873129; --oc-stat-marker: #b34338; }
.oc-overview-stats > div[data-state="planned"] { --oc-stat-color: #765100; --oc-stat-marker: #b27a00; }
.oc-overview-stats > div[data-state="healthy"],
.oc-overview-stats > div[data-state="restored"] { --oc-stat-color: #45582d; --oc-stat-marker: #45582d; }
.oc-overview-stats > div[data-state="neutral"] { --oc-stat-color: #214545; --oc-stat-marker: #1f5ea9; }
.oc-overview-stats > div strong { color: var(--oc-stat-color); }
.oc-overview-stats > div span { display: flex; align-items: center; gap: 6px; color: #596760; }
.oc-overview-stats > div span::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--oc-stat-marker); }
.oc-area-chip { color: #1f5ea9; border-color: #cedbeb; background: #edf3fa; }
.oc-area-chip:hover { color: #17487f; border-color: #a9c0dc; background: #e2ecf7; }
.oc-overview-stats { border-color: #dce5ee; background: #f7f9fc; }
.oc-overview-stats > div + div { border-color: #dce5ee; }
.oc-overview-stats > div:hover { background: #edf3fa; }
.oc-health-pill { color: #394927; background: #edf2e4; }
.oc-health-pill::before { background: #45582d; }
.oc-btn-primary { color: #fff; background: #1f5ea9; box-shadow: inset 0 -3px 0 #b0ca57; }
.oc-btn-primary:hover:not(:disabled) { color: #fff; background: #17487f; box-shadow: 0 6px 16px rgba(31,94,169,.22), inset 0 -3px 0 #b0ca57; }
.oc-btn-location { border-color: #1f5ea9; color: #1f5ea9; }
.oc-btn-location:hover:not(:disabled) { border-color: #17487f; color: #17487f; background: #edf3fa; }
.oc-section-alt { background: #e7e5e1; }
.oc-section-heading h2 { color: #1f5ea9; }
.oc-tab { color: #1f5ea9; }
.oc-tab.is-active { background: #1f5ea9; border-color: #1f5ea9; }
.oc-tab:hover:not(.is-active) { background: #edf3fa; border-color: #adc2dc; }
.oc-notice-card { border-color: #dce5ee; border-left-color: #a93b32; box-shadow: 0 5px 20px rgba(31,94,169,.07); }
.oc-notice-card[data-category="planned"] { border-left-color: #a46b00; }
.oc-notice-card[data-category="resolved"] { border-left-color: #45582d; }
.oc-notice-card h3 { color: #1f5ea9; }
.oc-view-button { border-color: #1f5ea9; color: #1f5ea9; }
.oc-view-button:hover { background: #1f5ea9; border-color: #1f5ea9; color: #fff; }
.oc-result-hero[data-category="planned"] { --oc-incident-accent: #a46b00; --oc-incident-soft: #fff2d7; --oc-incident-ink: #765100; }
.oc-result-hero[data-category="live"] { --oc-incident-accent: #a93b32; --oc-incident-soft: #fdebea; --oc-incident-ink: #c70e00; }
.oc-result-hero[data-category="resolved"] { --oc-incident-accent: #45582d; --oc-incident-soft: #edf3e5; --oc-incident-ink: #344622; }
.oc-result-top {
  background: #1f5ea9;
  color: #fff;
  border-top-color: var(--oc-incident-accent, #b0ca57);
  border-bottom-color: rgba(255,255,255,.2);
}
.oc-result-top .oc-badge {
  color: var(--oc-incident-ink, #214545);
  background: var(--oc-incident-soft, #fff);
}
.oc-result-top .oc-badge::before { background: var(--oc-incident-accent, #45582d); }
.oc-result-top .oc-result-status {
  color: var(--oc-incident-ink, #214545);
  background: var(--oc-incident-soft, #fff);
  border: 1px solid rgba(255,255,255,.7);
}
.oc-result-top h2 { color: #fff; }
.oc-result-top p { color: #e7eff8; }
.oc-update-box { background: #f2f0ec; border-left-color: #1f5ea9; }
.oc-update-box h3 { color: #1f5ea9; }
.oc-postcodes summary { color: #1f5ea9; }
.oc-no-issue { background: #f1f4eb; border-color: #d7e1c8; }
.oc-no-issue-icon { background: #45582d; color: #fff; }
.oc-no-issue h2 { color: #214545; }
.oc-support-actions a { color: #1f5ea9; }
.oc-text-button { color: #1f5ea9; }
.oc-text-button:hover { color: #17487f; text-decoration: underline; text-underline-offset: 3px; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline-color: #1f5ea9; }
@media (max-width: 600px) {
  .oc-hero { padding-top: 26px; }
  .oc-hero .oc-kicker { color: #fff; }
}


/* Result views */
#outage-detail-section .oc-container {
  width: min(1080px, calc(100% - 48px));
  padding-bottom: clamp(48px, 7vw, 88px);
}

#detail-back {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-bottom: 26px;
  padding: 8px 14px;
  border: 1px solid #d6e0ea;
  border-radius: 999px;
  background: #f7f9fc;
  color: #1f5ea9;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
#detail-back:hover {
  transform: translateX(-2px);
  border-color: #adc2dc;
  background: #edf3fa;
}

.oc-multi-result { gap: 22px; }
.oc-result-hero {
  border-color: #dce3e9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(25, 50, 72, .08);
}
.oc-result-top {
  padding: clamp(22px, 3vw, 32px);
  background: linear-gradient(125deg, #1f5ea9, #17487f);
}
.oc-result-top h2 { max-width: 760px; }
.oc-result-top .oc-result-status {
  max-width: min(100%, 360px);
  text-align: center;
  box-shadow: 0 2px 8px rgba(17, 39, 57, .08);
}
.oc-result-body { padding: clamp(20px, 3vw, 32px); }
.oc-stat-grid { gap: 12px; margin-bottom: 16px; }
.oc-stat-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-stat {
  border-color: #e1e7eb;
  border-radius: 11px;
  background: #fbfcfd;
  transition: border-color .18s ease, background .18s ease;
}
.oc-stat:hover {
  border-color: #c8d7e6;
  background: #f7f9fc;
}
.oc-stat-label {
  color: #5d6a70;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
}
.oc-stat-value {
  color: #214545;
  font-size: clamp(16px, 1.8vw, 19px);
  overflow-wrap: anywhere;
}
.oc-update-box {
  border-left-width: 5px;
  border-radius: 11px;
  background: #f3f6f9;
}
.oc-update-box h3 { font-size: 17px; }
.oc-update-box p { color: #38494d; }
.oc-no-issue {
  max-width: 880px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(33, 69, 69, .06);
}
.oc-no-issue p { color: #4e5c56; }

@media (max-width: 600px) {
  #outage-detail-section .oc-container {
    width: calc(100% - 28px);
  }
  #detail-back {
    min-height: 40px;
    margin-bottom: 18px;
    padding: 7px 12px;
    font-size: 13px;
  }
  .oc-multi-result { gap: 16px; }
  .oc-result-hero { border-radius: 13px; }
  .oc-result-top { padding: 18px; }
  .oc-result-top .oc-result-status { text-align: left; }
  .oc-result-body { padding: 17px; }
  .oc-stat-grid--two { grid-template-columns: minmax(0, 1fr); }
  .oc-no-issue { padding: 30px 18px; }
}



/* Incident detail page */
.oc-detail-page {
  --detail-accent: #c43b3b;
  --detail-tint: #fff6f4;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding-bottom: clamp(28px, 5vw, 56px);
  color: #26383d;
}
.oc-detail-page[data-category="planned"] { --detail-accent: #946711; --detail-tint: #fbf6e9; }
.oc-detail-page[data-category="resolved"] { --detail-accent: #39714c; --detail-tint: #eef6ef; }
.oc-service-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 54px);
  border-radius: 22px;
  background: linear-gradient(118deg, #004a91 0%, #075fae 58%, #155b69 100%);
  box-shadow: 0 16px 42px rgba(0, 55, 105, .18);
}
.oc-service-hero::after {
  position: absolute;
  z-index: -1;
  top: -190px;
  right: -70px;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 190, 32, .2), rgba(120, 190, 32, 0) 68%);
  content: "";
  pointer-events: none;
}
.oc-service-hero-inner { position: relative; max-width: 800px; }
.oc-service-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.oc-service-label::before { flex: 0 0 22px; height: 2px; border-radius: 999px; background: #78be20; content: ""; }
.oc-service-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.oc-service-type,
.oc-service-status {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 5px 11px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.oc-service-status {
  gap: 7px;
  border-color: rgba(255, 255, 255, .6);
  color: #20343b;
  background: #fff;
}
.oc-service-status::before { width: 8px; height: 8px; border-radius: 50%; background: var(--detail-accent); content: ""; }
.oc-service-hero h1 {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.oc-service-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  max-width: 680px;
  margin-top: 19px;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  line-height: 1.5;
}
.oc-service-context--label { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); }
.oc-service-context-label { color: rgba(255, 255, 255, .6); font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.oc-service-context-value { color: #fff; font-weight: 650; }
.oc-service-hero .oc-results-summary {
  max-width: 680px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}
.oc-detail-overview {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid #e4eaec;
  border-radius: 12px;
  background: #f7f9fa;
}
.oc-detail-overview-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.oc-detail-stat { min-width: 0; padding: 16px 18px 17px; }
.oc-detail-stat + .oc-detail-stat { border-left: 1px solid #e4eaec; }
.oc-detail-stat dt {
  margin: 0 0 7px;
  color: #66747a;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
}
.oc-detail-stat dd { margin: 0; color: #214545; font-size: clamp(14px, 1.5vw, 17px); font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.oc-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 22px;
}
.oc-detail-card {
  min-width: 0;
  border: 1px solid #e0e7e9;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(27, 55, 62, .06);
}
.oc-detail-update-card { border-top: 4px solid var(--detail-accent); padding: clamp(23px, 3vw, 32px); }
.oc-detail-card-heading { margin-bottom: 18px; }
.oc-detail-card-heading .oc-eyebrow { margin-bottom: 6px; color: var(--detail-accent); }
.oc-detail-card-heading h2 {
  margin: 0;
  color: #214545;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 740;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.oc-detail-update-message {
  border: 1px solid rgba(196, 59, 59, .16);
  border-radius: 12px;
  padding: clamp(18px, 2.7vw, 25px);
  background: var(--detail-tint);
}
.oc-detail-page[data-category="planned"] .oc-detail-update-message { border-color: #e8dfc3; }
.oc-detail-page[data-category="resolved"] .oc-detail-update-message { border-color: #d8e7dc; }
.oc-detail-update-message p { margin: 0; color: #2c3f43; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.72; overflow-wrap: anywhere; }
.oc-detail-variation { border: 1px solid #e8dfc3; border-radius: 12px; padding: 20px; background: #fcf8ed; }
.oc-detail-variation strong { display: block; margin-bottom: 7px; color: #654f1b; font-size: 15px; }
.oc-detail-variation p { margin: 0; color: #5c5542; font-size: 14px; line-height: 1.65; }
.oc-detail-note { margin: 18px 0 0; border-left: 3px solid #78be20; padding: 2px 0 2px 14px; color: #596866; font-size: 14px; line-height: 1.6; }
.oc-detail-empty-message { margin: 0; border: 1px dashed #cfdadd; border-radius: 12px; padding: 23px; color: #667579; background: #f8fafb; font-size: 15px; line-height: 1.6; }
.oc-detail-map-card { overflow: hidden; padding: 21px; }
.oc-detail-map-card .oc-detail-card-heading { margin: 0 0 14px; }
.oc-detail-map-card .oc-map { height: 360px; border: 1px solid #e3e8e8; border-radius: 12px; }
.oc-detail-map-card .oc-map-note { margin: 10px 1px 0; font-size: 12px; line-height: 1.5; }
.oc-detail-postcodes { padding: 21px 23px; }
.oc-detail-postcodes .oc-detail-card-heading { margin-bottom: 10px; }
.oc-detail-postcodes .oc-postcodes { margin: 0; border: 0; border-top: 1px solid #edf0f1; border-radius: 0; }
.oc-detail-postcodes .oc-postcodes summary { justify-content: space-between; min-height: 48px; padding: 12px 0 4px; color: #31525a; font-size: 13px; font-weight: 700; }
.oc-detail-postcodes .oc-postcodes-chevron { width: 12px; height: 12px; border-width: 2px; }
.oc-detail-postcodes .oc-postcodes summary:focus-visible { outline: 3px solid rgba(0, 94, 184, .3); outline-offset: 3px; }
.oc-detail-postcodes .oc-postcodes-list { padding: 9px 0 2px; text-align: left; color: #596a6e; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.oc-detail-page :focus-visible { outline: 3px solid rgba(0, 94, 184, .4); outline-offset: 3px; }

@media (max-width: 900px) {
  .oc-detail-overview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-detail-stat:nth-child(3) { border-left: 0; border-top: 1px solid #e4eaec; }
  .oc-detail-stat:nth-child(4) { border-top: 1px solid #e4eaec; }
  .oc-detail-map-card .oc-map { height: 250px; }
  .oc-detail-postcodes { align-self: start; }
}
@media (max-width: 620px) {
  .oc-detail-page { padding-bottom: 28px; }
  .oc-service-hero { padding: 25px 21px 28px; border-radius: 17px; }
  .oc-service-hero::after { top: -210px; right: -245px; }
  .oc-service-label { margin-bottom: 15px; font-size: 10px; }
  .oc-service-chip-row { margin-bottom: 15px; }
  .oc-service-hero h1 { font-size: clamp(31px, 9vw, 42px); }
  .oc-service-context { margin-top: 15px; font-size: 13px; }
  .oc-service-context--label { margin-top: 18px; padding-top: 14px; }
  .oc-service-hero .oc-results-summary { margin-top: 12px; font-size: 14px; line-height: 1.6; }
  .oc-detail-overview { margin-top: 18px; }
  .oc-detail-stat { padding: 15px 14px; }
  .oc-detail-stat dd { font-size: 14px; }
  .oc-detail-layout { gap: 14px; margin-top: 15px; }
  .oc-detail-update-card { padding: 21px 18px; border-radius: 14px; }
  .oc-detail-card-heading { margin-bottom: 15px; }
  .oc-detail-card-heading h2 { font-size: 21px; }
  .oc-detail-update-message { padding: 17px; }
  .oc-detail-update-message p { font-size: 15px; line-height: 1.65; }
  .oc-detail-map-card { padding: 18px; }
  .oc-detail-map-card .oc-map { height: 230px; }
  .oc-detail-postcodes { padding: 18px 19px; }
}


/* Incident sections stack full width, in reading order */
.oc-detail-layout > .oc-detail-card { width: 100%; }

/* Shared service header and card components */
.oc-surface-card {
  min-width: 0;
  border: 1px solid #dce5ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(25, 50, 72, .075);
}
.oc-result-hero.oc-surface-card { overflow: hidden; }
.oc-detail-update-card.oc-surface-card { border-top: 4px solid var(--detail-accent); }
.oc-service-hero { width: 100%; }
.oc-service-status::before { flex: 0 0 8px; }
.oc-results-hero { --detail-accent: #1f5ea9; margin-bottom: 20px; }
.oc-results-hero[data-result-state="clear"] { --detail-accent: #39714c; }
.oc-results-hero .oc-results-summary { max-width: 720px; margin: 12px 0 0; color: rgba(255, 255, 255, .84); font-size: 14px; line-height: 1.65; }
.oc-results-hero .oc-service-context { margin-top: 17px; color: rgba(255, 255, 255, .92); font-weight: 650; }
.oc-results-hero .oc-service-status { color: #20343b; }
.oc-result-coverage.oc-surface-card { border-radius: 14px; background: linear-gradient(130deg, #f6f9fc, #fff); box-shadow: none; }
.oc-no-issue-action { display: inline-flex; align-items: center; justify-content: center; margin-top: 18px; text-decoration: none; }
.oc-no-issue-call { margin: 12px auto 0; font-size: 14px; }
.oc-no-issue-call a { color: #1f5ea9; font-weight: 700; text-underline-offset: 3px; }

/* Postcode result page */
.oc-multi-result { gap: 18px; }
.oc-result-hero { overflow: hidden; }
.oc-result-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: clamp(23px, 3vw, 34px); background: linear-gradient(118deg, #004a91 0%, #1f5ea9 70%, #155b69 100%); }
.oc-result-top .oc-badge { grid-column: 1; }
.oc-result-top .oc-result-status { grid-column: 2; max-width: min(100%, 360px); text-align: center; }
.oc-result-top h2 { grid-column: 1 / -1; margin-top: 5px; }
.oc-result-body { padding: clamp(19px, 2.7vw, 30px); }
.oc-stat-grid--timing { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 17px; }
.oc-stat-grid--timing .oc-stat { min-height: 102px; border-radius: 12px; padding: 17px 19px; background: #f7f9fc; }
.oc-stat-grid--timing .oc-stat-value { font-size: clamp(16px, 1.8vw, 19px); }
.oc-update-box { border: 1px solid #dce5ee; border-left: 4px solid #1f5ea9; border-radius: 12px; padding: 19px 21px; background: #f6f9fc; }
.oc-update-box h3 { margin: 0 0 8px; color: #1f5ea9; font-size: 16px; font-weight: 750; }
.oc-update-box p { margin: 0; color: #394e55; font-size: 15px; line-height: 1.65; }
.oc-result-coverage {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 17px;
  padding: 20px 22px;
}
.oc-result-coverage-intro .oc-eyebrow { margin-bottom: 6px; color: #1f5ea9; }
.oc-result-coverage-intro h3 { margin: 0; color: #214545; font-size: 18px; line-height: 1.3; }
.oc-result-coverage-intro p { margin: 7px 0 0; color: #5e6c71; font-size: 12px; line-height: 1.5; }
.oc-result-coverage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.oc-result-coverage-list > div { min-width: 0; padding: 2px 17px; }
.oc-result-coverage-list > div + div { border-left: 1px solid #dce5ee; }
.oc-result-coverage-list dt { margin: 0 0 6px; color: #65747a; font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.oc-result-coverage-list dd { margin: 0; color: #263f49; font-size: 14px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.oc-no-issue { width: 100%; border-radius: 18px; padding: clamp(24px, 4vw, 40px); max-width: none; }
.oc-no-issue h2 { margin: 0; color: #214545; font-size: clamp(23px, 3vw, 30px); }
.oc-no-issue p { max-width: 620px; margin: 10px auto 0; color: #56635f; line-height: 1.6; }
@media (max-width: 700px) {
  .oc-results-hero { margin-bottom: 16px; }
  .oc-result-top { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 20px; }
  .oc-result-top .oc-result-status { grid-column: 1; text-align: left; }
  .oc-result-top h2 { grid-column: 1; font-size: clamp(25px, 7vw, 32px); }
  .oc-result-body { padding: 18px; }
  .oc-stat-grid--timing .oc-stat { min-height: 0; padding: 14px; }
  .oc-result-coverage { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 17px; }
  .oc-result-coverage-list > div:first-child { padding-left: 0; }
  .oc-no-issue { padding: 32px 20px; }
}
@media (max-width: 420px) {
  .oc-stat-grid--timing { grid-template-columns: minmax(0, 1fr); }
  .oc-result-coverage-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .oc-result-coverage-list > div { padding: 0; }
  .oc-result-coverage-list > div + div { border-left: 0; border-top: 1px solid #dce5ee; padding-top: 12px; }
}


/* Keep each incident heading subordinate to the postcode page hero. */
.oc-result-top {
  padding: 18px clamp(20px, 2.6vw, 28px) 20px;
  border-top: 3px solid var(--oc-incident-accent, #1f5ea9);
  border-bottom: 1px solid #e5ebef;
  background: #f7f9fc;
  color: #214545;
}
.oc-result-top .oc-badge {
  border: 1px solid rgba(33, 69, 69, .08);
  padding: 6px 10px;
  background: var(--oc-incident-soft, #edf3fa);
}
.oc-result-top .oc-result-status {
  border: 1px solid #dce5ee;
  padding: 7px 10px;
  background: #fff;
  box-shadow: none;
  font-size: 12px;
}
.oc-result-top h2 {
  margin-top: 1px;
  color: #214545;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}
@media (max-width: 700px) {
  .oc-result-top { padding: 17px 18px 18px; }
  .oc-result-top h2 { font-size: clamp(20px, 6vw, 25px); }
}

/* Support form: present the Freshworks widget as a centred, full-size modal */
.oc-support-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(8, 24, 39, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
body.oc-support-open { overflow: hidden; }
body.oc-support-open .oc-support-backdrop { opacity: 1; pointer-events: auto; }

/* The widget panel (#freshworks-frame-wrapper) is injected into this page. */
html body #freshworks-frame-wrapper {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(920px, calc(100vw - 40px)) !important;
  height: min(840px, calc(100vh - 48px)) !important;
  max-height: none !important;
  min-height: 0 !important;
  border-radius: 20px !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 28px 80px rgba(4, 21, 35, .45) !important;
  overflow: hidden !important;
  transition: none !important;
  animation: oc-support-modal-in .22s ease !important;
}
@keyframes oc-support-modal-in {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 620px) {
  html body #freshworks-frame-wrapper {
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 32px) !important;
    border-radius: 16px !important;
  }
}