/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * macrostructure: Narrative Workflow · genre: modern-minimal · tone: technical-editorial + human
 * theme: studied-DNA (source: https://mindera.com/) · recoloured to Becompi brand
 * paper: oklch(98% 0.008 243) · accent: Becompi yellow / blue / white · display: Space Grotesk · body: Manrope
 * nav: N10 floating-on-scroll + menu panel · footer: Ft5 Statement · enrichment: workflow reveals + Tier-A CSS modular art
 * contrast: pass · honest: pass · chrome: pass · tokens: pass · mobile: pass · slop: 58/58
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: clip; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.skip-link { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: 1000; padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-light-ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--page-gutter); }

.site-header { min-height: 6rem; position: sticky; top: 0; z-index: 50; background: var(--color-paper); border-block-end: var(--rule-hair) solid var(--color-transparent); transition: background-color var(--dur-reveal) var(--ease-out), border-color var(--dur-reveal) var(--ease-out); }
.site-header__inner { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; border: var(--rule-hair) solid var(--color-transparent); border-radius: 0; background: var(--color-transparent); box-shadow: none; transform: translateY(0); transition: transform var(--dur-reveal) var(--ease-out), background-color var(--dur-reveal) var(--ease-out), border-color var(--dur-reveal) var(--ease-out), border-radius var(--dur-reveal) var(--ease-out), box-shadow var(--dur-reveal) var(--ease-out); }
.site-header.is-floating { background: var(--color-transparent); border-block-end-color: var(--color-transparent); }
.site-header.is-floating .site-header__inner { min-height: 5rem; background: var(--color-paper); border-color: var(--color-line); border-radius: var(--radius-pill); box-shadow: 0 var(--space-2xs) var(--space-lg) var(--color-shadow); transform: translateY(var(--space-2xs)); }
.brand, .header-actions { position: relative; z-index: 52; }
.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand img { width: 11rem; height: auto; }
.header-actions { display: flex; align-items: center; gap: var(--space-xs); }
.language-switcher { min-height: 3rem; display: inline-flex; align-items: center; padding: var(--space-3xs); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); }
.language-switcher button { min-width: 2.35rem; min-height: 2.35rem; padding: 0 var(--space-xs); border: 0; border-radius: var(--radius-pill); background: var(--color-transparent); color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; line-height: 1; cursor: pointer; }
.language-switcher button[aria-pressed='true'] { background: var(--color-ink); color: var(--color-light-ink); }
.language-switcher button:not([aria-pressed='true']):hover { background: var(--color-line); }
.language-switcher button:active { transform: translateY(1px); }
.menu-button { min-height: 3rem; display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); font-weight: 700; line-height: 1; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.menu-button:hover, .menu-button[aria-expanded='true'] { background: var(--color-ink); color: var(--color-light-ink); }
.menu-button:active { transform: translateY(1px); }
.menu-button:disabled { opacity: 0.55; cursor: not-allowed; }
.menu-glyph { font-family: var(--font-mono); font-size: var(--text-lg); transition: transform var(--dur-base) var(--ease-out); }
.menu-button[aria-expanded='true'] .menu-glyph { transform: rotate(45deg); }
.menu-panel { position: fixed; inset: 0; z-index: 51; padding: 9rem var(--page-gutter) var(--space-2xl); background: var(--color-yellow); color: var(--color-yellow-ink); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); }
.menu-panel[hidden] { display: none; }
.menu-panel a { width: fit-content; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; white-space: nowrap; }
.menu-panel a:hover { text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-2xs); }

