:root { --aa-navy: #10264c; --aa-deep: #09152d; --aa-blue: #8fb6ff; --aa-text: #2a4269; --aa-muted: #5a6d90; --aa-line: rgba(16, 38, 76, .14); }
* { box-sizing: border-box; }
body { min-width: 320px; }
.page-width { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.breadcrumb { padding-top: 1.25rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; color: var(--aa-muted); font-size: .8rem; }
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: rgba(90, 109, 144, .55); }
.breadcrumb a { color: var(--aa-navy); text-underline-offset: 3px; }
.analytics-hero { padding-block: 1.25rem 4rem; }
.analytics-hero-shell { display: grid; gap: 2rem; padding: clamp(1.65rem, 4vw, 3.5rem); border-radius: 2rem; color: #fff; }
.analytics-eyebrow, .section-kicker { margin: 0 0 .8rem; color: var(--aa-muted); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.analytics-eyebrow { color: #dbe8ff; }
.analytics-hero h1 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: .98; }
.hero-intro { max-width: 720px; margin: 1.5rem 0 0; color: #d7e4fa; font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-actions a, .submit-button, .preview-actions button, .preview-actions a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; padding: .75rem 1rem; font: inherit; font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.analytics-primary { background: var(--aa-blue); color: #0c1a37; }
.analytics-secondary { border: 1px solid rgba(143,182,255,.55); color: #fff; }
.hero-actions a:hover { transform: translateY(-1px); }
.starting-panel { align-self: end; padding: 1.5rem; border: 1px solid rgba(143,182,255,.35); border-radius: 1.25rem; background: rgba(7,17,36,.42); backdrop-filter: blur(8px); }
.starting-panel .panel-label { margin: 0; color: var(--aa-blue); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.starting-panel h2 { margin: .85rem 0 1.5rem; color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; }
.starting-panel > p:last-child { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(143,182,255,.25); color: #c8d8f3; font-size: .88rem; line-height: 1.6; }
.content-section { padding-block: clamp(3.75rem, 8vw, 6.5rem); }
.scroll-target { scroll-margin-top: 92px; }
.section-intro { max-width: 720px; margin-bottom: 2rem; }
.section-intro h2 { margin: 0; color: var(--aa-navy); font-size: clamp(2rem, 4.5vw, 3.35rem); line-height: 1.05; }
.section-intro > p:last-child { margin: 1rem 0 0; color: var(--aa-text); line-height: 1.75; }
.wide-intro { max-width: 850px; }
.card-grid { display: grid; gap: 1rem; }
.content-card, .step-card { padding: 1.5rem; border: 1px solid var(--aa-line); border-radius: 1.25rem; background: rgba(255,255,255,.88); box-shadow: 0 14px 38px rgba(9,21,45,.08); }
.content-card > span, .step-card > span { color: #4b75b2; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.content-card h3, .step-card h3, .feasibility-list h3, .outcome-list h3 { margin: .75rem 0 0; color: var(--aa-navy); font-size: 1.03rem; line-height: 1.35; }
.content-card blockquote { margin: 1.25rem 0 .75rem; color: var(--aa-navy); font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; line-height: 1.4; }
.content-card p, .step-card p, .feasibility-list p, .outcome-list p { margin: 0; color: var(--aa-text); font-size: .9rem; line-height: 1.65; }
.tinted-section { width: 100%; border-block: 1px solid var(--aa-line); background: rgba(225,236,255,.55); }
.feasibility-list { display: grid; gap: 0; border-top: 1px solid var(--aa-line); }
.feasibility-list article { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--aa-line); }
.feasibility-list article > span { padding-top: .15rem; color: #4b75b2; font-size: .72rem; font-weight: 800; }
.feasibility-list h3 { margin: 0 0 .4rem; }
.section-closing { max-width: 820px; margin: 2rem 0 0; color: var(--aa-navy); font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.25rem, 2.5vw, 1.65rem); line-height: 1.45; }
.step-card { display: flex; flex-direction: column; min-height: 100%; }
.step-card > p { margin: .8rem 0 1.5rem; }
.step-card > div { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--aa-line); }
.step-card small { display: block; margin-bottom: .35rem; color: var(--aa-muted); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.step-card strong { color: var(--aa-navy); font-size: .86rem; line-height: 1.55; }
.commercial-note { max-width: 800px; margin: 1.75rem 0 0; color: var(--aa-muted); font-size: .86rem; line-height: 1.6; }
.outcome-section { background: var(--aa-deep); color: #fff; }
.outcome-section .section-kicker { color: var(--aa-blue); }
.outcome-section .section-intro h2, .outcome-section .section-intro > p:last-child { color: #fff; }
.outcome-layout { display: grid; gap: 2rem; }
.outcome-list { display: grid; gap: .75rem; }
.outcome-list article { padding: 1.15rem 1.25rem; border: 1px solid rgba(143,182,255,.24); border-radius: 1rem; background: rgba(255,255,255,.05); }
.outcome-list h3 { margin: 0 0 .35rem; color: #fff; }
.outcome-list p { color: #cbdaf2; }
.enquiry-shell { display: grid; gap: 2.5rem; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: 1.5rem; }
.enquiry-intro h2 { margin: 0; color: var(--aa-navy); font-size: clamp(2rem, 4vw, 3rem); }
.enquiry-intro > p:not(.section-kicker) { color: var(--aa-text); line-height: 1.7; }
.enquiry-aside { margin-top: 2rem; padding: 1.25rem; border-left: 3px solid var(--aa-blue); background: #eef5ff; }
.enquiry-aside strong { color: var(--aa-navy); }
.enquiry-aside p { margin: .4rem 0 0; font-size: .88rem; line-height: 1.6; }
.field-row { display: grid; gap: 1rem; }
.field { margin-bottom: 1.15rem; }
.field label, .field legend, .email-preview label { display: block; margin-bottom: .45rem; color: var(--aa-navy); font-size: .86rem; font-weight: 700; }
.field input, .field textarea, .field select, .email-preview textarea { width: 100%; border: 1px solid rgba(16,38,76,.24); border-radius: .75rem; background: #fff; color: var(--aa-navy); font: inherit; font-size: .93rem; padding: .78rem .9rem; }
.field textarea { resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus, .email-preview textarea:focus { outline: 3px solid rgba(90,147,248,.25); border-color: #4f86df; }
.field [aria-invalid="true"] { border-color: #a22e2e; }
.field-meta { display: flex; justify-content: space-between; gap: 1rem; }
.field-help, .field-meta p, .delivery-note, .required-note { margin: .4rem 0 0; color: var(--aa-muted); font-size: .75rem; line-height: 1.5; }
.field-error { min-height: 0; margin: .35rem 0 0; color: #8d2020; font-size: .78rem; font-weight: 600; }
.field-error:empty { display: none; }
.optional-context { margin: 1.5rem 0; border-block: 1px solid var(--aa-line); }
.optional-context summary { padding: 1rem 0; color: var(--aa-navy); font-size: .9rem; font-weight: 800; cursor: pointer; }
.optional-context summary::marker { color: #4f86df; }
.optional-fields { padding: .5rem 0 .25rem; }
.checkbox-field { padding: 0; border: 0; }
.checkbox-field label { display: flex; align-items: flex-start; gap: .55rem; margin: .65rem 0; font-weight: 500; }
.checkbox-field input { width: 1rem; height: 1rem; margin-top: .12rem; accent-color: var(--aa-navy); }
.sensitivity-note { padding: .85rem 1rem; border: 1px solid rgba(16,38,76,.13); border-radius: .7rem; background: #f5f8fc; color: var(--aa-text); font-size: .78rem; line-height: 1.55; }
.submit-button { width: 100%; border: 0; background: var(--aa-navy); color: #fff; }
.submit-button:hover { background: #1b3b70; }
.error-summary { margin-bottom: 1rem; padding: 1rem; border: 2px solid #a22e2e; border-radius: .75rem; background: #fff7f7; }
.error-summary h3 { margin: 0; color: #741818; font-size: 1rem; }
.error-summary ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.error-summary a { color: #741818; }
.email-preview { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--aa-line); scroll-margin-top: 92px; }
.email-preview h3 { margin: 0; color: var(--aa-navy); font-size: 1.8rem; }
.email-preview label { margin-top: 1rem; }
.email-preview textarea { min-height: 18rem; resize: vertical; white-space: pre-wrap; }
.preview-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.preview-actions button, .preview-actions a { border: 1px solid var(--aa-navy); background: var(--aa-navy); color: #fff; }
.preview-actions a { background: #fff; color: var(--aa-navy); }
.action-status { min-height: 1.5rem; color: var(--aa-text); font-size: .82rem; }
.faq-section { border-top: 1px solid var(--aa-line); }
.faq-layout { display: grid; gap: 2rem; }
.faq-list { border-top: 1px solid var(--aa-line); }
.faq-list details { border-bottom: 1px solid var(--aa-line); }
.faq-list summary { padding: 1.2rem 2rem 1.2rem 0; color: var(--aa-navy); font-weight: 700; line-height: 1.45; cursor: pointer; }
.faq-list p { margin: -.35rem 0 1.2rem; color: var(--aa-text); line-height: 1.7; }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 28px max(24px, calc((100vw - 1120px) / 2)); border-top: 1px solid var(--aa-line); background: rgba(248,252,255,.9); color: var(--aa-muted); font-size: .82rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
footer a { color: var(--aa-muted); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #5a93f8; outline-offset: 3px; }
@media (min-width: 720px) { .problem-grid, .approach-grid { grid-template-columns: repeat(3, 1fr); } .field-row { grid-template-columns: repeat(2, 1fr); } .feasibility-list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } .outcome-layout, .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (min-width: 900px) { .analytics-hero-shell { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); align-items: center; } .enquiry-shell { grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); } }
@media (max-width: 600px) { .page-width { width: min(100% - 1.25rem, 1120px); } .analytics-hero { padding-bottom: 2.5rem; } .analytics-hero-shell { border-radius: 1.25rem; } .hero-actions { flex-direction: column; align-items: stretch; } .field-meta { display: block; } .field-meta p:last-child { text-align: right; } footer { flex-direction: column; padding-inline: 1rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }