/* Option C: "Growth and deadlines". Brand colours plus one new colour: growth green.
   green-400 is for navy grounds (navy text on it 7.4:1). green-700 is for white grounds (white text on it 5.8:1). */
:root { --green-400: #3dd68c; --green-700: #18744f; --green-100: #e3f5ec; }

.v-c .eyebrow { color: var(--green-700); }
.v-c .site-header .btn, .v-c .mobile-bar .btn:first-child { background: var(--green-700); border-color: var(--green-700); color: var(--surface-0); }
.v-c .site-header .btn:hover { background: var(--navy-900); border-color: var(--navy-900); }
.v-c .main-nav a:hover { border-bottom-color: var(--green-400); }
.btn-green { background: var(--green-400); border-color: var(--green-400); color: var(--navy-900); }
.btn-green:hover { background: var(--surface-0); border-color: var(--surface-0); color: var(--navy-900); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: var(--surface-0); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--surface-0); color: var(--surface-0); }
.btn-navy { background: var(--navy-900); border-color: var(--navy-900); color: var(--surface-0); }

/* Hero */
.c-hero { background: var(--navy-900); color: rgba(255,255,255,.88); padding: var(--space-12) 0 var(--space-8); position: relative; overflow: hidden; }
.c-hero::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 900px; height: 900px; border-radius: 50%; border: 80px solid rgba(61,214,140,.06); pointer-events: none; }
@media (min-width: 1024px) { .c-hero { padding: var(--space-16) 0 var(--space-12); } }
.c-hero :focus-visible { outline-color: var(--green-400); }
.c-hero .eyebrow { color: var(--green-400); margin-bottom: var(--space-6); }
.c-hero-grid { position: relative; display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 960px) { .c-hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--space-16); } }
.c-display { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 50px; letter-spacing: -0.03em; color: var(--surface-0); }
.c-display span { color: var(--green-400); }
@media (min-width: 720px) { .c-display { font-size: 72px; line-height: 74px; } }
.c-hero .lede { color: rgba(255,255,255,.86); }
.c-hero .actions { margin-bottom: 0; }
@media (max-width: 480px) { .c-hero .actions .btn { width: 100%; } }

.c-proof { list-style: none; padding: var(--space-6) 0 0; margin-top: var(--space-12); border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.c-proof li { font: 600 14px var(--font-display); color: var(--surface-0); display: flex; align-items: center; gap: 10px; }
.c-proof li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); }

/* Checker */
.checker { background: var(--surface-0); color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-3); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
@media (min-width: 720px) { .checker { padding: var(--space-8); } }
.checker-kicker { font: 600 13px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); }
.checker-h { font: 700 24px/31px var(--font-display); color: var(--navy-900); margin-bottom: var(--space-2); }
.checker-label { font-size: 16px; line-height: 22px; color: var(--ink-muted); }
.checker-input { display: flex; align-items: center; border: 2px solid var(--control-border); border-radius: var(--radius-md); overflow: hidden; }
.checker-input:focus-within { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(45,114,145,.25); }
.checker-input span { padding: 0 6px 0 16px; font: 700 22px var(--font-display); color: var(--navy-900); }
.checker-input input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 16px 14px 4px; font: 700 22px var(--font-display); color: var(--navy-900); background: transparent; }
.checker-input input[aria-invalid="true"] { color: var(--danger); }
.checker > .btn { width: 100%; }
.checker-result { margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--green-100); display: grid; gap: var(--space-3); }
.checker-result.is-no { background: var(--surface-100); }
.checker-result[hidden] { display: none; }
.checker-verdict { font: 700 20px/26px var(--font-display); color: var(--navy-900); }
.checker-result .btn { background: var(--green-700); border-color: var(--green-700); color: var(--surface-0); white-space: normal; }
.checker-result .btn:hover { background: var(--navy-900); border-color: var(--navy-900); }
.checker-small { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Timeline */
.c-dates { background: var(--surface-50); }
.timeline { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; position: relative; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-top: 36px; } .timeline::before { content: ""; position: absolute; top: 9px; left: 10px; right: 10px; height: 2px; background: var(--line); } }
.timeline li { position: relative; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); padding-left: 52px; }
.timeline li::before { content: ""; position: absolute; left: 22px; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-0); border: 3px solid var(--blue-600); }
@media (min-width: 900px) { .timeline li { padding-left: var(--space-6); } .timeline li::before { left: 0; top: -36px; width: 20px; height: 20px; } }
.t-date { font: 700 20px/26px var(--font-display); color: var(--navy-900); margin-bottom: var(--space-2); }
.t-what { color: var(--ink-muted); }
.timeline .is-past { opacity: .6; }
.timeline .is-past::before { border-color: var(--control-border); background: var(--control-border); }
.timeline .is-past .t-date::after { content: "Passed"; margin-left: 10px; font: 600 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); vertical-align: 3px; }
.timeline .is-next { border: 2px solid var(--green-700); box-shadow: var(--shadow-1); }
.timeline .is-next::before { background: var(--green-400); border-color: var(--green-700); }
.timeline .is-next .t-date::after { content: "Next"; margin-left: 10px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--green-700); color: var(--surface-0); font: 600 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px; }

