/* ==========================================================================
   JKF Studio — Direction C · "CONTRAST"
   Pure black / pure white, alternating full-bleed blocks.
   Hand-written, zero dependencies.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --white:#FFFFFF;
  --black:#0B0B0B;
  --grey-on-white:#6E6E6E;
  --grey-on-black:#9C9C9C;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* spacing — 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1360px;
  --hdr: 76px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.6,.05,.2,1);

  /* type scale */
  --fs-hero: clamp(2.2rem, 10.7vw, 7.75rem);
  --fs-h2:   clamp(2.375rem, 8.4vw, 4.75rem);
  --fs-h2-lg:clamp(2.75rem, 11vw, 9rem);
  --fs-h3:   clamp(1.125rem, 1.35vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1.25vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-mono: .6875rem;

  /* defaults (light block) */
  --bg: var(--white);
  --fg: var(--black);
  --muted: var(--grey-on-white);
  --line: rgba(11,11,11,.18);
  --line-soft: rgba(11,11,11,.10);
}

[data-block-theme="light"]{
  --logo-inv: 0;
  --bg: var(--white); --fg: var(--black);
  --muted: var(--grey-on-white);
  --line: rgba(11,11,11,.18);
  --line-soft: rgba(11,11,11,.10);
}
[data-block-theme="dark"]{
  --logo-inv: 1;
  --bg: var(--black); --fg: var(--white);
  --muted: var(--grey-on-black);
  --line: rgba(255,255,255,.20);
  --line-soft: rgba(255,255,255,.11);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--black);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
::selection{ background:var(--black); color:var(--white); }
[data-block-theme="dark"] ::selection{ background:var(--white); color:var(--black); }

:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:1px; }
/* scroll targets are focused programmatically so the skip link actually moves the
   keyboard position — they are containers, not controls, so no ring */
[tabindex="-1"]:focus{ outline:none; }