.hero { min-height: clamp(38rem, 78dvh, 53rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--space-xl); padding-block: clamp(2rem, 4vh, 3rem) clamp(5rem, 10vh, 8rem); }
.hero-copy { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; animation: hero-enter var(--dur-reveal) var(--ease-out) both; }
.hero h1 { max-width: 9ch; margin: 0; font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; line-height: 0.88; letter-spacing: -0.075em; }
.hero h1 span { color: var(--color-blue); }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }
.hero-bottom p { max-width: 48ch; margin: 0; color: var(--color-ink-soft); font-size: var(--text-lg); }
.round-link { flex: 0 0 auto; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-ink); color: var(--color-light-ink); font-size: var(--text-xl); line-height: 1; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.round-link:hover { background: var(--color-blue); color: var(--color-blue-ink); }
.round-link:active { transform: translateY(1px); }
.round-link[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.hero-art { min-width: 0; position: relative; overflow: clip; border-radius: var(--radius-lg); background: var(--color-blue); animation: hero-enter var(--dur-reveal) 100ms var(--ease-out) both; }
.hero-art::before { content: ''; position: absolute; width: 65%; aspect-ratio: 1; border-radius: 50%; background: var(--color-paper); right: -24%; top: -18%; }
.shape { position: absolute; display: grid; place-items: center; min-width: 8rem; min-height: 6rem; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-ink); border-radius: 48% 52% 45% 55%; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 var(--space-sm) var(--space-xl) var(--color-shadow); }
.shape--yellow { width: 48%; height: 27%; left: 7%; top: 10%; background: var(--color-yellow); color: var(--color-yellow-ink); transform: rotate(-8deg); }
.shape--blue { width: 51%; height: 29%; right: 4%; top: 39%; background: var(--color-paper); color: var(--color-ink); transform: rotate(7deg); }
.shape--code { width: 45%; height: 25%; left: 12%; right: auto; top: auto; bottom: 7%; transform: rotate(4deg); }
.shape--eye { min-width: 0; min-height: 0; width: 3.5rem; height: 3.5rem; padding: 0; left: 17%; top: 46%; border-radius: 50%; background: var(--color-paper); }
.shape--eye::after { content: ''; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--color-ink); }

.statement { background: var(--color-ink); color: var(--color-light-ink); }
.statement-inner { min-height: 44rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: var(--space-4xl); }
.statement p { margin: 0 0 var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); }
.statement h2 { max-width: 19ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.02; letter-spacing: -0.055em; }
.arrow-link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-lg); padding-bottom: var(--space-3xs); border-bottom: var(--rule-hair) solid currentColor; font-weight: 700; white-space: nowrap; }
.arrow-link:hover { color: var(--color-yellow); }
.arrow-link:active { transform: translateY(1px); }
.arrow-link[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.arrow-link--light { color: var(--color-light-ink); }

.services { padding-block: var(--space-4xl); }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.section-intro h2 { max-width: 11ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 0.95; letter-spacing: -0.06em; }
.section-intro p { max-width: 48ch; margin: 0; color: var(--color-ink-soft); font-size: var(--text-lg); }
.service-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(20rem, 31vw); gap: var(--space-sm); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; padding-bottom: var(--space-xs); }
.service-track::-webkit-scrollbar { display: none; }
.service-card { min-height: 29rem; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-lg); border-radius: var(--radius-lg); color: var(--color-ink); }
.service-card--yellow { background: var(--color-yellow); color: var(--color-yellow-ink); }
.service-card--blue { background: var(--color-blue); color: var(--color-blue-ink); }
.service-card--white { background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-blue); }
.card-number { font-family: var(--font-mono); font-size: var(--text-xs); }
.service-card h3 { max-width: 11ch; margin: auto 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; letter-spacing: -0.045em; }
.service-card p { max-width: 48ch; margin: 0; }
.card-mark { margin-top: var(--space-md); font-size: var(--text-xl); }
.drag-note { margin-top: var(--space-sm); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); text-align: right; }

.impact { padding-block: var(--space-4xl); background: var(--color-blue); color: var(--color-blue-ink); }
.impact-lead { display: flex; flex-direction: column; align-items: flex-start; }
.impact-lead > p, .custom-fit__head > p { margin: 0 0 var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); }
.impact-lead h2 { max-width: 18ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.055em; }
.impact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.impact-item { min-height: 25rem; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper); color: var(--color-ink); }
.impact-item--yellow { background: var(--color-yellow); color: var(--color-yellow-ink); }
.impact-item--blue { background: var(--color-ink); color: var(--color-light-ink); }
.impact-item > span { font-family: var(--font-mono); font-size: var(--text-xs); }
.impact-item h3 { max-width: 14ch; margin: auto 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; letter-spacing: -0.045em; }
.impact-item p { max-width: 55ch; margin: 0; }

