/* ==========================================================================
   Grafico — front page (interactive-studio homepage, docs/
   HOMEPAGE-REBUILD-DIRECTION.md). Hero sells Grafico itself — zero
   client work anywhere in it; Selected Work is the one and only
   portfolio section on the page.

   Section styles only. Tokens, element reset, header, mobile menu,
   footer and the primary CTA live in base.css (loaded first). This
   file is a `sections`-layer sheet: it must never reintroduce a global
   element reset (91 §3.1).
   ========================================================================== */
@layer sections {
body.home{line-height:1.1}
.final-cta-row .btn-primary{flex:none}
@media (max-width:30rem){ .final-cta-row{flex-direction:column;align-items:stretch;gap:1rem} .final-cta .btn-primary{width:100%} }

/* ==========================================================================
   HERO (Phase 5D; hierarchy refined in 5G; Phase 11M removed the lead and enlarged the H1). Three levels, one reading order:
     1  the H1 (the client situation and the benefit; one plain Satoshi treatment, ONE highlighted phrase)
     2  ONE trust + conversion row: the three people | the crimson estimate CTA | "70+ realizacji"
     3  the strip of three project previews (whole 16:9 artworks), anchored to the bottom of the hero
   Desktop (>= 64rem, Phase 11V): header + hero = 100svh (capped at 64rem). The H1 is three lines (sentence 1 | the highlighted
   phrase | the rest) and sets the size of everything else; .hp-inner is a seven-row grid (pad, H1, gap, trust row, gap, strip, pad):
   the three blocks are their natural height, the four spacer rows have a floor and share the leftover. It is a min-height, not a
   height: when the content needs more than the viewport (short screens) the hero simply grows. From 80rem the three trust groups start on
   the three tile columns (1 / 5 / 9); between 64 and 80rem the people get one more column (1 / 6 / 10).
   Below 64rem the groups flow in a row that wraps (tablet); below 47.5rem: H1, people, CTA, proof, then the
   strip as a full-bleed loop (front-page.js), a native scroller without JS / reduced motion.
   Colours are the brand tokens only (night, coal, ivory, crimson on the CTA and one avatar, smoke).
   ========================================================================== */
.hero{position:relative;background:var(--night);color:var(--ivory);overflow:hidden}
.hp-inner{display:flex;flex-direction:column;width:100%;max-width:90rem;margin:0 auto;padding:clamp(1.75rem,6vw,2.75rem) var(--gutter) 2.75rem;min-height:calc(100svh - var(--header-h))}
.hp-h1{font-weight:700;color:var(--ivory);letter-spacing:-.022em;line-height:1.1;font-size:clamp(2rem,calc(7.4vw + .5rem),2.5rem)}
.hp-h1-line{display:block;text-wrap:balance}
.hp-h1-line + .hp-h1-line{margin-top:.08em}
/* Phase 11V: the forced break after the comma only exists from tablet up (see below); on a phone the sentence wraps by itself */
.hp-h1-br{display:none}
/* the one accent (Phase 11M): a short phrase on a crimson highlight, ivory text on it = 5.78:1 (crimson TEXT on night is 2.93:1 and a forbidden pairing, BRAND-SYSTEM 3).
   Phase 11V: the box hangs into the gutter by its own padding, so the LETTERS of the phrase start on the same edge as every other line */
.hp-h1-mark{margin-left:-.12em;padding:0 .12em;background:var(--crimson);color:var(--ivory);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (forced-colors:active){.hp-h1-mark{background:Mark;color:MarkText}}

/* trust + conversion row */
.hp-trust{margin-top:2rem;display:flex;flex-direction:column;align-items:stretch;gap:1.5rem}
.hp-team{display:flex;align-items:center;gap:.875rem}
.hp-avatars{display:flex;flex:none}
.hp-avatar{--hp-av:2.5rem;position:relative;display:grid;place-items:center;flex:none;width:var(--hp-av);height:var(--hp-av);border:1px solid transparent;border-radius:50%;box-shadow:0 0 0 2px var(--night);font-weight:700;font-size:.8125rem;line-height:1;letter-spacing:.02em}
.hp-avatar + .hp-avatar{margin-left:calc(var(--hp-av) * -.2)}
/* the three specialisations, in brand colours only: neutral dark / crimson / ivory */
.hp-avatar--internet{background:var(--coal);border-color:rgba(242,239,230,.55);color:var(--ivory)}
.hp-avatar--widocznosc{background:var(--crimson);border-color:var(--crimson);color:var(--ivory)}
.hp-avatar--design{background:var(--ivory);border-color:var(--ivory);color:var(--night)}
.hp-names{display:flex;flex-direction:column;gap:.1rem}
.hp-name{font-weight:500;font-size:.9375rem;line-height:1.4;color:rgba(242,239,230,.84);white-space:nowrap}
/* the one crimson primary action: crimson fill / ivory text, inverted on hover (the same parallelogram) */
.hp-cta,.hp-sticky .btn-primary{--btn-fill:var(--crimson);--btn-edge:var(--crimson);--btn-edge-w:0px;--btn-text:var(--ivory);--btn-fill-hover:var(--ivory);--btn-text-hover:var(--crimson)}
.hp-cta{--cut:12px;min-height:60px;padding:0 44px 0 32px;font-size:17px}
.hp-evidence{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;width:100%}
.hp-evidence-fig{display:flex;align-items:baseline;gap:.5rem}
.hp-evidence-num{font-weight:700;font-size:clamp(2.25rem,9vw,2.75rem);letter-spacing:-.02em;line-height:1;color:var(--ivory)}
.hp-evidence-label{font-size:1rem;line-height:1.2;color:rgba(242,239,230,.82)}

/* project strip: three equal 16:9 tiles, the preview shown whole (no crop, no zoom) */
/* Phase 11T: the hero fills the first phone screen (min-height above); the leftover height goes above the strip (auto margin), never below it, so the next section does not show as a sliver under the cards */
.hp-strip{margin-top:auto;padding-top:2rem;margin-inline:calc(var(--gutter) * -1)}
.hp-viewport{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-inline:var(--gutter)}
.hp-viewport::-webkit-scrollbar{display:none}
.hp-track{display:flex;gap:.75rem;width:max-content}
.hp-item{flex:0 0 min(86vw,30rem);min-width:0}
.hp-tile{position:relative;display:grid;grid-template-rows:auto 1fr;gap:.7rem;height:100%;padding-top:.7rem;border-top:1px solid var(--scene-line);color:var(--ivory)}
.hp-tile::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ivory);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease)}
.hp-tile:hover::before,.hp-tile:focus-visible::before{transform:scaleX(1)}
.hp-tile:focus-visible{outline:2px solid var(--ivory);outline-offset:6px}
.hp-tile-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hp-tile-name{font-weight:500;font-size:1.0625rem;letter-spacing:0;line-height:1.25}
.hp-tile-arrow{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid rgba(242,239,230,.5);color:var(--ivory);transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
.hp-tile-arrow svg{transition:transform var(--dur-base) var(--ease)}
.hp-tile:hover .hp-tile-arrow,.hp-tile:focus-visible .hp-tile-arrow{background:var(--ivory);color:var(--night);border-color:var(--ivory)}
.hp-tile:hover .hp-tile-arrow svg,.hp-tile:focus-visible .hp-tile-arrow svg{transform:translateX(3px)}
/* the box has the artwork's own ratio (1672 x 941), so contain = the whole image at its natural proportions; the 1px edge is drawn outside the box, not over the pixels */
.hp-tile-media{display:block;aspect-ratio:1672 / 941;background:var(--coal);box-shadow:0 0 0 1px rgba(242,239,230,.12)}
.hp-tile-media .media-img{display:block;width:100%;height:100%;object-fit:contain}
/* live loop (below 48rem, only when front-page.js has built the clones) */
.hp-strip.is-live .hp-viewport{overflow:hidden;touch-action:pan-y;cursor:grab;padding-inline:0}
.hp-strip.is-live .hp-viewport.is-dragging{cursor:grabbing}
.hp-strip.is-live .hp-track{padding-inline:var(--gutter);will-change:transform;user-select:none;-webkit-user-select:none}
.hp-strip.is-live .hp-tile-media .media-img{-webkit-user-drag:none}

/* sticky CTA (below 60rem): hidden and inert until the hero CTA has left the viewport */
.hp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;justify-content:center;padding:.65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));background:var(--night);border-top:1px solid var(--scene-line);
  transform:translateY(100%);visibility:hidden;transition:transform var(--dur-base) var(--ease),visibility 0s linear var(--dur-base)}