.mono{
  font-family:var(--mono); font-size:var(--fs-mono);
  letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.block{ background:var(--bg); color:var(--fg); position:relative; }

.skip{
  position:fixed; left:var(--s4); top:var(--s4); z-index:200;
  transform:translateY(-160%); transition:transform .25s var(--ease);
  background:var(--black); color:var(--white); padding:.75rem 1.25rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{ transform:none; }
.skip:focus-visible{ outline:2px solid var(--white); outline-offset:-7px; }

/* ---------- 3. Buttons ---------- */
.btn{
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center;
  height:3.375rem; padding-inline:1.65rem; border:1px solid var(--fg); background:transparent;
  color:var(--fg); font-size:.9375rem; font-weight:600; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:-1px; background:var(--fg); z-index:-1;
  transition:transform .5s var(--ease);
}
.btn--solid{ color:var(--bg); }
.btn--solid::before{ transform:scaleY(1); transform-origin:bottom; }
.btn--solid:hover{ color:var(--fg); }
.btn--solid:hover::before{ transform:scaleY(0); transform-origin:top; }
.btn--ghost::before{ transform:scaleY(0); transform-origin:bottom; }
.btn--ghost:hover{ color:var(--bg); }
.btn--ghost:hover::before{ transform:scaleY(1); transform-origin:bottom; }
.btn--wide{ width:100%; }

.sq{
  width:3rem; height:3rem; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--fg); background:transparent; color:var(--fg);
  transition:background .35s var(--ease), color .35s var(--ease), opacity .3s;
}
.sq svg{ width:20px; height:20px; }
.sq:hover:not(:disabled){ background:var(--fg); color:var(--bg); }
.sq:disabled{ opacity:.22; cursor:default; }

/* ---------- 4. Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--hdr);
  background:var(--bg); color:var(--fg);
  border-bottom:1px solid transparent;
  transition:background-color .32s var(--ease-io), color .32s var(--ease-io), border-color .32s var(--ease-io);
}
.hdr[data-on="light"]{ --logo-inv:0; --bg:var(--white); --fg:var(--black); --muted:var(--grey-on-white); --line:rgba(11,11,11,.18); }
.hdr[data-on="dark"] { --logo-inv:1; --bg:var(--black); --fg:var(--white); --muted:var(--grey-on-black); --line:rgba(255,255,255,.20); }
.hdr.is-stuck{ border-bottom-color:var(--line); }
.hdr-in{
  position:relative;
  height:100%; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:flex-end; gap:clamp(16px,2.5vw,40px);
  transition:padding-right .45s var(--ease);
}

/* The header logo lives in the top-RIGHT corner and only appears once the big
   hero mark has scrolled away, so the two are never on screen together.
   It is absolutely positioned (a zero-width flex item would still collect the
   header's flex `gap`); .hdr-in grows its right padding by the same amount, so
   the CTA slides left to make room instead of being overlapped. */
.brand{
  position:absolute; right:var(--gutter); top:50%;
  display:flex; align-items:center; text-decoration:none;
  opacity:0; pointer-events:none; transform:translate(12px,-50%);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.hdr[data-logo="on"] .brand{ opacity:1; pointer-events:auto; transform:translate(0,-50%); }
.hdr[data-logo="on"] .hdr-in{
  padding-right:calc(var(--gutter) + clamp(38px,4vw,52px) * 1.229 + clamp(14px,1.6vw,22px));
}
/* The supplied logo already contains both "JKF" and "STUDIO", so the header
   shows it whole and drops the duplicate wordmark next to it. Sized by height
   so its stroke weight survives — at 30px the strokes collapsed to hairlines. */
.brand-mark{
  height:clamp(38px,4vw,52px); width:auto; display:block;
  filter:brightness(0) invert(var(--logo-inv,0));
}

.nav{ display:flex; align-items:center; gap:clamp(14px,1.7vw,28px); }
.nav a{
  position:relative; text-decoration:none; font-size:.875rem; font-weight:500;
  letter-spacing:.005em; padding-block:.35rem;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a.is-cur::after{ transform:scaleX(1); transform-origin:left; }
.nav a.is-cur{ opacity:1; }

.hdr-act{ display:flex; align-items:center; gap:clamp(10px,1.2vw,18px); }
.hdr-cta{ height:2.75rem; padding-inline:1.25rem; font-size:.8125rem; letter-spacing:.02em; }

/* language flip */
.lang{
  display:flex; align-items:center; gap:.5rem; background:none; border:0; padding:.25rem; cursor:pointer;
}
.lang-flip{
  width:32px; height:20px; position:relative; display:block;
  transform-style:preserve-3d; transition:transform .62s var(--ease);
}
.lang-face{ position:absolute; inset:0; backface-visibility:hidden; }
.lang-face img{ width:32px; height:20px; }
.lang-face--pl{ transform:rotateY(180deg); }
[data-lang="en"] .lang-flip{ transform:rotateY(180deg); }
.lang-code{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; font-weight:600; }
.lang-code i{ font-style:normal; display:none; }
[data-lang="pl"] .lang-code i[data-for="pl"]{ display:inline; }
[data-lang="en"] .lang-code i[data-for="en"]{ display:inline; }
.lang:hover .lang-flip{ filter:brightness(1.04); }

.burger{
  display:none; width:2.75rem; height:2.75rem; border:1px solid var(--fg); background:transparent;
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:.75rem; right:.75rem; height:1px; background:currentColor;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:1.05rem; }
.burger span:nth-child(2){ bottom:1.05rem; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(.32rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-.32rem) rotate(-45deg); }

/* ---------- 5. Drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:100; background:var(--black); color:var(--white);
  opacity:0; visibility:hidden; transition:opacity .42s var(--ease), visibility .42s;
  display:flex; flex-direction:column;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer-in{ display:flex; flex-direction:column; height:100%; padding:0 var(--gutter) var(--s7); }
.drawer-top{ height:var(--hdr); display:flex; align-items:center; justify-content:space-between; }
.drawer-brand{ font-weight:600; }
.drawer-x{ width:2.75rem; height:2.75rem; border:1px solid rgba(255,255,255,.25); background:none; display:grid; place-items:center; cursor:pointer; }
.drawer-x svg{ width:20px; height:20px; }
.drawer-nav{ margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; }
.drawer-nav a{
  display:flex; align-items:baseline; gap:1rem; text-decoration:none;
  padding:.55rem 0; border-top:1px solid rgba(255,255,255,.14);
  font-size:clamp(1.75rem,8vw,2.5rem); font-weight:700; letter-spacing:-.03em; line-height:1.15;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.drawer-nav a:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.drawer-nav a i{ font-size:.625rem; letter-spacing:.14em; color:var(--grey-on-black); font-style:normal; }
.drawer.is-open .drawer-nav a{ opacity:1; transform:none; }
.drawer.is-open .drawer-nav a:nth-child(1){ transition-delay:.10s }
.drawer.is-open .drawer-nav a:nth-child(2){ transition-delay:.15s }
.drawer.is-open .drawer-nav a:nth-child(3){ transition-delay:.20s }
.drawer.is-open .drawer-nav a:nth-child(4){ transition-delay:.25s }
.drawer.is-open .drawer-nav a:nth-child(5){ transition-delay:.30s }
.drawer.is-open .drawer-nav a:nth-child(6){ transition-delay:.35s }
.drawer-foot{ display:flex; align-items:center; gap:16px; }
.drawer-foot .btn{ --fg:var(--white); --bg:var(--black); flex:1 1 auto; }
.lang--drawer{ flex:0 0 auto; border:1px solid rgba(255,255,255,.25); height:3.375rem; padding-inline:.9rem; }

/* ---------- 6. Side index ---------- */
.sidex{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:70;
  display:none; flex-direction:column; gap:16px;
  transition:color .32s var(--ease-io);
}
.sidex[data-on="light"]{ color:var(--black); }
.sidex[data-on="dark"]{ color:var(--white); }
.sidex a{ position:relative; display:block; width:12px; height:12px; text-decoration:none; }
.sidex b{
  position:absolute; right:1px; top:3px; display:block; width:8px; height:8px;
  border:1px solid currentColor; opacity:.35;
  transition:opacity .35s var(--ease), background-color .35s var(--ease), width .35s var(--ease);
}
.sidex i{
  position:absolute; right:18px; top:-2px; font-family:var(--mono); font-size:.5625rem;
  letter-spacing:.1em; opacity:0; transform:translateX(4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.sidex a:hover b{ opacity:1; }
.sidex a:hover i{ opacity:.6; transform:none; }
.sidex a.is-cur b{ opacity:1; background:currentColor; }
.sidex a.is-cur i{ opacity:1; transform:none; }
@media (min-width:1200px){ .sidex{ display:flex; } }

/* ---------- 7. Reveal primitives ---------- */
.rise{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease) calc(var(--d,0)*90ms), transform .8s var(--ease) calc(var(--d,0)*90ms);
}
.rise.is-in{ opacity:1; transform:none; }
/* grid cells keep their own opaque background and reveal their contents,
   so the 1px rule grid never flashes through a half-faded cell */
.riseK > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease) calc(var(--d,0)*90ms), transform .8s var(--ease) calc(var(--d,0)*90ms);
}
.riseK.is-in > *{ opacity:1; transform:none; }
.wipe{ position:relative; display:inline-block; }
.wipe::after{
  content:""; position:absolute; inset:-.18em -.06em -.26em -.04em;
  background:var(--bg); transform-origin:100% 50%;
  transition:transform 1s var(--ease) calc(var(--ln,0)*.09s);
  pointer-events:none;
}
.wipe.is-in::after{ transform:scaleX(0); }

/* ---------- 8. Hero ---------- */
.hero{ padding-top:calc(var(--hdr) + clamp(34px,4.8vw,72px)); padding-bottom:clamp(32px,4vw,56px); }
.hero-in{ display:flex; flex-direction:column; }
.eyebrow{ color:var(--muted); margin-bottom:clamp(22px,2.8vw,40px); }

.hero-title{
  font-size:var(--fs-hero); line-height:.9; letter-spacing:-.045em; font-weight:700;
  margin:0 0 clamp(34px,3.2vw,44px);
}
.hero-title .line{ display:block; overflow:visible; }
.hero-title .line:nth-child(2){ padding-left:clamp(0px,6vw,120px); }


.hero-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(24px,5vw,80px); }
.hero-copy{ max-width:52ch; }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--muted); max-width:60ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,36px); }