.custom-fit { padding-block: var(--space-4xl); }
.custom-fit__head { display: flex; flex-direction: column; align-items: flex-start; }
.custom-fit__head h2 { max-width: 17ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.055em; }
.benefit-list { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); }
.benefit-list article { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-xl); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-ink); }
.benefit-list h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; letter-spacing: -0.04em; }
.benefit-list p { max-width: 55ch; margin: 0; color: var(--color-ink-soft); }

.clients { padding-block: var(--space-3xl) var(--space-4xl); background: var(--color-paper-warm); }
.section-intro--clients { align-items: flex-start; }
.logo-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 11rem; gap: var(--space-sm); }
.logo-tile { min-width: 0; grid-column: span 2; margin: 0; padding: var(--space-lg); display: grid; place-items: center; border: var(--rule-hair) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); }
.logo-tile--wide { grid-column: span 2; }
.logo-tile--repsol { grid-column: span 2; background: var(--color-yellow); }
.logo-tile img { width: 100%; height: 5rem; object-fit: contain; filter: grayscale(1); transition: filter var(--dur-base) var(--ease-out); }
.logo-tile:hover img { filter: grayscale(0); }
.logo-tile--gulbenkian { overflow: clip; }
.logo-tile--gulbenkian img { height: 7rem; transform: scale(2.15); }
.logo-tile--catarina { grid-column: 2 / span 2; }
.logo-tile--catarina img { height: 4.4rem; }
.logo-tile--cooperativa img { height: var(--space-3xl); }

.product { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); margin-block: var(--space-4xl); padding: 0; background: var(--color-yellow); color: var(--color-yellow-ink); border-radius: var(--radius-lg); overflow: clip; }
.product-copy { padding: clamp(3rem, 7vw, 7rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.product-name { margin: 0 0 var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; }
.product-copy h2 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.055em; }
.product-copy > p:not(.product-name) { max-width: 48ch; margin: var(--space-md) 0 0; }
.product-art { min-width: 0; min-height: 40rem; position: relative; margin: 0; padding: clamp(1.5rem, 4vw, 4rem); display: grid; place-items: center; background: var(--color-blue); overflow: clip; }
.product-shot { width: min(100%, 52rem); border-radius: var(--radius-lg); box-shadow: 0 var(--space-lg) var(--space-2xl) var(--color-shadow); overflow: clip; }
.product-shot img { width: 100%; height: auto; }

.process { padding-block: var(--space-4xl); }
.process-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); }
.process-heading h2 { max-width: 11ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.055em; }
.process-heading p { max-width: 48ch; color: var(--color-ink-soft); font-size: var(--text-lg); }
.process-list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.process-list li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 0.55fr) minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-ink); overflow: clip; }
.process-list li::after { content: ''; position: absolute; inset: auto 0 0; height: var(--rule-hair); background: var(--color-blue); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-reveal) var(--ease-out); }
.process-list li.is-visible::after { transform: scaleX(1); }
.process-list span { font-family: var(--font-mono); font-size: var(--text-xs); }
.process-list strong { font-family: var(--font-display); font-size: var(--text-lg); }
.process-list p { max-width: 48ch; margin: 0; color: var(--color-ink-soft); }

.questions { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-3xl); padding-block: var(--space-4xl); }
.questions-heading h2 { max-width: 11ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.055em; }
.questions-heading p { max-width: 48ch; color: var(--color-ink-soft); }
.question-list { border-top: var(--rule-hair) solid var(--color-ink); }
.question-list details { border-bottom: var(--rule-hair) solid var(--color-ink); }
.question-list summary { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); cursor: pointer; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; list-style: none; }
.question-list summary::-webkit-details-marker { display: none; }
.question-list summary span { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-xl); transition: transform var(--dur-base) var(--ease-out); }
.question-list details[open] summary span { transform: rotate(45deg); }
.question-list details p { max-width: 55ch; margin: 0; padding: 0 0 var(--space-md); color: var(--color-ink-soft); }