.hp-sticky.is-shown{transform:none;visibility:visible;transition-delay:0s}
.hp-sticky .btn-primary{width:100%;max-width:26rem;min-height:48px}
body.nav-locked .hp-sticky{display:none}

/* header CTA on the homepage: quiet (outlined) while the hero CTA is in view; once it has left, the full button, in the hero's crimson over the dark scenes */
body.home .site-header:not(.is-cta-loud) .header-actions .btn-primary{--btn-fill:var(--scene-bg);--btn-edge:var(--scene-fg);--btn-edge-w:1px;--btn-text:var(--scene-fg);--btn-fill-hover:var(--scene-fg);--btn-text-hover:var(--scene-bg)}
body.home .site-header.is-cta-loud:is([data-scene="night"],[data-scene="coal"]) .header-actions .btn-primary{--btn-fill:var(--crimson);--btn-edge:var(--crimson);--btn-edge-w:0px;--btn-text:var(--ivory);--btn-fill-hover:var(--ivory);--btn-text-hover:var(--crimson)}

@media (max-width:30rem){
  .hp-cta{width:100%}
}
@media (max-width:23rem){
  .hp-item{flex-basis:82vw}
  /* narrowest phones: smaller avatars, the names may wrap at the hyphen */
  .hp-avatar{--hp-av:2.25rem;font-size:.75rem}
  .hp-team{gap:.75rem}
  .hp-name{white-space:normal}
}
@media (min-width:47.5rem){
  /* Phase 11V: three lines (sentence 1 | the highlighted phrase | the rest); the longest line is sentence 1 (~16.1em), so the size follows the container */
  .hp-h1{font-size:clamp(2.5rem,calc(var(--container) / 16.6),4.5rem)}
  .hp-h1-br{display:inline}
  .hp-h1-mark{display:inline-block;margin-left:-.12em;padding:.025em .07em .12em .12em;line-height:1}
  .hp-h1-line + .hp-h1-line{margin-top:.1em}
  /* tablet: people over the CTA on the left, the proof on the right; from 56rem one row (people | CTA | proof) */
  .hp-trust{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"team ev" "cta ev";align-items:center;gap:1.5rem 2.5rem;margin-top:2.25rem}
  .hp-team{grid-area:team}
  .hp-cta-cell{grid-area:cta;justify-self:start}
  .hp-evidence{grid-area:ev;display:block;width:auto;justify-self:end}
  /* three tiles side by side, no loop */
  .hp-inner{min-height:0}
  .hp-strip{margin-inline:0;margin-top:2.5rem;padding-top:0}
  .hp-viewport{overflow:visible;padding-inline:0}
  .hp-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16);width:auto}
  .hp-item{flex:none}
  .hp-tile-name{font-size:clamp(.9375rem,1.7vw,1.0625rem)}
}
@media (min-width:56rem){
  .hp-trust{grid-template-columns:auto auto auto;grid-template-areas:"team cta ev";justify-content:space-between}
  .hp-cta-cell{justify-self:auto}
}
@media (min-width:60rem){
  .hp-sticky{display:none}
}
@media (min-width:64rem){
  /* Phase 11V: the hero fills the first screen (header + hero = 100svh, capped at 64rem on very tall windows) and the H1 carries it.
     Seven rows: pad | H1 | gap | trust row | gap | tiles | pad. The H1, the trust row and the tiles are their natural height; the
     four spacer rows have a floor (the --hp-* values follow the viewport height) and share what is left over, so nothing is cropped
     and no single gap opens up: H1 -> trust row is the largest, trust row -> tiles the tightest (the row belongs to the tiles),
     the bottom pad is at least as big as the top one. Short windows (floors only) simply make the hero taller than the viewport. */
  .hp-inner{--hp-pt:clamp(1.5rem,3.6vh,3.5rem);--hp-g1:clamp(1.75rem,4.4vh,4.5rem);--hp-g2:clamp(1.25rem,3.3vh,3.25rem);--hp-pb:clamp(1.75rem,4.2vh,3.75rem);
    width:var(--container);max-width:none;margin-inline:auto;
    min-height:min(calc(100svh - var(--header-h)),64rem);
    padding:0;
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-24);
    grid-template-rows:minmax(var(--hp-pt),.5fr) auto minmax(var(--hp-g1),1fr) auto minmax(var(--hp-g2),.5fr) auto minmax(var(--hp-pb),.8fr)}
  /* three lines (sentence 1 | the highlighted phrase | the rest); the longest, sentence 1, is ~16.1em, the divisor keeps ~2% slack,
     so the size follows the container; the height caps it so that the three lines still leave room for the trust row and the tiles on a laptop */
  .hp-h1{grid-column:1 / -1;grid-row:2;font-size:clamp(2.5rem,min(calc(var(--container) / 16.4),9vh),7rem);line-height:1.02;letter-spacing:-.026em}
  .hp-trust{grid-column:1 / -1;grid-row:4;align-self:start;margin-top:0;padding-block:0;
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none;column-gap:var(--sp-24);align-items:center;justify-content:normal}
  .hp-team,.hp-cta-cell,.hp-evidence{grid-area:auto;justify-self:auto}
  .hp-team{grid-column:1 / 6}
  .hp-cta-cell{grid-column:6 / 10}
  .hp-evidence{grid-column:10 / 13;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
  .hp-cta{--cut:14px;min-height:clamp(56px,6.6vh,68px);padding:0 52px 0 38px;font-size:18px}
  .hp-avatar{--hp-av:clamp(2.5rem,calc(1.6rem + 2vh),3.25rem);font-size:.875rem}
  .hp-name{font-size:clamp(.9375rem,.85vw,1.0625rem)}
  .hp-evidence-num{font-size:clamp(2.5rem,3.1vw,3rem)}
  .hp-evidence-label{font-size:1.0625rem}
  .hp-evidence .hp-link{display:block;position:relative;width:fit-content;min-height:0;padding:0;line-height:1.2}
  .hp-evidence .hp-link::after{content:"";position:absolute;inset:-14px -8px}
  .hp-strip{grid-column:1 / -1;grid-row:6;margin-top:0;padding-top:0}
  .hp-track{gap:var(--sp-24)}
  .hp-tile{gap:clamp(.55rem,1.3vh,.8rem);padding-top:clamp(.55rem,1.2vh,.8rem)}
  .hp-tile-name{font-size:clamp(1rem,1.2vw,1.1875rem)}
}
@media (min-width:80rem){
  /* the three trust groups start on the three tile columns */
  .hp-team{grid-column:1 / 5}
  .hp-cta-cell{grid-column:5 / 9}
  .hp-evidence{grid-column:9 / 13}
}
@media (prefers-reduced-motion:reduce){
  .hp-tile::before,.hp-tile-arrow,.hp-tile-arrow svg,.hp-sticky{transition:none}
}

