/* Hallmark · shape: Narrative Workflow (three core offers lead, the turnkey stages follow: the owner's scroll data, 13 of 18 visits reach half a page) · genre: modern-minimal · theme: brand · redesign: full · draw: 3aaaa2 · job: hire
 * paper: oklch(14.5% 0.008 160) · accent: oklch(75.7% 0.178 155) · display: Outfit 800 · body: Outfit 400 · hero: Poster (/, /de/), Banner (every other page) · nav: banner over a retracting bar · footer: colophon block · signature: the empty data hall mid fit-out, then the three core offers and the hyperscale case in the owner's own site photos, the turnkey stages set in type
 * imagery: photographs, the owner's own site photos (img/slide*), webp crops in img/home · axes: dark/geometric-sans/chromatic-green · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a fit-out hero could be any contractor's; it leads with the owner's photo of an empty hall mid fit-out and the 4 to 8 weeks they gave */
/* Hallmark · dropped the hero status row (Systems active, 24/7 ready, Available) · 63 and 66 name decorative status dots and decoration text, 24/7 stays in the services */
/* Hallmark · dropped the hero background video hero-bg.mp4 · the owner's own hall photograph replaces it, the file stays in the repo */
/* Hallmark · reworded "BUILT FOR CRITICAL." to "Hyperscale data hall fit-out in 4 to 8 weeks" (DE: "Hyperscale-Halle in 4 bis 8 Wochen ausgebaut", singular as the owner's 4 to 8 weeks count per hall) · the brief replaces the themeless hero with the owner's facts */
/* Hallmark · dropped #services, #leistungen · the hero's second action now calls Marcel Gerull, the owner's visitor tracking found the phone with his name works; the services sit right below the hero */
/* Hallmark · reworded "Projects that speak for themselves" to "Three data halls for a hyperscale operator", "What sets us apart" to "Run by Klaus and Marcel Gerull", "Trusted by leading companies" to "Partners and suppliers", "Let’s talk" to "Request a project" (DE: "Projekte, die sprechen", "Was uns auszeichnet", "Vertraut von führenden Unternehmen", "Lassen Sie uns sprechen") · the finish review named them as heads any competitor could use */
/* Hallmark · dropped navtoggle, navlinks, navoverlay · every page's own nav ids, the shared chrome (#nav, #hamburger, #mobileMenu, #mobileOverlay) and its script replace them */
/* Hallmark · dropped stats, n · the stats band merged into the proof section, the noise filter id went with the noise overlay */
/* Hallmark · reworded "CCTV systems for seamless monitoring of critical areas" to "CCTV systems that monitor critical areas without gaps" and "cutting-edge technology" to "current technology" · 19 names seamless and cutting-edge */
/* Hallmark · reworded "modernste Technologien" to "moderne Technik" (DE) and replaced the em dashes in kept service and competency lines with colons and commas · 19 names dashes */
/* Hallmark · dismissed 46a · 99.9% availability, 1726+ and 150+ projects are the owner's figures kept as found, listed for Marcel Gerull to confirm */
/* Hallmark · dropped the scroll reveals, the word-by-word head reveals, the counters, the parallax and the card stagger (inline script) · craft.md never: parallax, one reveal at most, figures now stand at their value in the HTML */
/* Hallmark · hero-review: fix · 3 findings · 3 resolved (fit-out kept whole, the 4 to 8 weeks moved into the head, the lead balanced on two lines) */
/* Hallmark · reworded the hero subtitle and tagline into one lead from the brief's facts · 58 allows one sentence, the old lines move to the stages section */
/* Hallmark · dismissed 23 · the consent banner's accept control is one 44px button, not a viewport-scale accent fill */
/* Hallmark · answered F4 · the consent banner is its own dialog, and its accept button is that dialog's one primary */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --banner-h: 40px;
  --bar-h: 72px;
  --chrome-h: calc(var(--banner-h) + var(--bar-h) + 1px);
}

.nowrap { white-space: nowrap; }
@media (min-width: 40.01rem) { .nowrap-wide { white-space: nowrap; } }

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }

/* Banner over the bar */
.banner { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.banner__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--banner-h); }
.banner__line { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.banner a { color: var(--color-ink); font-weight: var(--weight-strong); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.banner a:hover { color: var(--color-accent); }
.lang-switch { display: flex; align-items: center; gap: var(--space-2xs); flex-shrink: 0; }
.lang-switch a, .lang-switch strong { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 var(--space-2xs); border-radius: var(--radius-card); font-size: var(--text-sm); }
.lang-switch strong { color: var(--color-ink); background: var(--color-paper-3); font-weight: var(--weight-strong); }
.lang-switch a { color: var(--color-muted); font-weight: 400; }
.lang-switch a:hover { color: var(--color-ink); }

/* The bar: sticky, retracts on scroll down, returns on scroll up */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid transparent; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.bar.scrolled { border-bottom-color: var(--color-rule); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__row { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--bar-h); }
.nav-brand { display: flex; align-items: center; gap: var(--space-sm); margin-right: auto; color: var(--color-ink); text-decoration: none; }
.nav-brand img { width: auto; height: 40px; }
.nav-brand span { font: var(--weight-strong) var(--text-md)/1.1 var(--font-display); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-md); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-ink); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

/* Menu toggle and phone menu */
.hamburger { display: none; position: relative; width: 44px; height: 44px; margin-right: calc(-1 * var(--space-xs)); padding: 0; border: 0; border-radius: var(--radius-card); background: transparent; color: var(--color-ink); cursor: pointer; }
.hamburger span { position: absolute; left: var(--space-sm); width: 20px; height: 2px; background: currentColor; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.hamburger:hover { background: var(--color-paper-2); }
.hamburger:active { transform: translateY(1px); }
.mobile-menu { display: none; }
.mobile-overlay { display: none; }
.nav-brand { flex-shrink: 0; }

/* Language hint: German browsers on an English page (site.js) */
.lang-hint { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.lang-hint__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md); padding-block: var(--space-2xs); }
.lang-hint p { margin: 0; }
.lang-hint .text-link { font-size: inherit; }
.lang-hint__close { margin-left: auto; min-height: 44px; padding: 0 var(--space-sm); border: 0; background: transparent; color: var(--color-muted); font: inherit; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.lang-hint__close:hover { color: var(--color-ink); }

@media (min-width: 60.0625rem) and (max-width: 72rem) {
  .bar__row { gap: var(--space-lg); }
  .nav-links { gap: var(--space-md); }
}

@media (max-width: 60rem) {
  html:not(.js) .bar__row { flex-wrap: wrap; row-gap: 0; }
  html:not(.js) .bar__row > nav { width: 100%; }
  html:not(.js) .nav-links { flex-wrap: wrap; gap: 0 var(--space-md); padding-bottom: var(--space-xs); }
  .js .nav-links { display: none; }
  .js .hamburger { display: block; }
  .mobile-menu { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; gap: var(--space-2xs); max-height: calc(100dvh - var(--bar-h)); overflow-y: auto; padding: var(--space-md) var(--gutter) var(--space-xl); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); visibility: hidden; opacity: 0; transform: translateY(calc(-1 * var(--space-xs))); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s var(--ease-out) var(--dur-short); }
  .mobile-menu.open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
  .mobile-menu a { display: flex; align-items: center; min-height: 52px; color: var(--color-ink); font: var(--weight-strong) var(--text-xl)/1.2 var(--font-display); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .mobile-menu a:hover { color: var(--color-accent); }
  .mobile-menu .menu-phone { margin-top: var(--space-md); border-bottom: 0; color: var(--color-accent); font-size: var(--text-lg); white-space: nowrap; }
  .mobile-overlay { position: fixed; inset: 0; z-index: var(--z-sticky); display: block; background: color-mix(in oklab, var(--color-scrim) 70%, transparent); visibility: hidden; opacity: 0; transition: opacity var(--dur-short) var(--ease-out), visibility 0s var(--ease-out) var(--dur-short); }
  .mobile-overlay.open { visibility: visible; opacity: 1; transition: opacity var(--dur-short) var(--ease-out); }
}
@media (max-width: 40rem) {
  .banner__label { display: none; }
  .nav-brand span { font-size: var(--text-sm); }
  .nav-brand img { height: 32px; }
}

/* Buttons: one filled primary, one outline */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-card); font: var(--weight-strong) var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-2); }
.btn-outline { background: transparent; color: var(--color-ink); border-color: color-mix(in oklab, var(--color-ink) 45%, transparent); }
.btn-outline:hover { border-color: var(--color-ink); background: color-mix(in oklab, var(--color-ink) 8%, transparent); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

/* Hero: Poster, the owner's photograph full-bleed, the head low and left on an ink scrim */
.poster { position: relative; display: grid; align-items: end; min-height: calc(100dvh - var(--chrome-h) - var(--hint-h, 0px)); isolation: isolate; background: var(--color-paper-2); }
.poster__photo { position: absolute; inset: 0; margin: 0; z-index: 0; }
.poster__photo > img { object-position: 50% 42%; filter: saturate(0.88); }
.poster::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--color-scrim) 86%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 66%, transparent) 44%, transparent 70%), linear-gradient(0deg, color-mix(in oklab, var(--color-scrim) 55%, transparent) 0%, transparent 48%); }
.poster__content { position: relative; z-index: 2; width: 100%; padding-block: var(--space-3xl); }
.poster h1 { max-width: 15ch; min-width: 0; color: var(--color-ink); line-height: 1; overflow-wrap: break-word; }
.poster .lead { margin-top: var(--space-lg); max-width: 40ch; color: var(--color-ink-2); text-wrap: balance; }
.poster__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

