* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sh-canvas); color: var(--sh-ink); font-family: var(--sh-font-sans); font-size: 17px; line-height: 1.6; }
a { color: inherit; text-underline-offset: .25em; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 6px; border-radius: 8px; }
.project-panel a:focus-visible, .contact-panel a:focus-visible { outline-color: var(--sh-dark-text); }
.wrap { width: min(1280px, calc(100% - (2 * var(--sh-page-gutter)))); margin-inline: auto; }
section { scroll-margin-top: 32px; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.055em; line-height: 1.06; }
h1 { font-size: clamp(40px, 6.8cqi, 104px); }
h1 span { color: var(--sh-cobalt-light); }
h2 { font-size: clamp(34px, 4.1vw, 58px); }
h3 { font-size: 32px; }
.skip-link { position: absolute; z-index: 10; top: -100px; left: 20px; background: var(--sh-surface); padding: 12px 20px; border-radius: 99px; }
.skip-link:focus { top: 12px; }
.preview-bar { padding: 9px 24px; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; align-items: center; background: var(--sh-dark); color: var(--sh-dark-text); font-size: 12px; }
.preview-bar strong { font-weight: 600; }
.preview-dot { width: 6px; height: 6px; background: var(--sh-dark-text); border-radius: 50%; }
.header-overlay { position: relative; z-index: 3; }
.header { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding-block: 28px; gap: 24px; color: var(--sh-dark-text); border-bottom: 1px solid var(--sh-edge-light); }
.header a:focus-visible, .hero a:focus-visible { outline-color: var(--sh-dark-text); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; letter-spacing: -.065em; text-decoration: none; }
.brand-mark { display: block; width: 36px; height: 34px; flex: none; fill: currentColor; }
nav { display: flex; align-items: center; gap: 32px; font-size: 14px; }
nav > a:not(.button) { text-decoration: none; }
nav > a:hover { text-decoration: underline; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; padding: 16px 25px; min-height: 52px; background: linear-gradient(165deg, var(--sh-light-wash), transparent 65%), var(--sh-cobalt); color: var(--sh-surface); border-radius: var(--sh-radius-pill); box-shadow: var(--sh-shadow-button); text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.4; transition: transform .18s; }
.button:hover { transform: translateY(-2px); }
.button-small { padding: 12px 20px; min-height: 44px; font-size: 14px; }
.button-light { background: var(--sh-surface); color: var(--sh-ink); box-shadow: var(--sh-shadow-button-light); }
.text-link { display: inline-flex; align-items: center; gap: 16px; font-weight: 600; font-size: 15px; min-height: 44px; }
.hero { position: relative; isolation: isolate; container-type: inline-size; overflow: hidden; background: var(--sh-dark); color: var(--sh-dark-text); border-radius: 0 0 var(--sh-radius-panel) var(--sh-radius-panel); box-shadow: var(--sh-shadow-panel); }
.hero::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--sh-dark) 0%, var(--sh-hero-shade) 45%, transparent 75%), linear-gradient(0deg, var(--sh-dark), transparent 25%, transparent 80%, var(--sh-hero-shade)); }
.hero-inner { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: center; padding-block: 170px 130px; }
.hero-copy { width: min(590px, 53%); }
.hero .eyebrow { color: var(--sh-hairline); max-width: 420px; }
.eyebrow { margin-bottom: 26px; font-family: var(--sh-font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .09em; text-transform: uppercase; }
.hero-bottom { margin-top: 32px; }
.lead { max-width: 430px; color: var(--sh-hairline); font-size: 19px; line-height: 1.65; margin-bottom: 30px; }
.hero-direct { color: var(--sh-hairline); font-size: 13px; margin-top: 22px; }
.hero-direct a { display: inline-block; padding-block: 10px; color: var(--sh-dark-text); }
/* shared stroke icon for round controls (24px grid, centred by its box, not by a font baseline) */
.icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-scroll { position: absolute; z-index: 2; bottom: 30px; left: max(48px, calc((100% - 1280px) / 2)); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--sh-edge-light); border-radius: var(--sh-radius-pill); text-decoration: none; background: var(--sh-light-wash); }
.actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.compile-art { position: absolute; inset: 0; }
.compile-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.compile-art figcaption { position: absolute; z-index: 2; bottom: 44px; right: max(48px, calc((100% - 1280px) / 2)); display: flex; gap: 24px; font-family: var(--sh-font-mono); font-size: 10px; color: var(--sh-hairline); }
.section { padding-block: 96px; border-bottom: 1px solid var(--sh-hairline); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.section-copy { max-width: 530px; }
.section-copy > * + * { margin-top: 22px; }
.section-copy > p:not(.large-copy) { color: var(--sh-secondary); }
.large-copy { font-size: 24px; letter-spacing: -.025em; line-height: 1.5; }
.pending-note { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.work-heading { align-items: end; margin-bottom: 48px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.work-card { min-width: 0; padding: 32px; border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-panel); background: var(--sh-surface); box-shadow: var(--sh-shadow-card); }
.work-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.work-name { font-size: 25px; font-weight: 650; letter-spacing: -.055em; }
.work-index { font-family: var(--sh-font-mono); font-size: 11px; color: var(--sh-secondary); }
.work-visual { min-width: 0; margin-bottom: 30px; }
.work-stage { position: relative; isolation: isolate; height: 380px; overflow: hidden; border-radius: var(--sh-radius-card); background: var(--sh-work-photo); box-shadow: inset 0 0 0 1px var(--sh-hairline); }
.work-shot { position: absolute; box-shadow: var(--sh-shadow-image); overflow: hidden; border-radius: 14px; }
.work-shot img { display: block; width: 100%; height: auto; }
.work-visual figcaption { font-size: 11px; line-height: 1.55; color: var(--sh-secondary); margin-top: 14px; }
.work-story .eyebrow { color: var(--sh-secondary); margin-bottom: 16px; }
.work-story h3 { font-size: clamp(28px, 2.8vw, 38px); max-width: 480px; }
.work-intro { margin-top: 20px; font-size: 16px; color: var(--sh-secondary); }
.work-card-nutragen { grid-column: 1 / -1; display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 56px; padding: 40px; }
.work-card-nutragen .work-card-heading { grid-column: 1; align-self: start; }
.work-card-nutragen .work-visual { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
.work-card-nutragen .work-story { grid-column: 1; align-self: center; padding-block: 24px 32px; }
.work-card-nutragen h3 { font-size: clamp(38px, 3.8vw, 52px); }
.work-card-nutragen .work-detail { grid-column: 1; align-self: end; }
.work-visual-nutragen .work-stage { background: var(--sh-work-nutragen); height: 570px; }
.work-visual-nutragen .work-shot { width: 42%; max-width: 220px; border: 6px solid var(--sh-surface); border-radius: 24px; }
.work-visual-nutragen .work-shot-1 { left: 9%; top: 38px; transform: rotate(-5deg); z-index: 2; }
.work-visual-nutragen .work-shot-2 { right: 7%; top: 68px; transform: rotate(5deg); }
.work-visual-sklepowefoto .work-shot { width: 76%; border: 5px solid var(--sh-surface); }
.work-visual-sklepowefoto .work-shot-1 { top: 28px; left: -8%; transform: rotate(-8deg); }
.work-visual-sklepowefoto .work-shot-2 { right: -4%; bottom: 38px; transform: rotate(5deg); }
.work-visual-lekko .work-stage { background: var(--sh-work-lekko); }
.work-visual-lekko .work-shot { width: 216px; top: 30px; left: 50%; transform: translateX(-50%) rotate(7deg); border: 7px solid var(--sh-surface); border-radius: 28px; }
.work-detail { border-top: 1px solid var(--sh-hairline); margin-top: 28px; }
.work-detail summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 76px; padding-block: 18px 0; cursor: pointer; font-weight: 600; font-size: 15px; }
.work-detail summary::-webkit-details-marker { display: none; }
.work-detail summary:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 6px; border-radius: 12px; }
.work-expand { display: grid; place-items: center; flex: 0 0 42px; height: 42px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-pill); box-shadow: var(--sh-shadow-button-light); transition: transform .18s; }
/* "+" from two bars stacked in one grid cell: geometric centre, rotates into "×" when open */
.work-expand::before, .work-expand::after { content: ''; grid-area: 1 / 1; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; }
.work-expand::after { transform: rotate(90deg); }
.work-detail[open] .work-expand { transform: rotate(45deg); }
.work-detail-body { padding-top: 24px; font-size: 15px; }
.work-detail-body h4 { font-size: 19px; line-height: 1.4; margin: 0 0 16px; font-weight: 600; letter-spacing: -.025em; }
.work-detail-body p + p { margin-top: 14px; }
.work-detail-body .text-link { margin-top: 22px; font-size: 14px; }
.work-next { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; }
.work-next p { font-size: 18px; letter-spacing: -.02em; }
.project-panel { padding: 64px; margin-block: 40px 0; border-radius: var(--sh-radius-panel); background: radial-gradient(ellipse at 95% 0%, var(--sh-cobalt-haze), transparent 70%), linear-gradient(145deg, var(--sh-dark-surface), var(--sh-dark)); color: var(--sh-dark-text); box-shadow: var(--sh-shadow-panel), inset 0 1px 0 var(--sh-edge-light); }
.project-panel .section-copy > p:not(.large-copy) { color: var(--sh-hairline); }
.project-panel .eyebrow { color: var(--sh-hairline); }
.journey-heading { align-items: end; }
.journey-heading .section-copy { padding-bottom: 4px; }
.journey-heading .text-link { color: var(--sh-dark-text); }
.journey-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 48px; }
.journey-choices fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.goal-list { display: grid; gap: 12px; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, textarea:focus-visible, .journey-refine summary:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 5px; }
.journey-choices button:focus-visible, .journey-memory button:focus-visible, .journey-refine summary:focus-visible { outline-color: var(--sh-dark-text); }
.goal-option { display: flex; align-items: center; text-align: left; gap: 18px; width: 100%; min-height: 98px; padding: 20px 22px; background: var(--sh-dark-surface); border: 1px solid var(--sh-edge-light); border-radius: var(--sh-radius-card); color: var(--sh-dark-text); box-shadow: var(--sh-shadow-card); transition: background .18s, border-color .18s; }
.goal-option:hover { border-color: var(--sh-cobalt-light); background: var(--sh-hero-shade); }
.goal-option[aria-pressed="true"] { background: var(--sh-cobalt); border-color: var(--sh-cobalt-light); box-shadow: var(--sh-shadow-button); }
.goal-icon { display: grid; place-items: center; width: 42px; flex: 0 0 42px; height: 42px; font-size: 29px; border: 1px solid var(--sh-edge-light); border-radius: 15px; background: var(--sh-light-wash); line-height: 1; }
.goal-copy { display: grid; gap: 5px; flex: 1; min-width: 0; }
.goal-copy strong { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; }
.goal-copy > span { font-size: 12px; color: var(--sh-hairline); line-height: 1.4; }
.goal-copy .goal-mobile-question { display: none; }
.goal-option[aria-pressed="true"] .goal-copy > span { color: var(--sh-dark-text); }
.goal-state { font-family: var(--sh-font-mono); font-size: 12px; }
.journey-choice-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; }
.quiet-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 0; color: inherit; border: 0; background: transparent; font-size: 14px; text-decoration: underline; text-underline-offset: .3em; border-radius: 6px; }
.journey-choice-footer > span { font-size: 12px; color: var(--sh-hairline); }
.journey-response { position: relative; min-width: 0; padding: 32px; border-radius: var(--sh-radius-panel); background: var(--sh-surface); color: var(--sh-ink); box-shadow: var(--sh-shadow-panel); }
.journey-response-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 28px; }
.journey-response .eyebrow { color: var(--sh-secondary); margin: 0; }
.journey-orbit .icon { width: 26px; height: 26px; }
.journey-orbit { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; color: var(--sh-cobalt); background: var(--sh-canvas); box-shadow: var(--sh-shadow-button-light); }
.journey-response h3 { font-size: clamp(30px, 3vw, 40px); line-height: 1.13; }
.journey-answer { margin-top: 22px; font-size: 16px; line-height: 1.6; color: var(--sh-secondary); }
.journey-question { margin-top: 26px; padding: 20px; border-radius: 22px; background: var(--sh-cobalt-haze); }
.journey-question > span, .journey-proof-label { display: block; font-family: var(--sh-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--sh-secondary); }
.journey-question p { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; margin-top: 9px; }
.journey-proof { padding-top: 24px; margin-top: 26px; border-top: 1px solid var(--sh-hairline); }
.journey-proof-links { display: flex; gap: 16px; flex-wrap: wrap; }
.journey-proof-note { font-size: 12px; color: var(--sh-secondary); line-height: 1.55; }
.journey-response .button { margin-top: 28px; border: 0; }
.project-panel .journey-response a:focus-visible { outline-color: var(--sh-cobalt); }
.journey-contact-note { margin-top: 14px; color: var(--sh-secondary); font-size: 12px; }
.journey-refine { margin-top: 36px; border-top: 1px solid var(--sh-edge-light); border-bottom: 1px solid var(--sh-edge-light); }
.journey-refine summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 26px; cursor: pointer; list-style: none; border-radius: 8px; }
.journey-refine summary::-webkit-details-marker { display: none; }
.journey-refine summary strong { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.journey-refine summary > span > span { display: block; color: var(--sh-hairline); font-size: 13px; margin-top: 4px; }
.journey-refine .work-expand { color: var(--sh-dark-text); background: var(--sh-dark-surface); border-color: var(--sh-edge-light); }
.journey-refine[open] .work-expand { transform: rotate(45deg); }
.journey-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 4px 32px; }
.journey-fields > div { min-width: 0; }
.journey-fields label { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 500; }
.journey-fields label span { font-size: 13px; color: var(--sh-hairline); font-weight: 400; }
.journey-fields select, .journey-fields textarea { display: block; width: 100%; min-width: 0; padding: 16px 18px; color: var(--sh-ink); background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: 20px; font-size: 15px; line-height: 1.5; }
.journey-fields select { min-height: 56px; padding-right: 8px; }
.journey-fields textarea { resize: vertical; min-height: 130px; }
.journey-fields textarea::placeholder { color: var(--sh-secondary); opacity: 1; }
.field-hint { margin-top: 10px; font-size: 12px; color: var(--sh-hairline); }
.journey-note, .journey-description { grid-column: 1 / -1; }
.journey-memory { display: flex; align-items: start; justify-content: space-between; gap: 28px; margin-top: 28px; }
.journey-memory-label { font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--sh-hairline); }
.journey-memory ul { display: flex; flex-wrap: wrap; padding: 0; list-style: none; gap: 8px; margin: 12px 0; }
.journey-memory li { padding: 6px 12px; border: 1px solid var(--sh-edge-light); border-radius: var(--sh-radius-pill); color: var(--sh-dark-text); font-size: 12px; }
.journey-memory p { font-size: 11px; color: var(--sh-hairline); max-width: 630px; }
.journey-memory .quiet-button { flex-shrink: 0; }
.journey-fallback { margin-top: 36px; max-width: 750px; }
.journey-fallback > * + * { margin-top: 20px; }
#journey-confirm { width: min(540px, calc(100% - 40px)); max-height: calc(100svh - 40px); padding: 32px; color: var(--sh-ink); background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-panel); box-shadow: var(--sh-shadow-panel); }
#journey-confirm::backdrop { background: var(--sh-hero-shade); }
#journey-confirm h3 { font-size: 30px; }
#journey-confirm p { margin-block: 20px 28px; font-size: 16px; }
#journey-confirm .button { border: 0; font-size: 14px; }
.discussion-list { margin: 50px 0 0; }