.hero-mark{
  flex:0 0 auto; width:clamp(140px,18vw,248px); position:relative;
  aspect-ratio:510 / 415;
}
/* One image, never sliced — any clip boundary would land mid-stroke and the
   sub-pixel rounding at that seam is visible at this size. */
.hero-mark img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:brightness(0) invert(var(--logo-inv,0));
  animation:markIn 900ms var(--ease) both 200ms;
}
@keyframes markIn{
  from{ opacity:0; transform:translate3d(0,22px,0) scale(.94); }
  to  { opacity:1; transform:none; }
}

.scrollcue{
  margin-top:clamp(26px,3.2vw,44px); display:inline-flex; align-items:center; gap:.9rem;
  color:var(--muted); text-decoration:none; align-self:flex-start;
  transition:color .35s var(--ease);
}
.scrollcue:hover{ color:var(--fg); }
.scrollcue-rail{ display:block; width:1px; height:44px; background:var(--line); position:relative; overflow:hidden; }
.scrollcue-rail i{ position:absolute; inset:0; background:currentColor; animation:cueRun 2.4s var(--ease-io) infinite; }
@keyframes cueRun{
  0%{ transform:translateY(-100%); } 55%{ transform:translateY(100%); } 100%{ transform:translateY(100%); }
}

/* ---------- 9. Stats ---------- */
.stats{ padding-bottom:clamp(56px,7vw,96px); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-block:1px solid var(--line);
}
.stat{ background:var(--bg); padding:clamp(20px,2.4vw,32px) clamp(14px,1.8vw,26px) clamp(18px,2.2vw,28px); }
.stat-v{
  display:block; font-size:clamp(2.25rem,4.2vw,3.75rem); font-weight:700;
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat-l{ display:block; margin-top:.85rem; color:var(--muted); line-height:1.5; }

/* ---------- 10. Sections ---------- */
.sec{ padding-block:clamp(72px,9vw,150px); scroll-margin-top:var(--hdr); }
#top{ scroll-margin-top:var(--hdr); }
.label{ color:var(--muted); }
.sec-head{ margin-bottom:clamp(44px,6vw,88px); }
.sec-title{
  font-size:var(--fs-h2); line-height:.9; letter-spacing:-.04em; font-weight:700;
  text-transform:uppercase; margin:.5rem 0 0; max-width:16ch;
}
.sec-lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--muted); max-width:46ch; }
.sec-lead--wide{ max-width:52ch; }
.sec-head .sec-lead{ margin-top:clamp(18px,2vw,28px); }
.sec-head--split{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,72px); align-items:end;
}
.sec-head--split .sec-lead{ margin-top:0; padding-bottom:.4rem; }
@media (max-width:860px){
  .sec-head--split{ grid-template-columns:1fr; align-items:start; }
  .sec-head--split .sec-lead{ margin-top:1.25rem; }
}