/* ==========================================================================
   HISTORIE PROJEKTÓW (case-study carousel, directly under the hero) and the
   shared arrow control. Native scroll-snap track, no library, no autoplay.
   The whole card is one <a>; the arrows are buttons outside the links.
   ========================================================================== */
.cc{background:var(--ivory);color:var(--night);padding:clamp(4rem,7vw,7rem) 0 clamp(3.5rem,6vw,6rem)}
.cc-head{width:var(--container);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem}
.cc-intro{max-width:64rem}
.cc h2{font-weight:700;font-size:var(--fs-h1);letter-spacing:-.028em;line-height:1.04}
.cc-lead{margin-top:var(--space-heading-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--ash);max-width:46ch}
.cc-controls{display:flex;gap:8px;flex:none}
.cc-arrow{display:grid;place-items:center;width:52px;height:52px;border:1px solid currentColor;color:inherit;
  transition:background-color var(--dur-snap) var(--ease),color var(--dur-snap) var(--ease),opacity var(--dur-snap) var(--ease)}
.cc-arrow:hover{background:currentColor}
.cc-arrow:hover svg{color:var(--scene-bg)}
.cc-arrow:focus-visible{outline:2px solid var(--scene-focus);outline-offset:3px}
.cc-arrow[aria-disabled="true"]{opacity:.28;cursor:default}
.cc-arrow[aria-disabled="true"]:hover{background:none}
.cc-arrow[aria-disabled="true"]:hover svg{color:inherit}
.cc-arrow[hidden]{display:none}
.cc-controls--sm .cc-arrow{width:44px;height:44px}

