:root {
  --accent: #db6f1e;
  --accent-strong: #c85e10;
  --ink: #111214;
  --ink-2: #1d1f22;
  --graphite: #2d3034;
  --mid: #85898e;
  --muted: #666a70;
  --line: #cfd2d5;
  --line-dark: #92969a;
  --paper: #ffffff;
  --paper-2: #f4f4f2;
  --paper-3: #e7e8e9;
  --black: #0e0f11;
  --display: "Arial Black", "Segoe UI Black", Impact, Haettenschweiler, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --max: 1500px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::selection { color: #fff; background: var(--accent); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
svg.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.9; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { color: var(--ink); }

.skip-link {
  position: fixed; z-index: 9999; top: 10px; left: 10px; padding: 10px 14px;
  transform: translateY(-140%); color: #fff; background: var(--black);
}
.skip-link:focus { transform: translateY(0); }

.grid-surface {
  background-image: none;
}

.tech-label {
  margin: 0 0 17px; color: #50545a; font: 700 11px/1.2 var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
}
.tech-label span { color: var(--ink); }
.tech-label--light { color: #c9ccd0; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 46px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 0;
  color: var(--ink); background: #fff; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .025em; transition: .18s ease;
}
.button:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.button .icon { width: 17px; height: 17px; }
.button--block { color: #fff; border-color: var(--accent); background: var(--accent); }
.button--block:hover { border-color: var(--black); background: var(--black); }
.button--small { min-height: 42px; padding: 0 18px; font-size: 11px; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 11px;
  font-weight: 850; text-transform: uppercase; letter-spacing: .035em; border-bottom: 2px solid var(--accent); padding-bottom: 3px;
}
.text-link:hover { color: var(--accent-strong); }
.text-link .icon { width: 15px; height: 15px; }

/* Header */
.site-header {
  position: sticky; z-index: 500; top: 0; height: 74px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
}
.site-header__rail { position: absolute; top: 0; bottom: 0; left: 0; width: max(18px, calc((100% - var(--max))/2)); background: var(--black); }
.site-header__inner {
  display: grid; max-width: var(--max); height: 100%; margin: 0 auto;
  grid-template-columns: 290px 1fr auto 68px; align-items: stretch; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; min-width: 0; padding: 0 28px; border-right: 1px solid var(--line); }
.brand img, .custom-logo { width: auto; max-width: 200px; max-height: 34px; object-fit: contain; }
.custom-logo-link { display: flex; align-items: center; }
.site-nav { min-width: 0; }
.site-nav__list { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; counter-reset: navitem; }
.site-nav__list li { display: flex; min-width: 0; counter-increment: navitem; }
.site-nav__list a {
  display: flex; position: relative; align-items: center; gap: 8px; height: 100%; padding: 0 22px;
  border-right: 1px solid var(--line); color: #24272b; font-size: 11px; font-weight: 750; white-space: nowrap;
}
.site-nav__list a::before { content: "[0" counter(navitem) "]"; color: #85898e; font: 600 8px/1 var(--mono); letter-spacing: .04em; }
.site-nav__list a::after { position: absolute; right: 20px; bottom: -1px; left: 20px; height: 3px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left; transition: .18s ease; }
.site-nav__list a:hover::after { transform: scaleX(1); }
.header-cta { align-self: center; margin: 0 16px; }
.header-corner { display: grid; place-items: center; border-left: 1px solid var(--line); color: var(--ink); font: 700 20px/1 var(--mono); }
.nav-toggle { display: none; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.06); }

/* Hero */
.hero { border-bottom: 1px solid var(--line-dark); background: var(--paper); }
.hero__layout {
  display: grid; max-width: var(--max); margin: 0 auto; grid-template-columns: 44% 56%;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.hero__copy { min-height: 606px; border-right: 1px solid var(--line); }
.hero__copy-inner { position: relative; display: flex; min-height: 606px; flex-direction: column; justify-content: center; padding: 66px 48px 70px; overflow: hidden; }
.hero__copy-inner::before, .hero__copy-inner::after {
  position: absolute; width: 18px; height: 18px; background: var(--paper-3); content: "";
}
.hero__copy-inner::before { top: 104px; right: 0; box-shadow: -18px 18px 0 #d8dadc, -36px 36px 0 #cfd2d5; }
.hero__copy-inner::after { right: 34px; bottom: 22px; box-shadow: 18px 0 0 #d7d9da, 36px 0 0 #c1c4c7; }
.hero h1 {
  max-width: 670px; margin: 0 0 26px; font: 800 clamp(53px,5.6vw,88px)/.88 var(--display);
  letter-spacing: -.055em; text-transform: uppercase;
}
.hero h1 span { color: var(--accent); }
.hero__lead { max-width: 610px; margin-bottom: 27px; color: #34383d; font-size: 17px; line-height: 1.55; }
.hero__actions { display: flex; gap: 12px; }
.hero__mini-code { position: absolute; bottom: 25px; left: 48px; display: grid; color: #767b80; font: 700 8px/1.25 var(--mono); letter-spacing: .17em; }
.hero__mini-code::before { width: 12px; height: 3px; margin-bottom: 7px; background: var(--accent); content: ""; }

.hero__visual { position: relative; min-height: 606px; overflow: hidden; background: #202226; }
.hero__visual::before {
  position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(135deg,#2a2d31 0 30%,#1c1e22 30% 52%,#303338 52% 72%,#181a1d 72%);
  background-size: 78px 78px,78px 78px,100% 100%; content: "";
}
.hero__visual::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.2)); content: ""; }
.hero__visual-grid { position: absolute; z-index: 1; top: 0; right: 0; width: 36%; height: 100%; border-left: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); }
.hero__system-note { position: absolute; z-index: 4; top: 34px; right: 24px; color: #d0d2d4; font: 700 9px/1.5 var(--mono); letter-spacing: .14em; text-align: right; }
.hero__system-note b { display: inline-block; width: 8px; height: 8px; margin-top: 8px; background: var(--accent); }
.hero__black-strip { position: absolute; z-index: 4; right: 0; bottom: 0; left: 44%; height: 48px; border-top: 1px solid rgba(255,255,255,.15); color: #d9dbdc; background: rgba(8,9,11,.88); }
.hero__black-strip span { display: flex; height: 100%; align-items: center; padding-left: 36px; font: 700 9px/1 var(--mono); letter-spacing: .18em; }

.laptop { position: absolute; z-index: 3; top: 76px; left: 52px; width: min(660px,79%); filter: drop-shadow(0 28px 28px rgba(0,0,0,.35)); transform: perspective(1300px) rotateY(-5deg) rotateX(1deg); }
.laptop__lid { padding: 10px 10px 15px; border: 4px solid #090a0b; border-radius: 7px 7px 2px 2px; background: #17191c; }
.laptop__base { width: 112%; height: 17px; margin-left: -6%; background: linear-gradient(180deg,#d1d4d6,#8c9297 58%,#c7cbce); clip-path: polygon(0 0,100% 0,96% 100%,4% 100%); }
.app { overflow: hidden; color: #30353a; background: #f3f4f5; }
.app--desktop { display: grid; aspect-ratio: 16/10; grid-template-columns: 118px 1fr; border-radius: 1px; }
.app__sidebar { padding: 15px 11px; border-right: 1px solid #d8dbde; background: #eceeef; }
.app__brand { margin-bottom: 18px; color: #111214; font: 800 10px/1 var(--display); letter-spacing: -.02em; }
.app__nav { display: flex; align-items: center; gap: 6px; margin: 4px 0; padding: 7px 7px; color: #596068; font-size: 7px; font-weight: 700; }
.app__nav .icon { width: 10px; height: 10px; }
.app__nav.is-active { color: #b95308; border-left: 3px solid var(--accent); background: #f7e9de; }
.app__main { padding: 13px 16px; background: #fff; }
.app__top { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-bottom: 13px; }
.app__search { width: 150px; padding: 6px 8px; border: 1px solid #e1e3e5; color: #a0a4a7; background: #f7f8f8; font-size: 7px; }
.app__avatar { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #d9dde0; color: #416c9b; background: #e1edf8; font-size: 8px; font-weight: 800; }
.app__main h3 { margin: 0 0 3px; font-size: 15px; }
.app__muted { margin: 0 0 13px; color: #949a9f; font-size: 8px; }
.app__kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 11px; }
.app__kpis > div { padding: 8px; border: 1px solid #e3e6e8; background: #fff; }
.app__kpis span,.app__kpis small { display:block;color:#8b9196;font-size:6px;line-height:1.2; }
.app__kpis strong { display:block;margin:3px 0 2px;color:#191d20;font-size:17px;line-height:1; }
.app__kpis small { color: var(--accent); }
.app__bottom { display:grid;grid-template-columns:1.25fr .75fr;gap:8px; }
.app__panel { min-height: 105px; padding:9px; border:1px solid #e4e6e8; background:#fff; }
.app__panel>strong { display:block;margin-bottom:7px;color:#272c30;font-size:8px; }
.app__notice { display:flex;align-items:center;gap:6px;margin:5px 0;padding:5px;background:#f4f5f5; }
.app__notice i { width:4px;height:19px;background:var(--accent); }
.app__notice span { color:#4d5358;font-size:6px;line-height:1.1; }
.app__notice small { display:block;margin-top:2px;color:#a2a6a9;font-size:5px; }
.mini-calendar { display:grid;grid-template-columns:repeat(7,1fr);gap:3px; }
.mini-calendar span { display:grid;aspect-ratio:1;place-items:center;color:#8d9398;font-size:5px; }
.mini-calendar .is-today { color:#fff;background:var(--accent); }
.phone { position:absolute;z-index:5;right:47px;bottom:68px;width:147px;padding:6px;border:4px solid #0b0c0d;border-radius:20px;background:#17191b;box-shadow:0 22px 30px rgba(0,0,0,.36); }
.phone__speaker { position:absolute;z-index:2;top:9px;left:50%;width:36px;height:4px;transform:translateX(-50%);border-radius:8px;background:#111; }
.app--phone { min-height:284px;padding:21px 8px 9px;border-radius:14px;background:#fff; }
.phone__brand { margin-bottom:14px;color:#111214;font:800 8px/1 var(--display); }
.phone__hello { margin-bottom:10px;color:#1a1d20;font-size:11px;font-weight:800; }
.phone__item { display:flex;align-items:center;gap:7px;margin:6px 0;padding:7px 6px;border:1px solid #e8eaeb;background:#fafafa; }
.phone__item>span { display:grid;width:22px;height:22px;place-items:center;color:#b95308;background:#f8e8dc;font-size:9px;font-weight:850; }
.phone__item p { margin:0;font-size:6px;line-height:1.2; }
.phone__item strong { display:block;color:#2d3236; }
.phone__item small { color:#949a9f; }
.phone__dock { display:flex;justify-content:space-around;margin-top:13px;padding-top:8px;border-top:1px solid #e8eaeb; }
.phone__dock i { width:11px;height:4px;background:#c6c9cc; }
.phone__dock i:first-child { background:var(--accent); }

.hero__facts { grid-column:1 / -1; display:grid;grid-template-columns:repeat(4,1fr);min-height:126px;border-top:1px solid var(--line);background-color:#f8f8f7; }
.hero-fact { position:relative;padding:28px 34px 24px;border-right:1px solid var(--line); }
.hero-fact:last-child { border-right:0; }
.hero-fact>span { position:absolute;top:14px;right:16px;color:#999da1;font:700 8px/1 var(--mono); }
.hero-fact strong { display:block;margin:10px 0 5px;font:800 22px/1 var(--display);text-transform:uppercase; }
.hero-fact small { display:block;color:#666b70;font-size:10px;line-height:1.35; }

/* Indexed sections */
.indexed-section { display:grid;max-width:var(--max);margin:0 auto;grid-template-columns:56px minmax(0,1fr);border-right:1px solid var(--line);border-left:1px solid var(--line);border-bottom:1px solid var(--line); }
.section-index { display:flex;align-items:flex-start;justify-content:center;padding-top:17px;border-right:1px solid var(--line);color:#33373b;background:#fff;font:800 10px/1 var(--mono); }
.section-index::before { position:absolute; }
.section-body { min-width:0;padding:48px 30px 36px;background-color:#fff; }
.section-body--gray { background-color:#efefed; }
.section-body--light { background-color:#f7f7f6; }
.section-heading--split { display:grid;grid-template-columns:minmax(0,1.1fr) .55fr auto;align-items:end;gap:30px;margin-bottom:28px; }
.section-heading h2 { margin:0;font:800 clamp(34px,3.8vw,56px)/.94 var(--display);letter-spacing:-.035em;text-transform:uppercase; }
.section-heading__aside { max-width:210px;margin:0;color:#686d72;font:700 10px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase; }

.solution-grid { display:grid;grid-template-columns:repeat(4,1fr); }
.solution-card { position:relative;display:flex;min-height:315px;flex-direction:column;padding:27px 23px 23px;border:1px solid var(--line-dark);border-right:0;background:rgba(255,255,255,.94);transition:.18s ease; }
.solution-card:last-child { border-right:1px solid var(--line-dark); }
.solution-card:hover { z-index:2;transform:translateY(-4px);border-color:var(--ink);box-shadow:8px 8px 0 rgba(17,18,20,.08); }
.solution-card__index { position:absolute;top:14px;right:14px;color:#777b80;font:700 9px/1 var(--mono); }
.solution-card__icon { display:grid;width:44px;height:44px;margin-bottom:23px;place-items:center;color:var(--accent); }
.solution-card__icon .icon { width:38px;height:38px;stroke-width:1.55; }
.solution-card h3 { max-width:235px;margin:0 0 14px;font-size:21px;line-height:1.05;letter-spacing:-.035em; }
.solution-card p { flex:1;margin:0 0 18px;color:#595e63;font-size:14px;line-height:1.5; }
.solution-card a { display:inline-flex;align-items:center;gap:8px;color:var(--accent-strong);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.035em; }
.solution-card a .icon { width:15px;height:15px; }
.corner-mark { position:absolute;right:0;bottom:0;width:10px;height:10px;background:var(--accent); }

/* Intranet */
.intranet__grid { display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:42px; }
.intranet__copy { padding:10px 0; }
.intranet__copy h2 { margin:0 0 18px;font:800 clamp(35px,3.5vw,53px)/.94 var(--display);letter-spacing:-.035em;text-transform:uppercase; }
.intranet__copy>p:not(.tech-label) { max-width:570px;margin-bottom:25px;color:#50555a;font-size:14px;line-height:1.6; }
.benefit-row { display:flex;flex-wrap:wrap;gap:21px; }
.benefit-row span { display:flex;align-items:center;gap:8px;color:#2f3438;font-size:11px;font-weight:750; }
.benefit-row .icon { width:24px;height:24px;color:var(--accent); }
.intranet__visual { min-width:0; }
.intranet-shell { display:grid;min-height:365px;grid-template-columns:minmax(0,1fr) 285px;border:1px solid var(--line-dark);background:#fff;box-shadow:10px 10px 0 rgba(0,0,0,.055); }
.documents-panel { min-width:0;padding:19px;border-right:1px solid var(--line); }
.documents-panel__head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px; }
.documents-panel__head strong { font-size:14px; }
.documents-panel__head button { min-height:31px;padding:0 12px;border:0;color:#fff;background:var(--accent);font-size:8px;font-weight:750; }
.documents-search { margin-bottom:9px;padding:8px 10px;border:1px solid #dfe2e4;color:#9b9fa3;background:#f8f8f8;font-size:7px; }
.documents-tabs { display:flex;gap:5px;margin-bottom:10px;overflow:hidden; }
.documents-tabs span { padding:5px 8px;border:1px solid #e1e3e4;color:#7f8488;background:#f8f8f8;font-size:6px;white-space:nowrap; }
.documents-tabs .is-active { color:#111;background:#eceeef; }
.documents-table { border:1px solid #e2e4e6;overflow:hidden; }
.doc-row { display:grid;grid-template-columns:1.5fr .75fr .75fr .72fr;gap:8px;padding:9px;border-top:1px solid #e6e8e9;color:#61666b;font-size:7px; }
.doc-row:first-child { border-top:0; }
.doc-row--head { color:#8d9296;background:#f0f1f2;font-weight:800; }
.status { display:inline-block;padding:3px 5px;font-size:6px;font-weight:800; }
.status--ok { color:#16743d;background:#dff1e5; }
.status--wait { color:#a8510d;background:#f8e5d6; }
.announcements-panel { padding:19px;background:#fafafa; }
.announcements-panel__head { padding-bottom:11px;border-bottom:1px solid #e1e3e4;font-size:11px; }
.announcement { display:flex;gap:10px;padding:13px 0;border-bottom:1px solid #e5e6e7; }
.announcement>span { display:grid;width:32px;height:32px;flex:0 0 32px;place-items:center;color:var(--accent);background:#f6e8dc; }
.announcement .icon { width:17px;height:17px; }
.announcement p { margin:0;font-size:8px;line-height:1.25; }
.announcement strong { display:block;margin-bottom:2px;color:#272b2f; }
.announcement small { color:#858a8e; }

/* Cases */
.case-grid { display:grid;grid-template-columns:repeat(4,1fr); }
.case-card { border:1px solid var(--line-dark);border-right:0;background:#fff; }
.case-card:last-child { border-right:1px solid var(--line-dark); }
.case-card__image { position:relative;height:180px;overflow:hidden;background:#222; }
.case-card__image::after { position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18));content:""; }
.case-card__image img { width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:.25s ease; }
.case-card:hover img { transform:scale(1.035);filter:grayscale(.55) contrast(1.03); }
.case-card__number { position:absolute;z-index:2;top:10px;left:10px;color:#fff;font:700 10px/1 var(--mono); }
.case-card__tag { position:absolute;z-index:2;bottom:0;left:0;padding:8px 12px;color:#fff;background:var(--accent);font:800 8px/1 var(--mono);letter-spacing:.06em; }
.case-card__content { padding:16px 16px 18px; }
.case-card h3 { margin:0 0 7px;font-size:17px;letter-spacing:-.025em; }
.case-card p { min-height:44px;margin:0 0 12px;color:#60656a;font-size:12px;line-height:1.45; }
.case-card a { display:inline-flex;align-items:center;gap:7px;color:var(--accent-strong);font-size:10px;font-weight:850;text-transform:uppercase; }
.case-card a .icon { width:14px;height:14px; }

/* Process */
.process__grid { display:grid;grid-template-columns:1.25fr repeat(4,1fr);align-items:stretch; }
.process__title { padding:0 24px 0 0; }
.process__title h2 { margin:0;font:800 clamp(30px,2.9vw,44px)/.94 var(--display);letter-spacing:-.03em;text-transform:uppercase; }
.process-step { display:grid;grid-template-columns:34px 1fr;gap:9px;padding:2px 18px;border-left:1px solid var(--line); }
.process-step>span { color:#2e3236;font:800 9px/1 var(--mono); }
.process-step .icon { width:28px;height:28px;margin-bottom:12px;color:var(--ink); }
.process-step h3 { margin:0 0 5px;font-size:13px; }
.process-step p { margin:0;color:#666b70;font-size:10px;line-height:1.45; }

/* CTA */
.final-cta .section-index { color:#d4d6d8;border-color:#383b3f;background:#111214; }
.final-cta__body { display:grid;grid-template-columns:.72fr 1.28fr;padding:0;background:#111214; }
.final-cta__copy { display:flex;min-height:390px;flex-direction:column;justify-content:center;padding:54px 46px;color:#fff;border-right:1px solid #3a3d41; }
.final-cta__copy h2 { margin:0 0 17px;color:#fff;font:800 clamp(38px,4vw,58px)/.94 var(--display);letter-spacing:-.035em;text-transform:uppercase; }
.final-cta__copy p:not(.tech-label) { max-width:560px;margin:0 0 24px;color:#c5c8cb;font-size:14px;line-height:1.58; }
.final-cta__copy .button { align-self:flex-start; }
.final-cta__visual { position:relative;min-height:390px;overflow:hidden;background:#24272b; }
.final-cta__visual::before { position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(17,18,20,.28),rgba(17,18,20,.05) 45%,rgba(17,18,20,.6));content:""; }
.final-cta__visual::after { position:absolute;z-index:3;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px;content:""; }
.final-cta__visual img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.72); }
.pixel-stairs { position:absolute;z-index:4;right:23%;bottom:0;display:flex;align-items:flex-end;gap:0; }
.pixel-stairs i { display:block;width:48px;background:rgba(220,222,224,.25);border:1px solid rgba(255,255,255,.1); }
.pixel-stairs i:nth-child(1){height:48px}.pixel-stairs i:nth-child(2){height:96px}.pixel-stairs i:nth-child(3){height:144px}.pixel-stairs i:nth-child(4){height:192px}.pixel-stairs i:nth-child(5){height:240px}
.next-level { position:absolute;z-index:5;top:42px;right:34px;color:#fff;font:700 20px/1.24 var(--mono);letter-spacing:.04em; }
.next-level span { display:block;width:19px;height:4px;margin-top:12px;background:var(--accent); }
.final-code { position:absolute;z-index:5;right:26px;bottom:22px;color:#bfc2c4;font:700 8px/1.5 var(--mono);letter-spacing:.11em; }

/* Footer */
.site-footer { border-top:1px solid var(--line);background-color:#fff; }
.site-footer__inner { display:grid;max-width:var(--max);min-height:110px;margin:0 auto;grid-template-columns:250px 1fr auto;align-items:center;border-right:1px solid var(--line);border-left:1px solid var(--line); }
.brand--footer { height:100%;padding:0 27px;border-right:1px solid var(--line); }
.brand--footer img { max-width:165px; }
.footer-nav__list { display:flex;gap:24px;margin:0;padding:0 28px;list-style:none; }
.footer-nav__list a { color:#52575c;font-size:10px; }
.site-footer__copy { margin:0;padding:0 26px;color:#777c80;font-size:9px;white-space:nowrap; }
.footer-code { grid-column:1/-1;padding:9px 27px;border-top:1px solid var(--line);color:#9a9ea1;font:700 7px/1 var(--mono);letter-spacing:.13em; }

/* Contact dialog */
.contact-dialog { width:min(720px,calc(100vw - 32px));padding:0;border:1px solid var(--ink);border-radius:0;color:var(--ink);background:#fff;box-shadow:18px 18px 0 rgba(0,0,0,.18); }
.contact-dialog::backdrop { background:rgba(15,16,18,.68);backdrop-filter:blur(2px); }
.contact-dialog__close { position:absolute;z-index:2;top:0;right:0;display:grid;width:46px;height:46px;place-items:center;border:0;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);color:#fff;background:var(--ink); }
.contact-dialog__close .icon { width:20px;height:20px; }
.contact-dialog__head { padding:36px 42px 25px;border-bottom:1px solid var(--line);background-color:#f4f4f2;background-image:linear-gradient(to right,rgba(17,18,20,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(17,18,20,.05) 1px,transparent 1px);background-size:42px 42px; }
.contact-dialog__head h2 { max-width:590px;margin:0 0 12px;font:800 37px/.98 var(--display);text-transform:uppercase;letter-spacing:-.035em; }
.contact-dialog__head p:not(.tech-label) { margin:0;color:#555a5f;line-height:1.5; }
.contact-form { display:grid;gap:17px;padding:30px 42px 38px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.contact-form label>span { display:block;margin-bottom:6px;color:#4c5156;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea { width:100%;border:1px solid #aeb2b6;border-radius:0;padding:12px 13px;color:#111;background:#fff;outline:none; }
.contact-form textarea { resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent); }
.form-consent { display:grid!important;grid-template-columns:18px 1fr;align-items:start;gap:8px; }
.form-consent input { margin-top:2px;accent-color:var(--accent); }
.form-consent span { margin:0!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important; }
.honeypot { position:absolute!important;left:-10000px!important; }
.form-notice { margin:22px 42px 0;padding:12px 14px;border-left:4px solid var(--accent);background:#f4f4f2;font-size:12px; }
.form-notice--success { border-color:#2f8c56; }
.form-notice--error { border-color:#bd3d2e; }

/* Content fallback */
.entry-shell { max-width:1000px;margin:0 auto;padding:70px 24px; }
.entry-shell h1 { font:800 52px/.95 var(--display);text-transform:uppercase; }
.entry-shell p,.entry-shell li { line-height:1.7; }

/* Reveal */
.reveal { opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease; }
.reveal.is-visible { opacity:1;transform:none; }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important} }

/* Responsive */
@media (max-width: 1280px) {
  .site-header__inner { grid-template-columns:240px 1fr auto 54px; }
  .site-nav__list a { padding:0 14px; }
  .site-nav__list a::before { display:none; }
  .hero__copy-inner { padding-left:36px;padding-right:36px; }
  .laptop { left:28px;width:82%; }
  .phone { right:24px; }
  .section-body { padding-left:24px;padding-right:24px; }
  .section-heading--split { grid-template-columns:1fr .42fr auto; }
  .intranet__grid { gap:25px; }
  .intranet-shell { grid-template-columns:minmax(0,1fr) 245px; }
  .process__grid { grid-template-columns:1.15fr repeat(4,1fr); }
}

@media (max-width: 1080px) {
  .site-header__inner { grid-template-columns:220px 1fr auto; }
  .header-corner { display:none; }
  .header-cta { margin-right:12px; }
  .site-nav__list a { padding:0 11px;font-size:10px; }
  .hero__layout { grid-template-columns:1fr; }
  .hero__copy { min-height:auto;border-right:0;border-bottom:1px solid var(--line); }
  .hero__copy-inner { min-height:500px; }
  .hero__visual { min-height:540px; }
  .hero__facts { grid-column:auto;grid-template-columns:repeat(2,1fr); }
  .hero-fact:nth-child(2) { border-right:0; }
  .hero-fact:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .indexed-section { grid-template-columns:44px minmax(0,1fr); }
  .solution-grid { grid-template-columns:repeat(2,1fr); }
  .solution-card:nth-child(2) { border-right:1px solid var(--line-dark); }
  .solution-card:nth-child(-n+2) { border-bottom:0; }
  .section-heading--split { grid-template-columns:1fr auto; }
  .section-heading__aside { display:none; }
  .intranet__grid { grid-template-columns:1fr; }
  .intranet-shell { min-height:0; }
  .case-grid { grid-template-columns:repeat(2,1fr); }
  .case-card:nth-child(2) { border-right:1px solid var(--line-dark); }
  .case-card:nth-child(-n+2) { border-bottom:0; }
  .process__grid { grid-template-columns:1fr 1fr; }
  .process__title { grid-column:1/-1;margin-bottom:24px; }
  .process-step { min-height:145px;border-top:1px solid var(--line); }
  .process-step:nth-child(2n) { border-left:0; }
  .final-cta__body { grid-template-columns:1fr; }
  .final-cta__copy { min-height:auto;border-right:0;border-bottom:1px solid #3a3d41; }
  .site-footer__inner { grid-template-columns:220px 1fr; }
  .site-footer__copy { grid-column:1/-1;padding:14px 27px;border-top:1px solid var(--line); }
}

@media (max-width: 820px) {
  .site-header { height:66px; }
  .site-header__rail { width:10px; }
  .site-header__inner { grid-template-columns:1fr 64px; margin-left:10px; }
  .brand { padding:0 18px; }
  .brand img,.custom-logo { max-width:165px;max-height:30px; }
  .header-cta { display:none; }
  .nav-toggle { display:flex;position:relative;z-index:20;width:64px;height:65px;flex-direction:column;justify-content:center;gap:5px;padding:0 20px;border:0;border-left:1px solid var(--line);background:#fff; }
  .nav-toggle span { display:block;width:23px;height:2px;background:#111;transition:.18s ease; }
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-nav { position:absolute;z-index:15;top:65px;right:0;left:10px;display:none;border-top:1px solid var(--line);border-bottom:1px solid var(--ink);background:#fff; }
  .site-nav.is-open { display:block; }
  .site-nav__list { display:block;height:auto; }
  .site-nav__list li { display:block; }
  .site-nav__list a { height:54px;padding:0 18px;border-right:0;border-bottom:1px solid var(--line);font-size:11px; }
  .site-nav__list a::before { display:block; }
  .site-nav__list a::after { display:none; }
  .hero__copy-inner { min-height:510px;padding:58px 24px 64px; }
  .hero h1 { font-size:clamp(49px,14vw,73px); }
  .hero__lead { font-size:15px; }
  .hero__mini-code { left:24px;bottom:20px; }
  .hero__visual { min-height:470px; }
  .laptop { top:68px;left:22px;width:82%; }
  .phone { right:19px;bottom:61px;width:126px; }
  .app--phone { min-height:242px; }
  .hero__system-note { right:15px; }
  .hero__facts { grid-template-columns:1fr 1fr; }
  .indexed-section { grid-template-columns:1fr; }
  .section-index { align-items:center;justify-content:flex-start;height:38px;padding:0 15px;border-right:0;border-bottom:1px solid var(--line);background:#111;color:#fff; }
  .section-body { padding:36px 18px 26px; }
  .section-heading--split { grid-template-columns:1fr;gap:16px; }
  .section-heading .text-link { justify-self:start; }
  .solution-grid { grid-template-columns:1fr; }
  .solution-card,.solution-card:nth-child(2),.solution-card:last-child { min-height:250px;border-right:1px solid var(--line-dark);border-bottom:0; }
  .solution-card:last-child { border-bottom:1px solid var(--line-dark); }
  .intranet-shell { grid-template-columns:1fr; }
  .documents-panel { border-right:0;border-bottom:1px solid var(--line); }
  .announcements-panel { display:grid;grid-template-columns:1fr 1fr;gap:0 15px; }
  .announcements-panel__head { grid-column:1/-1; }
  .case-grid { grid-template-columns:1fr; }
  .case-card,.case-card:nth-child(2),.case-card:last-child { border-right:1px solid var(--line-dark);border-bottom:0; }
  .case-card:last-child { border-bottom:1px solid var(--line-dark); }
  .process__grid { grid-template-columns:1fr; }
  .process__title { margin-bottom:16px; }
  .process-step,.process-step:nth-child(2n) { min-height:auto;padding:18px 0;border-top:1px solid var(--line);border-left:0; }
  .final-cta .section-index { background:#111; }
  .final-cta__copy { min-height:0;padding:44px 24px; }
  .final-cta__visual { min-height:330px; }
  .pixel-stairs i { width:36px; }
  .pixel-stairs i:nth-child(1){height:36px}.pixel-stairs i:nth-child(2){height:72px}.pixel-stairs i:nth-child(3){height:108px}.pixel-stairs i:nth-child(4){height:144px}.pixel-stairs i:nth-child(5){height:180px}
  .site-footer__inner { grid-template-columns:1fr; }
  .brand--footer { min-height:76px;border-right:0;border-bottom:1px solid var(--line); }
  .footer-nav__list { flex-wrap:wrap;gap:14px 22px;padding:22px 24px; }
  .site-footer__copy { grid-column:auto;padding:16px 24px;white-space:normal; }
  .footer-code { padding-left:24px; }
  .contact-dialog__head { padding:31px 24px 22px; }
  .contact-dialog__head h2 { font-size:30px; }
  .contact-form { padding:24px; }
  .form-grid { grid-template-columns:1fr; }
  .form-notice { margin:18px 24px 0; }
}

@media (max-width: 560px) {
  .tech-label { font-size:9px;letter-spacing:.09em; }
  .hero__copy-inner { min-height:470px; }
  .hero h1 { font-size:46px;line-height:.91; }
  .hero__visual { min-height:390px; }
  .laptop { top:77px;left:14px;width:88%; }
  .laptop__lid { padding:6px 6px 9px;border-width:3px; }
  .app--desktop { grid-template-columns:82px 1fr; }
  .app__sidebar { padding:10px 7px; }
  .app__nav { padding:5px 3px;font-size:5px; }
  .app__nav .icon { width:8px;height:8px; }
  .app__brand { margin-bottom:10px;font-size:7px; }
  .app__main { padding:8px; }
  .app__top { margin-bottom:8px; }
  .app__search { width:100px;padding:4px 6px;font-size:5px; }
  .app__avatar { width:17px;height:17px;font-size:6px; }
  .app__main h3 { font-size:10px; }
  .app__muted { margin-bottom:8px;font-size:5px; }
  .app__kpis { gap:4px;margin-bottom:6px; }
  .app__kpis > div { padding:5px; }
  .app__kpis span,.app__kpis small { font-size:4px; }
  .app__kpis strong { font-size:11px; }
  .app__bottom { gap:5px; }
  .app__panel { min-height:64px;padding:5px; }
  .app__panel>strong { margin-bottom:4px;font-size:5px; }
  .app__notice { gap:3px;margin:3px 0;padding:3px; }
  .app__notice i { width:2px;height:12px; }
  .app__notice span { font-size:4px; }
  .mini-calendar { gap:1px; }
  .mini-calendar span { font-size:3.5px; }
  .phone { right:10px;bottom:48px;width:91px;padding:4px;border-width:3px;border-radius:13px; }
  .phone__speaker { top:6px;width:23px;height:3px; }
  .app--phone { min-height:175px;padding:14px 5px 5px;border-radius:9px; }
  .phone__brand { margin-bottom:8px;font-size:5px; }
  .phone__hello { margin-bottom:5px;font-size:7px; }
  .phone__item { gap:3px;margin:3px 0;padding:4px 3px; }
  .phone__item>span { width:13px;height:13px;font-size:5px; }
  .phone__item p { font-size:4px; }
  .phone__dock { margin-top:7px;padding-top:4px; }
  .phone__dock i { width:7px;height:2px; }
  .hero__system-note { top:18px;font-size:6px; }
  .hero__black-strip { left:36%;height:37px; }
  .hero__black-strip span { padding-left:13px;font-size:6px; }
  .hero__facts { grid-template-columns:1fr; }
  .hero-fact,.hero-fact:nth-child(2) { border-right:0;border-bottom:1px solid var(--line); }
  .hero-fact:last-child { border-bottom:0; }
  .section-heading h2 { font-size:35px; }
  .intranet__copy h2 { font-size:34px; }
  .benefit-row { display:grid;gap:11px; }
  .documents-panel { padding:12px; }
  .documents-tabs { overflow-x:auto; }
  .doc-row { grid-template-columns:1.5fr .8fr .7fr;font-size:6px; }
  .doc-row span:last-child { display:none; }
  .announcements-panel { grid-template-columns:1fr;padding:12px; }
  .case-card__image { height:165px; }
  .final-cta__copy h2 { font-size:38px; }
  .next-level { top:24px;right:18px;font-size:15px; }
  .final-code { right:16px;bottom:15px;font-size:6px; }
  .contact-dialog { width:calc(100vw - 18px); }
  .contact-dialog__head h2 { font-size:26px; }
}

/* ==========================================================
   v0.4 - typography, sharper hero, motion and scroll UX
   ========================================================== */

:root {
  --ease-out: cubic-bezier(.22,.78,.22,1);
  --shadow-block: 10px 10px 0 rgba(17,18,20,.08);
}

/* Better line breaking. Large headings should feel deliberate, not accidental. */
.hero h1,
.section-heading h2,
.intranet__copy h2,
.process__title h2,
.final-cta__copy h2,
.contact-dialog__head h2 {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.hero h1 {
  max-width: 610px;
  font-size: clamp(48px, 4.55vw, 72px);
  line-height: .92;
  letter-spacing: -.045em;
}
.hero__lead {
  max-width: 565px;
  font-size: 15.5px;
  line-height: 1.58;
}
.section-heading h2 {
  max-width: 690px;
  font-size: clamp(32px, 3.05vw, 46px);
  line-height: .98;
  letter-spacing: -.03em;
}
.intranet__copy h2 {
  max-width: 610px;
  font-size: clamp(32px, 2.95vw, 45px);
  line-height: .98;
  letter-spacing: -.03em;
}
.process__title h2 {
  max-width: 430px;
  font-size: clamp(29px, 2.55vw, 39px);
  line-height: .98;
  letter-spacing: -.025em;
}
.final-cta__copy h2 {
  max-width: 650px;
  font-size: clamp(36px, 3.2vw, 50px);
  line-height: .98;
  letter-spacing: -.03em;
}
.solution-card h3 { max-width: 220px; font-size: 19px; line-height: 1.1; }
.solution-card p { font-size: 13px; line-height: 1.52; }
.case-card h3 { font-size: 16px; line-height: 1.12; }
.case-card p { font-size: 11.5px; }

/* Scroll progress */
.scroll-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}

/* Sharper, more architectural hero */
.hero__copy,
.hero__copy-inner,
.hero__visual { min-height: 560px; }
.hero__copy-inner { padding-top: 56px; padding-bottom: 62px; }
.hero__visual {
  isolation: isolate;
  background: #17191c;
}
.hero__visual::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, #1a1c1f 0 18%, #303338 18% 33%, #222529 33% 55%, #111315 55% 72%, #2b2e32 72% 100%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
}
.hero__visual::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(90deg, transparent 55%, rgba(0,0,0,.28));
}
.hero__visual-grid {
  z-index: 1;
  width: 31%;
  border-left-color: rgba(255,255,255,.16);
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px),
    rgba(0,0,0,.15);
  background-size: 36px 36px;
  will-change: transform;
}
.hero__monoliths {
  position: absolute;
  z-index: 2;
  inset: auto 0 48px 0;
  height: 58%;
  pointer-events: none;
  will-change: transform;
}
.hero__monoliths i {
  position: absolute;
  bottom: 0;
  display: block;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 16px 18px 30px rgba(0,0,0,.18);
}
.hero__monoliths i:nth-child(1) { left: 0; width: 18%; height: 47%; background-color:#292c30; }
.hero__monoliths i:nth-child(2) { left: 16%; width: 18%; height: 72%; background-color:#202327; }
.hero__monoliths i:nth-child(3) { left: 31%; width: 23%; height: 34%; background-color:#34373b; }
.hero__monoliths i:nth-child(4) { right: 20%; width: 18%; height: 57%; background-color:#1b1d20; }
.hero__monoliths i:nth-child(5) { right: -3%; width: 24%; height: 84%; background-color:#2b2e32; }
.hero__axis {
  position: absolute;
  z-index: 4;
  top: 23px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.62);
  font: 700 7px/1 var(--mono);
  letter-spacing: .13em;
}
.hero__axis b { display:block; width:58px; height:1px; background:rgba(255,255,255,.35); }
.hero__axis span:first-child { color:var(--accent); }
.hero__system-note { z-index: 8; }
.hero__signal {
  position: absolute;
  z-index: 7;
  right: 25px;
  bottom: 78px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  width: 168px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  background: rgba(13,14,16,.84);
  box-shadow: 7px 7px 0 rgba(219,111,30,.22);
}
.hero__signal strong { color:var(--accent); font:800 22px/1 var(--display); }
.hero__signal span { font:700 7px/1.35 var(--mono); letter-spacing:.1em; }

.laptop {
  z-index: 5;
  top: 80px;
  left: 46px;
  width: min(690px, 82%);
  filter: drop-shadow(0 32px 34px rgba(0,0,0,.42));
  transform: perspective(1500px) rotateY(-2.3deg) rotateX(.5deg);
}
.laptop__lid { border-radius: 2px 2px 0 0; }
.phone { z-index: 7; }
.hero__black-strip { z-index: 8; }

/* Make placeholder photography intentional instead of pretending it is final project photography. */
.case-card__image { height: 166px; background:#1a1c1f; }
.case-card__image img {
  filter: grayscale(.88) contrast(1.05) brightness(.94);
  transform: none;
  image-rendering: auto;
}
.case-card__image::before { display:none; content:none; }
.case-card:hover img { transform:scale(1.025); filter:grayscale(.42) contrast(1.03) brightness(1); }

/* Interaction language: square, short and physical. */
.button,
.solution-card,
.case-card,
.process-step,
.intranet-shell,
.documents-panel,
.announcements-panel {
  transition-timing-function: var(--ease-out);
}
.button:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(17,18,20,.13); }
.button--block:hover { box-shadow: 6px 6px 0 rgba(219,111,30,.23); }
.text-link { transition: color .18s ease, transform .18s ease; }
.text-link:hover { transform: translateX(3px); }
.solution-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-block); }
.case-card { transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s ease; }
.case-card:hover { z-index:2; transform: translate(-3px,-3px); border-color:var(--ink); box-shadow:var(--shadow-block); }

/* Subtle scroll reveals - not a theme park. */
.reveal {
  opacity: 0;
  transform: translate3d(0,18px,0);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity:1; transform:translate3d(0,0,0); }
.solution-grid .reveal:nth-child(2), .case-grid .reveal:nth-child(2) { transition-delay:.055s; }
.solution-grid .reveal:nth-child(3), .case-grid .reveal:nth-child(3) { transition-delay:.11s; }
.solution-grid .reveal:nth-child(4), .case-grid .reveal:nth-child(4) { transition-delay:.165s; }

/* Parallax variables are driven by JS and intentionally tiny. */
[data-parallax] { transform: translate3d(0,var(--parallax-y,0),0); }
.final-cta__visual img {
  height: 112%;
  top: -6%;
  transform: translate3d(0,var(--parallax-bg-y,0),0) scale(1.035);
  will-change: transform;
}

/* Back to top */
.back-to-top {
  position: fixed;
  z-index: 850;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 52px;
  height: 52px;
  padding: 5px;
  grid-template-rows: 1fr auto;
  place-items: center;
  border: 1px solid #fff;
  color: #fff;
  background: var(--ink);
  box-shadow: 5px 5px 0 rgba(219,111,30,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s var(--ease-out), visibility .22s ease, background .18s ease;
}
.back-to-top.is-visible { opacity:1; visibility:visible; transform:none; }
.back-to-top:hover { background:var(--accent); }
.back-to-top .icon { width:18px; height:18px; }
.back-to-top span { font:700 6px/1 var(--mono); letter-spacing:.12em; }

@media (min-width: 1281px) {
  .section-body { padding-top: 42px; padding-bottom: 32px; }
  .solution-card { min-height: 288px; }
  .hero-fact { padding-top: 24px; padding-bottom: 21px; }
}

@media (max-width: 1280px) {
  .hero h1 { font-size: clamp(47px,5.2vw,66px); }
  .laptop { left:30px; width:83%; }
}

@media (max-width: 1080px) {
  .hero__copy,
  .hero__copy-inner { min-height: 480px; }
  .hero__visual { min-height: 520px; }
  .hero h1 { max-width:760px; }
  .hero__signal { right:22px; }
}

@media (max-width: 820px) {
  .hero__copy-inner { min-height: 450px; padding-top:50px; }
  .hero h1 { font-size: clamp(44px,11.5vw,63px); max-width:670px; }
  .hero__visual { min-height: 455px; }
  .hero__monoliths { height: 53%; }
  .hero__axis { left:14px; }
  .hero__signal { right:14px; bottom:56px; width:150px; }
  .section-heading h2 { font-size: clamp(31px,8.5vw,39px); }
  .intranet__copy h2 { font-size: clamp(30px,8vw,38px); }
  .process__title h2 { font-size: clamp(29px,7.5vw,36px); }
  .final-cta__copy h2 { font-size: clamp(34px,9vw,44px); }
  .back-to-top { right:14px; bottom:14px; width:47px; height:47px; }
}

@media (max-width: 560px) {
  .hero__copy-inner { min-height: 430px; }
  .hero h1 { font-size: 41px; line-height:.94; }
  .hero__lead { font-size:14px; }
  .hero__visual { min-height: 372px; }
  .hero__system-note { display:none; }
  .hero__signal { right:9px; bottom:45px; width:128px; padding:8px 9px; }
  .hero__signal strong { font-size:18px; }
  .hero__signal span { font-size:5.5px; }
  .hero__axis { top:13px; font-size:5px; }
  .hero__axis b { width:30px; }
  .laptop { top:63px; }
  .section-heading h2 { font-size:32px; }
  .intranet__copy h2 { font-size:31px; }
  .process__title h2 { font-size:30px; }
  .final-cta__copy h2 { font-size:35px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax], .final-cta__visual img { transform:none !important; }
  .back-to-top { transition:none; }
}

/* ==========================================================
   v0.5 - identity pass: typography, about, level system
   ========================================================== */

/* The grid stays visible, but text must fit the module instead of fighting it. */
.process__grid {
  grid-template-columns: 1.55fr repeat(4, 1fr);
}
.process__title {
  padding-right: 32px;
}
.process__title h2 {
  max-width: 385px;
  font-size: clamp(27px, 2.15vw, 34px);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.process__title h2 span {
  display: inline-block;
  margin-top: 2px;
  font-size: .78em;
  letter-spacing: -.01em;
}
.process-step {
  padding-left: 16px;
  padding-right: 15px;
}
.process-step p {
  max-width: 180px;
}

.final-cta__body {
  grid-template-columns: .82fr 1.18fr;
}
.final-cta__copy {
  min-height: 405px;
  padding-right: 52px;
}
.final-cta__copy h2 {
  max-width: 540px;
  font-size: clamp(33px, 2.75vw, 43px);
  line-height: 1.015;
  letter-spacing: -.025em;
}
.final-cta__copy p:not(.tech-label) {
  max-width: 520px;
  font-size: 13px;
  line-height: 1.62;
}

/* About / philosophy. No stock team photo: the visual language is the system itself. */
.about__body {
  padding-top: 0;
  padding-bottom: 0;
  background-color: #f3f3f1;
}
.about__grid {
  display: grid;
  grid-template-columns: .93fr 1.07fr;
  min-height: 555px;
}
.about__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 54px 50px 16px;
  border-right: 1px solid var(--line-dark);
}
.about__copy h2 {
  max-width: 620px;
  margin: 0 0 25px;
  font: 800 clamp(34px, 3vw, 47px)/.98 var(--display);
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.about__copy > p:not(.tech-label) {
  max-width: 650px;
  margin: 0 0 15px;
  color: #4f5459;
  font-size: 13px;
  line-height: 1.62;
}
.about__copy > p strong {
  color: var(--ink);
  font-weight: 800;
}
.about__principle {
  display: grid;
  max-width: 520px;
  margin-top: 15px;
  grid-template-columns: 42px auto 1fr;
  align-items: center;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-height: 54px;
  font-family: var(--mono);
  text-transform: uppercase;
}
.about__principle span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
}
.about__principle strong,
.about__principle b {
  font-size: 10px;
  letter-spacing: .055em;
}
.about__principle strong { padding-right: 11px; }
.about__principle b { color: #676c71; font-weight: 700; }

.about__visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #17191c;
}
.about__matrix {
  position: relative;
  min-height: 555px;
  height: 100%;
  padding: 31px 35px;
  color: #fff;
  background:
    linear-gradient(132deg, #24272b 0 43%, #17191c 43% 100%);
}
.about__matrix::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 30%, rgba(0,0,0,.2));
  content: "";
  pointer-events: none;
}
.about__matrix-head {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font: 700 8px/1 var(--mono);
  letter-spacing: .14em;
}
.about__matrix-head b { color: var(--accent); font-weight: 800; }
.about__sectors {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(390px, 66%);
  margin-top: 28px;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.22);
  border-left: 1px solid rgba(255,255,255,.22);
}
.about__sectors span {
  min-height: 48px;
  padding: 13px 12px;
  border-right: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
  color: #d2d5d7;
  background: rgba(0,0,0,.1);
  font: 700 8px/1.25 var(--mono);
  letter-spacing: .07em;
}
.about__sectors span:nth-child(1),
.about__sectors span:nth-child(4) {
  color: #fff;
  background: rgba(219,111,30,.13);
}
.about__route {
  position: absolute;
  z-index: 5;
  right: 33px;
  bottom: 35px;
  left: 35px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.36);
}
.about__route > div {
  min-height: 92px;
  padding: 13px 11px 0;
  border-left: 1px solid rgba(255,255,255,.22);
}
.about__route > div:last-child { border-right: 1px solid rgba(255,255,255,.22); }
.about__route i {
  display: block;
  margin-bottom: 16px;
  color: var(--accent);
  font: normal 800 8px/1 var(--mono);
}
.about__route strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font: 800 9px/1 var(--mono);
  letter-spacing: .055em;
}
.about__route small {
  display: block;
  max-width: 120px;
  color: #aeb2b6;
  font: 600 7px/1.35 var(--mono);
}
.about__level-stack {
  position: absolute;
  z-index: 3;
  top: 78px;
  right: 28px;
  width: 33%;
  height: 250px;
  opacity: .92;
  will-change: transform;
}
.about__level-stack i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.about__level-stack i:nth-child(1) { right: 0; height: 42px; }
.about__level-stack i:nth-child(2) { right: 42px; height: 84px; }
.about__level-stack i:nth-child(3) { right: 84px; height: 126px; }
.about__level-stack i:nth-child(4) { right: 126px; height: 168px; }
.about__level-stack i:nth-child(5) { right: 168px; height: 210px; }
.about__level-stack i:nth-child(6) { right: 210px; height: 252px; border-color: rgba(219,111,30,.5); background: rgba(219,111,30,.08); }
.about__code {
  position: absolute;
  z-index: 4;
  top: 285px;
  right: 30px;
  color: #9da1a5;
  font: 700 7px/1.55 var(--mono);
  letter-spacing: .13em;
  text-align: right;
}

/* Hero v0.5: UI as an engineered object, not a generic laptop-on-a-desk photo. */
.hero__visual {
  background: #181a1d;
}
.hero__visual::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.052) 1px, transparent 1px),
    linear-gradient(90deg, #121416 0 12%, #2d3034 12% 29%, #1c1f22 29% 59%, #35383d 59% 71%, #111315 71% 100%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
}
.hero__monoliths i:nth-child(1) { left: -2%; width: 15%; height: 39%; }
.hero__monoliths i:nth-child(2) { left: 12%; width: 21%; height: 64%; }
.hero__monoliths i:nth-child(3) { left: 29%; width: 23%; height: 28%; }
.hero__monoliths i:nth-child(4) { right: 21%; width: 19%; height: 51%; }
.hero__monoliths i:nth-child(5) { right: -2%; width: 24%; height: 78%; }
.laptop {
  top: 87px;
  left: 7.5%;
  width: min(700px, 79%);
  filter: drop-shadow(18px 26px 28px rgba(0,0,0,.38));
  transform: none;
}
.laptop__lid {
  padding: 9px;
  border-width: 3px;
  border-radius: 0;
  background: #101214;
  box-shadow: 12px 12px 0 rgba(0,0,0,.22), 13px 13px 0 rgba(255,255,255,.08);
}
.laptop__base {
  width: 106%;
  height: 11px;
  margin-left: -3%;
  background: linear-gradient(180deg,#b9bdc0,#71767b);
  clip-path: polygon(0 0,100% 0,97.5% 100%,2.5% 100%);
}
.phone {
  top: 164px;
  right: 7.5%;
  border-radius: 4px;
  box-shadow: 9px 9px 0 rgba(0,0,0,.25), 10px 10px 0 rgba(219,111,30,.18);
}
.hero__signal {
  bottom: 72px;
  right: 8%;
}
.hero__black-strip {
  left: 38%;
}
.hero__black-strip::before {
  position: absolute;
  left: -45px;
  bottom: 0;
  width: 45px;
  height: 45px;
  background: var(--accent);
  content: "";
  opacity: .92;
}

/* Case study media: keep placeholders compact until real project screenshots replace them. */
.case-card__image {
  height: 150px;
}
.case-card__image img {
  filter: grayscale(.88) contrast(1.05) brightness(.94);
}
.case-card__image::after {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.33));
}
.case-card__content {
  min-height: 126px;
}

/* Final visual: architecture + landscape = "more time", without making the image carry the whole layout. */
.final-cta__visual img {
  filter: grayscale(1) contrast(1.14) brightness(.57);
  opacity: .72;
}
.final-cta__blocks {
  position: absolute;
  z-index: 4;
  right: 6%;
  bottom: 0;
  width: 42%;
  height: 67%;
  pointer-events: none;
}
.final-cta__blocks i {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(12,13,15,.2);
  backdrop-filter: blur(1px);
}
.final-cta__blocks i:nth-child(1) { right: 0; width: 18%; height: 18%; }
.final-cta__blocks i:nth-child(2) { right: 18%; width: 18%; height: 35%; }
.final-cta__blocks i:nth-child(3) { right: 36%; width: 18%; height: 51%; }
.final-cta__blocks i:nth-child(4) { right: 54%; width: 18%; height: 68%; }
.final-cta__blocks i:nth-child(5) { right: 72%; width: 18%; height: 84%; border-color: rgba(219,111,30,.42); }
.next-level {
  z-index: 7;
  top: 34px;
  right: 31px;
  font-size: 16px;
  line-height: 1.18;
}
.final-code { z-index: 7; }

@media (max-width: 1280px) {
  .process__grid { grid-template-columns: 1.35fr repeat(4,1fr); }
  .process__title h2 { font-size: clamp(26px,2.2vw,31px); }
  .about__copy { padding-right: 38px; }
  .about__level-stack { right: 18px; transform: scale(.9); transform-origin: right bottom; }
}

@media (max-width: 1080px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__copy { min-height: auto; padding: 46px 24px 42px 4px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .about__matrix { min-height: 500px; }
  .about__level-stack { right: 20px; }
  .process__grid { grid-template-columns: 1fr 1fr; }
  .process__title { grid-column: 1/-1; margin-bottom: 18px; }
  .process__title h2 { max-width: 620px; font-size: clamp(28px,4.3vw,38px); }
  .process-step { min-height: 145px; }
  .final-cta__body { grid-template-columns: 1fr; }
  .final-cta__copy { min-height: auto; }
}

@media (max-width: 820px) {
  .about__copy h2 { font-size: clamp(31px,8vw,39px); }
  .about__matrix { min-height: 540px; padding: 27px 23px; }
  .about__sectors { width: 68%; }
  .about__route { right: 23px; left: 23px; }
  .about__level-stack { right: 8px; top: 90px; transform: scale(.72); transform-origin: right top; }
  .about__code { right: 22px; }
  .process__title h2 { font-size: clamp(27px,7vw,34px); }
  .final-cta__copy h2 { max-width: 580px; font-size: clamp(31px,7.5vw,39px); }
}

@media (max-width: 560px) {
  .about__copy { padding: 35px 0 34px; }
  .about__copy h2 { font-size: 31px; }
  .about__copy > p:not(.tech-label) { font-size: 12.5px; }
  .about__principle { grid-template-columns: 34px 1fr; padding: 8px 0; }
  .about__principle b { grid-column: 2; margin-top: 3px; }
  .about__matrix { min-height: 610px; padding: 22px 16px; }
  .about__sectors { width: 100%; margin-top: 22px; }
  .about__level-stack { top: 220px; right: -18px; opacity: .58; transform: scale(.6); }
  .about__code { top: 375px; right: 16px; }
  .about__route { right: 16px; bottom: 20px; left: 16px; grid-template-columns: 1fr 1fr; }
  .about__route > div { min-height: 78px; border-bottom: 1px solid rgba(255,255,255,.22); }
  .process__title h2 { font-size: 29px; }
  .process__title h2 span { font-size: .76em; }
  .final-cta__copy h2 { font-size: 34px; }
  .next-level { max-width: 160px; font-size: 13px; }
}


/* ==========================================================
   v0.6 - component consistency + recommendations
   ========================================================== */

/* Shared-border grids save pixels, but hover needs a complete frame. */
.solution-card:hover,
.solution-card:focus-within,
.case-card:hover,
.case-card:focus-within {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-block);
}

/* Process heading: one visual voice on every line. */
.process__grid {
  grid-template-columns: 1.62fr repeat(4, 1fr);
}
.process__title h2 {
  max-width: 390px;
  font-size: clamp(27px, 2vw, 32px);
  line-height: .99;
  letter-spacing: -.022em;
}
.process__title h2 span {
  display: inline;
  margin: 0;
  font-size: 1em;
  letter-spacing: inherit;
}

/* Recommendations / logo wall.
   Each mark lives on the same stage. Wide and square logos get only
   a different maximum footprint, never a different card size. */
.recommendations__body {
  padding-top: 0;
  padding-bottom: 0;
  background: #f7f7f5;
}
.recommendations__head {
  display: grid;
  min-height: 155px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  gap: 42px;
  align-items: center;
  padding: 28px 22px 26px;
  border-bottom: 1px solid var(--line-dark);
}
.recommendations__head h2 {
  max-width: 720px;
  margin: 0;
  font: 800 clamp(28px, 2.55vw, 39px)/.98 var(--display);
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.recommendations__head > p {
  max-width: 540px;
  margin: 0;
  color: #5b6065;
  font-size: 12.5px;
  line-height: 1.6;
}
.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-left: 1px solid var(--line-dark);
}
.recommendation-logo {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 152px;
  place-items: center;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,.84);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background-color .22s ease;
}
.recommendation-logo__index {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #8a8e92;
  font: 700 8px/1 var(--mono);
}
.recommendation-logo__stage {
  display: grid;
  width: 100%;
  height: 92px;
  padding: 17px 20px;
  place-items: center;
}
.recommendation-logo__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 54px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .48;
  transition: filter .24s ease, opacity .24s ease, transform .24s var(--ease-out);
}
.recommendation-logo--wide .recommendation-logo__stage img {
  max-width: 90%;
  max-height: 48px;
}
.recommendation-logo--compact .recommendation-logo__stage img {
  max-width: 76%;
  max-height: 52px;
}
.recommendation-logo--square .recommendation-logo__stage img {
  max-width: 58px;
  max-height: 58px;
}
.recommendation-logo:hover,
.recommendation-logo:focus-within {
  z-index: 2;
  transform: translate(-3px, -3px);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-block);
}
.recommendation-logo:hover .recommendation-logo__stage img,
.recommendation-logo:focus-within .recommendation-logo__stage img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.025);
}

@media (max-width: 1280px) {
  .process__grid { grid-template-columns: 1.45fr repeat(4,1fr); }
  .process__title h2 { font-size: clamp(26px, 2vw, 30px); }
  .recommendation-grid { grid-template-columns: repeat(3, 1fr); }
  .recommendation-logo { min-height: 138px; }
}

@media (max-width: 820px) {
  .recommendations__head { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 31px 20px 28px; }
  .recommendations__head h2 { font-size: clamp(27px, 7vw, 34px); }
  .recommendations__head > p { max-width: 620px; }
  .process__title h2 { max-width: 500px; font-size: clamp(27px, 6.5vw, 32px); }
}

@media (max-width: 560px) {
  .recommendation-grid { grid-template-columns: repeat(2, 1fr); }
  .recommendation-logo { min-height: 122px; }
  .recommendation-logo__stage { height: 82px; padding: 14px 12px; }
  .recommendation-logo__stage img { max-height: 46px; }
  .recommendation-logo--wide .recommendation-logo__stage img { max-height: 40px; }
  .recommendation-logo--square .recommendation-logo__stage img { max-width: 48px; max-height: 48px; }
  .process__title h2 { font-size: 28px; line-height: 1; }
}

/* v0.6 responsive corrections must follow the earlier v0.5 media blocks. */
@media (max-width: 1080px) {
  .process__grid { grid-template-columns: 1fr 1fr; }
  .process__title { grid-column: 1 / -1; margin-bottom: 18px; }
  .process__title h2 { max-width: 520px; font-size: clamp(28px, 4.1vw, 34px); }
}

@media (max-width: 560px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__title { grid-column: auto; }
  .process__title h2 { max-width: 360px; font-size: 28px; }
}

/* ==========================================================
   v0.7 - recommendations with real logos + use cases refresh
   ========================================================== */

.solution-card,
.case-card {
  position: relative;
}
.solution-card:hover,
.solution-card:focus-within,
.case-card:hover,
.case-card:focus-within {
  z-index: 3;
}

/* Use case cards */
.case-card__image {
  background: linear-gradient(180deg, #f5f5f1 0%, #eceee9 100%);
}
.case-card__image img {
  filter: none;
  object-fit: cover;
}
.case-card__eyebrow {
  margin: 0 0 9px;
  color: #7b8186;
  font: 700 11px/1.35 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.case-card__content {
  display: grid;
  gap: 0;
}
.case-card__content h3 {
  margin-top: 0;
}
.case-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 14px;
}
.case-card__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  background: #f5f5f2;
  color: #1c2126;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.case-card__result {
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,22,26,.12);
  color: #24292e;
  font-size: 13px;
  line-height: 1.6;
}
.case-card__result::before {
  content: 'Efekt: ';
  color: var(--accent);
  font-weight: 800;
}

/* Recommendations wall */
.recommendation-logo__link {
  display: grid;
  width: 100%;
  height: 100%;
  align-content: center;
  justify-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.recommendation-logo__name {
  display: block;
  width: 100%;
  padding: 0 18px 18px;
  color: #666c72;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.recommendation-logo:hover .recommendation-logo__name,
.recommendation-logo:focus-within .recommendation-logo__name {
  color: #23272c;
}
.recommendation-logo__stage {
  height: 102px;
  padding: 18px 20px 12px;
}
.recommendation-logo__stage img {
  max-width: 84%;
  max-height: 58px;
}
.recommendation-logo--wide .recommendation-logo__stage img {
  max-width: 90%;
  max-height: 50px;
}
.recommendation-logo--compact .recommendation-logo__stage img {
  max-width: 76%;
  max-height: 64px;
}
.recommendation-logo--square .recommendation-logo__stage img {
  max-width: 66px;
  max-height: 66px;
}
.recommendation-logo:hover,
.recommendation-logo:focus-within {
  transform: translate(-4px, -4px);
}

/* Headline consistency */
.process__grid {
  grid-template-columns: 1.95fr repeat(4, 1fr);
}
.process__title h2 {
  display: grid;
  gap: .06em;
  max-width: 560px;
  font-size: clamp(28px, 2.1vw, 34px);
  line-height: .98;
}
.process__title h2 span {
  display: block;
  margin: 0;
  font-size: 1em;
  letter-spacing: inherit;
}
.final-cta__copy h2 {
  display: grid;
  gap: .06em;
  max-width: 540px;
  font-size: clamp(36px, 3vw, 48px);
  line-height: .95;
}
.final-cta__copy h2 span {
  display: block;
}

@media (max-width: 1280px) {
  .process__grid {
    grid-template-columns: 1.7fr repeat(4, 1fr);
  }
}

@media (max-width: 1080px) {
  .process__grid {
    grid-template-columns: 1fr 1fr;
  }
  .process__title h2 {
    max-width: 520px;
    font-size: clamp(28px, 4.2vw, 35px);
  }
}

@media (max-width: 820px) {
  .recommendation-logo__stage {
    height: 94px;
  }
  .recommendation-logo__name {
    padding-bottom: 16px;
  }
  .final-cta__copy h2 {
    max-width: 580px;
    font-size: clamp(32px, 8vw, 40px);
  }
}

@media (max-width: 560px) {
  .process__title h2 {
    max-width: 360px;
    font-size: 28px;
  }
  .recommendation-logo__stage {
    height: 84px;
    padding: 14px 12px 8px;
  }
  .recommendation-logo__name {
    padding: 0 10px 14px;
    font-size: 9px;
  }
  .recommendation-logo__stage img {
    max-height: 48px;
  }
  .recommendation-logo--wide .recommendation-logo__stage img {
    max-height: 40px;
  }
  .recommendation-logo--square .recommendation-logo__stage img {
    max-width: 54px;
    max-height: 54px;
  }
  .case-card__chips span {
    min-height: 28px;
    padding: 0 10px;
  }
  .final-cta__copy h2 {
    font-size: 34px;
  }
}

/* ==========================================================
   v0.8 - compact use-case cards + detail pages + logo polish
   ========================================================== */

/* Homepage use cases return to a lighter, image-led card. */
.case-card__link {
  display: block !important;
  height: 100%;
  color: inherit !important;
  text-decoration: none;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.case-card__image {
  height: 178px;
  background: #1d2024;
}
.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.92) contrast(1.05) brightness(.88);
  transition: transform .28s var(--ease-out), filter .28s ease;
}
.case-card:hover .case-card__image img,
.case-card:focus-within .case-card__image img {
  transform: scale(1.035);
  filter: grayscale(.18) contrast(1.02) brightness(.96);
}
.case-card__content {
  display: flex;
  min-height: 168px;
  flex-direction: column;
  padding: 17px 16px 18px;
}
.case-card__content h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.case-card__content > p {
  min-height: 0;
  margin: 0 0 17px;
  color: #60656a;
  font-size: 12px;
  line-height: 1.5;
}
.case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}
.case-card__cta .icon {
  width: 14px;
  height: 14px;
}

/* Lexus source contained a large white frame. The cropped asset plus this
   dedicated footprint keeps its optical size close to the other logos. */
.recommendation-logo--lexus .recommendation-logo__stage img {
  max-width: 78%;
  max-height: 58px;
}

/* No punctuation-as-decoration in display headings. */
.hero h1,
.section-heading h2,
.intranet__copy h2,
.about__copy h2,
.recommendations__head h2,
.process__title h2,
.final-cta__copy h2,
.use-case-detail h1,
.use-case-detail h2 {
  text-wrap: balance;
}

/* Use case detail pages */
.use-case-detail {
  overflow: hidden;
  background: #fff;
}
.use-case-hero {
  display: grid;
  min-height: 610px;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  border-bottom: 1px solid var(--line-dark);
}
.use-case-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 7vw, 100px) clamp(30px, 5vw, 82px);
  border-right: 1px solid var(--line-dark);
}
.use-case-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-bottom: 48px;
  color: #5f6469;
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.use-case-back .icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}
.use-case-hero__copy h1 {
  max-width: 760px;
  margin: 14px 0 22px;
  font: 800 clamp(46px, 6vw, 88px)/.91 var(--display);
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.use-case-hero__lead {
  max-width: 680px;
  margin: 0 0 28px;
  color: #444a50;
  font-size: 17px;
  line-height: 1.65;
}
.use-case-hero__copy .button {
  align-self: flex-start;
}
.use-case-hero__media {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  background: #141619;
}
.use-case-hero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.34));
  content: '';
}
.use-case-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.92) contrast(1.08) brightness(.82);
}
.use-case-hero__badge {
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 36px;
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(16,18,20,.72);
  color: #fff;
  backdrop-filter: blur(6px);
}
.use-case-hero__badge span {
  font: 700 9px/1 var(--mono);
  letter-spacing: .14em;
}
.use-case-hero__badge strong {
  margin-top: -12px;
  color: var(--accent);
  font: 800 38px/1 var(--display);
}
.use-case-hero__code {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 32px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
  color: #fff;
  font: 700 10px/1.55 var(--mono);
  letter-spacing: .1em;
}

.use-case-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.use-case-story__block {
  min-height: 350px;
  padding: clamp(42px, 6vw, 78px);
  border-right: 1px solid var(--line-dark);
}
.use-case-story__block:last-child {
  border-right: 0;
}
.use-case-story__block h2,
.use-case-system__copy h2,
.use-case-next__inner h2 {
  margin: 12px 0 20px;
  font: 800 clamp(32px, 3.2vw, 50px)/.96 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.use-case-story__block p:not(.tech-label),
.use-case-next__inner p:not(.tech-label) {
  max-width: 700px;
  margin: 0;
  color: #53595f;
  font-size: 15px;
  line-height: 1.75;
}

.use-case-system__grid {
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
}
.use-case-system__copy {
  padding: clamp(42px, 5vw, 74px);
  border-right: 1px solid var(--line-dark);
}
.use-case-module-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.use-case-module-list span {
  min-height: 54px;
  padding: 17px 16px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,.62);
  color: #20252a;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.use-case-result {
  margin-top: 34px;
  padding: 22px 0 0;
  border-top: 3px solid var(--ink);
}
.use-case-result span {
  color: var(--accent);
  font: 800 10px/1 var(--mono);
  letter-spacing: .12em;
}
.use-case-result p {
  margin: 10px 0 0;
  color: #3e444a;
  font-size: 15px;
  line-height: 1.65;
}
.use-case-system__visual {
  display: grid;
  min-height: 560px;
  place-items: center;
  padding: clamp(34px, 5vw, 70px);
}
.use-case-mockup-frame {
  width: min(100%, 920px);
  border: 1px solid var(--line-dark);
  background: #fff;
  box-shadow: 14px 14px 0 rgba(17,18,20,.07);
}
.use-case-mockup-frame__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-dark);
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
}
.use-case-mockup-frame__top b {
  color: var(--accent);
}
.use-case-mockup-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.use-case-mockup-frame > p {
  margin: 0;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line-dark);
  color: #74797e;
  font: 600 10px/1.5 var(--mono);
}

.use-case-next__inner {
  display: grid;
  min-height: 300px;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 50px;
  align-items: center;
  padding: clamp(42px, 5vw, 72px);
}
.use-case-next__inner > div {
  max-width: 800px;
}
.use-case-next__inner .button {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .use-case-hero {
    grid-template-columns: 1fr;
  }
  .use-case-hero__copy {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .use-case-hero__media {
    min-height: 480px;
  }
  .use-case-story__grid,
  .use-case-system__grid {
    grid-template-columns: 1fr;
  }
  .use-case-story__block,
  .use-case-system__copy {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .use-case-next__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .use-case-next__inner .button {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .case-card__image {
    height: 165px;
  }
  .case-card__content {
    min-height: 150px;
  }
  .recommendation-logo--lexus .recommendation-logo__stage img {
    max-width: 86%;
    max-height: 48px;
  }
  .use-case-hero__copy {
    padding: 42px 22px 48px;
  }
  .use-case-back {
    margin-bottom: 32px;
  }
  .use-case-hero__copy h1 {
    font-size: clamp(40px, 14vw, 58px);
  }
  .use-case-hero__lead {
    font-size: 15px;
  }
  .use-case-hero__media {
    min-height: 360px;
  }
  .use-case-hero__badge {
    top: 18px;
    left: 18px;
    width: 88px;
    height: 88px;
  }
  .use-case-hero__badge strong {
    font-size: 30px;
  }
  .use-case-story__block,
  .use-case-system__copy,
  .use-case-system__visual,
  .use-case-next__inner {
    padding: 34px 20px;
  }
  .use-case-module-list {
    grid-template-columns: 1fr;
  }
  .use-case-next__inner .button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================
   v0.9 - story-driven use case template
   ========================================================== */

.use-case-detail--story {
  --uc-dark: #111316;
  --uc-soft: #f3f3f0;
  --uc-muted: #63696f;
  background: #fff;
}

/* Hero uses the real interface instead of a soft stock crop. */
.use-case-story-hero {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  grid-template-rows: minmax(520px, auto) auto;
  border-bottom: 1px solid var(--line-dark);
  background: #f8f8f6;
}
.use-case-story-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px,6.2vw,94px) clamp(30px,5vw,78px);
  border-right: 1px solid var(--line-dark);
}
.use-case-story-hero__copy h1 {
  max-width: 720px;
  margin: 14px 0 22px;
  font: 800 clamp(48px,5.6vw,82px)/.91 var(--display);
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.use-case-story-hero__lead {
  max-width: 670px;
  margin: 0 0 30px;
  color: #41474d;
  font-size: 16.5px;
  line-height: 1.68;
}
.use-case-story-hero__copy .button { align-self: flex-start; }
.use-case-story-hero__visual {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  padding: clamp(42px,5.5vw,82px) clamp(36px,4.5vw,72px);
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(145deg,#17191c,#26292d);
  background-size: 48px 48px,48px 48px,auto;
}
.use-case-story-hero__frame {
  position: relative;
  z-index: 2;
  width: min(100%,860px);
  border: 1px solid rgba(255,255,255,.48);
  background: #fff;
  box-shadow: 18px 18px 0 rgba(0,0,0,.22);
}
.use-case-story-hero__bar,
.use-case-interface__top {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-dark);
  background: #fff;
  color: #30353a;
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.use-case-story-hero__bar b,
.use-case-interface__top b { color: var(--accent); }
.use-case-story-hero__viewport {
  height: clamp(330px,32vw,515px);
  overflow: hidden;
  background: #f7f7f7;
}
.use-case-story-hero__viewport img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  filter: none;
}
.use-case-story-hero__code {
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 3;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  color: rgba(255,255,255,.78);
  font: 700 9px/1.55 var(--mono);
  letter-spacing: .09em;
}
.use-case-story-hero__points {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line-dark);
}
.use-case-hero-point {
  min-height: 132px;
  padding: 24px 26px;
  border-right: 1px solid var(--line-dark);
  background: rgba(255,255,255,.9);
}
.use-case-hero-point:last-child { border-right: 0; }
.use-case-hero-point strong {
  display: block;
  margin-bottom: 12px;
  color: var(--accent-strong);
  font: 800 11px/1 var(--mono);
  letter-spacing: .12em;
}
.use-case-hero-point p {
  margin: 0;
  color: #535a60;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Shared heading for case-story sections. */
.use-case-section-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,.72fr);
  gap: 34px 72px;
  align-items: end;
  padding: clamp(42px,5vw,68px) clamp(28px,4.2vw,66px) 34px;
  border-bottom: 1px solid var(--line-dark);
}
.use-case-section-heading .tech-label { grid-column: 1/-1; }
.use-case-section-heading h2,
.use-case-problem__intro h2,
.use-case-interface__intro h2,
.use-case-outcomes__heading h2 {
  margin: 0;
  font: 800 clamp(34px,3.3vw,52px)/.96 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.use-case-section-heading > p:not(.tech-label),
.use-case-interface__intro > p,
.use-case-outcomes__heading > p {
  max-width: 610px;
  margin: 0;
  color: #555c62;
  font-size: 14px;
  line-height: 1.68;
}
.use-case-section-heading--wide {
  grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr);
}

/* Before > change > now */
.use-case-transition__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}
.use-case-transition-card {
  position: relative;
  min-height: 285px;
  padding: 36px 32px 34px;
  border-right: 1px solid var(--line-dark);
  background: rgba(255,255,255,.88);
}
.use-case-transition-card:last-child { border-right: 0; }
.use-case-transition-card:nth-child(2) { background: #eeeFec; }
.use-case-transition-card:nth-child(3) {
  background: var(--uc-dark);
  color: #fff;
}
.use-case-transition-card__index {
  position: absolute;
  top: 18px;
  right: 18px;
  color: #858a90;
  font: 700 9px/1 var(--mono);
}
.use-case-transition-card:nth-child(3) .use-case-transition-card__index { color: #81868d; }
.use-case-transition-card h3 {
  max-width: 430px;
  margin: 34px 0 16px;
  font-size: clamp(22px,2vw,29px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.use-case-transition-card > p:last-child {
  max-width: 500px;
  margin: 0;
  color: #5b6167;
  font-size: 13.5px;
  line-height: 1.66;
}
.use-case-transition-card:nth-child(3) > p:last-child { color: #c4c8cc; }

/* Problem section */
.use-case-problem__layout {
  display: grid;
  grid-template-columns: minmax(330px,.78fr) minmax(0,1.22fr);
}
.use-case-problem__intro {
  padding: clamp(46px,5.2vw,76px);
  border-right: 1px solid var(--line-dark);
}
.use-case-problem__intro h2 { margin: 13px 0 22px; }
.use-case-problem__intro > p:last-child {
  max-width: 620px;
  margin: 0;
  color: #535a60;
  font-size: 15px;
  line-height: 1.75;
}
.use-case-problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.use-case-problem-card {
  min-height: 230px;
  padding: 30px 30px 28px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,.72);
}
.use-case-problem-card:nth-child(2n) { border-right: 0; }
.use-case-problem-card:nth-last-child(-n+2) { border-bottom: 0; }
.use-case-problem-card > span {
  color: var(--accent);
  font: 800 11px/1 var(--mono);
}
.use-case-problem-card h3 {
  margin: 26px 0 12px;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.use-case-problem-card p {
  margin: 0;
  color: #5a6167;
  font-size: 13px;
  line-height: 1.62;
}

/* Workflow */
.use-case-workflow__track {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.use-case-workflow-step {
  position: relative;
  min-height: 280px;
  padding: 36px 28px 32px;
  border-right: 1px solid var(--line-dark);
  background: rgba(255,255,255,.9);
}
.use-case-workflow-step:last-child { border-right: 0; }
.use-case-workflow-step > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--ink);
  color: var(--accent-strong);
  font: 800 11px/1 var(--mono);
}
.use-case-workflow-step:not(:last-child)::after {
  position: absolute;
  top: 55px;
  right: -9px;
  z-index: 3;
  width: 18px;
  height: 18px;
  background: var(--accent);
  clip-path: polygon(0 0,100% 50%,0 100%);
  content: '';
}
.use-case-workflow-step h3 {
  margin: 32px 0 14px;
  font-size: 21px;
  letter-spacing: -.025em;
}
.use-case-workflow-step p {
  margin: 0;
  color: #596066;
  font-size: 13px;
  line-height: 1.65;
}

/* Real interface */
.use-case-interface__intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.8fr);
  gap: 52px;
  align-items: end;
  padding: clamp(44px,5vw,72px) clamp(28px,4.2vw,66px) 30px;
}
.use-case-interface__intro h2 { margin-top: 12px; }
.use-case-interface__frame {
  width: min(calc(100% - clamp(40px,8vw,128px)),1280px);
  margin: 0 auto;
  border: 1px solid var(--line-dark);
  background: #fff;
  box-shadow: 16px 16px 0 rgba(17,18,20,.075);
}
.use-case-interface__frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}
.use-case-interface__modules {
  display: grid;
  width: min(calc(100% - clamp(40px,8vw,128px)),1280px);
  grid-template-columns: repeat(3,1fr);
  margin: 30px auto clamp(48px,6vw,76px);
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.use-case-interface__modules span {
  min-height: 52px;
  padding: 17px 16px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,.65);
  color: #24292e;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}

/* Results must be hard to miss. */
.use-case-outcomes__body {
  padding: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    #111316;
  background-size: 48px 48px;
  color: #fff;
}
.use-case-outcomes__heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.74fr);
  gap: 34px 70px;
  align-items: end;
  padding: clamp(54px,6vw,86px) clamp(30px,5vw,82px) 42px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.use-case-outcomes__heading .tech-label { grid-column: 1/-1; }
.use-case-outcomes__heading h2 { color: #fff; }
.use-case-outcomes__heading > p { color: #b8bdc1; }
.use-case-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.use-case-outcome {
  min-height: 300px;
  padding: 38px 30px 34px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.use-case-outcome:last-child { border-right: 0; }
.use-case-outcome > span {
  color: var(--accent);
  font: 800 11px/1 var(--mono);
}
.use-case-outcome h3 {
  margin: 60px 0 16px;
  color: #fff;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.use-case-outcome p {
  margin: 0;
  color: #bdc1c5;
  font-size: 13px;
  line-height: 1.68;
}
.use-case-outcomes__statement {
  margin: 0;
  padding: clamp(40px,5vw,68px) clamp(30px,5vw,82px);
  border-top: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font: 800 clamp(27px,3vw,45px)/1.05 var(--display);
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.use-case-outcomes__statement::before {
  content: '// ';
  color: var(--accent);
}

@media (max-width: 1120px) {
  .use-case-story-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .use-case-story-hero__copy {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .use-case-story-hero__visual { min-height: 560px; }
  .use-case-story-hero__points { grid-template-columns: 1fr 1fr; }
  .use-case-hero-point:nth-child(2) { border-right: 0; }
  .use-case-hero-point:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .use-case-problem__layout { grid-template-columns: 1fr; }
  .use-case-problem__intro { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .use-case-workflow__track { grid-template-columns: 1fr 1fr; }
  .use-case-workflow-step:nth-child(2) { border-right: 0; }
  .use-case-workflow-step:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .use-case-workflow-step:nth-child(2)::after { display:none; }
  .use-case-outcomes__grid { grid-template-columns: 1fr 1fr; }
  .use-case-outcome:nth-child(2) { border-right: 0; }
  .use-case-outcome:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 820px) {
  .use-case-section-heading,
  .use-case-section-heading--wide,
  .use-case-interface__intro,
  .use-case-outcomes__heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .use-case-transition__grid { grid-template-columns: 1fr; }
  .use-case-transition-card { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .use-case-transition-card:last-child { border-bottom: 0; }
  .use-case-problem__grid { grid-template-columns: 1fr; }
  .use-case-problem-card,
  .use-case-problem-card:nth-child(2n),
  .use-case-problem-card:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .use-case-problem-card:last-child { border-bottom: 0; }
  .use-case-interface__modules { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .use-case-story-hero__copy { padding: 42px 22px 48px; }
  .use-case-story-hero__copy h1 { font-size: clamp(40px,13vw,56px); }
  .use-case-story-hero__lead { font-size: 15px; }
  .use-case-story-hero__visual { min-height: 410px; padding: 28px 20px 38px; }
  .use-case-story-hero__viewport { height: 310px; }
  .use-case-story-hero__points { grid-template-columns: 1fr; }
  .use-case-hero-point,
  .use-case-hero-point:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .use-case-hero-point:last-child { border-bottom: 0; }
  .use-case-section-heading,
  .use-case-problem__intro,
  .use-case-interface__intro,
  .use-case-outcomes__heading { padding-left: 22px; padding-right: 22px; }
  .use-case-section-heading h2,
  .use-case-problem__intro h2,
  .use-case-interface__intro h2,
  .use-case-outcomes__heading h2 { font-size: 32px; }
  .use-case-workflow__track { grid-template-columns: 1fr; }
  .use-case-workflow-step,
  .use-case-workflow-step:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .use-case-workflow-step:last-child { border-bottom: 0; }
  .use-case-workflow-step::after { display:none; }
  .use-case-interface__frame,
  .use-case-interface__modules { width: calc(100% - 36px); }
  .use-case-interface__modules { grid-template-columns: 1fr; }
  .use-case-outcomes__grid { grid-template-columns: 1fr; }
  .use-case-outcome,
  .use-case-outcome:nth-child(2) { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .use-case-outcome:last-child { border-bottom: 0; }
  .use-case-outcome h3 { margin-top: 34px; }
  .use-case-outcomes__statement { font-size: 27px; }
}

/* ==========================================================
   v0.9.1 - use case narrative: A problem / B implementation / C result
   ========================================================== */

/* Summary A -> B -> C should be concise and unmistakable. */
.use-case-transition--summary .use-case-section-heading {
  padding-bottom: 34px;
}
.use-case-transition--summary .use-case-transition-card {
  min-height: 230px;
  padding: 30px 30px 28px;
}
.use-case-transition--summary .use-case-transition-card__index {
  top: 16px;
  right: 18px;
  color: var(--accent);
  font-size: 13px;
}
.use-case-transition--summary .use-case-transition-card h3 {
  margin-top: 24px;
  font-size: clamp(21px, 1.65vw, 26px);
}
.use-case-transition--summary .use-case-transition-card:nth-child(3) h3,
.use-case-transition--summary .use-case-transition-card:nth-child(3) .tech-label {
  color: #fff;
}
.use-case-transition--summary .use-case-transition-card:nth-child(3) .tech-label {
  opacity: .72;
}

/* Phase headings are deliberate section dividers, not another loose headline. */
.use-case-phase__heading {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(330px, .78fr);
  gap: 28px 34px;
  align-items: center;
  padding: clamp(42px, 5vw, 68px) clamp(28px, 4.8vw, 72px) 36px;
  border-bottom: 1px solid var(--line-dark);
}
.use-case-phase__key {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--accent);
  color: #fff;
  font: 800 25px/1 var(--display);
}
.use-case-phase__heading .tech-label {
  margin-bottom: 12px;
}
.use-case-phase__heading h2 {
  margin: 0;
  font: 800 clamp(31px, 3vw, 45px)/.97 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.use-case-phase__heading > p {
  max-width: 620px;
  margin: 0;
  color: #555c62;
  font-size: 14px;
  line-height: 1.72;
}

/* A / Problem */
.use-case-problem__grid--full {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.use-case-problem__grid--full .use-case-problem-card {
  min-height: 218px;
}

/* B / Implementation. Clean track, no arrows clipped by borders. */
.use-case-workflow__track--clean {
  border-bottom: 1px solid var(--line-dark);
}
.use-case-workflow__track--clean .use-case-workflow-step {
  min-height: 255px;
  padding-top: 30px;
}
.use-case-workflow__track--clean .use-case-workflow-step::after {
  display: none !important;
}
.use-case-workflow__track--clean .use-case-workflow-step::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: var(--accent);
  content: '';
}
.use-case-workflow__track--clean .use-case-workflow-step > span {
  border-color: #777d82;
  background: #fff;
}

/* Real interface belongs to implementation, but has its own visual surface. */
.use-case-interface-inline {
  margin-top: 0;
  padding-top: 8px;
  border-top: 12px solid #111316;
}
.use-case-interface-inline .use-case-interface__intro {
  padding-top: 46px;
}
.use-case-interface-inline .use-case-interface__frame {
  margin-top: 4px;
}

/* C / Result: people are the summary, not an afterthought. */
.use-case-outcomes__human {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.use-case-outcomes__human > div {
  min-height: 230px;
  padding: 34px clamp(28px, 4vw, 56px) 36px;
}
.use-case-outcomes__human > div:first-child {
  border-right: 1px solid rgba(255,255,255,.18);
}
.use-case-outcomes__human span {
  color: var(--accent);
  font: 800 11px/1 var(--mono);
  letter-spacing: .13em;
}
.use-case-outcomes__human strong {
  display: block;
  max-width: 540px;
  margin: 32px 0 14px;
  color: #fff;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.use-case-outcomes__human p {
  max-width: 590px;
  margin: 0;
  color: #bdc1c5;
  font-size: 13.5px;
  line-height: 1.72;
}

/* Give the major phases a visual pause. */
.use-case-phase--problem,
.use-case-phase--solution,
.use-case-phase--result {
  border-top: 14px solid #fff;
}
.use-case-phase--problem .section-body {
  background-color: #f5f5f2;
}
.use-case-phase--solution .section-body {
  background-color: #fff;
}
.use-case-phase--result {
  border-top-color: #e8e9e6;
}

@media (max-width: 1080px) {
  .use-case-phase__heading {
    grid-template-columns: 64px 1fr;
  }
  .use-case-phase__heading > p {
    grid-column: 2;
  }
}

@media (max-width: 820px) {
  .use-case-phase__heading {
    grid-template-columns: 52px 1fr;
    gap: 18px 20px;
    padding: 38px 22px 30px;
  }
  .use-case-phase__key {
    width: 46px;
    height: 46px;
    font-size: 21px;
  }
  .use-case-phase__heading > p {
    grid-column: 1 / -1;
  }
  .use-case-outcomes__human {
    grid-template-columns: 1fr;
  }
  .use-case-outcomes__human > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
}

@media (max-width: 560px) {
  .use-case-transition--summary .use-case-transition-card {
    min-height: 0;
  }
  .use-case-problem__grid--full {
    grid-template-columns: 1fr;
  }
  .use-case-problem__grid--full .use-case-problem-card,
  .use-case-problem__grid--full .use-case-problem-card:nth-child(2n),
  .use-case-problem__grid--full .use-case-problem-card:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .use-case-problem__grid--full .use-case-problem-card:last-child {
    border-bottom: 0;
  }
  .use-case-phase__heading {
    grid-template-columns: 1fr;
  }
  .use-case-phase__heading > p {
    grid-column: auto;
  }
  .use-case-phase__heading h2 {
    font-size: 31px;
  }
  .use-case-outcomes__human > div {
    min-height: 0;
    padding: 30px 22px 32px;
  }
}

/* ==========================================================
   v0.9.2 - use case copy polish + calmer result statement
   ========================================================== */
.use-case-outcomes__statement {
  padding: clamp(34px,4.2vw,54px) clamp(30px,5vw,82px);
  font-size: clamp(23px,2.15vw,33px);
  line-height: 1.13;
  letter-spacing: -.018em;
  text-transform: none;
}

@media (max-width: 820px) {
  .use-case-outcomes__statement {
    font-size: clamp(22px,5.5vw,29px);
  }
}

@media (max-width: 560px) {
  .use-case-outcomes__statement {
    padding: 30px 22px 34px;
    font-size: 24px;
    line-height: 1.16;
  }
}

/* ==========================================================
   v0.9.3 - hero-only interface + visible C phase marker
   ========================================================== */
.use-case-outcomes__heading {
  grid-template-columns: 74px minmax(0,1fr) minmax(300px,.74fr);
  gap: 28px 34px;
  align-items: center;
}
.use-case-outcomes__heading .tech-label {
  grid-column: auto;
  margin-bottom: 12px;
}
.use-case-phase__key--result {
  border-color: rgba(255,255,255,.55);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

@media (max-width: 1080px) {
  .use-case-outcomes__heading {
    grid-template-columns: 64px 1fr;
  }
  .use-case-outcomes__heading > p {
    grid-column: 2;
  }
}

@media (max-width: 820px) {
  .use-case-outcomes__heading {
    grid-template-columns: 52px 1fr;
    gap: 18px 20px;
  }
  .use-case-outcomes__heading > p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .use-case-outcomes__heading {
    grid-template-columns: 1fr;
  }
  .use-case-outcomes__heading > p {
    grid-column: auto;
  }
}

/* ==========================================================
   v0.9.5 - additional branches: webdesign + graphic design
   ========================================================== */

.text-link--static {
  cursor: default;
  pointer-events: none;
}

/* Home: two additional branches */
.extra-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.extra-service-card {
  position: relative;
  display: grid;
  min-height: 540px;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #fff;
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s ease;
}
.extra-service-card:hover,
.extra-service-card:focus-within {
  z-index: 2;
  transform: translate(-3px,-3px);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-block);
}
.extra-service-card__head {
  position: relative;
  z-index: 4;
  padding: 34px 34px 28px;
}
.extra-service-card__number {
  position: absolute;
  top: 18px;
  right: 18px;
  color: #858a90;
  font: 700 9px/1 var(--mono);
}
.extra-service-card h3 {
  max-width: 550px;
  margin: 0 0 14px;
  font: 800 clamp(27px,2.2vw,37px)/1 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.extra-service-card__head > p:not(.tech-label) {
  max-width: 590px;
  margin: 0 0 20px;
  color: #575d63;
  font-size: 13.5px;
  line-height: 1.62;
}
.extra-service-card__head > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.extra-service-card__head > a .icon { width: 15px; height: 15px; }
.extra-service-card__visual {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  background: #111316;
}
.extra-service-card__visual--web {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #121417;
  background-size: 34px 34px;
}
.web-stack {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255,255,255,.28);
  background: #fff;
  box-shadow: 10px 10px 0 rgba(0,0,0,.25);
}
.web-stack img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.web-stack--a { top: 22px; left: 5%; width: 58%; aspect-ratio: 16/8; transform: rotate(-2deg); }
.web-stack--b { top: 76px; right: 4%; width: 49%; aspect-ratio: 16/8; transform: rotate(2deg); }
.web-stack--c { bottom: -16px; left: 22%; width: 53%; aspect-ratio: 16/8; transform: rotate(-.8deg); }
.extra-service-card__visual--graphic {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #111316;
  background-size: 42px 42px;
}
.graphic-board {
  position: absolute;
  inset: 26px 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.graphic-board__label {
  position: absolute;
  top: 16px;
  left: 18px;
  color: #90969c;
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
}
.graphic-board strong {
  position: absolute;
  left: 7%;
  bottom: 33%;
  font: 800 clamp(34px,4vw,64px)/.9 var(--display);
  letter-spacing: -.04em;
}
.graphic-board b {
  position: absolute;
  left: 7%;
  bottom: 20%;
  color: var(--accent);
  font: 800 clamp(18px,2vw,28px)/1 var(--display);
}
.graphic-board em {
  position: absolute;
  right: 6%;
  bottom: 8%;
  color: #989da2;
  font: 700 10px/1 var(--mono);
  font-style: normal;
  letter-spacing: .1em;
}
.graphic-pixel { position: absolute; display: block; background: rgba(255,255,255,.12); }
.graphic-pixel.p1 { width: 18%; height: 32%; top: 14%; right: 11%; }
.graphic-pixel.p2 { width: 10%; height: 22%; top: 31%; right: 30%; background: var(--accent); }
.graphic-pixel.p3 { width: 8%; height: 12%; top: 16%; right: 33%; }
.graphic-pixel.p4 { width: 6%; height: 9%; top: 47%; right: 20%; background: rgba(255,255,255,.36); }
.graphic-pixel.p5 { width: 4%; height: 7%; top: 57%; right: 13%; background: var(--accent); }

/* Dedicated service pages */
.service-page .site-header { border-bottom-color: rgba(17,18,20,.16); }
.service-hero {
  display: grid;
  max-width: var(--max);
  min-height: 650px;
  margin: 0 auto;
  grid-template-columns: minmax(390px,.83fr) minmax(0,1.17fr);
  border-right: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.service-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 54px 58px;
  border-right: 1px solid var(--line-dark);
  background: rgba(255,255,255,.92);
}
.service-hero__copy h1 {
  max-width: 660px;
  margin: 0 0 22px;
  font: 800 clamp(46px,4.7vw,76px)/.9 var(--display);
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.service-hero__lead {
  max-width: 620px;
  margin: 0 0 27px;
  color: #4f555b;
  font-size: 15px;
  line-height: 1.66;
}
.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
}
.service-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 660px;
}
.service-hero__chips span {
  padding: 8px 10px;
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.74);
  font: 700 9px/1 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.service-hero__visual {
  position: relative;
  overflow: hidden;
  min-height: 650px;
}
.service-hero__visual--web {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #111316;
  background-size: 48px 48px;
}
.service-browser {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255,255,255,.28);
  background: #fff;
  box-shadow: 16px 16px 0 rgba(0,0,0,.32);
}
.service-browser__bar {
  display: flex;
  height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-bottom: 1px solid #d8dade;
  background: #f4f4f2;
}
.service-browser__bar i { width: 5px; height: 5px; border-radius: 50%; background: #a2a6aa; }
.service-browser__bar span { overflow: hidden; margin-left: 8px; color: #777c81; font: 600 8px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.service-browser img { display: block; width: 100%; height: auto; }
.service-browser--1 { z-index: 3; top: 92px; left: 9%; width: 76%; transform: rotate(-1deg); }
.service-browser--2 { z-index: 2; top: 292px; right: -4%; width: 64%; transform: rotate(2deg); }
.service-browser--3 { z-index: 1; bottom: -46px; left: 2%; width: 60%; transform: rotate(-2deg); }
.service-hero__code {
  position: absolute;
  z-index: 5;
  right: 22px;
  bottom: 22px;
  color: rgba(255,255,255,.48);
  font: 700 9px/1.6 var(--mono);
  letter-spacing: .1em;
}

.service-hero__visual--graphic {
  display: grid;
  place-items: center;
  padding: 56px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #111316;
  background-size: 48px 48px;
}
.service-design-board {
  position: relative;
  width: min(660px,100%);
  aspect-ratio: 1.12/1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.service-design-board__label { position:absolute; top:22px; left:24px; color:#8e949b; font:700 9px/1 var(--mono); letter-spacing:.12em; }
.service-design-board__mark {
  position:absolute;
  left:7%;
  bottom:13%;
  display:grid;
  width:140px;
  height:140px;
  place-items:center;
  background:var(--accent);
  color:#111316;
  font:800 92px/.8 var(--display);
}
.service-design-board strong { position:absolute; left:7%; top:31%; font:800 clamp(34px,4.2vw,66px)/.9 var(--display); letter-spacing:-.04em; }
.service-design-board b { position:absolute; left:7%; top:47%; color:#a4a9ae; font:700 13px/1 var(--mono); letter-spacing:.1em; }
.service-design-board__grid { position:absolute; inset:0 0 0 auto; width:45%; }
.service-design-board__grid i { position:absolute; bottom:0; width:14%; background:rgba(255,255,255,.12); }
.service-design-board__grid i:nth-child(1){left:0;height:18%}.service-design-board__grid i:nth-child(2){left:15%;height:29%}.service-design-board__grid i:nth-child(3){left:30%;height:44%;background:rgba(229,122,29,.65)}.service-design-board__grid i:nth-child(4){left:45%;height:56%}.service-design-board__grid i:nth-child(5){left:60%;height:72%}.service-design-board__grid i:nth-child(6){left:75%;height:88%;background:var(--accent)}
.service-design-board__accent { position:absolute; top:18%; right:11%; width:10px; height:10px; background:var(--accent); }

.service-intro__grid {
  display: grid;
  min-height: 240px;
  grid-template-columns: minmax(0,.95fr) minmax(340px,1.05fr);
  align-items: center;
  gap: 72px;
  padding: 42px 40px;
}
.service-intro__grid h2,
.service-process__head h2 {
  max-width: 700px;
  margin: 0;
  font: 800 clamp(31px,2.8vw,44px)/.96 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.service-intro__grid > p {
  max-width: 660px;
  margin: 0;
  color: #555b61;
  font-size: 14px;
  line-height: 1.75;
}

.web-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.web-project-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #fff;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.web-project-card:hover,
.web-project-card:focus-within {
  z-index: 2;
  transform: translate(-3px,-3px);
  box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-block);
}
.web-project-card__image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16/8.2;
  border-bottom: 1px solid var(--line-dark);
  background: #121417;
}
.web-project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(.58) contrast(1.02);
  transition: transform .3s var(--ease-out), filter .3s ease;
}
.web-project-card:hover .web-project-card__image img,
.web-project-card:focus-within .web-project-card__image img { transform: scale(1.025); filter: grayscale(0); }
.web-project-card__index { position:absolute; top:12px; right:12px; padding:6px 8px; background:#fff; color:#111316; font:700 9px/1 var(--mono); }
.web-project-card__content { padding: 24px 26px 26px; }
.web-project-card__content h3 { margin:0 0 10px; font-size:20px; line-height:1.12; letter-spacing:-.03em; text-wrap:balance; }
.web-project-card__content > p:not(.tech-label) { max-width:610px; margin:0 0 18px; color:#5a6066; font-size:13px; line-height:1.62; }
.web-project-card__content > a { display:inline-flex; align-items:center; gap:8px; color:var(--accent-strong); font-size:10.5px; font-weight:850; text-transform:uppercase; }
.web-project-card__content > a .icon { width:14px; height:14px; }
.web-project-card:nth-child(5) { grid-column: 1/-1; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); grid-template-rows: 1fr; }
.web-project-card:nth-child(5) .web-project-card__image { min-height:310px; aspect-ratio:auto; border-right:1px solid var(--line-dark); border-bottom:0; }
.web-project-card:nth-child(5) .web-project-card__content { display:flex; flex-direction:column; justify-content:center; }

.service-process__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(330px,.8fr);
  gap: 50px;
  align-items: end;
  padding: 40px 36px 32px;
  border-bottom: 1px solid var(--line-dark);
}
.service-process__head .tech-label { grid-column: 1/-1; margin-bottom:-24px; }
.service-process__head > p:last-child { margin:0; color:#565c62; font-size:13px; line-height:1.68; }
.service-process__grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.service-process__grid article,
.graphic-scope__grid article {
  position: relative;
  min-height: 230px;
  padding: 34px 25px 28px;
  border-right: 1px solid var(--line-dark);
  background: rgba(255,255,255,.82);
}
.service-process__grid article:last-child,
.graphic-scope__grid article:last-child { border-right:0; }
.service-process__grid article > span,
.graphic-scope__grid article > span { color:var(--accent); font:800 10px/1 var(--mono); }
.service-process__grid h3,
.graphic-scope__grid h3 { margin:32px 0 10px; font-size:18px; line-height:1.1; }
.service-process__grid p,
.graphic-scope__grid p { margin:0; color:#5b6167; font-size:12.5px; line-height:1.62; }

.graphic-scope__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line-dark); }

.service-cta {
  display:grid;
  max-width:var(--max);
  min-height:330px;
  margin:0 auto;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
  background:#111316;
  color:#fff;
}
.service-cta__copy { padding:55px 54px 50px; }
.service-cta__copy .tech-label { color:#9aa0a6; }
.service-cta__copy h2 { max-width:850px; margin:0 0 16px; font:800 clamp(34px,3.2vw,50px)/.94 var(--display); letter-spacing:-.04em; text-transform:uppercase; text-wrap:balance; }
.service-cta__copy > p:not(.tech-label) { max-width:740px; margin:0 0 25px; color:#c1c6ca; font-size:13.5px; line-height:1.65; }
.service-cta__code { display:flex; align-items:flex-end; justify-content:flex-end; padding:34px; border-left:1px solid rgba(255,255,255,.14); color:#71777d; font:700 10px/1.7 var(--mono); letter-spacing:.1em; }

@media (max-width: 1080px) {
  .extra-services__grid { grid-template-columns:1fr; }
  .extra-service-card { min-height:500px; }
  .service-hero { grid-template-columns:1fr; }
  .service-hero__copy { min-height:540px; border-right:0; border-bottom:1px solid var(--line-dark); }
  .service-hero__visual { min-height:560px; }
  .service-intro__grid { grid-template-columns:1fr; gap:24px; }
  .service-process__grid { grid-template-columns:repeat(2,1fr); }
  .service-process__grid article:nth-child(-n+2) { border-bottom:1px solid var(--line-dark); }
  .service-process__grid article:nth-child(2) { border-right:0; }
}

@media (max-width: 820px) {
  .service-hero__copy { min-height:0; padding:48px 28px 42px; }
  .service-hero__copy h1 { font-size:clamp(40px,10vw,60px); }
  .service-hero__visual { min-height:470px; }
  .service-browser--1 { top:70px; left:5%; width:82%; }
  .service-browser--2 { top:245px; width:68%; }
  .service-browser--3 { bottom:-10px; width:65%; }
  .service-intro__grid { min-height:0; padding:36px 25px; }
  .web-portfolio__grid { grid-template-columns:1fr; }
  .web-project-card:nth-child(5) { grid-column:auto; grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .web-project-card:nth-child(5) .web-project-card__image { min-height:0; aspect-ratio:16/8.2; border-right:0; border-bottom:1px solid var(--line-dark); }
  .service-process__head { grid-template-columns:1fr; gap:18px; padding:35px 25px 28px; }
  .service-process__head .tech-label { grid-column:auto; margin-bottom:0; }
  .graphic-scope__grid { grid-template-columns:1fr; }
  .graphic-scope__grid article { border-right:0; border-bottom:1px solid var(--line-dark); }
  .graphic-scope__grid article:last-child { border-bottom:0; }
  .service-cta { grid-template-columns:1fr; }
  .service-cta__copy { padding:45px 28px 40px; }
  .service-cta__code { min-height:100px; border-top:1px solid rgba(255,255,255,.14); border-left:0; }
}

@media (max-width: 560px) {
  .extra-service-card { min-height:470px; }
  .extra-service-card__head { padding:30px 20px 24px; }
  .extra-service-card h3 { font-size:29px; }
  .extra-service-card__visual { min-height:220px; }
  .graphic-board { inset:20px; }
  .service-hero__actions { align-items:flex-start; flex-direction:column; }
  .service-hero__visual { min-height:400px; }
  .service-browser__bar { height:23px; }
  .service-browser--1 { top:58px; width:88%; }
  .service-browser--2 { top:210px; width:72%; }
  .service-browser--3 { bottom:0; width:70%; }
  .service-hero__visual--graphic { padding:24px; }
  .service-design-board__mark { width:98px; height:98px; font-size:66px; }
  .service-design-board strong { top:28%; font-size:34px; }
  .service-design-board b { top:43%; font-size:10px; }
  .service-process__grid { grid-template-columns:1fr; }
  .service-process__grid article { min-height:190px; border-right:0; border-bottom:1px solid var(--line-dark); }
  .service-process__grid article:last-child { border-bottom:0; }
}

/* ==========================================================
   v0.9.6 - section rhythm + denser web portfolio
   ========================================================== */

:root {
  --section-alt: #f1f1ee;
}

/* Numbered sections should read as separate chapters, not one long sheet. */
.section-tone-gray .section-index,
.section-tone-gray .section-body {
  background-color: var(--section-alt);
}

/* Keep the rail and canvas visually continuous on alternating sections. */
.section-tone-gray .section-index {
  border-right-color: rgba(17,18,20,.18);
}

/* The recommendations section previously had its own almost-white tone. */
.section-tone-gray .recommendations__body {
  background-color: var(--section-alt);
}

/* White chapters remain genuinely white, so the alternation is visible. */
.home .solutions .section-index,
.home .solutions .section-body,
.home .cases .section-index,
.home .cases .section-body,
.home .about .section-index,
.home .about .section-body,
.home .process .section-index,
.home .process .section-body,
.service-page .service-intro .section-index,
.service-page .service-intro .section-body,
.service-page .service-process .section-index,
.service-page .service-process .section-body {
  background-color: #fff;
}

/* Web portfolio: a compact, even 3 x 2 wall. */
.web-portfolio__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.web-project-card {
  grid-template-rows: auto 1fr;
}
.web-project-card__image,
.web-project-card__placeholder-visual {
  aspect-ratio: 16 / 9;
}
.web-project-card__content {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  padding: 19px 20px 21px;
}
.web-project-card__content h3 {
  margin-bottom: 8px;
  font-size: 19px;
}
.web-project-card__content > p:not(.tech-label) {
  margin-bottom: 15px;
  font-size: 12px;
  line-height: 1.56;
}
.web-project-card__content > a,
.web-project-card__contact {
  margin-top: auto;
}

/* Remove the old fifth-card feature layout. All six slots are equal now. */
.web-project-card:nth-child(5) {
  grid-column: auto;
  grid-template-columns: none;
  grid-template-rows: auto 1fr;
}
.web-project-card:nth-child(5) .web-project-card__image {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-right: 0;
  border-bottom: 1px solid var(--line-dark);
}
.web-project-card:nth-child(5) .web-project-card__content {
  display: flex;
  justify-content: flex-start;
}

/* Deliberately cheeky sixth slot. It looks like a real portfolio card, not an ad banner. */
.web-project-card--placeholder {
  background: #fff;
}
.web-project-card__placeholder-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  border-bottom: 1px solid var(--line-dark);
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    #111316;
  background-size: 36px 36px;
}
.web-project-card__placeholder-visual::before,
.web-project-card__placeholder-visual::after {
  position: absolute;
  content: "";
  background: rgba(229,122,29,.75);
}
.web-project-card__placeholder-visual::before {
  width: 34%;
  height: 1px;
}
.web-project-card__placeholder-visual::after {
  width: 1px;
  height: 42%;
}
.web-project-card__placeholder-visual > strong {
  position: relative;
  z-index: 2;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  color: var(--accent);
  background: #111316;
  font: 500 42px/1 var(--display);
}
.web-project-card__placeholder-code {
  position: absolute;
  top: 16px;
  left: 17px;
  color: #92989e;
  font: 700 8px/1 var(--mono);
  letter-spacing: .13em;
}
.web-project-card__placeholder-visual > i {
  position: absolute;
  display: block;
  background: rgba(255,255,255,.09);
}
.web-project-card__placeholder-visual > i:nth-of-type(1) { right: 9%; bottom: 11%; width: 9%; height: 16%; }
.web-project-card__placeholder-visual > i:nth-of-type(2) { right: 19%; bottom: 11%; width: 9%; height: 29%; }
.web-project-card__placeholder-visual > i:nth-of-type(3) { right: 29%; bottom: 11%; width: 9%; height: 42%; background: rgba(229,122,29,.55); }
.web-project-card__placeholder-visual > i:nth-of-type(4) { right: 39%; bottom: 11%; width: 9%; height: 25%; }
.web-project-card--placeholder:hover .web-project-card__placeholder-visual > strong,
.web-project-card--placeholder:focus-within .web-project-card__placeholder-visual > strong {
  border-color: var(--accent);
  background: var(--accent);
  color: #111316;
}
.web-project-card__contact {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: var(--accent-strong);
  background: transparent;
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
}
.web-project-card__contact .icon { width: 14px; height: 14px; }

@media (max-width: 1080px) {
  .web-portfolio__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .web-portfolio__grid {
    grid-template-columns: 1fr;
  }
  .web-project-card__content {
    min-height: 185px;
  }
}

/* ==========================================================
   v0.9.7 - graphic design portfolio / real work
   ========================================================== */

/* Graphic-design hero now uses real work instead of a generic placeholder board. */
.service-page--projektowanie-graficzne .service-hero__visual--graphic {
  display: block;
  padding: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #111316;
  background-size: 48px 48px;
}
.graphic-hero-collage {
  position: relative;
  min-height: 650px;
  width: 100%;
  height: 100%;
}
.graphic-hero-card {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255,255,255,.26);
  background: #f5f5f2;
  box-shadow: 16px 16px 0 rgba(0,0,0,.28);
}
.graphic-hero-card::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(17,19,22,.08);
}
.graphic-hero-card > span {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  min-height: 28px;
  padding: 9px 12px 8px;
  border-bottom: 1px solid rgba(17,19,22,.16);
  background: rgba(255,255,255,.94);
  color: #52585e;
  font: 700 8px/1 var(--mono);
  letter-spacing: .1em;
}
.graphic-hero-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.graphic-hero-card--1 {
  z-index: 3;
  top: 66px;
  left: 7%;
  width: 34%;
  height: 72%;
  transform: rotate(-1deg);
}
.graphic-hero-card--1 img { object-fit: contain; padding: 38px 16px 14px; background: #f4f3f1; }
.graphic-hero-card--2 {
  z-index: 2;
  top: 86px;
  right: 5%;
  width: 57%;
  height: 42%;
  transform: rotate(1deg);
}
.graphic-hero-card--3 {
  z-index: 4;
  right: 8%;
  bottom: 62px;
  width: 52%;
  height: 38%;
  transform: rotate(-1.2deg);
}
.graphic-hero-collage__code {
  position: absolute;
  z-index: 8;
  right: 20px;
  bottom: 18px;
  color: rgba(255,255,255,.5);
  font: 700 9px/1.55 var(--mono);
  letter-spacing: .11em;
}

/* Three full identity systems. */
.graphic-brand-cases__list {
  border-top: 1px solid var(--line-dark);
}
.graphic-brand-case {
  display: grid;
  min-height: 520px;
  grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255,255,255,.68);
}
.graphic-brand-case--reverse {
  grid-template-columns: minmax(0,1.28fr) minmax(300px,.72fr);
}
.graphic-brand-case--reverse .graphic-brand-case__copy { order: 2; border-right: 0; border-left: 1px solid var(--line-dark); }
.graphic-brand-case--reverse .graphic-brand-case__visual { order: 1; }
.graphic-brand-case__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 40px 46px;
  border-right: 1px solid var(--line-dark);
  background: rgba(255,255,255,.9);
}
.graphic-brand-case__index {
  position: absolute;
  top: 22px;
  right: 22px;
  color: #8b9095;
  font: 700 9px/1 var(--mono);
}
.graphic-brand-case__copy h3 {
  max-width: 500px;
  margin: 4px 0 18px;
  font: 800 clamp(28px,2.55vw,40px)/.96 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.case-card__content h3,
.extra-service-card h3 {
  text-wrap: balance;
}
.graphic-brand-case__copy > p:not(.tech-label) {
  max-width: 520px;
  margin: 0;
  color: #535a60;
  font-size: 13.5px;
  line-height: 1.72;
}
.graphic-brand-case__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 26px;
}
.graphic-brand-case__chips span {
  padding: 8px 10px;
  border: 1px solid var(--line-dark);
  background: #f6f6f3;
  font: 700 9px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.graphic-brand-case__visual {
  display: grid;
  min-width: 0;
  min-height: 520px;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: 1fr 1fr;
  background: #e7e7e3;
}
.graphic-brand-case__image {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #fff;
  cursor: zoom-in;
}
.graphic-brand-case__image--1 {
  grid-row: 1 / 3;
}
.graphic-brand-case__image--2,
.graphic-brand-case__image--3 {
  border-right: 0;
}
.graphic-brand-case__image--3 { border-bottom: 0; }
.graphic-brand-case__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .28s var(--ease-out), filter .28s ease;
}
.graphic-brand-case__image--1 img {
  object-fit: contain;
  padding: 34px;
  background: #f7f7f4;
}
.graphic-brand-case__image:hover img,
.graphic-brand-case__image:focus-visible img { transform: scale(1.025); }
.graphic-brand-case__image:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Curated archive. Different aspect ratios are allowed to stay different. */
.graphic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 28px 26px;
}
.graphic-filter button {
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid var(--line-dark);
  border-right: 0;
  background: #fff;
  color: #4e545a;
  font: 750 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.graphic-filter button:last-child { border-right: 1px solid var(--line-dark); }
.graphic-filter button:hover,
.graphic-filter button:focus-visible,
.graphic-filter button.is-active {
  background: #111316;
  color: #fff;
}
.graphic-filter button.is-active { border-color: #111316; }
.graphic-gallery {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 145px;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.graphic-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #16181b;
  color: #fff;
  text-align: left;
  cursor: zoom-in;
}
.graphic-gallery__item--portrait { grid-row: span 3; }
.graphic-gallery__item--square { grid-row: span 2; }
.graphic-gallery__item--wide { grid-column: span 2; grid-row: span 2; }
.graphic-gallery__item.is-filtered-out { display: none; }
.graphic-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s var(--ease-out), filter .3s ease;
}
.graphic-gallery__item[data-graphic-category="logo"] img {
  object-fit: contain;
  padding: 34px;
  background: #f7f7f4;
}
.graphic-gallery__item::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 46%, rgba(9,10,12,.88) 100%);
  opacity: .72;
  transition: opacity .25s ease;
}
.graphic-gallery__item:hover img,
.graphic-gallery__item:focus-visible img { transform: scale(1.025); }
.graphic-gallery__item:hover::after,
.graphic-gallery__item:focus-visible::after { opacity: .95; }
.graphic-gallery__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.graphic-gallery__meta {
  position: absolute;
  z-index: 2;
  right: 17px;
  bottom: 16px;
  left: 17px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  align-items: end;
}
.graphic-gallery__meta b {
  grid-row: 1 / 3;
  color: var(--accent);
  font: 800 9px/1 var(--mono);
}
.graphic-gallery__meta small {
  color: #f0c8a6;
  font: 700 8px/1 var(--mono);
  letter-spacing: .09em;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.graphic-gallery__meta strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
}

/* Native dialog lightbox; no gallery framework required. */
.design-lightbox {
  width: min(1180px,94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  background: #111316;
  color: #fff;
  box-shadow: 22px 22px 0 rgba(0,0,0,.25);
}
.design-lightbox::backdrop { background: rgba(8,9,11,.86); backdrop-filter: blur(4px); }
.design-lightbox figure {
  display: grid;
  max-height: 92vh;
  margin: 0;
  grid-template-rows: minmax(0,1fr) auto;
}
.design-lightbox img {
  display: block;
  width: 100%;
  max-height: calc(92vh - 62px);
  object-fit: contain;
  background: #0d0f11;
}
.design-lightbox figcaption {
  min-height: 58px;
  padding: 19px 72px 17px 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #d7dade;
  font: 700 10px/1.35 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.design-lightbox__close {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 10px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  background: #111316;
  color: #fff;
  cursor: pointer;
}
.design-lightbox__close:hover { background: var(--accent); color: #111316; border-color: var(--accent); }
.design-lightbox__close .icon { width: 17px; height: 17px; }

@media (max-width: 1100px) {
  .graphic-hero-card--1 { left: 5%; width: 37%; }
  .graphic-hero-card--2 { right: 3%; width: 59%; }
  .graphic-hero-card--3 { right: 5%; width: 56%; }
  .graphic-brand-case,
  .graphic-brand-case--reverse { grid-template-columns: minmax(260px,.78fr) minmax(0,1.22fr); }
  .graphic-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .graphic-hero-collage { min-height: 520px; }
  .graphic-hero-card--1 { top: 48px; left: 5%; width: 38%; height: 70%; }
  .graphic-hero-card--2 { top: 65px; right: 3%; width: 59%; height: 41%; }
  .graphic-hero-card--3 { right: 5%; bottom: 42px; width: 57%; height: 37%; }
  .graphic-brand-case,
  .graphic-brand-case--reverse { grid-template-columns: 1fr; }
  .graphic-brand-case--reverse .graphic-brand-case__copy,
  .graphic-brand-case--reverse .graphic-brand-case__visual { order: initial; }
  .graphic-brand-case__copy,
  .graphic-brand-case--reverse .graphic-brand-case__copy {
    min-height: 300px;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .graphic-brand-case__visual { min-height: 470px; }
  .graphic-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 130px; }
}

@media (max-width: 580px) {
  .graphic-hero-collage { min-height: 420px; }
  .graphic-hero-card--1 { top: 40px; left: 5%; width: 43%; height: 67%; }
  .graphic-hero-card--2 { top: 55px; right: 2%; width: 58%; height: 38%; }
  .graphic-hero-card--3 { right: 4%; bottom: 37px; width: 56%; height: 33%; }
  .graphic-hero-card > span { padding: 7px 8px; font-size: 6.5px; }
  .graphic-hero-collage__code { display: none; }
  .graphic-brand-case__copy { min-height: 0; padding: 42px 22px 34px; }
  .graphic-brand-case__copy h3 { font-size: 31px; }
  .graphic-brand-case__visual { min-height: 410px; grid-template-columns: 1fr 1fr; grid-template-rows: 58% 42%; }
  .graphic-brand-case__image--1 { grid-column: 1 / 3; grid-row: 1; border-right: 0; }
  .graphic-brand-case__image--2 { grid-column: 1; grid-row: 2; border-right: 1px solid var(--line-dark); border-bottom: 0; }
  .graphic-brand-case__image--3 { grid-column: 2; grid-row: 2; }
  .graphic-brand-case__image--1 img { padding: 22px; }
  .graphic-filter { padding: 0 18px 22px; }
  .graphic-filter button { flex: 1 1 50%; border-right: 1px solid var(--line-dark); border-bottom: 0; }
  .graphic-filter button:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .graphic-filter button:nth-child(odd) { border-right: 0; }
  .graphic-gallery { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .graphic-gallery__item--portrait,
  .graphic-gallery__item--square,
  .graphic-gallery__item--wide { grid-column: auto; grid-row: auto; }
  .graphic-gallery__item--portrait { aspect-ratio: 3/4; }
  .graphic-gallery__item--square { aspect-ratio: 1/1; }
  .graphic-gallery__item--wide { aspect-ratio: 16/8; }
  .design-lightbox { width: 96vw; max-height: 88vh; }
  .design-lightbox img { max-height: calc(88vh - 58px); }
}

/* ==========================================================
   v0.9.8 - visual consistency / clickable branches / card polish
   ========================================================== */

/* Homepage branch cards are genuine full-surface links. */
.extra-service-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.extra-service-card:visited { color: inherit; }
.extra-service-card:focus-visible {
  z-index: 3;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  transform: translate(-3px,-3px);
  box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-block);
}
.extra-service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.extra-service-card__cta .icon { width: 15px; height: 15px; }
.extra-service-card:hover .extra-service-card__cta,
.extra-service-card:focus-visible .extra-service-card__cta { color: var(--accent); }

/* Long project names must stay inside their layout cell on every viewport. */
.graphic-brand-case__copy,
.graphic-brand-case__visual,
.web-project-card__content,
.case-card__content,
.extra-service-card__head { min-width: 0; }
.graphic-brand-case__copy h3 {
  max-width: 100%;
  font-size: clamp(26px,2.1vw,36px);
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}
.graphic-gallery__meta strong,
.web-project-card__content h3,
.case-card__content h3,
.extra-service-card h3 {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Give full identity cases a small visual breath without breaking the grid language. */
.graphic-brand-cases__list {
  display: grid;
  gap: 8px;
  padding: 8px 0;
  background: rgba(17,18,20,.035);
}
.graphic-brand-case {
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.graphic-brand-case:first-child { border-top: 0; }
.graphic-brand-case:last-child { border-bottom: 0; }

/* Homepage use-case photography: clean crop, no source-image header debris. */
.case-card__image {
  isolation: isolate;
  background: #171a1d;
}
.case-card__image img {
  object-position: center center;
}
.case-card__image::before {
  opacity: .18;
}
.case-card__number,
.case-card__tag { pointer-events: none; }
.case-card__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Keep portfolio layouts resilient around tablet breakpoints. */
@media (max-width: 1100px) {
  .graphic-brand-case__copy h3 { font-size: clamp(26px,3.2vw,35px); }
}

@media (max-width: 860px) {
  .graphic-brand-cases__list { gap: 10px; padding: 10px 0; }
  .graphic-brand-case__copy h3 { font-size: clamp(29px,6vw,36px); overflow-wrap: break-word; }
}

@media (max-width: 580px) {
  .graphic-brand-case__copy h3 {
    font-size: clamp(27px,8vw,32px);
    line-height: .98;
    overflow-wrap: anywhere;
  }
  .graphic-gallery__meta strong { font-size: 13px; }
  .extra-service-card__cta { font-size: 10px; }
}

/* ==========================================================
   v0.9.9 - homepage visual cleanup + mobile symmetry pass
   ========================================================== */

/* Clean source photography on homepage use-case cards. The source files are
   pre-cropped in v0.9.9; do not add decorative layers that can read as debris. */
.case-card__image::before {
  display: none !important;
  content: none !important;
}
.case-card__image::after {
  background: linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.18));
}
.case-card__image img {
  transform: none;
  object-position: center center;
}
.case-card:hover .case-card__image img,
.case-card:focus-within .case-card__image img {
  transform: scale(1.025);
}

/* Home: webdesign and graphic design behave as a deliberately matched pair. */
.extra-services__grid {
  align-items: stretch;
}
.extra-service-card {
  height: 100%;
}
.extra-service-card__head {
  display: grid;
  min-width: 0;
}
.extra-service-card__visual {
  width: 100%;
}

/* Real-work mosaic replaces the generic graphic-design placeholder. */
.home-graphic-mosaic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #111316;
  background-size: 34px 34px;
}
.home-graphic-mosaic__label,
.home-graphic-mosaic__code {
  position: absolute;
  z-index: 6;
  color: rgba(255,255,255,.66);
  font: 700 8px/1.25 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.home-graphic-mosaic__label { top: 15px; left: 18px; }
.home-graphic-mosaic__code { right: 18px; bottom: 13px; text-align: right; }
.home-graphic-tile {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255,255,255,.3);
  background: #fff;
  box-shadow: 8px 8px 0 rgba(0,0,0,.26);
}
.home-graphic-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-graphic-tile--a {
  top: 38px;
  left: 5%;
  width: 26%;
  height: 73%;
  transform: rotate(-2deg);
}
.home-graphic-tile--a img { object-position: center top; }
.home-graphic-tile--b {
  top: 54px;
  left: 27%;
  width: 46%;
  height: 61%;
  transform: rotate(.8deg);
}
.home-graphic-tile--b img { object-position: center center; }
.home-graphic-tile--c {
  top: 24px;
  right: 4%;
  width: 29%;
  height: 46%;
  transform: rotate(2deg);
}
.home-graphic-tile--d {
  right: 9%;
  bottom: -14px;
  width: 24%;
  height: 47%;
  transform: rotate(-1.2deg);
}
.home-graphic-tile--d img { object-position: center 18%; }

/* Desktop alignment: headings, descriptions, CTA and visual blocks line up. */
@media (min-width: 1081px) {
  .extra-service-card {
    min-height: 604px;
    grid-template-rows: 309px 295px;
  }
  .extra-service-card__head {
    grid-template-rows: auto 112px 76px auto;
    align-content: start;
    padding: 34px 34px 28px;
  }
  .extra-service-card__head .tech-label { margin-bottom: 16px; }
  .extra-service-card h3 {
    min-height: 0;
    margin: 0;
    align-self: start;
    font-size: clamp(28px,2.05vw,35px);
    line-height: .98;
  }
  .extra-service-card__head > p:not(.tech-label) {
    min-height: 0;
    margin: 0;
    align-self: start;
  }
  .extra-service-card__cta {
    align-self: end;
    justify-self: start;
    margin-top: 8px;
  }
  .extra-service-card__visual {
    height: 295px;
    min-height: 295px;
  }
}

/* Tablet: keep the visual language, but stop forcing desktop heights. */
@media (max-width: 1080px) {
  .extra-service-card {
    grid-template-rows: auto 280px;
    min-height: 0;
  }
  .extra-service-card__head {
    padding: 34px 30px 28px;
  }
  .extra-service-card__visual {
    min-height: 280px;
  }
  .home-graphic-tile--a { width: 24%; }
  .home-graphic-tile--b { left: 25%; width: 48%; }
}

/* Mobile header: symmetric hamburger and centered open-menu labels. */
@media (max-width: 820px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .site-header__inner {
    grid-template-columns: minmax(0,1fr) 64px;
  }
  .brand {
    justify-content: flex-start;
    padding-right: 16px;
    padding-left: 18px;
  }
  .nav-toggle {
    display: flex;
    width: 64px;
    height: 65px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .nav-toggle span {
    width: 24px;
    margin: 0;
    transform-origin: center;
  }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    top: 65px;
    right: 0;
    left: 10px;
    padding: 10px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--ink);
    background: #f5f5f2;
    box-shadow: 0 12px 28px rgba(17,18,20,.1);
  }
  .site-nav__list {
    display: grid;
    gap: 6px;
    padding: 0;
  }
  .site-nav__list li { display: block; }
  .site-nav__list a {
    position: relative;
    display: flex;
    height: 52px;
    padding: 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-dark);
    background: #fff;
    font-size: 11px;
    text-align: center;
  }
  .site-nav__list a::before {
    position: absolute;
    left: 15px;
    display: block;
  }
  .site-nav__list li:last-child a { border-bottom: 1px solid var(--line-dark); }

  .section-body {
    padding-right: 20px;
    padding-left: 20px;
  }

  .extra-service-card__head {
    padding-right: 26px;
    padding-left: 26px;
  }
  .extra-service-card h3 {
    max-width: 590px;
    text-wrap: balance;
  }
  .extra-service-card__visual { min-height: 270px; }

  .hero__actions,
  .service-hero__actions {
    width: 100%;
    justify-content: center;
  }
  .service-hero__actions {
    align-items: center;
  }
  .service-hero__actions .text-link {
    align-self: center;
  }

  .service-process__grid article,
  .process-step,
  .solution-card,
  .case-card {
    text-align: left;
  }

  .service-cta__copy,
  .final-cta__copy {
    text-align: center;
  }
  .service-cta__copy > p:not(.tech-label),
  .final-cta__copy > p:not(.tech-label) {
    margin-right: auto;
    margin-left: auto;
  }
  .service-cta__copy .button,
  .final-cta__copy .button {
    align-self: center;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 580px) {
  .section-body {
    padding-right: 16px;
    padding-left: 16px;
  }

  .brand { padding-left: 14px; }
  .brand img, .custom-logo { max-width: 150px; }

  .site-nav {
    padding: 8px;
  }
  .site-nav__list { gap: 5px; }
  .site-nav__list a {
    height: 50px;
    padding-right: 42px;
    padding-left: 42px;
  }

  .button {
    min-height: 48px;
    padding-right: 18px;
    padding-left: 18px;
    text-align: center;
  }
  .hero__actions .button,
  .service-hero__actions .button,
  .service-cta__copy .button,
  .final-cta__copy .button,
  .use-case-story-hero__copy .button,
  .use-case-next__inner .button {
    width: min(100%, 330px);
    margin-right: auto;
    margin-left: auto;
  }
  .hero__actions,
  .service-hero__actions {
    align-items: center;
  }

  .extra-service-card {
    grid-template-rows: auto 235px;
  }
  .extra-service-card__head {
    padding: 28px 20px 24px;
  }
  .extra-service-card h3 {
    font-size: clamp(27px,8vw,31px);
    line-height: .98;
  }
  .extra-service-card__head > p:not(.tech-label) {
    font-size: 13px;
  }
  .extra-service-card__cta {
    margin-top: 2px;
  }
  .extra-service-card__visual {
    height: 235px;
    min-height: 235px;
  }

  .home-graphic-mosaic__label {
    top: 12px;
    left: 12px;
    font-size: 7px;
  }
  .home-graphic-mosaic__code { display: none; }
  .home-graphic-tile--a {
    top: 34px;
    left: 4%;
    width: 28%;
    height: 72%;
  }
  .home-graphic-tile--b {
    top: 50px;
    left: 27%;
    width: 48%;
    height: 58%;
  }
  .home-graphic-tile--c {
    top: 28px;
    right: 3%;
    width: 28%;
    height: 43%;
  }
  .home-graphic-tile--d {
    right: 7%;
    bottom: -10px;
    width: 25%;
    height: 44%;
  }

  .graphic-filter {
    justify-content: center;
  }
  .graphic-filter button {
    min-height: 42px;
    text-align: center;
  }

  .back-to-top {
    right: 14px;
    bottom: 14px;
  }
}

/* Mobile finishing details: consistent side rhythm and centered action groups. */
@media (max-width: 580px) {
  .service-hero__chips {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }
  .contact-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: auto;
    box-shadow: 8px 8px 0 rgba(0,0,0,.16);
  }
  .contact-dialog__head,
  .contact-form {
    padding-right: 20px;
    padding-left: 20px;
  }
  .contact-form .button {
    width: 100%;
    margin: 0;
  }
  .footer-nav__list {
    justify-content: center;
    padding-right: 18px;
    padding-left: 18px;
    text-align: center;
  }
  .brand--footer {
    justify-content: center;
    padding-right: 18px;
    padding-left: 18px;
  }
  .site-footer__copy,
  .footer-code {
    padding-right: 18px;
    padding-left: 18px;
    text-align: center;
  }
}


/* v0.9.11 visual cleanup: less background noise, clearer hierarchy. */
.about__level-stack { display:none !important; }
.about__matrix::after { background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 38%,rgba(0,0,0,.16)); }
.about__code { top:205px; right:30px; opacity:.62; }

.final-cta__visual::after { display:none !important; content:none !important; }
.pixel-stairs { display:none !important; }
.final-cta__blocks { width:32%; height:54%; opacity:.55; right:8%; }
.final-cta__blocks i { background:rgba(12,13,15,.12); border-color:rgba(255,255,255,.16); backdrop-filter:none; }
.final-cta__blocks i:nth-child(5) { border-color:rgba(219,111,30,.36); background:rgba(219,111,30,.055); }
.final-cta__visual img { opacity:.82; filter:grayscale(1) contrast(1.08) brightness(.66); }

.final-cta__copy h2,
.service-cta__copy h2,
.use-case-outcomes h2,
.use-case-outcomes h3,
.use-case-transition-card:nth-child(3) h3 { color:#fff !important; }


/* ==========================================================
   v0.9.12 - final spacing / typography / micro-detail polish
   ========================================================== */

/* 01: header logo follows the same left axis as the home hero copy. */
@media (min-width: 1281px) {
  .brand--header { padding-left: 48px; }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .brand--header { padding-left: 36px; }
}

/* 02: keep the tiny LEVEL UP code as a detail, not something trapped below the CTA. */
@media (min-width: 1281px) {
  .hero__mini-code {
    right: 48px;
    bottom: 24px;
    left: auto;
    justify-items: end;
    text-align: right;
  }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .hero__mini-code {
    right: 36px;
    bottom: 22px;
    left: auto;
    justify-items: end;
    text-align: right;
  }
}

/* 03: recommendations should finish as their own gray chapter. */
.recommendations__body { padding-bottom: 18px; }

/* 05 / 06: service hero titles stay inside their copy column on desktop. */
@media (min-width: 1081px) {
  .service-page--webdesign .service-hero__copy h1 {
    max-width: 100%;
    font-size: clamp(42px, 3.6vw, 62px);
    line-height: .92;
    overflow-wrap: normal;
  }
  .service-page--projektowanie-graficzne .service-hero__copy h1 {
    max-width: 100%;
    font-size: clamp(38px, 3.2vw, 54px);
    line-height: .93;
    overflow-wrap: normal;
  }
}

/* Graphic identity cases: slightly calmer titles and no brutal domain breaking. */
.graphic-brand-case__copy h3 {
  font-size: clamp(25px, 1.95vw, 34px);
  line-height: .98;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
@media (min-width: 981px) {
  .graphic-brand-case:nth-child(2) .graphic-brand-case__copy h3 {
    font-size: clamp(24px, 1.8vw, 30px);
    letter-spacing: -.045em;
    white-space: nowrap;
  }
}
@media (max-width: 980px) {
  .graphic-brand-case:nth-child(2) .graphic-brand-case__copy h3 { white-space: normal; }
}

/* 07: small block/pixel accents. They replace background noise rather than adding more of it. */
.solutions .section-body,
.cases .section-body,
.about .section-body,
.process .section-body,
.service-intro .section-body,
.web-portfolio .section-body,
.graphic-selected-works .section-body,
.use-case-problem .section-body,
.use-case-workflow .section-body,
.use-case-next .section-body {
  position: relative;
}
.solutions .section-body::after,
.about .section-body::after,
.service-intro .section-body::after,
.use-case-workflow .section-body::after {
  position: absolute;
  z-index: 5;
  right: 11px;
  bottom: 17px;
  width: 7px;
  height: 7px;
  background: #cfd2d5;
  box-shadow: -7px 7px 0 #e5e6e4, -14px 14px 0 rgba(17,18,20,.11);
  content: "";
  pointer-events: none;
}
.cases .section-body::after,
.process .section-body::after,
.web-portfolio .section-body::after,
.graphic-selected-works .section-body::after,
.use-case-problem .section-body::after,
.use-case-next .section-body::after {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 12px;
  width: 6px;
  height: 6px;
  background: rgba(219,111,30,.72);
  box-shadow: -8px 8px 0 rgba(17,18,20,.12), -16px 16px 0 rgba(17,18,20,.06);
  content: "";
  pointer-events: none;
}
@media (max-width: 820px) {
  .solutions .section-body::after,
  .about .section-body::after,
  .service-intro .section-body::after,
  .use-case-workflow .section-body::after,
  .cases .section-body::after,
  .process .section-body::after,
  .web-portfolio .section-body::after,
  .graphic-selected-works .section-body::after,
  .use-case-problem .section-body::after,
  .use-case-next .section-body::after {
    opacity: .58;
    transform: scale(.82);
    transform-origin: center;
  }
}

/* 08: contact is clean paper with a few local accents, not another notebook grid. */
.contact-dialog__head {
  position: relative;
  overflow: hidden;
  background-color: #f4f4f2;
  background-image: none;
}
.contact-dialog__head::before {
  position: absolute;
  right: 68px;
  bottom: 18px;
  width: 7px;
  height: 7px;
  background: #cfd2d5;
  box-shadow: 7px -7px 0 #e2e3e1, 14px -14px 0 rgba(219,111,30,.7);
  content: "";
  pointer-events: none;
}
.contact-dialog__head::after {
  position: absolute;
  right: 22px;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: var(--accent);
  content: "";
  opacity: .8;
}

/* 09: direct contact stays secondary to the form, with email visually preferred over phone. */
.direct-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 22px;
}
.direct-contact__label {
  color: #8c9196;
  font: 700 8px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.direct-contact a {
  transition: color .18s ease, border-color .18s ease;
}
.direct-contact__email {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  border-bottom: 1px solid var(--accent);
}
.direct-contact__phone {
  color: #8f9499;
  font-size: 11px;
  font-weight: 650;
}
.direct-contact a:hover,
.direct-contact a:focus-visible { color: var(--accent); }

.direct-contact--dark { margin-top: 20px; }
.direct-contact--dark .direct-contact__label { flex-basis: 100%; color: #777d82; }
.direct-contact--dark .direct-contact__email { color: #fff; }
.direct-contact--dark .direct-contact__phone { color: #9ea3a7; }
.direct-contact--dark a:hover,
.direct-contact--dark a:focus-visible { color: #fff; border-color: #fff; }

.direct-contact--dialog {
  margin: 0;
  padding: 14px 42px 15px;
  border-bottom: 1px solid var(--line);
  background: #fbfbf9;
}
.direct-contact--dialog .direct-contact__label { margin-right: 4px; }
.direct-contact--dialog .direct-contact__email { color: var(--ink); }
.direct-contact--dialog .direct-contact__phone { margin-left: auto; }

@media (max-width: 580px) {
  .direct-contact--dialog {
    padding-right: 20px;
    padding-left: 20px;
  }
  .direct-contact--dialog .direct-contact__label { flex-basis: 100%; }
  .direct-contact--dialog .direct-contact__phone { margin-left: 0; }
  .final-cta__copy .direct-contact,
  .service-cta__copy .direct-contact { justify-content: center; }
  .final-cta__copy .direct-contact__label,
  .service-cta__copy .direct-contact__label { text-align: center; }
}


/* ==========================================================
   v0.9.13 - final alignment hotfix
   ========================================================== */

/*
 * Header rail must use the same layout viewport as centered containers.
 * 100vw includes the vertical scrollbar on desktop, which shifted the rail
 * by roughly half a scrollbar width and made the logo block miss the hero axis.
 */
.site-header__rail {
  width: max(18px, calc((100% - var(--max)) / 2));
}

/* The microcopy remains a tiny technical detail, but clears the pixel accent. */
@media (min-width: 1281px) {
  .hero__mini-code {
    right: 118px;
    bottom: 24px;
    left: auto;
  }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .hero__mini-code {
    right: 96px;
    bottom: 22px;
    left: auto;
  }
}

/* ==========================================================
   v0.9.14 - full tyre-deposit use case
   ========================================================== */

/* The warehouse UI is a real screenshot; keep the useful top controls visible in hero. */
.use-case-detail--depozyt-opon .use-case-story-hero__viewport img {
  object-position: center top;
}
.use-case-detail--depozyt-opon .use-case-story-hero__copy h1 {
  font-size: clamp(44px, 4.9vw, 72px);
  line-height: .92;
}

/* Six-step workflows use a clean 3 x 2 technical grid. */
.use-case-workflow__track--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.use-case-workflow__track--six .use-case-workflow-step {
  border-bottom: 1px solid var(--line-dark);
}
.use-case-workflow__track--six .use-case-workflow-step:nth-child(3n) {
  border-right: 0;
}
.use-case-workflow__track--six .use-case-workflow-step:nth-child(n+4) {
  border-bottom: 0;
}
.use-case-workflow__track--six .use-case-workflow-step:nth-child(3n)::after,
.use-case-workflow__track--six .use-case-workflow-step:last-child::after {
  display: none;
}

/* Real screens stay inside phase B so the A -> B -> C structure remains identical to the competitions case. */
.use-case-interface-gallery {
  margin-top: 0;
  padding-bottom: clamp(48px, 6vw, 78px);
  border-top: 12px solid #111316;
  background: #f1f1ee;
}
.use-case-interface-gallery__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
  gap: 52px;
  align-items: end;
  padding: clamp(42px, 5vw, 68px) clamp(28px, 4.2vw, 66px) 30px;
}
.use-case-interface-gallery__intro h3 {
  max-width: 760px;
  margin: 12px 0 0;
  font: 800 clamp(30px, 3vw, 44px)/.96 var(--display);
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.use-case-interface-gallery__intro > p {
  max-width: 650px;
  margin: 0;
  color: #596066;
  font-size: 13.5px;
  line-height: 1.72;
}
.use-case-interface-gallery__grid {
  display: grid;
  width: min(calc(100% - clamp(40px, 8vw, 128px)), 1280px);
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 auto;
}
.use-case-interface-shot {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line-dark);
  background: #fff;
  box-shadow: 12px 12px 0 rgba(17,18,20,.06);
}
.use-case-interface-shot--featured {
  grid-column: 1 / -1;
}
.use-case-interface-shot__image {
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
  background: #e9ecef;
}
.use-case-interface-shot__image img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}
.use-case-interface-shot figcaption {
  min-height: 164px;
  padding: 24px 26px 26px;
}
.use-case-interface-shot figcaption strong {
  display: block;
  max-width: 680px;
  margin-bottom: 10px;
  color: #17191c;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.use-case-interface-shot figcaption p {
  max-width: 720px;
  margin: 0;
  color: #596066;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1120px) {
  .use-case-workflow__track--six {
    grid-template-columns: 1fr 1fr;
  }
  .use-case-workflow__track--six .use-case-workflow-step,
  .use-case-workflow__track--six .use-case-workflow-step:nth-child(3n) {
    border-right: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }
  .use-case-workflow__track--six .use-case-workflow-step:nth-child(2n) {
    border-right: 0;
  }
  .use-case-workflow__track--six .use-case-workflow-step:nth-child(n+5) {
    border-bottom: 0;
  }
  .use-case-workflow__track--six .use-case-workflow-step:nth-child(2n)::after {
    display: none;
  }
  .use-case-interface-gallery__intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 720px) {
  .use-case-interface-gallery__grid {
    width: calc(100% - 36px);
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .use-case-interface-shot--featured {
    grid-column: auto;
  }
  .use-case-interface-shot figcaption {
    min-height: 0;
    padding: 21px 20px 23px;
  }
}

@media (max-width: 560px) {
  .use-case-detail--depozyt-opon .use-case-story-hero__copy h1 {
    font-size: clamp(38px, 11.5vw, 52px);
  }
  .use-case-workflow__track--six {
    grid-template-columns: 1fr;
  }
  .use-case-workflow__track--six .use-case-workflow-step,
  .use-case-workflow__track--six .use-case-workflow-step:nth-child(2n),
  .use-case-workflow__track--six .use-case-workflow-step:nth-child(3n),
  .use-case-workflow__track--six .use-case-workflow-step:nth-child(n+5) {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .use-case-workflow__track--six .use-case-workflow-step:last-child {
    border-bottom: 0;
  }
  .use-case-workflow__track--six .use-case-workflow-step::after {
    display: none;
  }
  .use-case-interface-gallery__intro {
    padding-right: 22px;
    padding-left: 22px;
  }
  .use-case-interface-gallery__intro h3 {
    font-size: 30px;
  }
}

/* ==========================================================
   v0.9.15 - contained use-case hero + training records story
   ========================================================== */

/* Keep every use-case hero on the same visual rail as home and service pages. */
.use-case-story-hero,
.use-case-hero {
  width: min(100%, var(--max));
  margin-right: auto;
  margin-left: auto;
  border-right: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

/* The training dashboard is very wide; show the whole real interface instead of cropping key cards. */
.use-case-detail--ewidencja-szkolen .use-case-story-hero__copy h1 {
  font-size: clamp(40px, 4.25vw, 66px);
  line-height: .94;
}
.use-case-detail--ewidencja-szkolen .use-case-story-hero__viewport {
  height: clamp(300px, 25vw, 405px);
  background: #f2eee2;
}
.use-case-detail--ewidencja-szkolen .use-case-story-hero__viewport img {
  object-fit: contain;
  object-position: center center;
  background: #f2eee2;
}

@media (max-width: 1120px) {
  .use-case-story-hero,
  .use-case-hero {
    width: 100%;
  }
  .use-case-detail--ewidencja-szkolen .use-case-story-hero__viewport {
    height: clamp(320px, 55vw, 500px);
  }
}

@media (max-width: 560px) {
  .use-case-detail--ewidencja-szkolen .use-case-story-hero__copy h1 {
    font-size: clamp(36px, 10.8vw, 50px);
  }
  .use-case-detail--ewidencja-szkolen .use-case-story-hero__viewport {
    height: 285px;
  }
}