/* ---------- 11. Marquee ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  padding-block:clamp(14px,1.6vw,22px);
  -webkit-user-select:none; user-select:none;
}
.marq-track{ display:flex; width:max-content; animation:marq var(--dur,42s) linear infinite; }
.marquee[data-dir="rev"] .marq-track{ animation-direction:reverse; }
.marquee:hover .marq-track{ animation-play-state:paused; }
@keyframes marq{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-50%,0,0);} }
.marq-seq{ display:flex; align-items:center; flex:0 0 auto; }
.marq-word{
  font-size:clamp(2.25rem,6.2vw,5.5rem); font-weight:700; letter-spacing:-.035em;
  line-height:1.05; text-transform:uppercase; white-space:nowrap; padding-inline:.32em;
}
.marq-dot{ flex:0 0 auto; align-self:center; width:.13em; height:.13em; background:currentColor;
  font-size:clamp(2.25rem,6.2vw,5.5rem); }
.marquee--b .marq-word{ font-weight:700; }

/* ---------- 12. Services ---------- */
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.svc{
  background:var(--bg); padding:clamp(26px,2.6vw,40px);
  display:flex; flex-direction:column; min-height:clamp(230px,20vw,290px);
  transition:background-color .45s var(--ease);
  position:relative;
}
.svc::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.svc:hover::after{ transform:scaleX(1); }
.svc-n{ color:var(--muted); }
.svc-ico{ display:block; margin:clamp(22px,2.2vw,34px) 0 0; }
.svc-ico svg{ width:34px; height:34px; color:var(--fg); }
.svc-t{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:clamp(18px,1.9vw,26px); }
.svc-b{ margin-top:.7rem; color:var(--muted); font-size:.9375rem; line-height:1.6; max-width:34ch; }