.cc-carousel{margin-top:clamp(2rem,4vw,3.5rem)}
.cc-track,.sb-track{--pad:max(var(--gutter),calc((100% - var(--container)) / 2));display:flex;gap:var(--sp-24);
  padding-inline:var(--pad)}
.cc-track{overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.cc-track::-webkit-scrollbar{display:none}
.cc-track.is-jumping .cc-slide,.cc-track.is-jumping .cc-media{transition:none}
.cc-slide{position:relative;flex:0 0 min(84vw,38rem);min-width:0;scroll-snap-align:start}
/* peeking slides: only the image is dimmed; the caption keeps full strength (opacity .55 put ash text at 2.47:1, WCAG 1.4.3; Phase 11Z) */
.cc-media{transition:opacity var(--dur-base) var(--ease)}
.cc-slide:not(.is-in) .cc-media{opacity:.55}
@media (min-width:48rem){ .cc-slide{flex-basis:min(62vw,44rem)} }
@media (min-width:68.75rem){ .cc-slide{flex-basis:calc(var(--container) * .44)} }
.cc-card{display:flex;flex-direction:column;height:100%;color:inherit;border-bottom:1px solid var(--scene-line);transition:border-color var(--dur-snap) var(--ease)}
.cc-card:hover{border-bottom-color:var(--night)}
.cc-card:focus-visible{outline:2px solid var(--night);outline-offset:6px}
.cc-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#e4e0d4}
.cc-media .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.cc-slide--contain .cc-media{background:var(--ground,#e4e0d4)}
.cc-slide--contain .cc-media .media-img{object-fit:contain}
.cc-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-16);row-gap:2px;padding:var(--sp-16) 0 var(--sp-24)}
.cc-name{grid-column:1;font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.cc-type{grid-column:1;font-size:var(--fs-small);font-weight:700;line-height:1.4}
.cc-line{grid-column:1;margin-top:2px;font-size:var(--fs-small);line-height:1.45;color:var(--ash);max-width:44ch}
.cc-go{grid-column:2;grid-row:1 / span 3;align-self:start;font-size:1.75rem;line-height:1;transition:transform var(--dur-base) var(--ease)}
.cc-card:hover .cc-name,.cc-card:focus-visible .cc-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.cc-card:hover .cc-go,.cc-card:focus-visible .cc-go{transform:translateX(6px)}
.cc-foot{width:var(--container);margin:clamp(1.75rem,3.5vw,2.75rem) auto 0}
.reduced-motion .cc-slide:not(.is-in) .cc-media{opacity:1}

/* ==========================================================================
   WYBRANE REALIZACJE — three bands, one per pillar: a visual showcase. Every item
   keeps the native ratio of its asset at the band height (no crops); each band has
   its own shape and starting offset. Items are NOT links (no pointer cursor, no hover
   state). Live mode (.is-live, set by front-page.js): the viewport clips, the track
   drifts by transform on one rAF loop. Without JS / with reduced motion the viewport
   is a plain horizontally scrollable strip.
   ========================================================================== */
.selected-work{background:var(--night);color:var(--ivory);padding:clamp(4.5rem,8vw,8rem) 0 clamp(4rem,7vw,7rem)}
.sw-inner{width:var(--container);margin-inline:auto}
.sw-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem}
.sw-intro{max-width:46rem}
.selected-work h2{font-weight:700;font-size:var(--fs-h1);letter-spacing:-.028em;line-height:1.04}
.selected-work-lead{margin-top:var(--space-heading-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--smoke);max-width:46ch}
.selected-work-all{flex:none}
.sb{margin-top:clamp(2.5rem,5vw,4.5rem)}
.sb-head{width:var(--container);margin:0 auto var(--sp-24);padding-top:var(--sp-24);border-top:1px solid var(--scene-line);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.sb-name{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.2}
/* 320px phones: "Projektowanie graficzne" (longest word ~140px) + 3 x 44px controls need 304px, the container has 280px;
   let the controls drop under the name instead of overflowing the viewport (Phase 11Z) */
@media (max-width:21.5rem){.sb-head{flex-wrap:wrap;row-gap:var(--sp-8)}}
.sb--screens{--bh:clamp(11rem,21vw,23rem)}
.sb--formats{--bh:clamp(15rem,28vw,31rem)}
.sb--mixed{--bh:clamp(12rem,23vw,25rem)}
.sb-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sb-viewport::-webkit-scrollbar{display:none}
.sb-track{position:relative;align-items:flex-start;width:max-content;min-width:100%}
.sb--formats .sb-track{padding-left:calc(var(--pad) + clamp(1rem,6vw,7rem))}
.sb--mixed .sb-track{padding-left:calc(var(--pad) + clamp(.5rem,3vw,3.5rem))}
.sb-item{position:relative;flex:none}
.sb-card{margin:0}
.sb-media{position:relative;display:block;height:var(--bh);width:calc(var(--bh) * var(--r));overflow:hidden;background:var(--coal)}
.sb-media .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none}
.sb-cap{display:block;width:calc(var(--bh) * var(--r));max-width:100%;min-width:11rem;padding-top:var(--sp-12)}
.sb-title,.sb-brand{display:block}
.sb-title{font-size:var(--fs-small);font-weight:700;line-height:1.3}
.sb-brand{margin-top:2px;font-size:var(--fs-meta);line-height:1.4;color:var(--smoke)}
.sb-foot{width:var(--container);margin:var(--sp-8) auto 0}
.sb-pause .sb-pause__play{display:none}
.sb.is-paused .sb-pause .sb-pause__pause{display:none}
.sb.is-paused .sb-pause .sb-pause__play{display:block}
/* live: JS owns the position */
.sb.is-live .sb-viewport{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.sb.is-live .sb-viewport.is-dragging{cursor:grabbing}
.sb.is-live .sb-track{padding-inline:0;min-width:0;will-change:transform;backface-visibility:hidden}
.sb-item[data-clone]{pointer-events:none}


/* ==========================================================================
   Z CZYM PRZYCHODZISZ — typographic split. Left: five situations as large
   statements (ARIA tabs). Right: one flat crimson plane that answers the chosen
   situation. All panels share one grid cell, so the height never changes with the
   choice. Mobile: the plane sits under the list.
   ========================================================================== */
.starting-points{background:var(--night);color:var(--ivory);padding:clamp(4.5rem,8vw,8rem) 0}
.start-wrap{width:var(--container);margin-inline:auto}
.starting-points h2{font-weight:700;font-size:var(--fs-h1);letter-spacing:-.028em;line-height:1.04}
.start-grid{margin-top:clamp(2rem,4vw,3.5rem);display:grid;gap:var(--sp-32)}
.start-list{display:flex;flex-direction:column;border-top:1px solid var(--scene-line)}
.start-tab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);width:100%;min-height:64px;padding:18px 0 18px 2px;text-align:left;
  border-bottom:1px solid var(--scene-line);color:var(--smoke);font-size:clamp(1.2rem,1.9vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.12;
  transition:color var(--dur-snap) var(--ease),box-shadow var(--dur-snap) var(--ease)}
.start-tab:hover{color:var(--ivory)}
.start-tab[aria-selected="true"]{color:var(--ivory);box-shadow:inset 0 -2px 0 var(--ivory)}
.start-tab:focus-visible{outline:2px solid var(--ivory);outline-offset:-2px}
.start-tab__go{flex:none;font-size:1.5rem;line-height:1;opacity:0;transform:translateX(-8px);transition:opacity var(--dur-snap) var(--ease),transform var(--dur-base) var(--ease)}
.start-tab[aria-selected="true"] .start-tab__go{opacity:1;transform:none}
.start-stage{display:grid;background:var(--coal);color:var(--ivory);border:1px solid var(--scene-line)}
.start-panel{grid-area:1 / 1;display:flex;flex-direction:column;min-width:0;
  visibility:hidden;opacity:0;transition:opacity var(--dur-base) var(--ease),visibility 0s linear var(--dur-base)}
.start-panel.is-active{visibility:visible;opacity:1;transition:opacity var(--dur-base) var(--ease),visibility 0s}
.start-media{position:relative;flex:none;aspect-ratio:16/10;overflow:hidden;background:var(--night)}
.start-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.start-media--mark{background:var(--crimson);color:var(--deep)}
.start-mark{position:absolute;height:150%;width:auto;right:-6%;top:-18%}
.start-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-16);padding:clamp(1.25rem,2.4vw,2.25rem)}
.start-title{max-width:22ch;font-size:clamp(1.5rem,2.3vw,2.25rem);font-weight:700;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
.start-body{max-width:52ch;font-size:var(--fs-body);line-height:1.55;color:var(--ivory);text-wrap:pretty}
.start-services{display:flex;flex-wrap:wrap;gap:0 var(--sp-24);list-style:none;margin:0;padding:0}
.start-services a{display:inline-flex;align-items:center;min-height:40px;color:var(--ivory);font-size:15px;font-weight:700;line-height:1.2;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--smoke);transition:text-decoration-color var(--dur-snap) var(--ease)}
.start-services a:hover,.start-services a:focus-visible{text-decoration-color:var(--ivory)}
.start-cta{margin-top:auto;padding-top:var(--sp-8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8) var(--sp-24)}
.start-quote{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--crimson);color:var(--ivory);font-size:16px;font-weight:700;line-height:1;
  transition:background-color var(--dur-snap) var(--ease),color var(--dur-snap) var(--ease)}