/* H05 · Jak pracujemy: a walk along the process installation (process.mjs).
   Default (no JS, reduced motion): the whole panorama and the stage cards as a grid.
   .is-walk (desktop): the stage pins while page scroll moves the camera; plaques are decorative clones.
   .is-tall (portrait ≤ 1100 px): the same walk down the vertical render (process-vertical.webp). */
.process-section { padding-bottom: 0; }
.process-heading { align-items: end; margin-bottom: 44px; }
.process-heading h2 span { color: var(--sh-cobalt); }
.process-stage { position: relative; width: min(1280px, calc(100% - 96px)); margin-inline: auto; overflow: hidden; border-radius: var(--sh-radius-panel); background: var(--sh-canvas); --process-fade: var(--sh-canvas); }
.process-cam { position: relative; width: 100%; aspect-ratio: 3 / 1; transform-origin: 0 0; }
.process-pic { position: absolute; inset: 0; overflow: hidden; }
.process-pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.process-soft { filter: blur(var(--process-blur, 0px)) saturate(.55) brightness(1.04); }
.process-sharp { -webkit-mask-image: var(--process-mask, none); mask-image: var(--process-mask, none); }
.process-pic::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--process-fade), transparent 9%, transparent 86%, var(--process-fade)), linear-gradient(90deg, var(--process-fade), transparent 4%, transparent 90%, var(--process-fade) 99.5%); }
.process-rails { position: absolute; top: 0; overflow: visible; pointer-events: none; }
.process-rails path { fill: none; stroke: var(--sh-muted); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; }
.process-rails circle { fill: var(--sh-ink); }
.process-rails text { font-family: var(--sh-font-sans); font-size: 15px; fill: var(--sh-ink); }
.process-rails .process-rail-number { font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: .1em; fill: var(--sh-muted); }
.process-leader, .process-plaques, .process-hint, .process-ticks { display: none; }
.process-credit { position: absolute; top: 24px; right: 32px; font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); }
.process-steps { list-style: none; margin: 24px auto 0; padding: 0; width: min(1280px, calc(100% - 96px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.process-step { display: flex; min-width: 0; }
.process-card { width: 100%; padding: 26px 28px 24px; border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-card); background: var(--sh-surface); box-shadow: var(--sh-shadow-card); }
.process-card-label { font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.process-card-label b { color: var(--sh-ink); font-weight: 500; }
.process-card h3 { margin: 14px 0 12px; font-size: 28px; line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
.process-card > p:not(.process-card-label):not(.process-get) { font-size: 15px; line-height: 1.6; color: var(--sh-secondary); }
.process-get { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sh-hairline); font-size: 15px; font-weight: 600; }
.process-get span { flex: none; font-family: var(--sh-font-mono); font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.process-step.is-decision .process-card { background: var(--sh-cobalt); border-color: var(--sh-cobalt); box-shadow: var(--sh-shadow-button); color: var(--sh-surface); }
.process-step.is-decision .process-card-label, .process-step.is-decision .process-card-label b, .process-step.is-decision .process-card > p { color: var(--sh-surface); }
.process-deliver { list-style: none; margin: 18px 0 20px; padding: 0; border-top: 1px solid var(--sh-hairline); }
.process-deliver li { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--sh-hairline); font-size: 15px; }
.process-deliver span { font-family: var(--sh-font-mono); font-size: 10px; color: var(--sh-muted); }

/* desktop walk */
.process-section.is-walk .process-walk { position: relative; }
.process-section.is-walk .process-stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; border-radius: 0; }
.process-section.is-walk .process-cam { position: absolute; left: 0; top: 0; aspect-ratio: auto; will-change: transform; }
.process-section.is-walk .process-steps { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.process-section.is-walk:not(.is-tall) .process-leader { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.process-leader line { stroke: var(--sh-ink); stroke-width: 1; }
.process-leader circle { fill: var(--sh-canvas); stroke: var(--sh-ink); stroke-width: 1.5; }
.process-section.is-walk .process-plaques { display: block; position: absolute; left: clamp(32px, 6vw, 110px); top: clamp(96px, 15vh, 170px); width: min(430px, 33vw); }
.process-plaque { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); }
.process-plaque.is-on { opacity: 1; transform: none; pointer-events: auto; }
.process-plaque .process-card { box-shadow: var(--sh-shadow-panel); }
.process-section.is-walk .process-hint { display: block; position: absolute; left: 50%; bottom: clamp(96px, 16vh, 150px); transform: translateX(-50%); font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-secondary); }
.process-section.is-walk .process-ticks { display: grid; position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(860px, 80vw); grid-template-columns: repeat(6, 1fr); font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.process-ticks::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--sh-hairline); }
.process-ticks-fill { position: absolute; left: 0; top: 4px; height: 1px; width: 0; background: var(--sh-ink); }
.process-tick { position: relative; padding-top: 18px; color: var(--sh-muted); transition: color .3s; }
.process-tick::before { content: ''; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--sh-canvas); border: 1.5px solid var(--sh-hairline); transition: background .3s, border-color .3s; }
.process-tick.is-done { color: var(--sh-ink); }
.process-tick.is-done::before { background: var(--sh-ink); border-color: var(--sh-ink); }
.process-tick.is-decision.is-done { color: var(--sh-cobalt); }
.process-tick.is-decision.is-done::before { background: var(--sh-cobalt); border-color: var(--sh-cobalt); }
.process-section.is-walk .process-credit { top: 28px; right: clamp(24px, 4vw, 56px); }
.people-section { padding-block: 96px; }
.people-heading { align-items: end; margin-bottom: 48px; }
.people-card { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-panel); box-shadow: var(--sh-shadow-panel); padding: 16px; gap: 16px; }
.people-portrait { position: relative; isolation: isolate; min-width: 0; min-height: 560px; overflow: hidden; border-radius: var(--sh-radius-card); background: var(--sh-dark); box-shadow: var(--sh-shadow-card); color: var(--sh-dark-text); }
.people-portrait img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.people-portrait::after { content: ''; position: absolute; z-index: 1; inset: 50% 0 0; background: linear-gradient(0deg, var(--sh-image-shade), transparent); pointer-events: none; }
.people-portrait figcaption { position: absolute; z-index: 2; inset: auto 28px 28px; display: flex; align-items: center; gap: 16px; font-size: 20px; font-weight: 600; letter-spacing: -.035em; line-height: 1.5; }
.people-portrait figcaption > span:last-child > span { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0; color: var(--sh-hairline); }
.people-studio-mark { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid var(--sh-edge-light); border-radius: 17px; background: var(--sh-cobalt); box-shadow: var(--sh-shadow-button); }
.people-studio-mark .brand-mark { width: 30px; height: 28px; }
.people-profile { min-width: 0; padding: 36px 36px 28px; align-self: center; }
.people-profile > .eyebrow { color: var(--sh-secondary); margin-bottom: 22px; }
.people-profile h3 { font-size: clamp(38px, 4vw, 56px); }
.people-profile h3 > span { color: var(--sh-cobalt); }
.people-bio { margin-top: 26px; color: var(--sh-secondary); font-size: 18px; line-height: 1.65; }
.people-example { margin-top: 32px; padding: 26px 28px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline); border-radius: 24px; }
.people-example .eyebrow { color: var(--sh-secondary); margin-bottom: 12px; font-size: 10px; }
.people-example h4 { margin: 0 0 10px; font-weight: 600; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.people-example > p:not(.eyebrow) { font-size: 14px; color: var(--sh-secondary); }
.people-example .text-link { margin-top: 12px; font-size: 13px; }
.people-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; }
.people-actions .text-link { font-size: 13px; }
.people-draft { color: var(--sh-secondary); font-size: 11px; line-height: 1.6; margin-top: 24px; max-width: 390px; }
.people-scope { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; padding: 30px 44px 0; }
.people-scope .eyebrow { margin: 3px 0 0; color: var(--sh-secondary); }
.people-scope > p { font-size: 14px; color: var(--sh-secondary); max-width: 490px; }
.summary-section { border-top: 1px solid var(--sh-hairline); border-bottom: none; }
.summary-heading { align-items: end; margin-bottom: 48px; }
.summary-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: start; }
.summary-sources { padding: 36px; background: var(--sh-dark); color: var(--sh-dark-text); border-radius: var(--sh-radius-panel); box-shadow: var(--sh-shadow-panel); min-width: 0; }
.summary-sources > .eyebrow { color: var(--sh-cobalt-light); }
.summary-sources h3 { font-size: 36px; }
.summary-sources a:focus-visible { outline-color: var(--sh-dark-text); }
.summary-choices { list-style: none; padding: 0; margin: 28px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.summary-choices li { border: 1px solid var(--sh-edge-light); background: var(--sh-light-wash); padding: 8px 14px; border-radius: var(--sh-radius-pill); font-size: 12px; }
.summary-sources > .text-link { font-size: 13px; }
.summary-materials { margin: 28px 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--sh-edge-light); min-width: 0; }
.summary-materials legend { padding: 0 12px 0 0; font-size: 16px; font-weight: 500; }
.summary-materials > p { color: var(--sh-hairline); font-size: 12px; margin-bottom: 16px; }
.summary-material { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-top: 10px; border: 1px solid var(--sh-edge-light); border-radius: 18px; background: var(--sh-dark-surface); cursor: pointer; font-size: 15px; min-height: 50px; }
.summary-material:has(input:checked) { background: var(--sh-cobalt); }
.summary-material input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--sh-cobalt); margin: 0; }
.summary-material input:focus-visible { outline: 3px solid var(--sh-dark-text); outline-offset: 4px; }
.summary-question-label { display: block; font-size: 15px; margin-bottom: 12px; }
.summary-question-label span { font-size: 12px; color: var(--sh-hairline); }
#summary-questions, #summary-text { display: block; width: 100%; min-width: 0; resize: vertical; font-family: inherit; line-height: 1.65; font-size: 15px; border: 1px solid var(--sh-hairline); border-radius: 20px; padding: 20px; background: var(--sh-surface); color: var(--sh-ink); }
#summary-questions { min-height: 130px; }
#summary-questions::placeholder { color: var(--sh-secondary); opacity: 1; }
.summary-help { margin-top: 10px; font-size: 12px; color: var(--sh-secondary); }
.summary-sources .summary-help { color: var(--sh-hairline); }
.summary-sheet { min-width: 0; padding: 36px; background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-panel); box-shadow: var(--sh-shadow-panel); }
.summary-sheet-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 24px; }
.summary-sheet-top .eyebrow { margin: 0; color: var(--sh-secondary); }
#summary-mode { padding: 6px 12px; border-radius: var(--sh-radius-pill); color: var(--sh-cobalt); background: var(--sh-cobalt-haze); font-size: 11px; }
.summary-sheet > label { display: block; font-size: 28px; letter-spacing: -.04em; font-weight: 500; line-height: 1.2; }
#summary-text { margin-top: 24px; min-height: 430px; background: var(--sh-canvas); font-size: 14px; }
.summary-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 24px; }
.summary-tools .button { border: 0; }
.summary-tools button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.summary-review { padding: 20px; border: 1px solid var(--sh-cobalt); border-radius: 20px; background: var(--sh-cobalt-haze); margin-top: 22px; font-size: 14px; }
.summary-review h3 { font-size: 23px; margin-bottom: 12px; }
.summary-review details { margin-top: 16px; }
.summary-review summary { cursor: pointer; padding-block: 10px; border-radius: 6px; }
.summary-review summary:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 4px; }
.summary-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.65 var(--sh-font-sans); margin: 12px 0; padding: 16px; border-radius: 12px; background: var(--sh-surface); }
.summary-review h4 { margin: 20px 0 8px; }
#summary-status { font-size: 13px; margin-top: 16px; min-height: 22px; }
.summary-footer { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 32px; }
.summary-footer p { font-size: 12px; color: var(--sh-secondary); max-width: 680px; }
.summary-footer .button { flex-shrink: 0; }
.summary-fallback { max-width: 720px; }
.summary-fallback .button { margin-top: 24px; }
.contact-panel { padding: 40px 64px 64px; background: var(--sh-cobalt); color: var(--sh-surface); border-radius: var(--sh-radius-panel); box-shadow: var(--sh-shadow-panel), inset 0 1px 1px var(--sh-edge-light); }
.contact-panel h2 { font-size: clamp(40px, 5vw, 72px); }
.contact-intro { margin-top: 18px; font-size: 18px; }
.contact-options { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-option { border: 1px solid var(--sh-edge-light); padding: 32px; border-radius: var(--sh-radius-card); background: transparent; box-shadow: var(--sh-shadow-card), inset 0 1px 0 var(--sh-edge-light); }
.contact-primary { background: var(--sh-surface); color: var(--sh-ink); border-color: var(--sh-surface); }
.option-label { display: block; margin-bottom: 24px; font-size: 12px; font-family: var(--sh-font-mono); }
.contact-option h3 { margin-bottom: 18px; }
.contact-option p { font-size: 16px; }
.contact-option .availability-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid currentColor; font-size: 13px; }
.contact-demo-note { font-size: 12px; max-width: 720px; margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--sh-edge-light); }
.contact-panel .contact-options { grid-template-columns: 1.2fr .8fr; align-items: stretch; }
.calendar-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; font-size: 13px; }
.contact-panel select { font: inherit; font-size: 13px; padding: 12px; border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-pill); background: var(--sh-surface); color: var(--sh-ink); min-height: 44px; max-width: 100%; }
.calendar-month-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 26px 0 16px; }
.calendar-month-nav h4 { font-size: 17px; font-weight: 600; text-align: center; text-transform: capitalize; }
.calendar-month-nav button { display: grid; place-items: center; padding: 0; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--sh-hairline); border-radius: 50%; background: var(--sh-canvas); color: var(--sh-ink); }
.calendar-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px 6px; }
.calendar-grid th { font-size: 11px; font-weight: 500; color: var(--sh-secondary); padding-bottom: 8px; }
.calendar-grid td { padding: 0; text-align: center; }
.calendar-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 48px; padding: 6px 0; border: 1px solid transparent; border-radius: 16px; background: var(--sh-canvas); color: var(--sh-ink); font-size: 14px; }
.calendar-grid button[data-availability="available"] { border-color: var(--sh-hairline); }
.calendar-grid button[data-availability="empty"] { background: transparent; }
.day-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.day-dot.available { color: var(--sh-cobalt); }
.day-dot.busy { color: var(--sh-secondary); }
.day-dot.empty { width: auto; background: none; line-height: 4px; font-size: 9px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; font-size: 10px; color: var(--sh-secondary); }
.calendar-legend > span { display: flex; align-items: center; gap: 6px; }
.calendar-hours { border-top: 1px solid var(--sh-hairline); margin-top: 24px; padding-top: 22px; }
.calendar-hours h4 { font-size: 13px; font-weight: 600; }
.calendar-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin-top: 14px; }
.calendar-slots button { display: flex; flex-direction: column; gap: 3px; align-items: center; min-height: 60px; padding: 10px 12px; border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-pill); background: var(--sh-canvas); color: var(--sh-ink); font-size: 14px; }
.calendar-slots small { font-size: 10px; }
.calendar-slots button[data-availability="busy"][data-owned="false"] > span { text-decoration: line-through; }
.calendar-grid button[aria-pressed="true"], .calendar-slots button[aria-pressed="true"] { background: var(--sh-cobalt); color: var(--sh-surface); border-color: var(--sh-cobalt); box-shadow: var(--sh-shadow-button); }
.calendar-grid button[aria-pressed="true"] .day-dot { color: var(--sh-surface); }
#calendar-status { margin-top: 22px; font-size: 13px; }
.contact-option .contact-small, .contact-small { font-size: 12px; line-height: 1.65; margin-top: 14px; }
.contact-primary .contact-small { color: var(--sh-secondary); }
.contact-methods { display: grid; gap: 14px; margin-top: 30px; }
.contact-methods button { display: flex; gap: 18px; align-items: center; width: 100%; text-align: left; background: var(--sh-light-wash); color: var(--sh-surface); border: 1px solid var(--sh-edge-light); padding: 20px; border-radius: 24px; box-shadow: var(--sh-shadow-card); }
.contact-methods button > span:first-child { font-size: 25px; }
.contact-methods button > span:last-child { font-size: 17px; font-weight: 600; line-height: 1.3; }
.contact-methods small { display: block; font-size: 12px; font-weight: 400; margin-top: 7px; }
.contact-methods button[aria-pressed="true"] { background: var(--sh-surface); color: var(--sh-ink); }
.contact-panel button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.contact-panel .calendar-slots button[data-owned="true"] { opacity: 1; }
.contact-panel .contact-primary button:focus-visible, .contact-compose button:focus-visible, .contact-compose input:focus-visible, .contact-compose textarea:focus-visible, .contact-compose select:focus-visible, .contact-compose a:focus-visible, .contact-compose summary:focus-visible, #contact-errors:focus-visible, #contact-result:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 4px; }
.contact-alternative button:focus-visible, .contact-lab summary:focus-visible, .contact-lab input:focus-visible { outline: 3px solid var(--sh-surface); outline-offset: 4px; }
.contact-compose { margin-top: 32px; background: var(--sh-surface); color: var(--sh-ink); padding: 40px; border-radius: var(--sh-radius-panel); box-shadow: var(--sh-shadow-panel); }
.contact-compose-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.contact-compose-heading .eyebrow { color: var(--sh-secondary); margin-bottom: 14px; }
.contact-compose-heading h3 { font-size: 34px; }
#contact-selection { font-size: 14px; max-width: 320px; }
#contact-fields { min-width: 0; padding: 0; margin: 0; border: 0; }
.contact-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-meeting { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--sh-hairline); }
.contact-meeting select { min-width: min(100%, 260px); }
.contact-meeting .contact-small { max-width: 620px; color: var(--sh-secondary); }
.contact-field-grid > div { min-width: 0; }
#contact-fields label { display: block; font-size: 14px; margin-bottom: 10px; }
#contact-fields label span, .contact-more summary span { color: var(--sh-secondary); font-size: 12px; }
#contact-fields input:not([type="checkbox"]), #contact-fields textarea { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--sh-hairline); border-radius: 18px; color: var(--sh-ink); background: var(--sh-canvas); }
#contact-fields textarea { resize: vertical; min-height: 110px; }
.contact-phone-row { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-phone-row select { flex-shrink: 0; }
.contact-phone-row input { flex: 1 1 160px; }
.contact-more { margin-top: 24px; border-top: 1px solid var(--sh-hairline); padding-block: 12px; }
.contact-more summary, .contact-payload summary { cursor: pointer; padding-block: 12px; font-size: 14px; }
.contact-more > label { margin-top: 20px; }
#contact-fields .contact-attach, .contact-attach { display: flex; align-items: center; gap: 12px; font-size: 14px; min-height: 44px; cursor: pointer; }
.contact-attach input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--sh-cobalt); }
.contact-marketing { margin-top: 12px; }
.contact-marketing .contact-attach { align-items: flex-start; line-height: 1.45; min-height: 0; padding: 10px 0 2px; }
.contact-marketing .contact-attach input { margin-top: 1px; }
.contact-marketing .contact-optional { color: var(--sh-muted, inherit); white-space: nowrap; }
.contact-marketing .contact-small { margin: 4px 0 0 39px; }
.contact-privacy-note { margin: 12px 0; }
#contact-context-status { font-size: 13px; }
.contact-payload { padding: 10px 24px; margin-block: 20px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline); border-radius: 22px; }
.contact-payload dl { margin-block: 10px 16px; }
.contact-payload dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding-block: 8px; font-size: 14px; }
.contact-payload dt { color: var(--sh-secondary); }
.contact-payload dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#contact-preview-context { padding: 18px; border-radius: 16px; background: var(--sh-surface); font: 13px/1.65 var(--sh-font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
#contact-submit { border: 0; margin-top: 24px; }
#contact-errors { padding: 18px; border: 1px solid var(--sh-cobalt); border-radius: 18px; margin-bottom: 24px; font-size: 14px; }
.contact-field-error { font-size: 13px; margin-top: 8px; }
.appt-banner { border: 1px solid var(--sh-hairline); border-radius: 24px; background: var(--sh-surface); color: var(--sh-ink); padding: 22px 24px; margin: 32px 0 22px; }
.appt-banner .eyebrow { color: var(--sh-secondary); }
.appt-banner p { color: var(--sh-secondary); }
.appt-banner .quiet-button { color: var(--sh-ink); }
.appt-banner h3 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.4px; }
.appt-banner .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.appt-banner .button, .appt-dialog .button { border: 0; }
.appt-dialog { border: 1px solid var(--sh-hairline); border-radius: 24px; padding: 28px; width: min(520px, calc(100vw - 28px)); color: var(--sh-ink); background: var(--sh-surface); }
.appt-dialog::backdrop { background: var(--sh-scrim); }
.appt-dialog .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.contact-result { border: 1px solid var(--sh-hairline); border-radius: 24px; background: var(--sh-canvas); padding: 28px; margin-top: 28px; }
.contact-result h3 { font-size: 28px; }
.contact-result p { margin-top: 14px; font-size: 14px; overflow-wrap: anywhere; }
.contact-result .actions { margin-top: 24px; }
.contact-result .button { border: 0; }
.contact-lab { border-top: 1px solid var(--sh-edge-light); margin-top: 36px; font-size: 12px; }
.contact-lab summary { padding-block: 20px; cursor: pointer; }
.contact-lab > div { max-width: 620px; }
.contact-lab label { display: block; margin-block: 12px; }
.contact-lab .contact-attach { display: flex; }
.contact-lab p { margin-block: 14px; }
.contact-fallback { margin-top: 36px; max-width: 650px; }
.contact-fallback p { margin-top: 20px; }
.footer { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 44px; font-size: 12px; color: var(--sh-secondary); }
.footer .brand { color: var(--sh-ink); }
@media (max-width: 1050px) {
  .contact-panel .contact-options { grid-template-columns: 1fr 1fr; }
  .contact-compose { padding: 30px; }
  .contact-compose-heading { align-items: start; flex-direction: column; }
  .summary-layout { grid-template-columns: .85fr 1.15fr; gap: 24px; }
  .summary-sources, .summary-sheet { padding: 28px; }
  .people-card { grid-template-columns: .85fr 1.15fr; padding: 12px; gap: 0; }
  .people-profile { padding: 28px; }
  .people-profile h3 { font-size: 40px; }
  .people-bio { font-size: 16px; }
  .people-example { padding: 22px; }
  .people-portrait figcaption { inset-inline: 20px; gap: 12px; }
  .people-portrait figcaption > span:last-child > span { max-width: 145px; }
  .people-scope { padding-inline: 28px; }
  .journey-layout { gap: 24px; grid-template-columns: 1fr 1fr; }
  .goal-option { padding: 18px 14px; gap: 12px; }
  .goal-copy strong { font-size: 15px; }
  .goal-icon { width: 34px; height: 38px; flex-basis: 34px; font-size: 24px; }
  .journey-response { padding: 26px; }
  .work-card-nutragen { column-gap: 32px; padding: 28px; }
  .work-visual-nutragen .work-stage { height: 470px; }
  .work-visual-nutragen .work-shot { width: 48%; }
  .work-visual-nutragen .work-shot-1 { left: 3%; }
  .work-visual-nutragen .work-shot-2 { right: 3%; }
  .work-card:not(.work-card-nutragen) { padding: 24px; }
  .work-visual-sklepowefoto .work-stage { height: 380px; }
  .work-visual-sklepowefoto .work-shot { width: 95%; }
  .hero-copy { width: 60%; }
  .hero-inner { padding-block: 150px 120px; }
  .split { gap: 40px; }
  .project-panel, .contact-panel { padding: 40px; }
  .contact-option { padding: 24px; }
}
@media (max-width: 900px) {
  .summary-layout { grid-template-columns: 1fr; }
  .people-card { grid-template-columns: 1fr; }
  .people-portrait { min-height: 0; aspect-ratio: 4 / 3; }
  .people-portrait img { object-position: center 40%; }
  .people-profile { padding: 36px 28px 28px; }
}
@media (max-width: 700px) {
  .contact-panel .contact-options { grid-template-columns: 1fr; }
  .contact-compose { padding: 26px 20px; border-radius: var(--sh-radius-mobile); margin-inline: -8px; }
  .contact-compose-heading h3 { font-size: 28px; }
  .contact-field-grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-panel select { font-size: 12px; padding: 10px; }
  .calendar-grid { border-spacing: 2px 5px; }
  .calendar-grid button { min-height: 40px; border-radius: 12px; font-size: 12px; }
  .calendar-month-nav h4 { font-size: 14px; }
  .calendar-month-nav button { width: 32px; height: 32px; }
  .calendar-slots { gap: 8px; }
  .contact-methods button { padding: 18px 16px; }
  .contact-payload { padding-inline: 16px; }
  .contact-payload dl > div { grid-template-columns: 1fr; gap: 4px; }
  .contact-result { padding: 22px 16px; }
  .contact-result h3 { font-size: 25px; }
  #contact-submit { width: 100%; }
  .summary-heading { margin-bottom: 30px; }
  .summary-sources, .summary-sheet { padding: 28px 20px; border-radius: var(--sh-radius-mobile); }
  .summary-sources h3 { font-size: 32px; }
  .summary-sheet > label { font-size: 26px; }
  #summary-text, #summary-questions { padding: 16px; font-size: 16px; }
  .summary-tools { flex-direction: column; align-items: start; }
  .summary-review { padding: 16px; }
  .summary-footer { flex-direction: column; align-items: start; gap: 24px; }
  .people-heading { margin-bottom: 32px; }
  .people-heading br { display: none; }
  .people-card { grid-template-columns: 1fr; border-radius: var(--sh-radius-mobile); padding: 12px; }
  .people-portrait { min-height: 0; aspect-ratio: 4 / 5; border-radius: 22px; }
  .people-portrait figcaption { inset: auto 20px 22px; }
  .people-profile { padding: 32px 12px 20px; }
  .people-profile > .eyebrow { font-size: 9px; }
  .people-profile h3 { font-size: clamp(34px, 9vw, 44px); }
  .people-bio { margin-top: 22px; }
  .people-example { margin-top: 26px; padding: 22px 20px; border-radius: 22px; }
  .people-actions { gap: 12px 20px; margin-top: 26px; }
  .people-scope { grid-template-columns: 1fr; gap: 12px; padding: 24px 12px 0; }
  .journey-layout { grid-template-columns: 1fr; margin-top: 32px; gap: 28px; }
  .goal-option { min-height: 92px; padding: 17px 16px; border-radius: 24px; }
  .goal-copy strong { font-size: 16px; }
  .goal-copy > span { font-size: 11px; }
  .goal-option[aria-pressed="true"] .goal-mobile-question { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; }
  .journey-response { padding: 24px 20px; border-radius: 28px; }
  .journey-response h3 { font-size: 32px; }
  .journey-answer { font-size: 15px; }
  .journey-response-top { margin-bottom: 24px; }
  .journey-orbit { width: 44px; height: 44px; flex-basis: 44px; }
  .journey-response .eyebrow { font-size: 9px; }
  .journey-question { padding: 18px 16px; }
  .journey-question p { font-size: 18px; }
  .journey-fields { grid-template-columns: 1fr; gap: 24px; }
  .journey-fields select, .journey-fields textarea { font-size: 16px; }
  .journey-refine summary strong { font-size: 18px; }
  .journey-refine summary > span > span { font-size: 12px; }
  .journey-memory { flex-direction: column; gap: 12px; }
  #journey-confirm { padding: 28px 22px; border-radius: 28px; }
  .work-heading { margin-bottom: 32px; }
  .work-grid { grid-template-columns: 1fr; gap: 28px; }
  .work-card, .work-card:not(.work-card-nutragen) { padding: 24px 20px; border-radius: var(--sh-radius-mobile); }
  .work-card-nutragen { display: flex; flex-direction: column; }
  .work-card-nutragen .work-card-heading { align-self: stretch; }
  .work-card-nutragen .work-visual { align-self: stretch; }
  .work-card-nutragen .work-story { padding-block: 30px 0; }
  .work-card-nutragen h3 { font-size: 34px; }
  .work-card-nutragen .work-detail { align-self: stretch; }
  .work-name { font-size: 23px; }
  .work-card-heading { margin-bottom: 22px; }
  .work-stage, .work-visual-nutragen .work-stage, .work-visual-sklepowefoto .work-stage { height: 365px; border-radius: 20px; }
  .work-visual-nutragen .work-shot { width: 49%; max-width: 152px; border-width: 4px; border-radius: 18px; }
  .work-visual-nutragen .work-shot-1 { top: 24px; }
  .work-visual-nutragen .work-shot-2 { top: 58px; }
  .work-visual-sklepowefoto .work-shot { width: 92%; }
  .work-visual-lekko .work-shot { width: 195px; }
  .work-story h3 { font-size: 30px; }
  .work-intro { font-size: 15px; margin-top: 16px; }
  .work-detail summary { font-size: 14px; }
  .work-next { align-items: flex-start; flex-direction: column; gap: 20px; }
  .work-next p { font-size: 16px; }
  .wrap { width: calc(100% - (2 * var(--sh-page-gutter))); }
  .preview-bar { justify-content: flex-start; padding: 10px 20px; font-size: 11px; }
  .preview-bar > span:last-child { flex-basis: 100%; }
  .header { gap: 16px; padding-block: 20px; }
  .brand { font-size: 25px; }
  nav { gap: 12px; font-size: 12px; }
  .header nav > a:not(.button) { display: none; }
  .button-small { padding-inline: 15px; font-size: 12px; }
  .hero { min-height: 100svh; border-radius: 0 0 var(--sh-radius-mobile) var(--sh-radius-mobile); }
  .hero::after { background: none; }
  .hero-inner { min-height: 0; padding-block: 125px 0; }
  .hero-copy { width: 100%; }
  h1 { font-size: clamp(40px, 12vw, 66px); }
  h2 { font-size: 38px; }
  h3 { font-size: 29px; }
  .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .hero-bottom { margin-top: 22px; }
  .lead { font-size: 16px; max-width: 400px; margin-bottom: 22px; }
  .hero-direct { margin-top: 12px; font-size: 12px; }
  .actions { gap: 12px; }
  .button { font-size: 14px; gap: 16px; padding-inline: 22px; }
  nav .button { font-size: 12px; padding-inline: 15px; gap: 10px; }
  .compile-art { position: relative; height: clamp(310px, 82vw, 510px); margin-top: 5px; }
  .compile-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--sh-dark), transparent 25%, transparent 70%, var(--sh-dark)); pointer-events: none; }
  .compile-art img { object-position: 70% center; }
  .compile-art figcaption { left: 20px; right: 20px; bottom: 24px; justify-content: space-between; gap: 12px; font-size: 9px; }
  .hero-scroll { display: none; }
  .section, .people-section { padding-block: 56px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .large-copy { font-size: 22px; }
  .project-panel, .contact-panel { padding: 32px 24px; border-radius: var(--sh-radius-mobile); }
  .project-panel { margin-top: 24px; }
  .contact-panel h2 { font-size: clamp(30px, 8vw, 48px); }
  .contact-intro { font-size: 16px; }
  .contact-options { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .contact-option { padding: 24px 20px; border-radius: 24px; }
  .contact-option h3 { font-size: 27px; }
  .footer { flex-wrap: wrap; gap: 14px; padding-block: 32px; }
  .footer .brand { flex-basis: 100%; }
}
@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (orientation: portrait) and (max-width: 1100px) {
  /* no JS / reduced motion: a crop of the vertical render */
  .process-section:not(.is-walk) .process-stage { height: min(140vw, 78svh); }
  .process-section:not(.is-walk) .process-cam { aspect-ratio: auto; height: 100%; }
  .process-pic img { object-fit: cover; object-position: 30% 70%; }
  /* tall walk: camera runs down the vertical render, plaque rises from the bottom, progress as a dot column */
  .process-section.is-tall .process-plaques { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
  .process-section.is-tall .process-plaque { top: auto; bottom: 0; }
  .process-section.is-tall .process-plaque .process-card { padding: 20px 22px; }
  .process-section.is-tall .process-plaque .process-card h3 { font-size: 24px; margin: 10px 0 8px; }
  .process-section.is-tall .process-plaque .process-deliver { margin: 12px 0 14px; }
  .process-section.is-tall .process-plaque .process-deliver li { padding: 6px 0; font-size: 14px; }
  .process-section.is-tall .process-ticks { display: flex; flex-direction: column; gap: 14px; left: auto; right: 14px; top: 96px; bottom: auto; width: auto; transform: none; font-size: 0; }
  .process-section.is-tall .process-ticks::before, .process-section.is-tall .process-ticks-fill { display: none; }
  .process-section.is-tall .process-tick { width: 9px; height: 9px; padding: 0; }
  .process-section.is-tall .process-hint { bottom: 40px; }
}
@media (max-width: 700px) {
  .process-stage, .process-steps { width: calc(100% - (2 * var(--sh-page-gutter))); }
  .process-stage { border-radius: var(--sh-radius-card); }
  .process-steps { grid-template-columns: 1fr; }
  .process-credit { top: 14px; right: 18px; font-size: 9px; }
  .process-card h3 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-plaque, .process-tick, .process-tick::before, .consent-switch span { transition: none; }
  .goal-option { transition: none; }
  .work-expand { transition: none; }
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:hover { transform: none; }
}

/* Agreement details belong to the process, outside its pinned camera walk. */
.process-agreements { margin-top: 48px; scroll-margin-top: 32px; }
.process-agreements-label { margin-bottom: 16px; color: var(--sh-secondary); font: 11px var(--sh-font-mono); text-transform: uppercase; letter-spacing: .06em; }
.process-agreements-list { border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-card); background: var(--sh-surface); box-shadow: var(--sh-shadow-card); }
.process-agreement { padding: 0 28px; }
.process-agreement + .process-agreement { border-top: 1px solid var(--sh-hairline); }
.process-agreement summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
.process-agreement summary::-webkit-details-marker { display: none; }
.process-agreement summary:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 4px; border-radius: 12px; }
.process-agreement-stage { display: block; margin-bottom: 6px; font: 10px var(--sh-font-mono); color: var(--sh-secondary); }
.process-agreement-title { font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.process-agreement[open] .work-expand { transform: rotate(45deg); }
.process-agreement-body { max-width: 780px; padding: 0 0 26px; color: var(--sh-secondary); font-size: 15px; line-height: 1.65; }
.process-agreement-body p + p { margin-top: 14px; }
@media (max-width: 700px) {
  .process-agreements { margin-top: 28px; }
  .process-agreement { padding-inline: 18px; }
  .process-agreement-title { font-size: 19px; }
  .process-agreement .work-expand { flex-basis: 32px; height: 32px; }
  .process-agreement-body { font-size: 14px; }
}

/* SHW-02V: contact uses the phone width instead of nesting roomy desktop cards. */
@media (max-width: 700px) {
  .contact-panel { padding: 26px 14px; }
  .contact-intro { margin-top: 16px; font-size: 15px; line-height: 1.5; }
  .contact-demo-note { margin-top: 14px; padding-left: 10px; line-height: 1.5; }
  .contact-panel .contact-options { margin-top: 22px; gap: 14px; }
  .contact-option { padding: 18px 14px; border-radius: 22px; box-shadow: none; }
  .contact-option .option-label { margin-bottom: 10px; font-size: 10px; }
  .contact-option h3 { margin-bottom: 10px; font-size: 24px; }
  .contact-option > p { font-size: 14px; line-height: 1.5; }
  .calendar-toolbar { margin-top: 14px; font-size: 11px; color: var(--sh-secondary); }
  .calendar-month-nav { margin: 14px 0 10px; padding-top: 12px; border-top: 1px solid var(--sh-hairline); }
  .calendar-month-nav h4 { margin: 0; font-size: 15px; }
  .calendar-month-nav button { width: 40px; height: 40px; }
  .calendar-grid { border-spacing: 2px 4px; }
  .calendar-grid th { padding-bottom: 4px; font-size: 11px; }
  .calendar-grid button { min-height: 40px; gap: 3px; padding: 4px 0; font-size: 13px; border-radius: 11px; }
  .calendar-grid button[data-availability="available"] { background: var(--sh-cobalt-haze); color: var(--sh-cobalt); border-color: transparent; font-weight: 600; }
  .calendar-grid button[data-availability="empty"] { opacity: 1; color: var(--sh-secondary); }
  .calendar-grid button[data-availability="empty"] .day-dot { display: none; }
  .calendar-grid button[aria-pressed="true"] { background: var(--sh-cobalt); color: var(--sh-surface); box-shadow: none; }
  .calendar-legend { gap: 6px 12px; margin-top: 10px; font-size: 10px; }
  .calendar-hours { margin-top: 14px; padding-top: 12px; }
  .calendar-hours h4 { margin: 0; font-size: 12px; line-height: 1.5; }
  .calendar-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .calendar-slots button { min-height: 48px; padding: 6px 4px; border-radius: 13px; gap: 0; font-size: 13px; }
  .calendar-slots button[aria-pressed="true"] { box-shadow: none; }
  #calendar-status { margin-top: 12px; font-size: 12px; line-height: 1.5; }
  .contact-option .contact-small { margin-top: 8px; font-size: 11px; line-height: 1.5; }
  .contact-methods { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .contact-methods button { gap: 7px; align-items: start; padding: 12px 9px; border-radius: 16px; box-shadow: none; }
  .contact-methods button > span:first-child { font-size: 17px; }
  .contact-methods button > span:last-child { font-size: 13px; }
  .contact-methods small { font-size: 10px; margin-top: 5px; line-height: 1.4; }
  .contact-compose { margin: 16px 0 0; padding: 20px 14px; border-radius: 22px; }
  .contact-compose-heading { gap: 8px; margin-bottom: 16px; }
  .contact-compose-heading .eyebrow { margin-bottom: 8px; font-size: 9px; }
  .contact-compose-heading h3 { font-size: 24px; }
  #contact-selection { font-size: 12px; line-height: 1.5; }
  .contact-meeting { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: center; margin-bottom: 14px; padding-bottom: 14px; }
  #contact-fields .contact-meeting label { margin: 0; font-size: 12px; }
  .contact-panel .contact-meeting select { min-width: 0; width: 100%; padding: 8px; border-radius: 12px; font-size: 16px; }
  .contact-meeting .contact-small { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; }
  .contact-field-grid { gap: 12px; }
  #contact-fields label { font-size: 13px; margin-bottom: 5px; }
  #contact-fields input:not([type="checkbox"]), #contact-fields textarea { padding: 10px 12px; border-radius: 12px; font-size: 16px; }
  .contact-phone-row { flex-wrap: nowrap; gap: 6px; }
  .contact-phone-row input { flex: 1 1 0; }
  .contact-panel .contact-phone-row select { padding: 8px; font-size: 16px; border-radius: 12px; max-width: 115px; }
  .contact-field-error:empty { display: none; }
  .contact-more { margin-top: 14px; padding-block: 4px; }
  .contact-more summary, .contact-payload summary { font-size: 12px; padding-block: 10px; line-height: 1.5; }
  .contact-more > label { margin-top: 12px; }
  .contact-payload { margin-block: 12px; padding: 4px 12px; border-radius: 14px; }
  .contact-payload dl { margin: 0 0 8px; }
  .contact-payload dl > div { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; padding-block: 6px; font-size: 12px; line-height: 1.45; border-top: 1px solid var(--sh-hairline); }
  .contact-compose .contact-small { margin-top: 10px; font-size: 11px; line-height: 1.5; }
  #contact-submit { margin-top: 14px; padding: 13px 12px; min-height: 48px; font-size: 12px; line-height: 1.4; box-shadow: none; }
  .contact-result { margin-top: 16px; padding: 16px 12px; border-radius: 16px; }
  .contact-result h3 { font-size: 22px; }
  .contact-result p { margin-top: 10px; font-size: 13px; }
  .contact-lab { margin-top: 20px; }
}

/* SHW-02W: a complete closing section, with only verified links and information. */
.site-footer { margin-top: 72px; padding-block: 64px 24px; background: var(--sh-dark); color: var(--sh-dark-text); border-radius: var(--sh-radius-panel) var(--sh-radius-panel) 0 0; }
.footer-opening { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--sh-edge-light); }
.footer-opening .eyebrow { color: var(--sh-cobalt-light); margin-bottom: 14px; }
.footer-opening h2 { font-size: clamp(28px, 3.5vw, 48px); line-height: 1.13; letter-spacing: -.045em; }
.footer-opening .button { flex-shrink: 0; }
.footer-content { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; padding-block: 42px; }
.footer-about p { margin-top: 18px; color: var(--sh-hairline); font-size: 14px; line-height: 1.7; }
.footer-links { display: flex; flex-direction: column; align-items: start; }
.footer-links h3 { font-size: 12px; letter-spacing: .04em; font-weight: 500; color: var(--sh-muted); margin: 0 0 14px; }
.footer-links a { padding-block: 8px; text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--sh-cobalt-light); text-decoration: underline; }
.footer-bottom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px 32px; border-top: 1px solid var(--sh-edge-light); padding-top: 22px; font-size: 12px; color: var(--sh-hairline); }
.footer-bottom > a { padding-block: 8px; text-decoration: none; }
.footer-bottom .footer-top { margin-left: auto; }
.footer-consent { border: 0; padding: 8px 0; background: transparent; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: .25em; }
.site-footer a:focus-visible, .site-footer summary:focus-visible, .site-footer button:focus-visible { outline: 2px solid var(--sh-cobalt-light); outline-offset: 4px; }
@media (max-width: 700px) {
  .header { padding-block: 18px; gap: 10px; }
  .header .brand { font-size: 23px; gap: 8px; }
  .header .brand-mark { width: 29px; height: 28px; }
  .header nav .button { min-height: 42px; padding: 10px 13px; font-size: 11px; gap: 8px; box-shadow: none; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 30px; }
  .hero-inner, .hero-copy { display: contents; }
  .hero .eyebrow { grid-row: 1; margin: 106px 20px 16px; font-size: 9px; line-height: 1.5; letter-spacing: .08em; max-width: 300px; color: var(--sh-cobalt-light); }
  .hero h1 { grid-row: 2; position: relative; z-index: 2; margin: 0 20px; font-size: clamp(48px, 15vw, 72px); line-height: .99; letter-spacing: -.065em; }
  .compile-art { grid-row: 3; position: relative; inset: auto; margin: 0; height: clamp(170px, 52vw, 290px); }
  .compile-art img { object-fit: cover; object-position: 65% center; }
  .compile-art::after { background: linear-gradient(180deg, var(--sh-dark), transparent 18%, transparent 85%, var(--sh-dark)); }
  .compile-art figcaption { display: none; }
  .hero-bottom { grid-row: 4; position: relative; z-index: 2; margin: 0 20px; }
  .hero .lead { margin-bottom: 18px; max-width: 460px; font-size: 15px; line-height: 1.55; }
  .hero .actions { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
  .hero .actions .button { padding: 13px 14px; min-height: 48px; font-size: 12px; gap: 8px; box-shadow: none; }
  .hero .actions .text-link { font-size: 12px; gap: 6px; white-space: nowrap; }
  .hero-direct { display: none; }
  .site-footer { margin-top: 40px; padding-block: 34px 20px; border-radius: 28px 28px 0 0; }
  .footer-opening { display: block; padding-bottom: 28px; }
  .footer-opening .eyebrow { font-size: 10px; margin-bottom: 12px; }
  .footer-opening h2 { font-size: 31px; }
  .footer-opening .button { margin-top: 22px; min-height: 46px; padding: 12px 18px; font-size: 13px; box-shadow: none; }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 28px 14px; padding-block: 28px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-about p { margin-top: 12px; font-size: 13px; }
  .footer-links h3 { margin-bottom: 8px; font-size: 11px; }
  .footer-links a { font-size: 13px; min-height: 40px; padding-block: 8px; }
  .footer-bottom { gap: 8px 16px; font-size: 11px; padding-top: 18px; }
}

/* SHW-02X: spend the phone viewport on content, keep the opening full-height. */
@media (max-width: 700px) {
  .hero { min-height: 100svh; min-height: 100dvh; grid-template-rows: auto auto minmax(170px, 1fr) auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .hero .compile-art { height: auto; min-height: 170px; }
  .hero .compile-art img { position: absolute; inset: 0; }
  .section, .people-section { padding-block: 40px; }
  .split { gap: 18px; }
  .section-copy > * + * { margin-top: 14px; }
  .large-copy { font-size: 20px; line-height: 1.45; }
  .work-heading, .people-heading, .summary-heading { margin-bottom: 24px; }
  .work-grid { gap: 20px; }
  .work-card, .work-card:not(.work-card-nutragen) { padding: 20px 16px; }
  .work-card-heading { margin-bottom: 16px; }
  .work-stage, .work-visual-nutragen .work-stage, .work-visual-sklepowefoto .work-stage { height: clamp(250px, 38svh, 310px); }
  .work-visual-nutragen .work-shot { width: 42%; max-width: 135px; }
  .work-visual-nutragen .work-shot-1 { top: 18px; }
  .work-visual-nutragen .work-shot-2 { top: 36px; }
  .work-visual-lekko .work-shot { width: 160px; top: 18px; }
  .work-visual { margin-bottom: 18px; }
  .work-card-nutragen .work-story { padding-top: 18px; }
  .work-story .eyebrow { margin-bottom: 10px; }
  .work-card-nutragen h3, .work-story h3 { font-size: 28px; }
  .work-intro { margin-top: 12px; }
  .work-detail { margin-top: 18px; }
  .work-detail summary { min-height: 60px; padding-top: 12px; }
  .project-panel { padding: 26px 18px; }
  .journey-layout { margin-top: 22px; gap: 20px; }
  .goal-option { min-height: 76px; padding: 12px; gap: 12px; border-radius: 18px; }
  .goal-copy strong { font-size: 15px; }
  .journey-response { padding: 20px 16px; border-radius: 22px; }
  .journey-response h3 { font-size: 28px; }
  .journey-response-top { margin-bottom: 16px; }
  .journey-fields { gap: 16px; }
  .people-portrait { aspect-ratio: 4 / 3; }
  .people-portrait img { object-position: 50% 38%; }
  .people-profile { padding: 22px 8px 14px; }
  .people-profile h3 { font-size: 32px; }
  .people-bio { margin-top: 14px; font-size: 15px; }
  .people-example { margin-top: 18px; padding: 16px; border-radius: 18px; }
  .people-actions { margin-top: 18px; }
  .people-scope { padding: 18px 8px 0; gap: 8px; }
  .summary-layout { gap: 20px; }
  .summary-sources, .summary-sheet { padding: 22px 16px; border-radius: 24px; }
  .summary-sources h3 { font-size: 28px; }
  .summary-sources > .eyebrow { margin-bottom: 12px; }
  .summary-choices { margin-top: 18px; }
  .summary-materials { margin-block: 18px; padding-top: 16px; }
  .summary-material { padding: 10px 12px; margin-top: 8px; min-height: 46px; }
  #summary-questions { min-height: 100px; height: 110px; }
  .summary-sheet-top { margin-bottom: 16px; gap: 8px; }
  .summary-sheet > label { font-size: 24px; }
  #summary-text { margin-top: 16px; height: clamp(260px, 42svh, 350px); min-height: 240px; }
  .summary-tools { margin-top: 16px; flex-direction: row; align-items: center; gap: 10px 16px; }
  .summary-tools .button { padding-inline: 16px; min-height: 46px; font-size: 13px; }
  .summary-footer { margin-top: 20px; gap: 16px; }
  .site-footer { margin-top: 28px; }
}
/* Reflow also works when browser zoom leaves less space than a small phone. */
@media (max-width: 700px) {
  .header-overlay { container-type: inline-size; }
  main, .site-footer { overflow-wrap: anywhere; }
  .goal-copy, .journey-memory > *, .summary-tools > *, .people-portrait figcaption > span { min-width: 0; }
  .hero .eyebrow { max-width: calc(100% - 40px); }
  .hero h1 { font-size: clamp(32px, 15cqi, 72px); }
  .summary-tools .button, .journey-response .button, .people-actions .button { max-width: 100%; }
  .process-section:not(.is-walk) .process-steps { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 300px) {
  .hero .actions { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hero .actions .text-link { justify-content: center; }
  .header { flex-wrap: wrap; gap: 4px; padding-block: 10px; }
  .header nav .button { min-height: 36px; padding-block: 7px; }
}

/* Rounded hero corners appear only after the page starts scrolling. */
.hero:not(.is-scrolled) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Phone gutters: one token pair, wide goal/contact panels, no stacked page+card waste. */
@media (max-width: 700px) {
  :root {
    --sh-page-gutter: 12px;
    --sh-panel-inset: 8px;
    --sh-panel-pad: 14px;
  }
  .wrap { width: calc(100% - (2 * var(--sh-page-gutter))); }
  .project-panel.wrap, .contact-panel.wrap {
    width: calc(100% - (2 * var(--sh-panel-inset)));
    padding: 22px var(--sh-panel-pad);
    border-radius: 26px;
  }
  .hero .eyebrow, .hero h1, .hero-bottom { margin-inline: var(--sh-page-gutter); }
  .hero .eyebrow { max-width: calc(100% - (2 * var(--sh-page-gutter))); }
  .process-stage, .process-steps { width: calc(100% - (2 * var(--sh-page-gutter))); }
  .goal-option { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .goal-icon { width: 32px; height: 36px; border-radius: 11px; }
  .goal-state { font-size: 10px; }
  .journey-response { padding: 18px var(--sh-panel-pad); }
  .journey-response .button, .summary-tools .button { width: 100%; }
  .journey-question { padding: 14px 12px; }
  .journey-refine { margin-top: 24px; }
  .journey-refine summary { gap: 12px; padding-block: 20px; }
  .journey-fields select, .journey-fields textarea { padding-inline: 12px; }
  .summary-tools { align-items: stretch; }
  .summary-tools .quiet-button { justify-content: center; }
  .contact-option, .contact-compose { padding-inline: var(--sh-panel-pad); }
  .contact-compose { margin-inline: 0; }
  .contact-methods button { min-width: 0; }
  .calendar-grid button { min-height: 44px; }
  .people-portrait figcaption { inset: auto 16px 16px; gap: 10px; }
  .process-agreement { padding-inline: var(--sh-page-gutter); }
  .process-agreement summary { gap: 12px; }
  .footer-links a { min-height: 44px; }
}
@media (max-width: 390px) {
  :root {
    --sh-page-gutter: 8px;
    --sh-panel-inset: 4px;
    --sh-panel-pad: 12px;
  }
}
@media (max-width: 360px) {
  h2 { font-size: 34px; }
  .journey-heading .large-copy, .summary-heading .large-copy { font-size: 18px; }
  .goal-copy strong { font-size: 14px; }
  .goal-copy > span { font-size: 11px; }
  .journey-response h3 { font-size: 26px; }
  .journey-orbit { width: 36px; height: 36px; flex-basis: 36px; }
  .contact-methods button { grid-template-columns: 1fr; gap: 6px; padding: 12px; }
  .contact-methods button > span:first-child { display: none; }
  .process-agreement-title { font-size: 18px; }
}

.consent {
  position: fixed;
  inset: auto 0 16px;
  width: min(920px, calc(100% - 32px));
  max-height: calc(100svh - 32px);
  margin: 0 auto;
  padding: 28px 28px 22px;
  overflow: auto;
  color: var(--sh-ink);
  background: var(--sh-surface);
  border: 1px solid var(--sh-hairline);
  border-radius: var(--sh-radius-panel);
  box-shadow: var(--sh-shadow-panel);
}
.consent::backdrop { background: var(--sh-hero-shade); }
.consent .eyebrow { margin-bottom: 8px; color: var(--sh-secondary); }
.consent h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.045em; line-height: 1.08; }
.consent-lead { margin-top: 14px; max-width: 62ch; color: var(--sh-secondary); font-size: 16px; }
.consent-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.consent-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-pill); background: var(--sh-canvas); color: var(--sh-ink); box-shadow: var(--sh-shadow-button-light); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.consent .button { border: 0; }
.consent-cats { display: grid; gap: 10px; margin-top: 22px; }
.consent-cat { border: 1px solid var(--sh-hairline); border-radius: 24px; background: var(--sh-canvas); overflow: hidden; }
.consent-cat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 16px 0 18px; }
.consent-cat h3 { margin: 0; font-size: 17px; letter-spacing: -.03em; }
.consent-cat-head p, .consent-empty, .consent-fine, .consent-error { color: var(--sh-secondary); font-size: 14px; }
.consent-cat-head p { margin: 4px 0 0; }
.consent-lock { font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-secondary); padding: 8px 12px; border-radius: var(--sh-radius-pill); background: var(--sh-surface); border: 1px solid var(--sh-hairline); }
.consent-switch { position: relative; width: 52px; height: 32px; border: 0; border-radius: var(--sh-radius-pill); background: var(--sh-hairline); padding: 0; }
.consent-switch[aria-checked="true"] { background: var(--sh-cobalt); box-shadow: var(--sh-shadow-button); }
.consent-switch span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--sh-surface); box-shadow: var(--sh-shadow-button-light); transition: transform .18s; }
.consent-switch[aria-checked="true"] span { transform: translateX(20px); }
.consent-more { border: 0; background: transparent; color: var(--sh-ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; padding: 12px 18px 14px; }
.consent-table { width: calc(100% - 24px); margin: 0 12px 14px; border-collapse: collapse; font-size: 13px; background: var(--sh-surface); border-radius: 16px; overflow: hidden; }
.consent-table th, .consent-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sh-hairline); vertical-align: top; }
.consent-table th { font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-secondary); font-weight: 500; }
.consent-empty { margin: 0 18px 16px; padding: 12px 14px; border-radius: 16px; background: var(--sh-surface); }
.consent-fine { margin-top: 16px; font-size: 13px; }
.consent-fine a, .consent-lead a { font-weight: 600; }
.consent-error { margin-top: 12px; }
.consent-toast { position: fixed; z-index: 4; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(560px, calc(100% - 32px)); padding: 14px 14px 14px 20px; background: var(--sh-dark); color: var(--sh-dark-text); border-radius: var(--sh-radius-pill); box-shadow: var(--sh-shadow-panel); }
.consent-toast p { margin: 0; font-size: 14px; }
.consent-toast button { border: 0; background: var(--sh-surface); color: var(--sh-ink); border-radius: var(--sh-radius-pill); min-height: 40px; padding: 8px 14px; font-weight: 600; font-size: 13px; }
@media (max-width: 700px) {
  .consent { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-width: none; margin: 0; max-height: 80svh; padding: 12px 14px 10px; border-radius: 22px; }
  .consent h2 { font-size: 20px; line-height: 1.15; }
  .consent .eyebrow { margin-bottom: 2px; }
  .consent-lead { margin-top: 6px; font-size: 13px; line-height: 1.35; }
  .consent-lead a { display: table; margin: 8px auto 0; white-space: nowrap; font-size: 13px; text-underline-offset: .15em; outline-offset: 3px; }
  .consent-cat { border-radius: 14px; }
  .consent-cats { gap: 6px; margin-top: 8px; }
  .consent-top { gap: 8px; }
  .consent-icon { width: 32px; height: 32px; }
  .consent-icon svg { width: 14px; height: 14px; }
  .consent-cat-head { padding: 8px 8px 0 10px; gap: 8px; }
  .consent-cat h3 { font-size: 14px; }
  .consent-cat-head p { font-size: 12px; line-height: 1.3; }
  .consent-lock { padding: 4px 7px; font-size: 9px; }
  .consent-switch { width: 42px; height: 26px; }
  .consent-switch span { width: 20px; height: 20px; }
  .consent-switch[aria-checked="true"] span { transform: translateX(16px); }
  .consent-more { padding: 4px 10px 8px; font-size: 12px; }
  .consent-empty { margin: 0 8px 8px; padding: 8px 10px; font-size: 12px; }
  .consent-fine { margin-top: 8px; font-size: 12px; }
  .consent-actions { margin-top: 10px; gap: 6px; flex-direction: column; align-items: stretch; }
  .consent-actions .button { width: 100%; min-height: 38px; padding: 8px 12px; font-size: 13px; gap: 8px; }
  .consent-actions .quiet-button { width: auto; align-self: center; justify-content: center; min-height: 32px; padding: 2px 4px; font-size: 13px; }
  .consent-toast { left: 12px; right: 12px; width: auto; transform: none; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-toast { transform: none; left: 16px; right: 16px; width: auto; }
}

.legal-bar { padding-block: 22px; color: var(--sh-ink); border-bottom: 1px solid var(--sh-hairline); }
.legal-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legal { padding-block: 48px 72px; max-width: 760px; }
.legal h1 { font-size: clamp(36px, 4vw, 56px); }
.legal h2 { margin-top: 40px; font-size: clamp(26px, 3vw, 34px); }
.legal h3 { margin-top: 22px; font-size: 20px; }
.legal p, .legal li { color: var(--sh-secondary); font-size: 16px; }
.legal p + p, .legal ul { margin-top: 12px; }
.legal-updated { margin-top: 14px; font-family: var(--sh-font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.legal-lead { margin-top: 16px; color: var(--sh-ink); font-size: 18px; }
.legal-id { margin-top: 22px; padding: 8px 22px; border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-card); background: var(--sh-surface); }
.legal-id div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; padding-block: 12px; border-bottom: 1px solid var(--sh-hairline); }
.legal-id div:last-child { border-bottom: 0; }
.legal-id dt { font-weight: 600; color: var(--sh-ink); }
.legal-id dd { margin: 0; color: var(--sh-secondary); }
.legal-id a { font-weight: 600; }
.legal-table { width: 100%; margin-top: 16px; }
.legal code { font-family: var(--sh-font-mono); font-size: 13px; }
@media (max-width: 700px) {
  .legal-bar { padding-block: 12px; }
  .legal-bar .brand { font-size: 20px; gap: 8px; }
  .legal-bar .brand-mark { width: 26px; height: 24px; }
  .legal-bar .text-link { font-size: 13px; min-height: 40px; }
  .legal { padding-block: 22px 36px; }
  .legal h1 { font-size: 28px; letter-spacing: -.04em; }
  .legal h2 { margin-top: 26px; font-size: 21px; }
  .legal h3 { margin-top: 16px; font-size: 16px; }
  .legal-lead { font-size: 16px; }
  .legal p, .legal li { font-size: 15px; }
  .legal-id { padding: 2px 14px; border-radius: 18px; }
  .legal-id div { grid-template-columns: 1fr; gap: 2px; padding-block: 10px; }
  .legal-id dt { font-size: 12px; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: auto; }
  .legal-table tr { padding: 12px 14px; }
  .legal-table td { border: 0; padding: 2px 0; }
  .legal-table td::before { content: attr(data-label); display: block; margin-top: 8px; font-family: var(--sh-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); }
  .legal-table td:first-child::before { margin-top: 0; }
  main.legal + .site-footer { margin-top: 12px; padding-block: 18px 14px; border-radius: 22px 22px 0 0; }
  main.legal + .site-footer .footer-bottom { display: grid; gap: 2px; }
  main.legal + .site-footer .footer-top { margin-left: 0; }
}

/* Consistent vector pictograms for the five project goals. */
.goal-option .goal-icon { color: var(--sh-cobalt-light); background: var(--sh-cobalt-haze); border-color: transparent; }
.goal-icon svg { display: block; width: 24px; height: 24px; flex: none; }
.goal-option[aria-pressed="true"] .goal-icon { color: var(--sh-dark-text); background: var(--sh-light-wash); }
@media (max-width: 700px) {
  .goal-icon svg { width: 22px; height: 22px; }
}

/* SHW-02AB: shared rhythm, native disclosures and real loading states. */
.work-grid { align-items: start; }
.work-card:not(.work-card-nutragen) { display: flex; flex-direction: column; }
.work-card:not(.work-card-nutragen) .work-story { flex: 1; }
.progressive-media { display: block; position: relative; width: 100%; height: 100%; isolation: isolate; }
.progressive-media .media-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(10px); pointer-events: none; z-index: -1; }
.progressive-media > img:last-child { transition: opacity .35s ease; }
.progressive-media.media-loading > img:last-child { opacity: 0; }
.progressive-media.media-error > img:last-child { opacity: 1; }
.work-shot .progressive-media { height: auto; }
.calendar-grid[aria-busy="true"] button { color: transparent; position: relative; background: var(--sh-hairline); animation: loading-breathe 1.2s ease-in-out infinite alternate; }
.calendar-grid[aria-busy="true"] .day-dot { visibility: hidden; }
@keyframes loading-breathe { from { opacity: .35; } to { opacity: .8; } }
@media (prefers-reduced-motion: no-preference) {
  .contact-compose:not([hidden]), .calendar-hours:not([hidden]) { animation: panel-arrive .24s ease-out; }
  .goal-option, .contact-methods button { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
  @keyframes panel-arrive { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .progressive-media > img:last-child { transition: none; }
  .calendar-grid[aria-busy="true"] button { animation: none; opacity: .6; }
}
.dev-tools { position: fixed; z-index: var(--sh-z-dev-tools); right: 16px; bottom: 16px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
.dev-tools summary { list-style: none; cursor: pointer; min-height: 44px; padding: 10px 16px; border-radius: var(--sh-radius-pill); background: var(--sh-dark); color: var(--sh-dark-text); font-size: 13px; font-weight: 600; box-shadow: var(--sh-shadow-panel); }
.dev-tools summary::-webkit-details-marker { display: none; }
.dev-tools-menu { display: grid; min-width: 160px; padding: 8px; background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-card); box-shadow: var(--sh-shadow-float); }
.dev-tools-menu a, .dev-tools-menu button { display: block; width: 100%; padding: 10px 14px; border: 0; border-radius: var(--sh-radius-pill); background: transparent; color: var(--sh-ink); text-align: left; text-decoration: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dev-tools-menu a:hover, .dev-tools-menu a:focus-visible, .dev-tools-menu button:hover, .dev-tools-menu button:focus-visible { background: var(--sh-cobalt-haze); color: var(--sh-cobalt); }
.contact-files { margin-top: 20px; }
.contact-files-title { font-size: 14px; margin-bottom: 10px; }
.contact-files-title span { color: var(--sh-secondary); font-size: 12px; }
#contact-fields input.contact-files-input[type="file"] { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#contact-fields .contact-files-button { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 18px; border: 1px dashed var(--sh-cobalt); border-radius: var(--sh-radius-pill); color: var(--sh-cobalt); font-size: 14px; font-weight: 600; cursor: pointer; }
.contact-files-input:focus-visible + .contact-files-button { outline: 3px solid var(--sh-cobalt); outline-offset: 4px; }
#contact-fields:disabled .contact-files-button { opacity: .5; cursor: default; }
.contact-files-help { margin-top: 8px; font-size: 12px; color: var(--sh-secondary); }
.contact-files-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.contact-files-list:empty { display: none; }
.contact-files-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--sh-hairline); border-radius: 16px; background: var(--sh-surface); font-size: 14px; }
.contact-file-name { overflow-wrap: anywhere; }
.contact-files-list small { grid-column: 1; font-size: 12px; color: var(--sh-secondary); }
.contact-files-list li[data-status="invalid"], .contact-files-list li[data-status="failed"] { border-color: var(--sh-danger-border); }
.contact-files-list li[data-status="invalid"] small, .contact-files-list li[data-status="failed"] small { color: var(--sh-danger-text); }
.contact-files-list li[data-status="sent"] small { color: var(--sh-success-text); }
.contact-file-remove { grid-column: 2; grid-row: 1 / span 2; background: none; border: 0; color: var(--sh-secondary); font-size: 13px; text-decoration: underline; min-height: 44px; padding: 0 4px; }
.appt-banner[data-state="moving"] { border-color: var(--sh-cobalt); box-shadow: 0 0 0 3px var(--sh-cobalt-haze); }
.appt-banner[data-state="another"] h3, .appt-banner[data-state="note"] h3 { font-size: 20px; }
.appt-banner h3:focus { outline: none; }
.appt-status { margin-top: 10px; font-size: 14px; color: var(--sh-cobalt); font-weight: 600; }
.appt-status:empty { display: none; }
.appt-more { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; }
.text-button { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--sh-secondary); font-size: 13px; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.text-button:hover { color: var(--sh-ink); }
.contact-move { position: sticky; top: 24px; align-self: start; }
.move-compare { margin: 24px 0 0; display: grid; gap: 14px; }
.move-compare div { padding: 14px 16px; border: 1px solid var(--sh-edge-light); border-radius: 18px; }
.move-compare dt { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .75; }
.move-compare dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.move-compare[data-chosen="true"] div:first-child dd { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .8; }
.move-compare dd[data-empty="true"] { font-weight: 400; opacity: .8; }
.contact-move .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.contact-move .button { border: 0; }
.contact-move .button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Project stories: focused, unchanged source images inside editorial crops. */
.work-editorial .work-stage { height: auto; padding: 24px; overflow: visible; container-type: inline-size; }
.work-step { font: 10px var(--sh-font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--sh-secondary); margin-bottom: 12px; }
.work-result-note { font-size: 14px; line-height: 1.5; color: var(--sh-secondary); margin-top: 14px; max-width: 34em; }
.work-result-note b { color: var(--sh-ink); font-weight: 600; }
.work-editorial .work-crop { position: relative; display: block; inset: auto; width: 100%; max-width: none; aspect-ratio: var(--crop-ratio); transform: none; border: 0; border-radius: 10px; overflow: hidden; background: var(--sh-surface); box-shadow: var(--sh-shadow-float); }
.work-crop > img,
.work-crop .progressive-media { position: absolute; width: var(--crop-width); height: auto; max-width: none; left: var(--crop-left); top: var(--crop-top); }
.work-crop .progressive-media > img:last-child { width: 100%; height: auto; max-width: none; }
.work-shot:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 4px; }
.work-editorial figcaption a { text-decoration: underline; text-underline-offset: 3px; }