@media (max-width: 60rem) {
  .poster { min-height: 34rem; }
  .poster__photo > img { object-position: 50% 30%; }
  .poster::after { background: linear-gradient(0deg, color-mix(in oklab, var(--color-scrim) 94%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 80%, transparent) 45%, transparent 80%); }
  .poster__content { padding-block: var(--space-2xl) var(--space-xl); }
}
@media (max-width: 40rem) {
  .poster__actions .btn { flex: 1 1 auto; }
}

/* Consent banner (cookie-banner.js injects its own base style; these rules restyle it on redesigned pages) */
body .gerull-cookie-banner { gap: var(--space-md) var(--space-xl); padding: var(--space-md) var(--gutter); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); box-shadow: none; font-family: var(--font-body); }
body .gerull-cookie-text { min-width: min(100%, 280px); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 400; line-height: 1.5; }
body .gerull-cookie-text a { color: var(--color-accent); text-decoration: underline; transition: color var(--dur-short) var(--ease-out); }
body .gerull-cookie-text a:hover { opacity: 1; color: var(--color-ink); }
body .gerull-cookie-actions { gap: var(--space-xs); }
body .gerull-cookie-btn { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-card); font: var(--weight-strong) var(--text-sm)/1 var(--font-body); letter-spacing: 0; text-transform: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
body .gerull-cookie-btn:active { transform: translateY(1px); }
body .gerull-cookie-btn-accept { background: var(--color-accent); color: var(--color-accent-ink); }
body .gerull-cookie-btn-accept:hover { background: var(--color-accent-2); box-shadow: none; transform: none; }
body .gerull-cookie-btn-essential { background: transparent; color: var(--color-ink); border: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 45%, transparent); }
body .gerull-cookie-btn-essential:hover { border-color: var(--color-ink); color: var(--color-ink); }
@media (min-width: 60.01rem) {
  body .gerull-cookie-banner { left: auto; right: calc(var(--space-2xl) + var(--space-xl)); bottom: var(--space-lg); flex-direction: column; align-items: stretch; max-width: 26rem; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
  body .gerull-cookie-actions { justify-content: flex-end; }
}
@media (max-width: 600px) {
  body .gerull-cookie-banner { gap: var(--space-xs); padding: var(--space-sm) var(--gutter); text-align: left; }
  body .gerull-cookie-text { font-size: var(--text-xs); line-height: 1.45; }
  body .gerull-cookie-actions { justify-content: stretch; }
  body .gerull-cookie-btn { flex: 1 1 0; }
}


/* Subpage hero: Banner */
.page-hero { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.page-hero__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.page-hero h1 { grid-column: 1 / span 6; line-height: 1; text-wrap: balance; }
.page-hero__aside { grid-column: 8 / span 5; display: grid; justify-items: start; gap: var(--space-lg); }
.page-hero .lead { color: var(--color-ink-2); text-wrap: balance; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
@media (max-width: 60rem) {
  .page-hero { padding-block: var(--space-xl); }
  .page-hero__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .page-hero h1, .page-hero__aside { grid-column: 1 / -1; justify-self: start; }
}

/* Sections: one container, rhythm by the scaffold's section steps */
.section { padding-block: var(--section-gap); }
.section--band { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--section-gap-s); }
.section--tight { padding-block: var(--space-3xl); }
.section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.section-head .lead { color: var(--color-ink-2); }
.section-head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.section-head--split h2 { grid-column: 1 / span 6; }
.section-head--split .lead { grid-column: 8 / span 5; }
.section-foot { margin-top: var(--space-xl); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: var(--weight-strong); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; transition: color var(--dur-short) var(--ease-out); }
.text-link:hover { color: var(--color-accent); }

/* Photo frames */
.frame, .tile__media, .case__media, .team__photo { margin: 0; border-radius: var(--radius-card); }
.tile__media > img, .case__media > img, .team__photo > img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; border-radius: inherit; }

/* Core offers: one lead tile beside two */
.offers__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--space-2xl) var(--gap-columns); }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--space-md); }
.tile--lead { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.tile:not(.tile--lead) { grid-column: 8 / span 5; }
.tile__media { aspect-ratio: 16 / 10; }
.tile--lead .tile__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 440px; }
.tile__body { display: grid; gap: var(--space-xs); }
.tile__body p { color: var(--color-ink-2); max-width: 52ch; }
.tile--lead h3 { font-size: var(--text-2xl); }
.tile__link { color: var(--color-ink); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.tile__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.tile__link:focus-visible { outline: none; }
.tile:has(.tile__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: var(--space-xs); border-radius: var(--radius-card); }
.tile:hover .tile__link { color: var(--color-accent); }

/* Proof: figures, one case opened, two more as rows */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--space-3xl); }
.figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-xs); padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.figures > div:first-child { padding-left: 0; border-left: 0; }
.figures dd { margin: 0; color: var(--color-ink); font: var(--display-weight) var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.figures dt { color: var(--color-ink-2); font-size: var(--text-sm); }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.case__text { grid-column: 1 / span 6; display: grid; gap: var(--space-md); }
.case__text h2 { margin-bottom: var(--space-lg); }
.case__client { color: var(--color-ink-2); font-size: var(--text-sm); }
.case__scope { font: var(--weight-strong) var(--text-xl)/1.25 var(--font-display); }
.case__metric { color: var(--color-ink-2); font-size: var(--text-lead); }
.case__media { grid-column: 8 / span 5; aspect-ratio: 4 / 5; min-height: 440px; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.tags li { padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink-2); font-size: var(--text-sm); }
.ref-rows { margin: var(--space-3xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.ref-rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ref-rows__client { grid-column: 1 / span 3; color: var(--color-ink-2); font-size: var(--text-sm); }
.ref-rows__scope { grid-column: 4 / span 5; font-weight: var(--weight-strong); }
.ref-rows__metric { grid-column: 9 / span 4; color: var(--color-ink-2); }

/* Turnkey process: four rows, the step number inside the heading */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: var(--rule-hair) solid var(--color-rule); }
.step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); counter-increment: step; }
.step h3 { grid-column: 1 / span 4; font-size: var(--text-xl); }
.step h3::before { content: counter(step) ". "; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.step__services { grid-column: 5 / span 8; display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.step__services li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: baseline; }
.step__services a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-ink); font-weight: var(--weight-strong); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.step__services a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.25em; }
.step__services span { color: var(--color-ink-2); }