/* Services: editorial rows */
.c-split { display: grid; gap: var(--space-8); }
@media (min-width: 960px) { .c-split { grid-template-columns: 340px 1fr; gap: var(--space-16); } .c-split-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
.c-split-head .eyebrow { margin-bottom: var(--space-3); }
.c-split-head .h2 { margin-bottom: var(--space-4); }
.c-rows { border-top: 2px solid var(--navy-900); }
.c-row { display: grid; gap: var(--space-2) var(--space-8); padding: var(--space-8) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .c-row { grid-template-columns: 1fr 120px; } .c-row p:not(.c-row-price) { grid-column: 1; } .c-row-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; } }
.c-row-name { font: 700 28px/34px var(--font-display); color: var(--navy-900); letter-spacing: -0.01em; }
.c-row-price { font: 700 18px var(--font-display); color: var(--green-700); }

/* Sectors band */
.c-sectors { background: var(--navy-900); color: var(--surface-0); padding: var(--space-16) 0; }
.c-sectors .eyebrow { color: var(--green-400); margin-bottom: var(--space-4); }
.c-sector-words { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: 800 34px/44px var(--font-display); letter-spacing: -0.02em; }
@media (min-width: 720px) { .c-sector-words { font-size: 52px; line-height: 64px; } }
.c-sector-words span:not(:last-child)::after { content: "·"; color: var(--green-400); margin-left: var(--space-6); }
.c-sector-sub { margin-top: var(--space-6); color: rgba(255,255,255,.8); }

/* Steps */
.c-steps { list-style: none; padding: 0; display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .c-steps { grid-template-columns: repeat(3, 1fr); } }
.c-steps li { display: grid; gap: var(--space-3); align-content: start; }
.c-num { font: 800 64px/64px var(--font-display); color: var(--green-700); letter-spacing: -0.04em; }

/* Prices */
.c-prices { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 2px solid var(--navy-900); }
@media (min-width: 720px) { .c-prices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .c-prices { grid-template-columns: repeat(4, 1fr); } }
.c-price { padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--space-2); align-content: start; }
@media (min-width: 1024px) { .c-price + .c-price { padding-left: var(--space-6); border-left: 1px solid var(--line); } }
.c-price-num { font: 800 44px/48px var(--font-display); color: var(--navy-900); letter-spacing: -0.03em; }
.c-price-num::before { content: "from "; font: 400 15px var(--font-body); color: var(--ink-muted); letter-spacing: 0; }
.c-price-name { font: 600 18px/24px var(--font-display); color: var(--navy-900); }
.c-price-link { margin-top: var(--space-8); }

/* About + where */
.c-about { display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .c-about { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); } }
.c-about .eyebrow { margin-bottom: var(--space-3); }
.c-about .h2 { margin-bottom: var(--space-4); }
.c-aml { margin-top: var(--space-4); color: var(--ink-muted); }
.c-where { background: var(--surface-50); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-4); align-content: start; }
.c-where-addr { font: 700 22px/30px var(--font-display); color: var(--navy-900); }
.c-hours { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.c-hours dt { font: 600 15px var(--font-display); color: var(--navy-900); }
.c-hours dd { margin: 0; }

/* Final CTA */
.c-cta { background: var(--navy-900); color: var(--surface-0); padding: var(--section-pad) 0; }
.c-cta :focus-visible { outline-color: var(--green-400); }
.c-cta-grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) { .c-cta-grid { grid-template-columns: 1.4fr 1fr; } }
.c-cta-h { font: 800 34px/42px var(--font-display); letter-spacing: -0.02em; }
@media (min-width: 720px) { .c-cta-h { font-size: 44px; line-height: 52px; } }
.c-cta-h span { color: var(--green-400); }
.c-cta-alt { margin-top: var(--space-4); color: rgba(255,255,255,.85); }
.c-cta-alt a { color: var(--surface-0); }
.c-cta .btn { white-space: normal; }

/* Inner page intro (Contact and later pages) */
.c-page-hero { padding: var(--space-12) 0; }
.c-page-hero::before { width: 600px; height: 600px; inset: auto -12% -90% auto; }
.c-page-h { font: 800 38px/44px var(--font-display); color: var(--surface-0); letter-spacing: -0.025em; margin-bottom: var(--space-4); }
@media (min-width: 720px) { .c-page-h { font-size: 52px; line-height: 58px; } }
.c-page-h span { color: var(--green-400); }
.c-page-hero .lede { max-width: 40em; }

/* Contact cards */
.c-contact { display: grid; gap: var(--space-4); }
@media (min-width: 840px) { .c-contact { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.c-contact-card { display: grid; gap: var(--space-1); padding: var(--space-8) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-0); color: var(--navy-900); text-decoration: none; transition: border-color .15s, transform .15s; }
.c-contact-card:hover { border-color: var(--navy-900); color: var(--navy-900); transform: translateY(-2px); }
.c-contact-card .icon { width: 32px; height: 32px; margin-bottom: var(--space-3); color: var(--green-700); }
.c-contact-card.is-main { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.c-contact-card.is-main:hover { color: #fff; border-color: var(--navy-900); }
.c-contact-card.is-main .icon { color: #fff; }
.c-contact-label { font: 600 14px/20px var(--font-display); text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.c-contact-value { font: 700 24px/32px var(--font-display); letter-spacing: -0.01em; }
.c-contact-email { font-size: 19px; }
.c-contact-note { font-size: 15px; opacity: .8; }
.c-office-addr { margin: var(--space-4) 0; }