.start-quote:hover,.start-quote:focus-visible{background:var(--ivory);color:var(--night)}
.start-scope{display:inline-flex;align-items:center;min-height:44px;color:var(--ivory);font-size:16px;font-weight:700;line-height:1.2;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.start-scope:hover,.start-scope:focus-visible{text-decoration-thickness:2px}
.start-quote:focus-visible,.start-scope:focus-visible,.start-services a:focus-visible{outline:2px solid var(--ivory);outline-offset:4px}
@media (max-width:30rem){ .start-quote{width:100%} }
@media (max-width:63.99rem){ .start-tab__go{transform:translateY(-6px) rotate(90deg)} .start-tab[aria-selected="true"] .start-tab__go{transform:rotate(90deg)} }
@media (min-width:64rem){
  .start-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,4vw,5rem);align-items:stretch}
  .start-tab{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ .start-panel,.start-panel.is-active{transition:none} }

/* ==========================================================================
   SPECJALIZACJE — one scene; the selector sits on the same surface as the
   content (no separate strip). Scene = active tab: night / crimson / ivory.
   ========================================================================== */
.spec{background:var(--scene-bg);color:var(--scene-fg);transition:background-color 240ms var(--ease),color 240ms var(--ease)}
.spec-tabs{position:sticky;top:var(--header-h);z-index:20;display:flex;background:var(--scene-bg);border-bottom:1px solid var(--scene-line);transition:background-color 240ms var(--ease)}
body.admin-bar .spec-tabs{top:calc(var(--header-h) + 32px)}
.spec-tab{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 8px;text-align:center;font-size:var(--fs-small);font-weight:700;line-height:1.2;color:var(--scene-fg-2);cursor:pointer;transition:color var(--dur-snap) var(--ease)}
.spec-tab:hover{color:var(--scene-fg)}
.spec-tab[aria-selected="true"]{color:var(--scene-fg);box-shadow:inset 0 -2px 0 currentColor}
.spec-tab:focus-visible{outline:2px solid var(--scene-focus);outline-offset:-4px}
.spec-panel{width:var(--container);margin-inline:auto;padding:clamp(3rem,6vw,6rem) 0 clamp(4rem,8vw,8rem);display:grid;gap:var(--sp-32)}
.spec-name{font-weight:700;font-size:clamp(2.25rem,5.4vw,5.5rem);letter-spacing:-.03em;line-height:1}
.spec-lead{margin-top:var(--space-heading-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--scene-fg-2);max-width:40ch}
.spec-services{margin-top:var(--sp-32)}
.spec-more{min-width:0}
.spec-services a{display:flex;align-items:center;min-height:44px;padding-block:var(--sp-8);font-size:var(--fs-h3);font-weight:700;line-height:1.15;letter-spacing:-.015em}
.spec-services a:hover,.spec-services a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.spec-request{margin-top:var(--sp-16);font-size:var(--fs-small);line-height:1.5;color:var(--scene-fg-2)}
.spec-request .link-inline{color:var(--scene-fg)}
.spec-cta{margin-top:var(--sp-32);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8) var(--sp-32)}
@media (max-width:30rem){ .spec-cta .btn-primary{width:100%} }
.spec-text{display:contents}
.spec-head{order:1}
.spec-visual{min-width:0;order:2}
.spec-more{order:3}
.spec-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.spec-slot{position:relative;display:block;overflow:hidden;aspect-ratio:9/16;background:var(--coal)}
.spec-slot:nth-child(2){margin-top:clamp(1rem,3.4vw,3.5rem)}
.spec-slot .media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spec-slot:focus-visible{outline:2px solid var(--scene-focus);outline-offset:3px}
@media (min-width:64rem){
  .spec-panel{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-24);align-items:start}
  .spec-text{display:block;grid-column:1 / 6}
  .spec-visual{grid-column:7 / 13;order:0}
}

