/* Unified Pereplan colours. Dimensions, text and section order are retained. */
:root, body.inner-page {
  --brand-blue: #106fcc;
  --brand-blue-dark: #0958a5;
  --brand-yellow: #fed42b;
  --brand-yellow-hover: #f8d849;
  --brand-ink: #242222;
  --brand-pale: #c0defd;
  --brand-white: #ffffff;
  --brand-surface: #f0f7fe;
  --brand-soft: #e6f2ff;
  --brand-warm: #fff9df;
  --brand-muted: #526372;
  --brand-line: #c4d9ed;
  --brand-field: #7795af;
  --navy: var(--brand-ink);
  --navy-dark: var(--brand-blue-dark);
  --navy-900: var(--brand-blue-dark);
  --navy-800: var(--brand-blue-dark);
  --navy-700: var(--brand-blue-dark);
  --accent: var(--brand-blue);
  --accent-hover: var(--brand-blue-dark);
  --accent-light: var(--brand-pale);
  --gold-500: var(--brand-blue-dark);
  --gold-400: var(--brand-yellow);
  --gold-50: var(--brand-warm);
  --page-bg: var(--brand-white);
  --bg: var(--brand-surface);
  --card: var(--brand-white);
  --text: var(--brand-ink);
  --text-soft: #435766;
  --muted: var(--brand-muted);
  --border: var(--brand-line);
  --line: var(--brand-line);
  --border-accent: var(--brand-pale);
  --link: var(--brand-blue-dark);
  --gradient-page: var(--brand-white);
  --gradient-hero: var(--brand-blue);
  --gradient-topbar: var(--brand-blue-dark);
  --gradient-accent: var(--brand-yellow);
  --gradient-card: var(--brand-white);
  --gradient-section: var(--brand-surface);
  --shadow-sm: 0 3px 12px rgb(9 88 165 / 5%);
  --shadow-md: 0 10px 26px rgb(9 88 165 / 9%);
  --shadow-lg: 0 16px 40px rgb(5 47 91 / 15%);
  --shadow-glow: 0 0 0 transparent;
  --pg-green: var(--brand-blue);
  --pg-green-dark: var(--brand-blue-dark);
  --pg-green-mid: var(--brand-blue-dark);
  --pg-green-soft: var(--brand-soft);
  --pg-green-wash: var(--brand-surface);
  --pg-accent: var(--brand-blue);
}