/* Team and competencies */
.team__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; margin-bottom: var(--space-3xl); }
.team__media { grid-column: 1 / span 5; margin: 0; }
.team__photo { aspect-ratio: 1; }
.team__media figcaption { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.team__text { grid-column: 7 / span 6; display: grid; gap: var(--space-lg); }
.team__text .lead { color: var(--color-ink-2); }
.competencies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; }
.competencies dt { margin-bottom: var(--space-xs); font: var(--weight-strong) var(--text-lg)/1.3 var(--font-display); }
.competencies dd { margin: 0; color: var(--color-ink-2); }
.competencies > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.competencies > div:last-child:nth-child(odd) dd { max-width: 60ch; }
.competencies--rows { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.competencies--rows > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.competencies--rows dt { grid-column: 1 / span 4; margin: 0; }
.competencies--rows dd { grid-column: 6 / span 7; max-width: 65ch; }
.competencies--rows > div:last-child:nth-child(odd) dd { max-width: 65ch; }

/* Partners band */
.partners__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; }
.partners__title { grid-column: 1 / span 4; max-width: 12ch; }
.partners__list { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.partners__list li { display: flex; align-items: center; min-height: 72px; padding-right: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font: var(--weight-strong) var(--text-lg)/1.25 var(--font-display); }

/* Contact: details beside the form */
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.contact__info { grid-column: 1 / span 5; display: grid; gap: var(--space-md); }
.contact__info h2 { margin-bottom: var(--space-lg); }
.contact__info h3 { font-size: var(--text-lg); }
.contact__line { display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.contact__line a { color: var(--color-ink); font-weight: var(--weight-strong); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.25em; }
.contact__line a:hover { color: var(--color-accent); }
.contact__line span { font-size: var(--text-sm); }
.social { display: flex; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink-2); transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.social a:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.contact__grid > .form { grid-column: 7 / span 6; }

/* Forms */
.form { display: grid; gap: var(--space-lg); }
.form-group { display: grid; gap: var(--space-xs); }
.form-group label { color: var(--color-ink-2); font-size: var(--text-sm); }
.form-group input, .form-group select, .form-group textarea { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.4 var(--font-body); outline: 2px solid transparent; outline-offset: -2px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-muted); }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline-color: var(--color-focus); }
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: var(--color-error); }
.form-group input:disabled, .form-group textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.form-group textarea { min-height: 160px; resize: vertical; }
.form .form-submit { justify-self: start; }
.form-status { min-height: 1lh; margin: 0; font-size: var(--text-sm); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Footer: colophon block */
.footer { padding-block: var(--space-2xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__inner { display: grid; gap: var(--space-md); }
.footer__colophon { max-width: 75ch; color: var(--color-ink-2); font-size: var(--text-sm); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.footer-links a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.25em; }

@media (max-width: 60rem) {
  .section-head--split, .case, .ref-rows li, .step, .team__grid, .partners__row, .contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .section-head--split h2, .section-head--split .lead, .case__text, .case__media, .ref-rows li > *, .step h3, .step__services, .team__media, .team__text, .partners__title, .partners__list, .contact__info, .contact__grid > .form { grid-column: 1 / -1; }
  .offers__grid { grid-template-columns: minmax(0, 1fr); }
  .partners__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--lead, .tile:not(.tile--lead) { grid-column: 1 / -1; grid-row: auto; }
  .tile--lead .tile__media { aspect-ratio: 4 / 3; min-height: 0; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .figures > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .case__media { min-height: 0; max-width: 32rem; }
  .team__media { max-width: 32rem; }
  .competencies--rows > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .competencies--rows dt, .competencies--rows dd { grid-column: 1 / -1; }
  .contact__grid { row-gap: var(--space-2xl); }
  .team__grid { row-gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .step__services li, .competencies { grid-template-columns: minmax(0, 1fr); }
}