/* ==========================================================================
   JAK WYGLĄDA WSPÓŁPRACA — four real stages, a real artefact for the active one
   (sticky field on desktop; visual activation only, the page is never pinned)
   ========================================================================== */
.method{background:var(--coal);color:var(--ivory);padding:clamp(4.5rem,8vw,8rem) 0}
.method-intro,.method-body{width:var(--container);margin-inline:auto}
.method h2{font-weight:700;font-size:var(--fs-h1);letter-spacing:-.028em;line-height:1.04}
.method-lead{margin-top:var(--space-heading-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--smoke);max-width:46ch}
.method-body{margin-top:clamp(2.5rem,5vw,4rem)}
.method-field{margin:0}
.method-artefacts{position:relative;height:min(46svh,26rem);background:var(--night);overflow:hidden}
.method-artefact{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-shift) var(--ease-impulse)}
.method-artefact.is-active{opacity:1}
.method-artefact img{width:100%;height:100%;object-fit:contain;padding:5%;box-sizing:border-box}
.method-source{margin-top:var(--sp-12);font-size:var(--fs-meta);line-height:1.4;color:var(--smoke)}
.method-stages{margin-top:var(--sp-32);display:flex;flex-direction:column;gap:clamp(2.5rem,7vh,4.5rem)}
.method-stage-name{font-weight:700;font-size:clamp(1.75rem,3vw,2.75rem);letter-spacing:-.025em;line-height:1.08;color:var(--smoke);transition:color .4s ease}
.method-stage.is-active .method-stage-name{color:var(--ivory)}
.method-stage-body{margin-top:.6rem;font-size:var(--fs-lead);line-height:1.5;max-width:40ch;color:var(--smoke);transition:color .4s ease}
.method-stage.is-active .method-stage-body{color:var(--ivory)}
.method-stage-gets{margin-top:.75rem;font-size:var(--fs-small);line-height:1.5;color:var(--smoke);transition:color .4s ease}
.method-stage.is-active .method-stage-gets{color:var(--ivory)}
.method-stage-gets span{font-weight:700;margin-right:.3rem}
.method-stage-gets a{margin-left:.4rem;font-weight:700;border-bottom:1px solid currentColor}
@media (min-width:64rem){
  .method-body{display:grid;grid-template-columns:7fr 5fr;column-gap:clamp(2rem,5vw,5rem);align-items:start}
  .method-field{position:sticky;top:calc(var(--header-h) + 2rem);z-index:1}
  .method-artefacts{height:min(66svh,40rem)}
  .method-stages{margin-top:0;padding-bottom:clamp(2rem,10vh,6rem)}
}
.reduced-motion .method-stage-name,.reduced-motion .method-stage-body,.reduced-motion .method-stage-gets{color:var(--ivory)}