.contact { margin-block: var(--space-3xl); padding: clamp(3rem, 7vw, 7rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: end; border-radius: var(--radius-lg); background: var(--color-yellow); color: var(--color-yellow-ink); }
.contact-copy > p { margin: 0 0 var(--space-sm); font-family: var(--font-mono); font-size: var(--text-sm); }
.contact h2 { max-width: 13ch; margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.055em; }
.contact-button { min-height: 4rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-light-ink); font-weight: 700; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.contact-button:hover { background: var(--color-blue); color: var(--color-blue-ink); }
.contact-button:active { transform: translateY(1px); }
.contact-button[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.site-footer { padding-block: var(--space-3xl) var(--space-lg); background: var(--color-ink); color: var(--color-light-ink); }
.footer-main { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); gap: var(--space-xl); align-items: start; padding-block-end: var(--space-3xl); }
.footer-brand { width: fit-content; min-height: 3rem; display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); }
.footer-logo { width: 12rem; height: auto; }
.footer-statement { max-width: 17ch; margin: 0; justify-self: end; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 0.98; letter-spacing: -0.055em; }
.footer-statement span { color: var(--color-yellow); }
.footer-connect { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--space-xl); align-items: end; padding-block: var(--space-xl); border-block-start: var(--rule-hair) solid var(--color-muted); }
.footer-contact p { margin: 0 0 var(--space-xs); color: var(--color-line); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.footer-contact a { width: fit-content; display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.footer-contact a span { transition: transform var(--dur-fast) var(--ease-out); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); justify-self: end; }
.footer-nav a, .footer-meta a { min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.footer-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-lg); align-items: center; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-muted); color: var(--color-line); font-size: var(--text-sm); }

@media (hover: hover) and (pointer: fine) {
  .footer-contact a:hover, .footer-nav a:hover, .footer-meta a:hover { color: var(--color-yellow); }
  .footer-contact a:hover span { transform: translate(var(--space-3xs), calc(-1 * var(--space-3xs))); }
  .footer-nav a:hover, .footer-meta a:hover { transform: translateX(var(--space-3xs)); }
}

.footer-contact a:active, .footer-nav a:active, .footer-meta a:active { transform: translateY(1px); }

.js [data-reveal] { opacity: 0; transform: translateY(var(--space-lg)); }
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .service-card[data-reveal]:nth-child(2), .js .impact-item[data-reveal]:nth-child(2) { transition-delay: 70ms; }
.js .service-card[data-reveal]:nth-child(3), .js .impact-item[data-reveal]:nth-child(3) { transition-delay: 140ms; }
.js .service-card[data-reveal]:nth-child(4), .js .impact-item[data-reveal]:nth-child(4) { transition-delay: 210ms; }
.js .logo-tile[data-reveal] { transform: translateY(var(--space-sm)) scale(0.98); }
.js .logo-tile[data-reveal].is-visible { transform: translateY(0) scale(1); }

