/* Source artwork retained; SVG alpha removes paper/background on every theme. */
.pixel-logo .pixel-light,html[data-theme=black] .pixel-logo .pixel-dark{mix-blend-mode:normal}
.quadra-signature .quadra-mark,html[data-theme=black] .quadra-signature .quadra-mark{filter:none;mix-blend-mode:normal;color:var(--fg)}
.pixel-logo svg{overflow:hidden}
/* Explicit filter colour avoids inherited currentColor caching on iOS. */
.quadra-mark feFlood{flood-color:var(--fg)}

/* Equal side columns keep desktop navigation on the hero's centre axis. */
@media(min-width:1000px){
 html:not([data-view=mobile]) header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 html:not([data-view=mobile]) header .brand{justify-self:start}
 html:not([data-view=mobile]) header .header-actions{justify-self:end}
 html:not([data-view=mobile]) .hero{padding-top:32px}
}

/* Shared section rhythm: adjacent sections contribute half the gap each. */
.site-shell{--section-half-gap:48px}
.section,.section.intro{padding-block:var(--section-half-gap)}
.section.intro,.section.history,.section.portfolio-context,.section.contact{border-block:0}
.section-heading{margin-bottom:40px}
.section-heading>p:last-child,.visual-caption,.steps article>p:last-child{margin-bottom:0}
.hero,html[data-view=desktop] .hero{padding-bottom:var(--section-half-gap)}
.creative-scroll{margin-block:0}
footer{padding-top:var(--section-half-gap)}
@container(max-width:700px){
 .section,.section.intro{padding-block:32px}
 .hero{padding-bottom:32px}
 .section-heading{margin-bottom:32px}
 footer{padding-top:32px}
 .footer-grid>div:first-child{text-align:center}
 .quadra-signature{align-items:center;margin-top:24px;gap:12px}
 .quadra-signature p{margin-top:0}
}
/* A clear path from business goal to service to enquiry. */
.sales-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.sales-text-link{text-underline-offset:6px;text-decoration:underline;font-size:16px}
.hero .hero-description{max-width:660px;margin-inline:auto}
.service-shortcuts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.service-shortcuts a{padding:12px 20px;border:1px solid var(--line);border-radius:999px;font-size:15px}
.service-family{scroll-margin-top:110px;margin-top:48px}
.family-heading{max-width:720px;margin-bottom:24px}
.family-heading h3{font-size:clamp(28px,3.2cqi,44px);line-height:1.12;letter-spacing:-.04em;margin:8px 0 16px}
.family-heading>p:last-child{color:var(--secondary);font-size:18px;line-height:1.6}
.sales-services .service-card{min-height:0;display:flex;flex-direction:column;padding:30px}
.sales-services .service-card h4{font-size:25px;line-height:1.2;letter-spacing:-.03em;margin:0 0 20px;color:var(--fg)}
.sales-services .service-card p{font-size:17px;line-height:1.55;margin:0 0 24px}
.sales-services .service-card .service-deliverables{font-size:13px;line-height:1.6;color:var(--secondary);margin-top:auto}
.sales-services .card-link{font-size:16px;margin-top:8px}
.service-help{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:32px;margin-top:40px}
.service-help p{font-size:21px;line-height:1.5;margin:0}
.traffic-proof{max-width:760px;margin:0 auto 32px;text-align:center;color:var(--secondary);line-height:1.6}
.traffic-client-count{font-size:22px}.traffic-client-count strong{color:var(--fg)}
.history-archive{border-top:1px solid var(--line);margin-top:32px;padding-top:24px}
.history-archive>summary{font-size:18px;cursor:pointer;line-height:1.5}
.history-archive[open]>.history-facts{margin-top:32px}
@container(max-width:700px){
 .sales-actions{gap:20px;flex-direction:column}
 .hero .hero-description{font-size:22px;max-width:440px}
 .service-shortcuts{gap:8px;margin-bottom:32px}
 .service-shortcuts a{font-size:13px;padding:10px 14px}
 .service-family{margin-top:32px}
 .sales-services .service-card{padding:26px}
 .service-help{flex-direction:column;text-align:center;align-items:center}
}

.sales-services .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@container(max-width:850px){.sales-services .service-grid{grid-template-columns:1fr}}

/* The opening visual leads directly into the immersive presentation. */
.hero:has(+ .creative-scroll){padding-bottom:12px}
.hero + .creative-scroll .creative-heading{padding-top:12px;padding-bottom:12px}
.sales-services>.section-heading>.eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:18px}
@container(max-width:700px){
 .hero:has(+ .creative-scroll){padding-bottom:8px}
 .hero + .creative-scroll .creative-heading{padding-top:12px;padding-bottom:12px}
 .sales-services>.section-heading>.eyebrow{font-size:10px}
}