/* ==========================================================================
   LUDZIE — three full-bleed panels in each world's colour
   ========================================================================== */
.people{background:var(--ivory);color:var(--night);padding:6.5rem 0 0}
.people-intro{max-width:44rem;padding:0 var(--edge)}
.people h2{font-weight:700;font-size:clamp(2.25rem,4.4vw,4rem);letter-spacing:-.02em}
.people-lead{margin-top:var(--space-heading-lead);font-size:1.125rem;color:var(--ash)}

.people-panels{margin-top:3rem;display:flex;flex-direction:column}
.people-panel{padding:clamp(2.5rem,5vw,3.5rem) var(--edge);display:flex;flex-direction:column;gap:1.5rem}
.people-panel-night{background:var(--night);color:var(--ivory)}
.people-panel-crimson{background:var(--crimson);color:var(--ivory)}
.people-panel-ivory{background:var(--ivory);color:var(--night);box-shadow:inset 0 1px 0 rgba(13,13,12,.15)}
.people-panel-discipline{font-weight:900;font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:-.02em}
.people-panel-visual{min-height:8rem;display:flex;align-items:flex-end}
.people-signature{display:block;width:100%}
.people-signature-svg{height:4rem;width:auto;max-width:100%;color:currentColor}
.people-panel-text{min-width:0}
.people-panel-name{font-weight:700;font-size:1.5rem}
.people-panel-role{margin-top:.25rem;font-size:1rem;font-weight:500;opacity:.9} /* .8 gave ivory on crimson 4.16:1; .9 = 4.92:1 (Phase 11Z) */
.people-panel-areas{margin-top:.6rem;font-size:1.0625rem;max-width:36ch}
.people-panel-link{display:inline-flex;min-height:44px;align-items:center;margin-top:.5rem;font-weight:600;border-bottom:1px solid currentColor;width:fit-content}

@media (min-width:64rem){
  .people-panel-areas{min-height:5.6em}
  .people-panels{flex-direction:row;min-height:min(100svh,980px)}
  .people-panel{flex:1 1 33.33%;justify-content:center}
  .people-panel-visual{min-height:10rem}
  .people-signature-svg{height:5.5rem}
}
@media (min-width:64rem) and (hover:hover) and (pointer:fine){
  .people-panel{transition:flex-grow var(--dur-shift) var(--ease-impulse)}
  .people-panel:hover,.people-panel:focus-within,.people-panel:focus{flex-grow:1.6}
  .people-panels:has(.people-panel:hover) .people-panel:not(:hover),
  .people-panels:has(.people-panel:focus-within) .people-panel:not(:focus-within){flex-grow:.5}
}
.reduced-motion .people-panel{transition:none}