/* Nutragen: one card across the grid, story on top, two conversation turns below. */
.work-card-nutragen .work-card-heading,
.work-card-nutragen .work-story,
.work-card-nutragen .work-visual,
.work-card-nutragen .work-detail { grid-column: auto; grid-row: auto; align-self: stretch; }
.work-card-nutragen { display: flex; flex-direction: column; padding: 40px; }
.work-card-nutragen .work-card-heading { order: 0; margin-bottom: 28px; }
.work-card-nutragen .work-story { order: 1; }
.work-card-nutragen .work-visual { order: 2; container-type: inline-size; }
.work-card-nutragen .work-detail { order: 3; }
.work-card-nutragen .work-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; align-items: end; padding: 0 0 32px; }
.work-card-nutragen .work-story .eyebrow { grid-column: 1 / -1; }
.work-card-nutragen .work-story h3 { font-size: clamp(34px, 3.6vw, 52px); max-width: 12em; }
.work-card-nutragen .work-intro { margin: 0; max-width: 32em; }
.work-card-nutragen .work-visual { margin: 0; }
.work-card-nutragen .work-detail { margin-top: 24px; }
.work-visual-nutragen .work-stage { background: var(--sh-work-nutragen); padding: 28px; }
.agent-stage { display: grid; grid-template-columns: 1fr; gap: 24px; }
.agent-film { display: grid; min-width: 0; }
.agent-video { display: block; width: 100%; height: auto; aspect-ratio: 900 / 720; border-radius: 14px; }
.agent-toggle { justify-self: end; margin-top: 10px; min-height: 40px; padding: 0 16px; border: 1px solid var(--sh-hairline); border-radius: var(--sh-radius-pill); background: var(--sh-surface); color: var(--sh-ink); font: 600 13px var(--sh-font-sans); box-shadow: var(--sh-shadow-button-light); cursor: pointer; }
.agent-toggle:focus-visible, .agent-chapter-seek:focus-visible { outline: 3px solid var(--sh-cobalt); outline-offset: 3px; }
.agent-toggle-pause, .agent-stage.is-playing .agent-toggle-play { display: none; }
.agent-stage.is-playing .agent-toggle-pause { display: inline; }
.agent-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: center; counter-reset: none; }
.agent-chapter { padding: 10px 14px 12px; border-radius: 14px; border-left: 2px solid transparent; transition: background-color .2s, border-color .2s; }
.agent-chapter-seek { display: flex; gap: 12px; align-items: baseline; width: 100%; min-height: 32px; padding: 0; border: 0; background: none; color: var(--sh-ink); font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.02em; text-align: left; cursor: pointer; }
.agent-chapter-seek:disabled { cursor: default; }
.agent-chapter-n { flex: 0 0 auto; white-space: nowrap; font: 10px var(--sh-font-mono); letter-spacing: .08em; color: var(--sh-secondary); }
.agent-chapter p { margin: 2px 0 0 28px; font-size: 14px; line-height: 1.5; color: var(--sh-secondary); }
.agent-stage.is-enhanced .agent-chapter.is-active { background: var(--sh-surface); border-left-color: var(--sh-cobalt); }
.agent-stage.is-enhanced .agent-chapter.is-active .agent-chapter-n { color: var(--sh-cobalt); }
@container (min-width: 820px) {
  .agent-stage { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; }
}
@container (max-width: 560px) {
  .agent-stage.is-enhanced .agent-chapter:not(.is-active) p { display: none; }
  .agent-chapter { padding: 8px 12px 10px; }
  .agent-chapter-seek { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .agent-chapter { transition: none; } }

/* SklepoweFoto: library header and two style cards. */
.work-visual-sklepowefoto .work-stage { background: var(--sh-dark); padding: 20px; }
.work-style-head { margin-bottom: 14px; }
.work-style-head .work-crop { box-shadow: none; border-radius: 6px; }
.work-style-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.work-visual-sklepowefoto figcaption, .work-visual-sklepowefoto figcaption a { color: var(--sh-secondary); }

@media (max-width: 1100px) {
  .work-card-nutragen { padding: 28px; }
}
@media (max-width: 900px) {
  .work-card-nutragen .work-story { grid-template-columns: 1fr; }
  .work-card-nutragen .work-intro { margin-top: 16px; }
  .work-editorial .work-stage { padding: 18px; }
}
@media (max-width: 700px) {
  .work-card-nutragen { padding: 24px 20px; }
  .work-card-nutragen .work-story { grid-template-columns: 1fr; padding-bottom: 22px; }
  .work-card-nutragen .work-story h3 { font-size: 30px; }
  .work-card-nutragen .work-intro { margin-top: 14px; }
  .work-card-nutragen .work-detail { margin-top: 12px; }
  .work-card-sklepowefoto { display: flex; flex-direction: column; }
  .work-card-sklepowefoto .work-story { order: 1; }
  .work-card-sklepowefoto .work-visual { order: 2; }
  .work-card-sklepowefoto .work-detail { order: 3; }
  .work-editorial .work-stage,
  .work-visual-nutragen.work-editorial .work-stage,
  .work-visual-sklepowefoto.work-editorial .work-stage { height: auto; padding: 14px; border-radius: 18px; }
  .work-card-sklepowefoto .work-story { margin-bottom: 22px; }
  .work-style-pair { gap: 8px; }
  .work-visual-sklepowefoto .work-stage { padding: 12px; }
}
@media (max-width: 420px) {
  .work-card-nutragen { padding: 20px 16px; }
  .work-card-nutragen .work-story h3 { font-size: 28px; }
  .work-editorial .work-stage,
  .work-visual-nutragen.work-editorial .work-stage { padding: 12px; }
}

/* Source windows, in pixels of the unchanged PNG: ratio = w / h, width = image width / w, left = -x / w, top = -y / h. */
.crop-library { --crop-ratio: 590 / 180; --crop-width: 325.08474576271186%; --crop-left: -10%; --crop-top: -50%; }
.crop-clear { --crop-ratio: 305 / 445; --crop-width: 629.1803278688525%; --crop-left: -311.47540983606557%; --crop-top: -61.79775280898876%; }
.crop-clean { --crop-ratio: 310 / 445; --crop-width: 618.7096774193549%; --crop-left: -403.2258064516129%; --crop-top: -61.79775280898876%; }
.crop-speak { --crop-ratio: 980 / 620; --crop-width: 195.81632653061226%; --crop-left: -42.857142857142854%; --crop-top: -6.451612903225806%; }
.crop-balance { --crop-ratio: 900 / 520; --crop-width: 212.88888888888889%; --crop-left: -53.333333333333336%; --crop-top: -15.384615384615385%; }
.crop-catalog { --crop-ratio: 393 / 851; --crop-width: 100%; --crop-left: 0%; --crop-top: 0%; }
.crop-label { --crop-ratio: 520 / 640; --crop-width: 368.84615384615387%; --crop-left: -134.6153846153846%; --crop-top: -28.125%; }

.work-case { margin-top: 14px; }
.case-lead { padding-top: 28px; }
.case-lead h1 { max-width: 16em; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.04em; }
.case-count { margin-top: 18px; font-family: var(--sh-font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); }
.case-study .process-card blockquote { margin: 0; }
.case-study .process-card blockquote p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sh-secondary); }
.case-study .process-card blockquote footer { margin-top: 12px; font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-muted); }
.case-study .process-card blockquote + p,
.case-study .process-card p + blockquote { margin-top: 12px; }
.case-lines { padding-block: 72px 8px; }
.case-lines h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -.04em; }
.case-bridge { max-width: 38em; margin-top: 18px; }
.case-bridge p { font-size: 18px; line-height: 1.5; color: var(--sh-ink); }
.case-bridge footer { margin-top: 12px; font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-muted); }
.case-lines ol { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 40px; }
.case-line { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.case-line:nth-child(even) .work-crop { order: -1; }
.case-line p { font-size: clamp(20px, 2vw, 28px); line-height: 1.35; letter-spacing: -.03em; }
.case-line-plain { grid-template-columns: minmax(0, 28em); }
.case-lines .work-crop { position: relative; display: block; width: 100%; aspect-ratio: var(--crop-ratio); overflow: hidden; border-radius: var(--sh-radius-card); background: var(--sh-surface); box-shadow: var(--sh-shadow-float); }
.case-contact { padding-block: 48px 24px; }
.case-contact h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; }
.case-contact p { margin-top: 8px; font-size: 18px; }
.case-contact a { font-weight: 600; }
@media (max-width: 800px) {
  .case-line, .case-line-plain { grid-template-columns: 1fr; }
  .case-line:nth-child(even) .work-crop { order: 0; }
}