:root {
    --cobalt: #365caf;
    --cobalt-strong: #294b97;
    --blue-ink: #35537f;
    --blue-muted: #60779c;
    --glacier: #f5f8ff;
    --ice: #eaf0ff;
    --line: #cbd6ef;
    --lime: #d7e77b;
    --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--blue-ink); font: 16px/1.6 "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #91b0ff; outline-offset: 4px; }
a:active { transform: translateY(1px); }
.wrap { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }

.service-strip { background: var(--cobalt-strong); color: var(--white); border-bottom: 3px solid var(--lime); }
.strip-inner { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 700 10px/1.5 "Courier New", monospace; letter-spacing: .11em; }
.header-main { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 92px; }
.logo { display: inline-flex; align-items: center; gap: 14px; font-size: 23px; font-weight: 800; letter-spacing: -.04em; color: var(--cobalt-strong); white-space: nowrap; }
.logo-icon { display: grid; place-items: center; width: 51px; height: 48px; color: var(--white); background: var(--cobalt); font: 800 12px/1 "Courier New", monospace; letter-spacing: -.03em; clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%); border-bottom: 6px solid var(--lime); }
.nav-main { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nav-main a { padding: 12px 16px; color: var(--blue-ink); font-size: 14px; font-weight: 700; border-bottom: 3px solid transparent; }
.nav-main a:hover { color: var(--cobalt); background: var(--glacier); }
.nav-main a[aria-current="page"] { color: var(--cobalt-strong); border-bottom-color: var(--cobalt); }

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-index { background: var(--ice); }
.hero-home { background: #f2f4ff; }
.hero-offer { background: #eef3ff; }
.hero::after { content: ""; position: absolute; right: 0; top: 0; width: 10px; height: 100%; background: repeating-linear-gradient(to bottom, var(--cobalt) 0 8px, transparent 8px 17px); opacity: .55; }
.hero-layout { display: flex; flex-direction: column; gap: 35px; padding-top: 63px; padding-bottom: 39px; }
.hero-copy { position: relative; padding-left: 31px; border-left: 4px solid var(--cobalt); max-width: 930px; }
.hero-copy::before { content: ""; position: absolute; left: -4px; top: 0; height: 45px; width: 4px; background: var(--lime); }
.eyeline { display: block; margin-bottom: 12px; color: var(--cobalt-strong); font: 800 11px/1.5 "Courier New", monospace; letter-spacing: .15em; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 40px; line-height: 1.16; font-weight: 800; letter-spacing: -.045em; color: var(--cobalt-strong); margin-bottom: 23px; }
h2 { font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -.027em; color: var(--cobalt-strong); margin-bottom: 21px; }
h3 { color: var(--cobalt-strong); font-size: 20px; }
p { font-size: 16px; line-height: 1.72; margin-bottom: 16px; }
.hero-copy p { max-width: 855px; }
.hero-copy p:last-of-type { margin-bottom: 23px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.action { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 11px 22px; font-size: 14px; line-height: 1.3; font-weight: 800; border: 2px solid var(--cobalt); transition: background .18s ease, color .18s ease, border-color .18s ease; }
.action-primary { color: var(--white); background: var(--cobalt); }
.action-primary:hover { background: var(--cobalt-strong); border-color: var(--cobalt-strong); }
.action-secondary { color: var(--cobalt-strong); background: var(--white); }
.action-secondary:hover { color: var(--white); background: var(--cobalt); }

.service-meter { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr) 1.15fr; border: 1px solid #bdccec; border-top: 4px solid var(--cobalt); background: var(--white); }
.meter-head, .meter-row, .meter-end { display: flex; flex-direction: column; justify-content: center; padding: 15px 19px; min-width: 0; }
.meter-head { position: relative; gap: 9px; background: var(--cobalt); color: var(--white); font: 800 11px/1.5 "Courier New", monospace; letter-spacing: .05em; }
.meter-signal { width: 44px; height: 6px; display: block; background: var(--lime); box-shadow: 12px 0 0 #789ce5; }
.meter-row { border-right: 1px solid var(--line); gap: 4px; }
.meter-row span { font-size: 12px; color: var(--blue-muted); }
.meter-row strong { color: var(--cobalt-strong); font-size: 15px; line-height: 1.4; }
.meter-end { color: var(--cobalt-strong); font: 800 11px/1.6 "Courier New", monospace; letter-spacing: .06em; }
.issue-marker { display: flex; flex-wrap: wrap; background: var(--white); border-top: 4px solid var(--cobalt); border-bottom: 1px solid var(--line); }
.issue-title { padding: 20px 25px 20px 18px; background: var(--cobalt); color: var(--white); font: 800 12px/1.5 "Courier New", monospace; letter-spacing: .05em; display: flex; align-items: center; }
.issue-entry { display: inline-flex; gap: 10px; align-items: center; padding: 18px 19px; border-right: 1px solid var(--line); }
.issue-entry span { color: var(--cobalt); font: 800 12px "Courier New", monospace; }
.issue-entry strong { font-size: 14px; white-space: nowrap; }
.offer-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; border-top: 4px solid var(--cobalt); border-bottom: 1px solid var(--line); background: var(--white); padding: 15px 22px; }
.ticket-heading { font: 800 12px/1.4 "Courier New", monospace; letter-spacing: .06em; color: var(--cobalt); }
.offer-ticket strong { font-size: 29px; line-height: 1.4; color: var(--cobalt-strong); letter-spacing: -.04em; }
.ticket-rule { margin-left: auto; color: var(--blue-muted); font-size: 14px; }
.offer-ticket b { font-size: 17px; color: var(--cobalt-strong); border-left: 5px solid var(--lime); padding-left: 13px; }

.spec-line { background: var(--cobalt); color: var(--white); }
.spec-line-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 57px; font: 800 11px/1.45 "Courier New", monospace; letter-spacing: .06em; }
.spec-line-inner span { border-left: 3px solid var(--lime); padding-left: 12px; }
.content-section { padding-block: 48px 51px; border-bottom: 1px solid var(--line); background: var(--white); }
.section-toned { background: var(--glacier); }
.section-body { padding-left: 34px; border-left: 2px solid var(--line); position: relative; }
.section-body::before { content: ""; position: absolute; top: 0; left: -5px; width: 8px; height: 30px; background: var(--cobalt); }
.section-label { font: 800 11px/1.5 "Courier New", monospace; letter-spacing: .15em; color: var(--cobalt); margin-bottom: 10px; }
.section-body h2 { max-width: 960px; }
.section-body p { max-width: 950px; }
.section-body p:last-child { margin-bottom: 0; }

.contact-rail, .repair-callout, .offer-bottom { background: var(--cobalt-strong); color: var(--white); border-top: 7px solid var(--lime); }
.rail-inner, .callout-inner, .offer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: 38px 40px; }
.rail-content, .callout-copy, .offer-bottom-inner > div:first-child { max-width: 600px; }
.contact-rail h2, .repair-callout h2, .offer-bottom h2 { color: var(--white); margin-bottom: 12px; }
.contact-rail p, .repair-callout p, .offer-bottom p { color: #e5edff; margin-bottom: 0; }
.contact-rail .eyeline, .repair-callout .eyeline, .offer-bottom .eyeline { color: var(--lime); }
.action-light { background: var(--lime); border-color: var(--lime); color: var(--cobalt-strong); }
.action-light:hover { background: var(--white); border-color: var(--white); }
.action-ghost { color: var(--white); border-color: #afc4fa; background: transparent; }
.action-ghost:hover { color: var(--cobalt-strong); background: var(--white); border-color: var(--white); }
.local-note { padding-top: 14px; padding-bottom: 16px; }
.local-note p { font-size: 14px; color: var(--blue-muted); margin: 0; line-height: 1.5; }
.site-footer { background: #e3eaf9; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 112px; padding-block: 20px; }
.footer-brand { display: flex; flex-direction: column; gap: 5px; }
.footer-brand strong { font-size: 19px; line-height: 1.3; color: var(--cobalt-strong); }
.footer-brand span { font-size: 12px; color: var(--blue-muted); }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 25px; }
.footer-nav a { color: var(--cobalt-strong); font-size: 13px; font-weight: 700; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-nav .private-link { color: var(--blue-muted); font-size: 11px; font-weight: 400; }

@media (max-width: 1050px) {
    .wrap { width: min(100% - 52px, 1000px); }
    .hero-layout { padding-top: 49px; }
    .service-meter { grid-template-columns: 1.1fr repeat(3, 1fr); }
    .meter-end { display: none; }
    .rail-inner, .callout-inner, .offer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
    .issue-title { width: 100%; padding-block: 12px; }
    .issue-entry { flex: 1 1 24%; }
}

@media (max-width: 720px) {
    .wrap { width: calc(100% - 36px); }
    .strip-inner { justify-content: center; min-height: 30px; text-align: center; }
    .strip-inner span:last-child { display: none; }
    .header-inner { flex-direction: column; align-items: flex-start; min-height: auto; padding-top: 18px; gap: 16px; }
    .logo { font-size: 21px; }
    .nav-main { width: 100%; border-top: 1px solid var(--line); flex-wrap: nowrap; justify-content: space-between; gap: 3px; }
    .nav-main a { padding: 13px 3px 14px; font-size: 12px; text-align: center; white-space: nowrap; }
    .hero::after { width: 5px; }
    .hero-layout { padding-top: 34px; padding-bottom: 24px; gap: 25px; }
    .hero-copy { padding-left: 20px; }
    h1 { font-size: 40px; }
    h2 { font-size: 28px; }
    p { font-size: 16px; }
    .service-meter { display: block; }
    .meter-head { flex-direction: row; justify-content: space-between; align-items: center; padding-block: 10px; }
    .meter-row { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 11px 15px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    .meter-row strong { text-align: right; }
    .spec-line-inner { justify-content: flex-start; gap: 7px; padding-block: 11px; }
    .spec-line-inner span { flex: 1 1 100%; }
    .issue-entry { flex-basis: 50%; padding: 14px 15px; }
    .offer-ticket { align-items: flex-start; gap: 8px 18px; }
    .ticket-heading { flex-basis: 100%; }
    .offer-ticket strong { font-size: 26px; }
    .ticket-rule { margin-left: 0; flex-basis: 100%; }
    .content-section { padding-block: 36px 39px; }
    .section-body { padding-left: 19px; }
    .rail-inner, .callout-inner, .offer-bottom-inner { padding-block: 31px 35px; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 21px; }
}

@media (max-width: 430px) {
    .logo-icon { width: 46px; height: 44px; }
    .nav-main a { font-size: 11px; }
    .actions { width: 100%; }
    .actions-start .action { flex: 1 1 100%; }
    .actions-reverse .action { flex: 1 1 100%; }
    .issue-entry { flex: 1 1 100%; }
    .offer-ticket b { padding-left: 9px; font-size: 16px; }
}