/* ---------- 13. Work ---------- */
.sec--work{ padding-bottom:clamp(56px,7vw,110px); }
.rail{
  position:relative; display:flex; align-items:flex-start; gap:clamp(20px,2.4vw,40px);
  overflow-x:auto; overscroll-behavior-x:contain;
  --rail-pad:calc(50% - min(50%, var(--maxw) / 2) + var(--gutter));
  scroll-snap-type:x mandatory; scroll-padding-left:var(--rail-pad);
  padding:4px var(--rail-pad) clamp(28px,3vw,44px);
  scrollbar-width:none; cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-drag{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.rail.is-drag *{ pointer-events:none; }
.rail-end{ flex:0 0 1px; height:1px; }
.proj{ flex:0 0 auto; scroll-snap-align:start; }
.proj--m{ width:min(268px,68vw); }
.proj--d{ width:min(740px,88vw); }

.frame{ position:relative; }
.frame--phone{
  background:var(--fg); border-radius:34px; padding:9px;
  box-shadow:0 0 0 1px var(--line);
}
.phone-screen{ position:relative; border-radius:26px; overflow:hidden; background:var(--bg); }
.phone-screen img{ width:100%; height:auto; }
/* The frame's pale hairline is painted outside its box, so beside the black bar it
   read as page while beside the pale screenshot it read as part of the image -- the
   bar looked ~2px narrower than the shot even though the two boxes are identical to
   the pixel. The bar carries its own hairline in its own colour, which covers the
   pale one for exactly the bar's height: the outline is dark around the chrome and
   pale around the screenshot, and both end on the same outer column. */
.frame--win{ box-shadow:0 0 0 1px var(--line); background:var(--bg); }
.win-bar{
  box-shadow:0 0 0 1px var(--fg);
  display:flex; align-items:center; gap:7px; height:34px; padding-inline:14px;
  background:var(--fg); color:var(--bg);
}
.win-bar i{ width:9px; height:9px; border-radius:50%; border:1px solid currentColor; opacity:.55; }
.win-url{ margin-left:14px; height:12px; flex:1 1 auto; max-width:46%; background:currentColor; opacity:.22; border-radius:6px; }
.win-screen img{ width:100%; height:auto; }
.ph{
  position:absolute; left:16px; bottom:16px; z-index:2;
  background:var(--fg); color:var(--bg); padding:.45rem .7rem; font-size:.5625rem; letter-spacing:.14em;
}
.frame--phone .ph{ left:20px; bottom:20px; }

.proj-meta{ margin-top:clamp(18px,2vw,26px); }
.tag{ display:inline-block; border:1px solid var(--line); padding:.35rem .6rem; color:var(--muted); }
.proj-t{ font-size:clamp(1.25rem,1.8vw,1.6rem); font-weight:700; letter-spacing:-.025em; margin-top:.85rem; }
.proj-b{ margin-top:.55rem; color:var(--muted); font-size:.9375rem; line-height:1.6; max-width:40ch; }

.rail-ctrl{ display:flex; align-items:center; gap:clamp(20px,3vw,44px); }
.rail-bar{ flex:1 1 auto; height:1px; background:var(--line); position:relative; }
.rail-bar i{
  position:absolute; inset:0; background:var(--fg); transform-origin:left;
  transform:scaleX(var(--p,0)); transition:transform .18s linear;
}
.rail-btns{ display:flex; gap:8px; flex:0 0 auto; }

/* ---------- 14. Clients ---------- */
.cl-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.cl-grid li{
  background:var(--bg); display:grid; place-items:center;
  padding:clamp(26px,3vw,46px) clamp(14px,2vw,26px); min-height:clamp(110px,10vw,150px);
  transition:background-color .4s var(--ease);
}
/* Customer logos are forced to a single flat colour, whatever they arrive as.
   brightness(0) crushes every pixel to pure black regardless of its original
   hue — grayscale() would only desaturate, so a yellow logo would still read
   light and a navy one nearly solid. invert(1) then flips that to pure white
   for the dark blocks. Because the hovered cell fills with var(--fg), the logo
   has to flip to the opposite ink on hover. */
.cl-grid img{
  width:auto; height:auto;
  /* Caps BOTH axes so a square mark and a long wordmark end up optically
     similar rather than equally wide. --logo-scale is a per-logo nudge for
     the odd one out: <img style="--logo-scale:.85"> */
  max-width:min(100%, calc(172px * var(--logo-scale, 1)));
  max-height:calc(48px * var(--logo-scale, 1));
  object-fit:contain;
  filter:brightness(0); opacity:.72;
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
[data-block-theme="dark"] .cl-grid img{ filter:brightness(0) invert(1); opacity:.8; }
.cl-grid li:hover{ background:var(--fg); }
.cl-grid li:hover img{ filter:brightness(0) invert(1); opacity:1; }
[data-block-theme="dark"] .cl-grid li:hover img{ filter:brightness(0); opacity:1; }

/* ---------- 15. Process ---------- */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.step{ background:var(--bg); padding:clamp(26px,2.6vw,40px); min-height:clamp(220px,18vw,270px); display:flex; flex-direction:column; }
.step-n{
  font-size:clamp(2.75rem,4.4vw,4.25rem); font-weight:700; line-height:.85; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.4px var(--fg);
  transition:color .5s var(--ease);
}
.step:hover .step-n{ color:var(--fg); }
.step-t{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em; margin-top:auto; padding-top:clamp(26px,2.6vw,40px); }
.step-b{ margin-top:.6rem; color:var(--muted); font-size:.9375rem; line-height:1.6; }

/* ---------- 16. About ---------- */
.sec--about{ padding-top:0; }
.sec--about > .wrap::before{
  content:""; display:block; border-top:1px solid var(--line);
  margin-bottom:clamp(56px,6.5vw,110px);
}
.about-title{
  font-size:clamp(2.125rem,5vw,4.25rem); line-height:.95; letter-spacing:-.04em; font-weight:700;
  margin:.5rem 0 clamp(36px,4.5vw,64px); max-width:18ch;
}
.about-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,72px);
  border-top:1px solid var(--line); padding-top:clamp(28px,3vw,44px);
}
.about-cols p{ font-size:1.0625rem; line-height:1.62; color:var(--muted); max-width:56ch; }
.about-cols p:first-child{ color:var(--fg); font-size:clamp(1.0625rem,1.35vw,1.25rem); }

/* ---------- 17. Contact ---------- */
.contact-title{
  font-size:var(--fs-h2-lg); line-height:.88; letter-spacing:-.045em; font-weight:700;
  text-transform:uppercase; margin:.4rem 0 clamp(22px,2.6vw,34px);
}
.clines{ margin-top:clamp(48px,6vw,88px); border-top:1px solid var(--line); }
.cline{
  display:grid; grid-template-columns:minmax(120px,.2fr) minmax(0,1fr);
  gap:clamp(12px,2vw,32px); align-items:start;
  padding-block:clamp(24px,3vw,40px); border-bottom:1px solid var(--line);
}
.cline-l{ color:var(--muted); padding-top:.6rem; }
.cline-m{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.reveal{
  background:none; border:0; padding:0; margin:0; text-align:left; cursor:pointer;
  text-decoration:none; display:block; min-width:0;
}
.reveal-v{
  display:block; font-size:clamp(1.5rem,4.2vw,3.25rem); font-weight:700; letter-spacing:-.035em;
  line-height:1.05; overflow-wrap:anywhere;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.16em;
  text-decoration-color:var(--muted);
  transition:text-decoration-color .35s var(--ease), opacity .35s var(--ease);
}
.reveal:hover .reveal-v{ text-decoration-color:currentColor; }
.reveal-h{ display:block; margin-top:.9rem; color:var(--muted); transition:color .35s var(--ease); }
.reveal:hover .reveal-h{ color:var(--fg); }
.reveal[data-revealed] .reveal-v{ text-decoration-color:currentColor; }

.copy{
  position:relative; flex:0 0 auto; width:2.75rem; height:2.75rem; margin-top:.4rem;
  border:1px solid var(--line); background:transparent; display:grid; place-items:center; cursor:pointer;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.copy svg{ width:18px; height:18px; }
.copy:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.copy-tip{
  position:absolute; bottom:calc(100% + 8px); right:0; white-space:nowrap;
  background:var(--fg); color:var(--bg); padding:.35rem .55rem; font-size:.5625rem;
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.copy[data-copied] .copy-tip{ opacity:1; transform:none; }
.copy[data-copied]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

.cinfo{
  margin-top:clamp(44px,5vw,76px);
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(24px,4vw,72px); align-items:start;
}
.cinfo-l{ display:block; color:var(--muted); margin-bottom:.6rem; }
.cinfo-v{ display:block; font-size:1.0625rem; font-weight:500; }
.cnote{ color:var(--muted); font-size:.875rem; line-height:1.6; max-width:44ch; justify-self:end; }

/* ---------- 18. Footer ---------- */
.ftr{ padding-block:clamp(56px,6vw,88px) clamp(28px,3vw,40px); border-top:1px solid var(--line); }
.ftr-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px); align-items:start;
}
.ftr-logo{ width:104px; height:auto; display:block; filter:brightness(0) invert(var(--logo-inv,0)); }
.ftr-tag{ color:var(--muted); font-size:.9375rem; }
/* logo sits flush right, above the back-to-top link */
.ftr-end{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(20px,2.6vw,32px);
}
.ftr-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:.6rem clamp(20px,3vw,48px); }
.ftr-nav a{ text-decoration:none; font-size:.9375rem; color:var(--muted); transition:color .3s var(--ease); }
.ftr-nav a:hover{ color:var(--fg); }
.totop{
  display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--muted);
  border:1px solid var(--line); padding:.7rem 1rem; transition:color .35s var(--ease), border-color .35s var(--ease);
}
.totop svg{ width:16px; height:16px; transition:transform .45s var(--ease); }
.totop:hover{ color:var(--fg); border-color:var(--fg); }
.totop:hover svg{ transform:translateY(-3px); }
.ftr-bot{
  margin-top:clamp(44px,5vw,72px); padding-top:clamp(18px,2vw,26px); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem clamp(20px,3vw,44px); align-items:center;
  color:var(--muted);
}