/* ==========================================================================
   ZAUFANIE — real answers to real questions; an editorial list, no badges
   ========================================================================== */
.trust{background:var(--coal);color:var(--ivory);padding:clamp(4.5rem,8vw,8rem) 0}
.trust-wrap{width:var(--container);margin-inline:auto;display:grid;gap:var(--sp-40)}
.trust h2{font-weight:700;font-size:var(--fs-h1);letter-spacing:-.028em;line-height:1.04;max-width:15ch}
.trust-lead{margin-top:var(--space-heading-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--smoke);max-width:36ch}
.trust-cta{margin-top:var(--sp-32)}
.trust-list{border-top:1px solid var(--scene-line)}
.trust-row{display:grid;gap:8px;padding:var(--sp-24) 0;border-bottom:1px solid var(--scene-line)}
.trust-row dt{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.trust-row dd{margin:0;max-width:58ch;font-size:var(--fs-body);line-height:1.55;color:var(--smoke)}
.trust-row .link-inline{display:inline-block;margin-left:.35em;color:var(--ivory);font-weight:700}
@media (min-width:64rem){
  .trust-wrap{grid-template-columns:5fr 1fr 6fr;column-gap:0;align-items:start}
  .trust-intro{grid-column:1;position:sticky;top:calc(var(--header-h) + 2rem)}
  .trust-list{grid-column:3}
}

/* ==========================================================================
   NOTATKI ZE STUDIA (conditional blog preview)
   ========================================================================== */
.insights{background:var(--ivory);color:var(--night);padding:6.5rem 0}
.insights-inner{max-width:64rem;margin:0 auto;padding:0 var(--edge)}
.insights h2{font-weight:700;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.02em}
.insights-list{margin-top:var(--space-heading-lead)}
.insight-row{display:block;padding:1.4rem 0;border-top:1px solid rgba(13,13,12,.15);transition:opacity .18s ease}
.insight-row:last-child{border-bottom:1px solid rgba(13,13,12,.15)}
.insight-row:hover,.insight-row:focus-visible{opacity:.7}
.insight-title{display:block;font-weight:700;font-size:1.25rem}
.insight-date{display:block;margin-top:.3rem;font-size:.875rem;color:var(--ash)}
.insight-excerpt{display:block;margin-top:.5rem;font-size:1.0625rem;color:var(--ash);max-width:52ch}
.insights-link{display:inline-block;margin-top:2rem;font-weight:600;font-size:1rem;border-bottom:1px solid currentColor;text-underline-offset:.3em}
@media (min-width:56rem){
  .insight-row{display:grid;grid-template-columns:1fr 8rem;column-gap:2rem;align-items:baseline}
  .insight-date{order:3;text-align:right}
  .insight-excerpt{grid-column:1/2}
}

/* ==========================================================================
   FINAŁ — mirrors the hero, closes the shutter (motion signature #3)
   ========================================================================== */
.final-cta{position:relative;min-height:90svh;display:flex;align-items:center;background:var(--night);overflow:hidden}
.final-cta-inner{width:100%;max-width:90rem;margin:0 auto;padding:4rem var(--edge);display:grid;gap:3rem}
.final-cta-content h2{font-weight:900;font-size:clamp(3rem,7vw,7.5rem);letter-spacing:-.025em;line-height:.95}
.final-cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.final-cta-note{margin-top:1.25rem;max-width:44ch;color:rgba(242,239,230,.78);font-size:1rem;line-height:1.5;text-wrap:pretty}
.final-cta-symbol .shutter-form{position:absolute;inset:0;width:100%;height:100%;transition:transform var(--dur-shift) var(--ease-impulse)}
.final-cta-symbol .shutter-form-upper{color:var(--ivory)}
.final-cta-symbol .shutter-form-lower{color:var(--crimson)}

.final-cta-symbol{position:relative;justify-self:center;width:min(60vw,20rem);aspect-ratio:100/104;color:var(--ivory)}
.final-cta-symbol .shutter-form-upper{transform:translate(-14%,-11%);transition:transform var(--dur-shift) var(--ease-impulse)}
.final-cta-symbol .shutter-form-lower{transform:translate(14%,11%);transition:transform var(--dur-shift) var(--ease-impulse)}
.final-cta-symbol.is-closed .shutter-form-upper,
.final-cta-symbol.is-closed .shutter-form-lower{transform:translate(0,0)}

@media (min-width:64rem){
  .final-cta-inner{grid-template-columns:1fr 1fr;align-items:center}
  .final-cta-row{justify-content:flex-start}
  .final-cta-symbol{width:min(32vw,22rem);justify-self:end}
}

.reduced-motion .final-cta-symbol .shutter-form-upper,
.reduced-motion .final-cta-symbol .shutter-form-lower{transition:none;transform:translate(0,0)}

@media (prefers-reduced-motion: reduce){
  body.home *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}
}