:root {
  --ap-charcoal: #1b1b1a;
  --ap-charcoal-soft: #282827;
  --ap-grey: #666563;
  --ap-paper: #f5f4f0;
  --ap-white: #ffffff;
  --ap-magenta: #e40146;
  --ap-lime: #adbd12;
  --ap-blue: #0189c5;
  --ap-border: rgba(27, 27, 26, .14);
  --ap-display: "Manrope", sans-serif;
  --ap-body: "DM Sans", sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { background: var(--ap-charcoal); color: var(--ap-charcoal); font-family: var(--ap-body); font-size: 1rem; line-height: 1.7; overflow-x: hidden; }
a { text-underline-offset: .2em; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 9999; padding: .75rem 1rem; color: #fff; background: var(--ap-magenta); }
.skip-link:focus { top: 1rem; }
.container-xl { max-width: 1240px; }

.site-header { padding: .7rem 0; background: rgba(27, 27, 26, .82); backdrop-filter: blur(18px); transition: padding .25s ease, background .25s ease; }
.site-header.scrolled { padding: .35rem 0; background: rgba(27, 27, 26, .96); box-shadow: 0 8px 30px rgba(0,0,0,.16); }
.navbar-brand img { display: block; width: 200px; height: auto; }
.navbar .nav-link { position: relative; margin: 0 .55rem; padding: .65rem .3rem !important; color: rgba(255,255,255,.76); font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: #fff; }
.navbar .nav-link::after { content: ""; position: absolute; left: .3rem; right: 100%; bottom: .4rem; height: 2px; background: var(--ap-blue); transition: right .25s ease; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { right: .3rem; }
.navbar-toggler { width: 46px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 0; padding: 9px 10px; box-shadow: none !important; }
.navbar-toggler span { display: block; height: 2px; margin: 5px 0; background: #fff; transition: transform .2s, opacity .2s; }
.navbar-toggler[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

.btn { border-radius: 0; padding: .9rem 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.btn-sm { padding: .65rem 1rem; }
.btn-primary { --bs-btn-bg: var(--ap-magenta); --bs-btn-border-color: var(--ap-magenta); --bs-btn-hover-bg: #c7003c; --bs-btn-hover-border-color: #c7003c; --bs-btn-active-bg: #b90038; --bs-btn-active-border-color: #b90038; }
.btn-outline-light { --bs-btn-hover-color: var(--ap-charcoal); }

.hero { position: relative; min-height: 760px; padding: 12rem 0 4rem; color: #fff; background: var(--ap-charcoal); overflow: hidden; }
.hero-grid, .contact-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.hero::before { content: ""; position: absolute; width: 38vw; height: 38vw; right: -18vw; top: 8rem; border: 1px solid rgba(1,137,197,.4); border-radius: 50%; box-shadow: 0 0 100px rgba(1,137,197,.08); }
.eyebrow { margin-bottom: 1.25rem; color: rgba(255,255,255,.64); font-family: var(--ap-display); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.text-magenta { color: var(--ap-magenta) !important; }
.text-blue { color: var(--ap-blue) !important; }
.display-title { max-width: 780px; margin-bottom: 1.6rem; font-family: var(--ap-display); font-size: clamp(3rem, 6.7vw, 6rem); font-weight: 700; line-height: .99; letter-spacing: -.065em; }
.accent-underline { position: relative; display: inline; }
.accent-underline::after { content: ""; position: absolute; left: .03em; bottom: .02em; width: 100%; height: .08em; background: linear-gradient(90deg, var(--ap-magenta) 0 33%, var(--ap-lime) 33% 66%, var(--ap-blue) 66%); }
.hero-copy { max-width: 660px; margin-bottom: .8rem; color: rgba(255,255,255,.86); font-size: clamp(1.12rem, 1.7vw, 1.35rem); line-height: 1.55; }
.hero-assurance { max-width: 650px; margin-bottom: 2rem; color: rgba(255,255,255,.55); font-size: .98rem; }

.process-visual { position: relative; display: grid; grid-template-columns: 1fr 70px 1.2fr; align-items: center; min-height: 420px; padding: 1.4rem; }
.input-stack { display: grid; gap: 1rem; }
.process-chip { padding: 1rem; color: rgba(255,255,255,.75); font-size: .78rem; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 10px 30px rgba(0,0,0,.13); }
.process-chip span { display: inline-block; width: 8px; height: 8px; margin-right: .65rem; }
.chip-magenta span { background: var(--ap-magenta); }.chip-lime span { background: var(--ap-lime); }.chip-blue span { background: var(--ap-blue); }
.flow-lines { display: grid; gap: 3.15rem; overflow: hidden; }
.flow-lines i { position: relative; display: block; width: 100%; height: 1px; background: rgba(255,255,255,.26); }
.flow-lines i::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: dataFlow 2.5s ease-in-out infinite; }
.flow-lines i:nth-child(2)::after { animation-delay: .6s; }.flow-lines i:nth-child(3)::after { animation-delay: 1.2s; }
@keyframes dataFlow { 0% { left: 0; opacity: 0; } 20%,80% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
.output-card { position: relative; padding: 2rem 1.6rem; background: #fff; color: var(--ap-charcoal); box-shadow: 22px 22px 0 rgba(1,137,197,.18), -8px -8px 0 rgba(228,1,70,.14); }
.output-top { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; color: var(--ap-grey); font-weight: 700; letter-spacing: .1em; }
.output-mark { width: 12px; height: 12px; background: conic-gradient(var(--ap-magenta) 0 33%, var(--ap-lime) 33% 66%, var(--ap-blue) 66%); }
.output-card strong { display: block; font-family: var(--ap-display); font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.25; }
.status-line { display: flex; align-items: center; gap: .55rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--ap-border); color: var(--ap-grey); font-size: .8rem; font-weight: 600; }
.status-line span { width: 8px; height: 8px; border-radius: 50%; background: var(--ap-lime); box-shadow: 0 0 0 5px rgba(173,189,18,.13); }
.proof-strip { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(0, 2.25fr); align-items: center; gap: 2rem 3rem; margin-top: 4.5rem; padding: 1.6rem 1.8rem; color: var(--ap-charcoal); background: rgba(255,255,255,.94); box-shadow: 14px 14px 0 rgba(1,137,197,.12); }
.proof-heading span { display: block; margin-bottom: .35rem; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.proof-heading small { display: block; max-width: 260px; color: var(--ap-grey); font-size: .72rem; line-height: 1.45; }
.logo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: clamp(1.2rem, 3vw, 3.2rem); }
.client-logo { display: block; width: 100%; max-width: 150px; max-height: 44px; margin: auto; object-fit: contain; filter: grayscale(1); opacity: .58; transition: filter .25s ease, opacity .25s ease, transform .25s ease; }
.client-logo.logo-negative { filter: grayscale(1) invert(1); }
.client-logo.logo-audio-network { max-width: 116px; height: 58px; max-height: 58px; object-fit: cover; object-position: center; }
.client-logo.logo-ukmva { max-width: 86px; }
.client-logo.logo-airport-cars { max-width: 112px; max-height: 52px; }
.client-logo:hover { opacity: .9; transform: translateY(-2px); }

.section { padding: clamp(5.5rem, 10vw, 9rem) 0; }
.section-light { background: var(--ap-paper); }
h2 { margin: 0; font-family: var(--ap-display); font-size: clamp(2.4rem, 4.5vw, 4.3rem); font-weight: 700; line-height: 1.07; letter-spacing: -.055em; }
.section-intro { color: var(--ap-grey); font-size: 1.12rem; }
.service-card { position: relative; padding: clamp(1.7rem, 3vw, 2.6rem); background: #fff; border-top: 4px solid var(--card-accent); box-shadow: 0 14px 45px rgba(27,27,26,.055); transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(27,27,26,.1); }
.service-card::after { content: ""; position: absolute; right: -42px; bottom: -42px; width: 110px; height: 110px; border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent); transform: rotate(45deg); }
.accent-magenta { --card-accent: var(--ap-magenta); }.accent-blue { --card-accent: var(--ap-blue); }.accent-lime { --card-accent: var(--ap-lime); }.accent-charcoal { --card-accent: var(--ap-charcoal); }
.service-number { display: block; margin-bottom: 2.4rem; color: var(--card-accent); font-family: var(--ap-display); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.service-card h3 { margin-bottom: 1rem; font-family: var(--ap-display); font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.035em; }
.service-card p { max-width: 540px; color: var(--ap-grey); }
.service-detail { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ap-border); font-size: .82rem; font-weight: 600; line-height: 1.6; }

.about-section { color: #fff; background: var(--ap-charcoal); }
.about-section h2 { max-width: 540px; }
.about-section p:not(.eyebrow) { color: rgba(255,255,255,.67); }
.about-section .lead-copy { color: #fff !important; font-size: 1.35rem; line-height: 1.55; }
.since-panel { width: min(100%, 330px); margin-top: 3.5rem; padding: 1.6rem; border: 1px solid rgba(255,255,255,.16); border-left: 4px solid var(--ap-lime); }
.since-panel span { display: block; color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.since-panel strong { display: block; margin: .2rem 0 .7rem; font-family: var(--ap-display); font-size: 4rem; line-height: 1; letter-spacing: -.07em; }
.since-panel p { margin: 0; font-size: .9rem; }
.assurance-statement { display: grid; margin-top: 6rem; padding: 2.4rem 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); font-family: var(--ap-display); font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 600; line-height: 1.25; letter-spacing: -.05em; }
.assurance-statement span:last-child { text-align: right; }
.assurance-statement em { color: var(--ap-lime); font-style: normal; }.assurance-statement span:first-child em { color: var(--ap-blue); }

.workflow { position: relative; border-top: 1px solid var(--ap-border); }
.workflow::before { content: ""; position: absolute; left: 3.1rem; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--ap-magenta), var(--ap-lime), var(--ap-blue)); }
.workflow-step { position: relative; display: grid; grid-template-columns: 6.25rem 1fr; padding: 2.2rem 0; border-bottom: 1px solid var(--ap-border); }
.step-number { position: relative; z-index: 1; justify-self: center; width: 2.5rem; height: 2.5rem; color: var(--ap-charcoal); background: var(--ap-paper); border: 1px solid currentColor; border-radius: 50%; text-align: center; font-size: .74rem; font-weight: 800; line-height: 2.4rem; }
.workflow-step h3 { margin: 0 0 .4rem; font-family: var(--ap-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
.workflow-step p { max-width: 720px; margin: 0; color: var(--ap-grey); }
.direct-note { max-width: 760px; margin: 3rem 0 0 6.25rem; padding-left: 1.4rem; border-left: 3px solid var(--ap-blue); font-weight: 600; }

.contact-section { position: relative; padding: clamp(6rem, 11vw, 10rem) 0; color: #fff; background: var(--ap-charcoal-soft); overflow: hidden; }
.contact-section::after { content: ""; position: absolute; right: -12vw; bottom: -18vw; width: 40vw; height: 40vw; border: 1px solid rgba(228,1,70,.35); transform: rotate(45deg); }
.contact-section h2 { margin-bottom: 2rem; }
.contact-section p { max-width: 600px; color: rgba(255,255,255,.65); }
.contact-section .contact-prompt { color: #fff; font-size: 1.15rem; font-weight: 600; }
.contact-form { padding: clamp(1.5rem, 3vw, 2.5rem); background: #fff; color: var(--ap-charcoal); box-shadow: 20px 20px 0 rgba(1,137,197,.14); }
.contact-form label { margin-bottom: .4rem; font-size: .8rem; font-weight: 800; }
.contact-form label span { color: var(--ap-grey); font-weight: 400; }
.form-control { border: 1px solid #d2d0ca; border-radius: 0; padding: .8rem .9rem; font-size: 1rem; }
.form-control:focus { border-color: var(--ap-blue); box-shadow: 0 0 0 .22rem rgba(1,137,197,.13); }
.form-status { min-height: 1.5rem; margin: 1rem 0 0; color: var(--ap-grey) !important; font-size: .85rem; }

.site-footer { padding: 2rem 0; color: rgba(255,255,255,.62); background: #111; }
.site-footer img { width: 180px; height: auto; filter: brightness(1.55); }
.site-footer p { margin: 0; font-size: .82rem; }.site-footer p span { margin-left: .4rem; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .site-header { background: rgba(27,27,26,.96); }
  .navbar-collapse { padding: 1rem 0 .5rem; }
  .navbar .nav-link { margin: 0; padding: .7rem 0 !important; }
  .navbar .nav-link::after { display: none; }
  .hero { min-height: auto; padding-top: 10rem; }
  .process-visual { max-width: 580px; margin: 0 auto; }
  .proof-strip span { flex-basis: 100%; }
}

@media (max-width: 767.98px) {
  .navbar-brand img { width: 168px; }
  .display-title { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .process-visual { grid-template-columns: 1fr; gap: 1.1rem; min-height: 0; padding: .5rem 0; }
  .flow-lines { display: none; }
  .input-stack { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .process-chip { padding: .75rem .5rem; font-size: .68rem; text-align: center; }
  .process-chip span { display: block; margin: 0 auto .45rem; }
  .output-card { margin: 0 1rem; }
  .proof-strip { grid-template-columns: 1fr; padding: 1.4rem; }
  .proof-heading small { max-width: none; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .assurance-statement span:last-child { margin-top: 1rem; text-align: left; }
  .workflow::before { left: 1.25rem; }
  .workflow-step { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .step-number { width: 2.5rem; }
  .direct-note { margin-left: 0; }
  .site-footer p span { display: block; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}