/* ---------- 19. Responsive ---------- */
@media (max-width:1180px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  :root{ --hdr:64px; }
  .nav{ display:none; }
  .hdr-cta{ display:none; }
  .burger{ display:block; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; }
  /* Stacked layout: the mark sits above the copy and hugs the RIGHT edge,
     mirroring where it sits beside the copy on desktop. */
  .hero-mark{
    order:-1; align-self:flex-end;
    width:clamp(150px,34vw,240px); margin-bottom:clamp(28px,4vw,44px);
  }
  /* 10 logos tile evenly only at 5 or 2 columns — a 3- or 4-wide step
     would leave dead cells in the last row, so go straight to 2. */
  .cl-grid{ grid-template-columns:repeat(2,1fr); }
  .ftr-top{ grid-template-columns:1fr 1fr; }
  .ftr-end{ grid-column:1 / -1; align-items:flex-end; }
}
@media (max-width:768px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); border:1px solid var(--line); }
  .svc-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step{ min-height:0; }
  .step-t{ margin-top:1.5rem; padding-top:0; }
  .about-cols{ grid-template-columns:1fr; }
  .cinfo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cnote{ grid-column:1 / -1; justify-self:start; }
  .cline{ grid-template-columns:1fr; gap:.75rem; }
  .cline-l{ padding-top:0; }

  /* work: vertical stack */
  .rail{
    display:grid; grid-template-columns:1fr; gap:clamp(40px,8vw,64px);
    overflow:visible; scroll-snap-type:none; cursor:auto;
    padding-inline:var(--gutter); padding-bottom:0;
    max-width:var(--maxw); margin-inline:auto;
  }
  .proj--m,.proj--d{ width:100%; }
  .proj--m{ max-width:340px; }
  .rail-ctrl{ display:none; }
  .rail-end{ display:none; }
}
@media (max-width:480px){
  .hero-title{ letter-spacing:-.05em; }
}
@media (max-width:560px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .ftr-top{ grid-template-columns:1fr; }
  .ftr-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-title .line:nth-child(2){ padding-left:0; }
  .stat{ padding:18px 16px 20px; }
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rise{ opacity:1 !important; transform:none !important; }
  .riseK > *{ opacity:1 !important; transform:none !important; }
  .wipe::after{ display:none !important; }
  .hero-mark img{ animation:none !important; opacity:1 !important; transform:none !important; }
  .marq-track{ animation:none !important; }
  .scrollcue-rail i{ animation:none !important; transform:translateY(0) !important; }
  .drawer-nav a{ opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   14. Services intro + the wide 8th capability card
   ===================================================================== */
.svc-intro{ display:grid; gap:clamp(14px,1.6vw,22px); }
.sec-lead--sub{ color:var(--muted); }
.label--how{
  margin:clamp(38px,4.4vw,64px) 0 clamp(16px,1.8vw,24px);
  padding-top:clamp(20px,2.4vw,32px); border-top:1px solid var(--line);
}
.svc--wide{ grid-column:span 2; }
.svc--wide .svc-b{ max-width:64ch; }

/* =====================================================================
   15. Partnership timeline (EVER Cleaning story)
   ===================================================================== */
.sec--story .sec-head{ margin-bottom:clamp(40px,4.6vw,68px); }

/* Story head: top-align the columns so the client logo sits level with the
   section label, rather than the default bottom alignment. */
.sec--story .sec-head--split{ align-items:start; }
.story-side{ display:flex; flex-direction:column; }
/* The client's logo sits on the FIRST BASELINE of the heading opposite it.
   Offset = label block (18px) + the title's .5rem margin, plus the distance
   from the title's line-box top down to its baseline, minus the logo's own
   box height (56px). Everything but the constants scales with --fs-h2, and
   the baseline distance depends on the heading's line-height, which differs
   by language (see section 16) — hence --k.
   A fixed 56px box with the logo bottom-aligned keeps this true whatever the
   replacement logo's own aspect ratio turns out to be. */
.story-logo{
  display:flex; align-items:flex-end; min-height:56px;
  --k:.830;                                    /* EN heading line-height .9  */
  margin:max(0px, calc(var(--fs-h2) * var(--k) - 30px)) 0 clamp(18px,2.2vw,28px);
}
html[data-lang="pl"] .story-logo{ --k:.880; }  /* PL heading line-height 1.0 */
.story-logo img{
  display:block; width:auto; height:auto;
  max-width:min(100%, 220px); max-height:56px; object-fit:contain;
  /* same flattening as the customer strip, so it matches whatever file lands here */
  filter:brightness(0) invert(var(--logo-inv,0)); opacity:.92;
}
.sec--story .sec-head--split .sec-lead{ padding-bottom:0; }
@media (max-width:860px){
  .story-logo{ margin-top:clamp(18px,3vw,26px); }
  .sec--story .sec-head--split .sec-lead{ margin-top:0; }
}

/* Vertical history rail. Five columns across stopped working once the story
   ran past five entries, and each cell had no room for real copy. A vertical
   rail scales to any number of entries and gives every one a full text column.
   --tl-year / --tl-gap drive the layout AND the rail position, so they only
   have to be changed in one place. */
.tl{
  --tl-year: clamp(76px, 9vw, 124px);
  --tl-gap:  clamp(22px, 3vw, 48px);
  list-style:none; margin:0; padding:0;
}
.tl-i{
  /* One shared line box for the year and the title, so both sit on the same
     optical line — and the node can be centred on it by calculation rather
     than by a hand-tuned offset that drifts as the type scales. */
  --tl-fs:   clamp(1.125rem, 1.5vw, 1.375rem);
  --tl-line: calc(var(--tl-fs) * 1.3);
  --tl-pad:  clamp(24px, 2.8vw, 38px);

  position:relative;
  display:grid; grid-template-columns:var(--tl-year) minmax(0,1fr);
  column-gap:var(--tl-gap);
  padding-block:var(--tl-pad);
}
.tl-i[hidden]{ display:none; }
.tl-i + .tl-i{ border-top:1px solid var(--line); }
/* the rail, drawn per row so it stops cleanly at the last visible entry */
.tl-i::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(var(--tl-year) + var(--tl-gap) / 2);
  width:1px; background:var(--line);
}
.tl-i:first-child::before{ top:var(--tl-pad); }
.tl-i.is-last::before{ bottom:auto; height:calc(var(--tl-pad) + var(--tl-line) / 2); }
/* square node — same motif as the logo's boxes. Centred on the year/title line. */
.tl-node{
  position:absolute; z-index:1;
  left:calc(var(--tl-year) + var(--tl-gap) / 2);
  /* Centre on the CAP height of the year, not on the line box: the line box
     centre sits low because of descender space, which read as misaligned.
     The correction is (ascent - descent - capHeight)/2, all proportional to
     the font size, so it holds as the type scales. Measured at 0.32em. */
  top:calc(var(--tl-pad) + var(--tl-line) / 2 - var(--tl-fs) * 0.32);
  width:11px; height:11px; transform:translate(-50%, -50%);
  background:var(--bg); border:2px solid currentColor;
  transition:background-color .28s var(--ease);
}
/* fills only while its own row is hovered */
@media (hover: hover){
  .tl-i:hover .tl-node{ background:currentColor; }
}
.tl-i:focus-within .tl-node{ background:currentColor; }

.tl-y{
  font-size:clamp(1rem, 1.5vw, 1.3125rem); font-weight:600;
  line-height:var(--tl-line);
  letter-spacing:.01em; color:var(--fg); font-variant-numeric:tabular-nums;
}
.tl-c{ max-width:62ch; }
.tl-t{
  font-size:var(--tl-fs); font-weight:600; line-height:var(--tl-line);
  letter-spacing:-.02em; margin-bottom:.5rem;
}
.tl-b{ font-size:.9375rem; line-height:1.6; color:var(--muted); }

@media (max-width:600px){
  .tl{ --tl-year:0px; --tl-gap:12px; }
  .tl-i{ grid-template-columns:minmax(0,1fr); padding-left:30px; }
  .tl-y{ margin-bottom:.3rem; }
}

.tl-kick{
  margin-top:clamp(34px,3.6vw,52px);
  font-size:clamp(1.0625rem,1.7vw,1.5rem); line-height:1.4;
  letter-spacing:-.015em; max-width:46ch;
}

@media (max-width:1024px){
  .svc--wide{ grid-column:span 2; }
}
@media (max-width:768px){
}
@media (max-width:560px){
  .svc--wide{ grid-column:span 1; }
}

/* the demoted positioning line under the hero headline */
.hero-sub{
  font-size:clamp(1.0625rem,1.5vw,1.375rem); line-height:1.45;
  letter-spacing:-.015em; color:var(--fg);
  padding-bottom:clamp(14px,1.6vw,20px); margin-bottom:clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--line); max-width:44ch;
}

/* =====================================================================
   16. Polish typography
   ---------------------------------------------------------------------
   Uppercase Latin has no descenders, so the display headings can run at
   line-height .88–.9. Polish uppercase does: the ogonek on Ą and Ę drops
   below the baseline and collides with the line beneath. Give the Polish
   rendering a little more leading — English keeps the tighter setting.
   ===================================================================== */
html[data-lang="pl"] .sec-title,
html[data-lang="pl"] .contact-title{ line-height:1.0; }
html[data-lang="pl"] .hero-title{ line-height:.94; }
html[data-lang="pl"] .about-title{ line-height:1.0; }