/* Continuous blue header and hero. */
.home-page .topbar, .home-page .brand-logo { display: none; }
.home-page .site-header {
  background: var(--brand-blue); border-color: rgb(255 255 255 / 22%);
  box-shadow: 0 3px 16px rgb(9 88 165 / 12%); backdrop-filter: none;
}
.home-page .site-header :is(.brand-name,.brand-tagline,.header-phone,.header-phone-sub,.nav a) { color: #fff; }
.home-page .site-header .nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--brand-yellow); text-underline-offset: 6px; }
.home-page .site-header .menu-toggle { background: transparent; border-color: rgb(255 255 255 / 65%); }
.home-page .site-header .menu-toggle span { background: #fff; }
.home-page .site-header .mobile-nav { border-color: rgb(255 255 255 / 25%); }
.home-page .site-header .mobile-nav a { color: #fff; border-color: rgb(255 255 255 / 22%); }
.home-page .site-header .mobile-nav a:hover { background: var(--brand-blue-dark); }
.home-page .hero { background: var(--brand-blue); border-color: var(--brand-blue); }
.home-page .hero::before, .home-page .hero::after { background: none; }
.home-page .hero h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.home-page .hero :is(.hero-subtitle,.hero-subtitle-muted),
.home-page .hero .hero-copy > p,
.home-page .hero .pension-hero-main > p,
.home-page .hero.simple > .container > p { color: #fff; }
.home-page .hero :is(.hero-phone,.hero-phone span,.hero-phone strong,.hero-points,.hero-benefits,.hero-benefits b) { color: #fff; }
.home-page .hero :is(.hero-copy,.pension-hero-main) > .eyebrow,
.home-page .hero.simple > .container > .eyebrow,
.home-page .hero .badge-official {
  color: var(--brand-ink); background: var(--brand-yellow); border-color: var(--brand-yellow); box-shadow: none;
}
.home-page .badge-official .check-icon { color: #fff; background: var(--brand-blue-dark); box-shadow: none; }
.home-page .hero .hero-stats { color: #fff; border-color: rgb(255 255 255 / 35%); }
.home-page .hero .hero-stats :is(strong,span) { color: #fff; }
.home-page .hero :is(.hero-chips a,.pension-topics a) { background: #fff; border-color: #fff; color: var(--brand-blue-dark); }
.home-page .hero :is(.hero-chips a,.pension-topics a):hover { background: var(--brand-pale); border-color: var(--brand-pale); }
.home-page .hero .pension-topics { background: #fff; border-color: #fff; }
.home-page .hero .pension-topics > strong { color: var(--brand-ink); }
.home-page .hero .pension-topics a { background: var(--brand-soft); border-color: var(--brand-line); }
.home-page .hero .topic-visual--hero { border-color: rgb(255 255 255 / 50%); box-shadow: 0 12px 28px rgb(4 53 101 / 16%); }

/* White surfaces on blue stay dark and readable. */
.home-page .hero :is(.stat-card,.faq-block,.form-card,.hero-form-card,.hero-panel,.pension-calculator) {
  color: var(--brand-ink); background: #fff; border-color: #fff;
}
.home-page .hero :is(.form-card,.hero-form-card,.hero-panel) { box-shadow: var(--shadow-lg); }
.home-page .stat-num { color: var(--brand-blue-dark); }
.home-page .phone-box { background: var(--brand-warm); border-color: var(--brand-yellow); box-shadow: none; }
.home-page .phone-box :is(.phone-box-number,.phone-box-number a) { color: var(--brand-ink); }
.home-page .phone-box-channel { color: var(--brand-blue-dark); }
.home-page .faq-rotator { background: var(--brand-soft); border-color: var(--brand-pale); box-shadow: none; }
.home-page .pill { background: #fff; border-color: var(--brand-line); color: var(--brand-blue-dark); box-shadow: none; }
.home-page .pill:hover, .home-page .pill.is-active { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-ink); box-shadow: none; }

/* Primary actions are yellow. */
.home-page .btn-primary, .home-page .site-header .btn-primary,
.home-page .site-header .mobile-nav .btn-primary, .inner-page main .btn-accent {
  color: var(--brand-ink); background: var(--brand-yellow); border-color: var(--brand-yellow);
  box-shadow: 0 3px 8px rgb(36 34 34 / 8%);
}
.home-page .btn-primary:hover, .home-page .site-header .btn-primary:hover,
.home-page .site-header .mobile-nav .btn-primary:hover, .inner-page main .btn-accent:hover {
  color: var(--brand-ink); background: var(--brand-yellow-hover); border-color: var(--brand-yellow-hover);
  box-shadow: 0 5px 14px rgb(36 34 34 / 12%); filter: none;
}
.home-page .btn-outline, .inner-page main :is(.btn-blue,.btn-soft,.btn-outline) {
  background: #fff; color: var(--brand-blue-dark); border-color: var(--brand-blue-dark); box-shadow: none;
}
.home-page .btn-outline:hover, .inner-page main :is(.btn-blue,.btn-soft,.btn-outline):hover {
  background: var(--brand-soft); color: var(--brand-blue-dark); border-color: var(--brand-blue-dark); filter: none;
}
.home-page .hero .hero-actions :is(.btn-blue,.btn-soft,.btn-outline) { border-color: #fff; }

/* Light sections and cards. */
.home-page .section-alt, .inner-page main .section.muted { background: var(--brand-surface); border-color: var(--brand-line); }
.home-page :is(.surface-card,.doc-card,.help-card,.feature-card) { background: #fff; border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
.home-page :is(.surface-card,.doc-card,.feature-card):hover { border-color: #8bb8e4; box-shadow: var(--shadow-md); }
.home-page .hero .phone-box { background: var(--brand-warm); border-color: var(--brand-yellow); }
.home-page .topic-card:has(.topic-visual--card) { border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
.home-page .topic-card:has(.topic-visual--card):hover { border-color: #8bb8e4; box-shadow: var(--shadow-md); }
.home-page :is(.rights-card ul,.help-card ul) { color: var(--text-soft); }
.home-page .step-num { background: var(--brand-yellow); color: var(--brand-ink); border-color: var(--brand-yellow); box-shadow: none; }
.inner-page main :is(.focus-grid,.article-focus-grid) span { color: var(--brand-blue-dark); }
.inner-page main :is(.article-summary,.article-toc,.context-link-grid a) { background: var(--brand-soft); border-color: var(--brand-pale); color: var(--brand-ink); }
.inner-page main .notice-card { background: var(--brand-warm); border-color: var(--brand-yellow); color: var(--brand-ink); }
.inner-page main .article-warning { background: var(--brand-warm); border-color: #c4a323; color: var(--brand-ink); }
.inner-page main .trust-grid strong { color: var(--brand-blue-dark); }
.inner-page main .trust-grid div { border-color: var(--brand-line); }
.inner-page main :is(.calc-head,.calc-note,.calc-result) { background: var(--brand-surface); border-color: var(--brand-line); }
.inner-page main .calc-badge { background: var(--brand-yellow); color: var(--brand-ink); }
.inner-page main .specialist-avatar { border-color: var(--brand-pale); }
.inner-page main .eyebrow { color: var(--brand-blue-dark); }

/* Keep short callouts and stacked consultation actions visually separated. */
.home-page .article-focus-grid > article > span { display: block; margin-bottom: 6px; }
.home-page .article-focus-grid > article > strong { display: block; line-height: 1.4; }
.home-page .article-focus-grid > article > p { margin: 12px 0 0; }
.home-page .conversion-sidebar .sticky-card > .btn { display: flex; width: 100%; margin-inline: 0; }
.home-page .conversion-sidebar .sticky-card > .btn + .btn { margin-top: 12px; }
.home-page .rights-card .card-actions { gap: 12px; }
.home-page .pension-calculator :is(.calc-options, .calc-checks) { gap: 12px; }
.home-page .pension-calculator :is(.calc-options, .calc-checks) > label {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px;
  padding: 10px 12px; border: 1px solid var(--brand-line); border-radius: 12px;
  background: #fff; color: var(--brand-ink); font-size: 14px; line-height: 1.45; cursor: pointer;
}
.home-page .pension-calculator :is(.calc-options, .calc-checks) > label:has(input:checked) { background: var(--brand-soft); border-color: var(--brand-blue); }
.home-page .pension-calculator :is(input[type=radio], input[type=checkbox]) { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 0; }

/* Forms and keyboard focus. Error and success states keep semantic colours. */
.home-page :is(.form-card,.lead-form,.pension-calculator) :is(input:not([type=radio]):not([type=checkbox]),textarea,select) {
  background: #fff; border-color: var(--brand-field); color: var(--brand-ink);
}
.home-page :is(input,textarea)::placeholder { color: var(--brand-muted); opacity: 1; }
.home-page :is(input,textarea,select) { accent-color: var(--brand-blue-dark); }
.home-page :is(.form-card,.lead-form,.pension-calculator) :is(input,textarea,select):focus {
  border-color: var(--brand-blue-dark); outline: 2px solid var(--brand-blue-dark); outline-offset: 2px; box-shadow: 0 0 0 4px #fff;
}
.home-page :is(.form-card,.lead-form) .is-invalid { border-color: #b91c1c !important; background: #fff5f5 !important; }
.home-page .form-card label .req { color: #b91c1c; }
.home-page :is(.form-privacy,.form-note) a { color: var(--brand-blue-dark); }
.home-page :focus-visible { outline: 3px solid var(--brand-blue-dark); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.home-page :is(.site-header,.hero,.site-footer) a:focus-visible { outline-color: var(--brand-yellow); box-shadow: 0 0 0 6px var(--brand-blue-dark); }

/* Closing call to action and dark-blue footer. */
.home-page .cta-bottom, .inner-page main .final-cta { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; box-shadow: none; }
.home-page .cta-list { color: #fff; }
.home-page .cta-form-card { background: #fff; color: var(--brand-ink); border-color: #fff; box-shadow: var(--shadow-lg); backdrop-filter: none; }
.home-page .cta-form-card :is(h3,label) { color: var(--brand-ink); }
.home-page .cta-form-card textarea { border-color: var(--brand-field) !important; }
.home-page .cta-bottom .form-status.status-ok { color: #065f46 !important; }
.home-page .cta-bottom .form-status.status-err { color: #991b1b !important; }
.inner-page main .final-cta .cta-grid > div > p { color: #fff; }
.inner-page main .final-cta .eyebrow { color: #fff !important; background: transparent; }
.home-page .site-footer { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }
.home-page .site-footer :is(.footer-title,.footer-muted,.footer-legal,.footer-links a,a) { color: #fff; }
.home-page .site-footer .footer-phone { color: #fff !important; }
.home-page .site-footer .footer-legal { border-color: rgb(255 255 255 / 30%); }
.home-page .site-footer a:hover { color: var(--brand-yellow); text-decoration: underline; text-underline-offset: 3px; }
::selection { color: var(--brand-ink); background: var(--brand-yellow); }

/* Show the homepage enquiry form first when the hero stacks on small screens. */
@media (max-width: 1024px) {
  html:has(body.home-page) { scroll-padding-top: 144px; }
  .home-page .site-header .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 14px 16px; padding: 10px 0 12px; }
  .home-page .site-header .brand { grid-column: 1; grid-row: 1; }
  .home-page .site-header .header-right { display: contents; }
  .home-page .site-header .menu-toggle { grid-column: 2; grid-row: 1; }
  .home-page .site-header .header-right > .btn-primary { display: flex; grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 560px; justify-self: center; min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .home-page :is(#hero-form, #consultation) { scroll-margin-top: 0; }
  .home-page .hero:has(> .hero-inner) { padding-top: 16px; }
  .home-page .hero-inner > .hero-right { grid-row: 1; width: 100%; max-width: 560px; justify-self: center; }
  .home-page .hero-inner #hero-form { padding: 20px 18px; }
  .home-page #form-index label { margin-top: 12px; }
  .home-page #form-index :is(input, textarea) { margin-top: 6px; font-size: 16px; }
  .home-page #form-index input { min-height: 44px; }
  .home-page #form-index textarea { display: block; min-height: 80px; }
  .home-page #form-index .btn-primary { margin-top: 12px; min-height: 48px; }
  .home-page #form-index .form-status:empty { display: none; }
}

@media (max-width: 360px) and (max-height: 640px) {
  .home-page .hero-inner #hero-form { padding-top: 16px; padding-bottom: 16px; }
  .home-page .hero-inner #hero-form h2 { font-size: 17px; line-height: 1.4; }
  .home-page #form-index label { margin-top: 8px; }
  .home-page #form-index textarea { min-height: 64px; }
}