@media (hover: hover) and (pointer: fine) {
  .service-card { transition: transform var(--dur-base) var(--ease-out); }
  .service-card:hover { transform: translateY(calc(-1 * var(--space-2xs))); }
  .logo-tile { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
  .logo-tile:hover { border-color: var(--color-ink); transform: translateY(calc(-1 * var(--space-3xs))); }
}

@keyframes hero-enter { from { opacity: 0; transform: translateY(var(--space-md)); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 64rem) {
  .hero, .product, .process-grid, .questions { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; }
  .hero-art { min-height: 34rem; }
  .section-intro { align-items: flex-start; flex-direction: column; }
  .product-art { min-height: 36rem; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-tile, .logo-tile--wide, .logo-tile--repsol { grid-column: span 1; }
  .logo-tile--catarina { grid-column: span 1; }
  .logo-tile:last-child { grid-column: auto; }
  .questions { gap: var(--space-xl); }
}

@media (max-width: 48rem) {
  .site-header, .site-header__inner { min-height: 5rem; }
  .site-header.is-floating .site-header__inner { min-height: 4.5rem; border-radius: var(--radius-lg); }
  .brand img { width: 8.5rem; }
  .header-actions { gap: var(--space-2xs); }
  .language-switcher { min-height: 2.75rem; }
  .language-switcher button { min-width: 2.1rem; min-height: 2.1rem; padding-inline: var(--space-2xs); }
  .menu-button { min-height: 2.75rem; padding-inline: var(--space-sm); }
  .menu-panel { padding-block-end: var(--space-xl); }
  .hero { gap: var(--space-lg); padding-block-start: var(--space-lg); padding-block-end: var(--space-3xl); }
  .hero h1 { line-height: 0.92; }
  .hero-bottom { align-items: flex-end; }
  .hero-art { min-height: 25rem; }
  .round-link { width: 3.5rem; height: 3.5rem; }
  .statement-inner { min-height: 36rem; padding-block: var(--space-3xl); }
  .services, .clients, .process { padding-block: var(--space-3xl); }
  .service-track { grid-auto-columns: minmax(17.5rem, 83vw); }
  .service-card { min-height: 25rem; }
  .logo-wall { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 9rem; }
  .logo-tile, .logo-tile:last-child { grid-column: auto; }
  .product { margin: var(--space-3xl) var(--page-gutter); }
  .product-copy { padding: var(--space-xl) var(--space-md); }
  .product-art { min-height: 28rem; }
  .product-shot { border-radius: var(--radius-md); }
  .process-grid { gap: var(--space-xl); }
  .impact, .custom-fit, .questions { padding-block: var(--space-3xl); }
  .impact-grid { grid-template-columns: minmax(0, 1fr); }
  .impact-item { min-height: 21rem; }
  .benefit-list article { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .process-list li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .process-list p { grid-column: 2; }
  .contact { grid-template-columns: minmax(0, 1fr); align-items: start; margin-inline: var(--page-gutter); padding: var(--space-xl) var(--space-md); }
  .contact-button { justify-self: start; }
  .footer-main, .footer-connect { grid-template-columns: minmax(0, 1fr); }
  .footer-main { gap: var(--space-2xl); padding-block-end: var(--space-2xl); }
  .footer-statement { justify-self: start; }
  .footer-connect { align-items: start; }
  .footer-nav { justify-self: stretch; }
  .footer-meta { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); align-items: start; }
}

@media (max-width: 23.5rem) {
  .brand img { width: 7rem; }
  .menu-button { width: 2.75rem; justify-content: center; padding: 0; }
  .menu-button > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hero-bottom { align-items: flex-start; flex-direction: column; }
  .menu-panel a { font-size: clamp(1.9rem, 10vw, 3rem); }
  .service-track { grid-auto-columns: calc(100vw - (2 * var(--page-gutter))); }
}

/* Impeccable animate · the hero assembles product, process and code into one solution. */
.hero-art {
  --pointer-x: 0;
  --pointer-y: 0;
  isolation: isolate;
  transition: box-shadow 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.hero-art.is-interactive {
  box-shadow: 0 var(--space-md) var(--space-2xl) var(--color-shadow);
}
.hero-art::before {
  transform: translate3d(calc(var(--pointer-x) * -0.55rem), calc(var(--pointer-y) * -0.55rem), 0);
  transition: transform 600ms var(--ease-out);
}
.shape {
  will-change: transform;
  transition: box-shadow 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.shape--yellow {
  animation: assemble-idea 760ms 120ms var(--ease-out) both;
}
.shape--blue {
  animation: assemble-product 760ms 220ms var(--ease-out) both;
}
.shape--code {
  animation: assemble-code 760ms 320ms var(--ease-out) both;
}
.shape--eye {
  animation: assemble-eye 560ms 600ms var(--ease-out) both;
}
.shape--yellow { transform: translate3d(calc(var(--pointer-x) * .6rem), calc(var(--pointer-y) * .45rem), 0) rotate(-8deg); }
.shape--blue { transform: translate3d(calc(var(--pointer-x) * -.75rem), calc(var(--pointer-y) * .65rem), 0) rotate(7deg); }
.shape--code { transform: translate3d(calc(var(--pointer-x) * .45rem), calc(var(--pointer-y) * -.7rem), 0) rotate(4deg); }
.shape--eye { transform: translate3d(calc(var(--pointer-x) * .28rem), calc(var(--pointer-y) * .28rem), 0); }
.shape--eye::after {
  transform: translate3d(calc(var(--eye-x, 0) * .48rem), calc(var(--eye-y, 0) * .48rem), 0);
  transition: transform 180ms var(--ease-out);
}
.hero-art.is-interactive .shape { box-shadow: 0 var(--space-md) var(--space-2xl) var(--color-shadow); }

.menu-panel:not([hidden]) { animation: menu-sheet-in 420ms var(--ease-out) both; }
.menu-panel:not([hidden]) a { animation: menu-link-in 420ms var(--ease-out) both; }
.menu-panel:not([hidden]) a:nth-child(2) { animation-delay: 45ms; }
.menu-panel:not([hidden]) a:nth-child(3) { animation-delay: 90ms; }
.menu-panel:not([hidden]) a:nth-child(4) { animation-delay: 135ms; }

.js .statement-inner[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); filter: blur(.35rem); }
.js .statement-inner[data-reveal].is-visible { clip-path: inset(0); filter: blur(0); transition: clip-path 760ms var(--ease-out), filter 620ms var(--ease-out); }
.js .product-art[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.js .product-art[data-reveal].is-visible { clip-path: inset(0); transition: clip-path 760ms var(--ease-out); }
.product-shot { transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .product-art:hover .product-shot { transform: translateY(calc(-1 * var(--space-xs))) rotate(-.5deg); box-shadow: 0 var(--space-xl) var(--space-3xl) var(--color-shadow); }
  .service-card:hover .card-mark { transform: translate(.2rem, -.2rem); }
  .card-mark { transition: transform 220ms var(--ease-out); }
}

@keyframes assemble-idea {
  from { opacity: 0; filter: blur(.7rem); transform: translate3d(-36%, -48%, 0) rotate(-19deg) scale(.78); }
  to { opacity: 1; filter: blur(0); transform: translate3d(calc(var(--pointer-x) * .6rem), calc(var(--pointer-y) * .45rem), 0) rotate(-8deg) scale(1); }
}
@keyframes assemble-product {
  from { opacity: 0; filter: blur(.7rem); transform: translate3d(44%, -12%, 0) rotate(18deg) scale(.8); }
  to { opacity: 1; filter: blur(0); transform: translate3d(calc(var(--pointer-x) * -.75rem), calc(var(--pointer-y) * .65rem), 0) rotate(7deg) scale(1); }
}
@keyframes assemble-code {
  from { opacity: 0; filter: blur(.7rem); transform: translate3d(-28%, 52%, 0) rotate(-12deg) scale(.8); }
  to { opacity: 1; filter: blur(0); transform: translate3d(calc(var(--pointer-x) * .45rem), calc(var(--pointer-y) * -.7rem), 0) rotate(4deg) scale(1); }
}
@keyframes assemble-eye {
  from { opacity: 0; transform: scale(.25) rotate(-90deg); }
  to { opacity: 1; transform: translate3d(calc(var(--pointer-x) * .28rem), calc(var(--pointer-y) * .28rem), 0) scale(1) rotate(0); }
}
@keyframes menu-sheet-in {
  from { clip-path: circle(0 at calc(100% - var(--page-gutter) - 2rem) 3rem); }
  to { clip-path: circle(150% at calc(100% - var(--page-gutter) - 2rem) 3rem); }
}
@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(var(--space-md)); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero system visual: three real inputs converge into one built product. */
.system-visual {
  background: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
}
.system-visual::before { content: none; }
.system-visual__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate3d(calc(var(--pointer-x) * .35rem), calc(var(--pointer-y) * .35rem), 0);
  transition: transform 520ms var(--ease-out);
}
.system-grid { fill: none; stroke: var(--color-paper); stroke-width: 1; opacity: .08; }
.input-node rect { fill: var(--color-paper); stroke: var(--color-paper); stroke-width: 2; }
.input-node circle, .input-node path { fill: none; stroke: var(--color-ink); stroke-width: 2; }
.input-node text, .build-core text {
  fill: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
}
.input-node--idea rect { fill: var(--color-yellow); stroke: var(--color-yellow); }
.input-node--idea circle { fill: var(--color-ink); }
.input-node--team rect { fill: var(--color-blue); stroke: var(--color-blue); }
.input-node--process rect { fill: var(--color-paper); }
.flow-lines, .output-line { fill: none; stroke: var(--color-paper); stroke-width: 3; stroke-linecap: round; opacity: .65; }
.flow-line { stroke-dasharray: 8 12; animation: system-flow 1.1s linear infinite; }
.flow-line--two { animation-delay: -360ms; }
.flow-line--three { animation-delay: -720ms; }
.build-core rect { fill: var(--color-yellow); stroke: var(--color-ink); stroke-width: 2; }
.core-bracket { fill: none; stroke: var(--color-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.output-node rect { fill: var(--color-blue); stroke: var(--color-paper); stroke-width: 2; }
.output-node path { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; }
.output-node circle { fill: var(--color-yellow); }
.launch-path { stroke-dasharray: 7 11; animation: launch-route 3.2s linear infinite; }
.launch-rocket {
  offset-path: path('M584 380C620 350 598 276 630 228');
  offset-rotate: auto 90deg;
  animation: rocket-launch 3.2s var(--ease-in-out) infinite;
}
.rocket-body { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2; }
.rocket-window { fill: var(--color-blue); stroke: var(--color-ink); stroke-width: 2; }
.rocket-fin { fill: var(--color-yellow); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; }
.rocket-flame { fill: var(--color-yellow); transform-box: fill-box; transform-origin: center top; animation: rocket-flame 180ms ease-in-out infinite alternate; }
.launch-result { opacity: 0; animation: launch-result 3.2s var(--ease-out) infinite; }
.burst-rays { fill: none; stroke: var(--color-yellow); stroke-width: 4; stroke-linecap: round; }
.chart-axis { fill: none; stroke: var(--color-paper); stroke-width: 3; stroke-linecap: round; }
.chart-bar { fill: var(--color-blue); transform-box: fill-box; transform-origin: center bottom; animation: chart-rise 3.2s var(--ease-out) infinite; }
.chart-bar--two { fill: var(--color-paper); animation-delay: 70ms; }
.chart-bar--three { fill: var(--color-yellow); animation-delay: 140ms; }
.chart-line { fill: none; stroke: var(--color-yellow); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 130; animation: chart-draw 3.2s var(--ease-out) infinite; }
.packet { fill: var(--color-yellow); filter: drop-shadow(0 0 7px rgba(255, 214, 0, .55)); }
.packet--one { offset-path: path('M226 175C318 175 302 300 374 342'); animation: packet-input 3.2s 0s var(--ease-in-out) infinite; }
.packet--two { offset-path: path('M226 380H374'); animation: packet-input 3.2s .12s var(--ease-in-out) infinite; }
.packet--three { offset-path: path('M226 585C318 585 302 460 374 418'); animation: packet-input 3.2s .24s var(--ease-in-out) infinite; }
.packet--out { fill: var(--color-blue); offset-path: path('M584 380H652'); animation: packet-output 3.2s 0s var(--ease-in-out) infinite; }
.build-core { animation: core-process 3.2s var(--ease-in-out) infinite; }
.core-scan { fill: var(--color-blue); opacity: 0; transform-box: fill-box; transform-origin: center; animation: core-scan 3.2s var(--ease-in-out) infinite; }
.output-node { animation: output-ready 3.2s var(--ease-in-out) infinite; }
.output-pulse { fill: none; stroke: var(--color-blue); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: output-pulse 3.2s var(--ease-out) infinite; }
.system-visual__legend {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.system-visual__legend i { flex: 1; height: 1px; background: var(--color-paper); opacity: .35; }
.system-visual.is-paused .flow-line,
.system-visual.is-paused .packet,
.system-visual.is-paused .build-core,
.system-visual.is-paused .core-scan,
.system-visual.is-paused .output-node,
.system-visual.is-paused .output-pulse,
.system-visual.is-paused .launch-path,
.system-visual.is-paused .launch-rocket,
.system-visual.is-paused .rocket-flame,
.system-visual.is-paused .launch-result,
.system-visual.is-paused .chart-bar,
.system-visual.is-paused .chart-line { animation-play-state: paused; }

.product .arrow-link:hover { color: var(--color-ink); }
.product .arrow-link span { transition: transform var(--dur-fast) var(--ease-out); }
.product .arrow-link:hover span { transform: translate(.2rem, -.2rem); }

@keyframes system-flow { to { stroke-dashoffset: -20; } }
@keyframes packet-input {
  0%, 8% { offset-distance: 0%; opacity: 0; }
  14% { opacity: 1; }
  48% { offset-distance: 100%; opacity: 1; }
  53%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes packet-output {
  0%, 63% { offset-distance: 0%; opacity: 0; }
  68% { opacity: 1; }
  83% { offset-distance: 100%; opacity: 1; }
  88%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes core-process {
  0%, 45%, 72%, 100% { opacity: 1; }
  54%, 64% { opacity: .82; }
}
@keyframes core-scan {
  0%, 45% { opacity: 0; transform: translateY(0); }
  50% { opacity: .9; }
  65% { opacity: .9; transform: translateY(128px); }
  70%, 100% { opacity: 0; transform: translateY(128px); }
}
@keyframes output-ready {
  0%, 68% { opacity: .45; }
  74%, 100% { opacity: 1; }
}
@keyframes output-pulse {
  0%, 72% { opacity: 0; transform: scale(.7); }
  76% { opacity: .8; }
  90%, 100% { opacity: 0; transform: scale(1.45); }
}
@keyframes launch-route {
  0%, 61% { stroke-dashoffset: 48; opacity: .18; }
  78%, 100% { stroke-dashoffset: 0; opacity: .7; }
}
@keyframes rocket-launch {
  0%, 61% { offset-distance: 0%; opacity: 0; }
  65% { opacity: 1; }
  82% { offset-distance: 100%; opacity: 1; }
  86%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes rocket-flame {
  from { transform: scaleY(.7); }
  to { transform: scaleY(1.25); }
}
@keyframes launch-result {
  0%, 80% { opacity: .22; }
  85%, 96% { opacity: 1; }
  100% { opacity: .22; }
}
@keyframes chart-rise {
  0%, 80% { transform: scaleY(0); }
  90%, 100% { transform: scaleY(1); }
}
@keyframes chart-draw {
  0%, 82% { stroke-dashoffset: 130; }
  94%, 100% { stroke-dashoffset: 0; }
}

/* Every client gets exactly the same visual weight. */
.logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 10rem; }
.logo-tile { grid-column: auto; padding: var(--space-lg); background: var(--color-paper); }
.logo-tile img { width: 100%; height: 4.5rem; object-fit: contain; transform: none; filter: grayscale(1); }
.logo-tile:hover { background: var(--color-paper); }

.quick-chat {
  position: fixed;
  right: max(var(--space-md), env(safe-area-inset-right));
  bottom: max(var(--space-md), env(safe-area-inset-bottom));
  z-index: 49;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3.75rem;
  padding: .55rem var(--space-md) .55rem .65rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-light-ink);
  box-shadow: 0 var(--space-xs) var(--space-xl) var(--color-shadow);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.quick-chat:hover { background: var(--color-blue); color: var(--color-blue-ink); transform: translateY(-2px); }
.quick-chat:active { transform: translateY(0); }
.quick-chat[aria-busy='true'] { cursor: wait; }
.quick-chat svg { width: 2.35rem; height: 2.35rem; padding: .45rem; border-radius: 50%; background: var(--color-yellow); fill: none; stroke: var(--color-yellow-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-chat__copy { display: grid; line-height: 1.2; }
.quick-chat__label { font-weight: 700; }
.quick-chat__meta { margin-top: .15rem; font-size: var(--text-xs); opacity: .78; }
@media (max-width: 64rem) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .logo-wall { grid-template-columns: minmax(0, 1fr); }
  .quick-chat { right: max(var(--space-sm), env(safe-area-inset-right)); bottom: max(var(--space-sm), env(safe-area-inset-bottom)); padding-right: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .site-header.is-floating .site-header__inner { transform: none; }
  .hero-art, .hero-art::before, .shape, .shape--eye::after, .menu-panel, .menu-panel a, .product-shot { animation: none !important; transform: none !important; filter: none !important; }
  .system-visual__svg, .flow-line, .packet, .build-core, .core-scan, .output-node, .output-pulse, .launch-path, .launch-rocket, .rocket-flame, .launch-result, .chart-bar, .chart-line { animation: none !important; transform: none !important; }
  .packet { display: none; }
  .core-scan, .output-pulse, .launch-rocket { display: none; }
  .launch-result { opacity: 1; }
  .js .statement-inner[data-reveal], .js .product-art[data-reveal] { clip-path: none; filter: none; }
}