/* =========================================================
   Gro i Buczy — wariant B „Signal path”
   Colour-block modernism + one continuous cable (js/signal.js)
   ========================================================= */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono-latin-ext.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #17111D;
  --cream: #FFF7EC;
  --pink: #FF6BB0;
  --violet: #6A3AE6;
  --orange: #FF5F1F;
  --green: #A4E636;
  --yellow: #FFD43B;
  --red: #D8232A;
  --white: #FFFFFF;
  --metal: #C9CDD3;

  --bg: var(--cream);
  --fg: var(--ink);

  --maxw: 1440px;
  --gut: clamp(20px, 6vw, 104px);
  --wire-x: max(calc(var(--gut) / 2), calc((100% - var(--maxw)) / 2 + var(--gut) / 2));
  --wire-w: 16px;
  --plug-scale: 1;
  --hdr: 72px;
  --r: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --f: "Bricolage", "Arial Narrow", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; position: relative; overflow-x: clip;
  background: var(--cream); color: var(--ink);
  font-family: var(--f); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.5;
  font-weight: 420; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
strong { font-weight: 720; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 2px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- colour blocks ---------- */
.blk { position: relative; background: var(--bg); color: var(--fg); transition: background-color .5s var(--ease), color .5s var(--ease); }
.blk--pink   { --bg: var(--pink);   --fg: var(--ink); }
.blk--ink    { --bg: var(--ink);    --fg: var(--cream); }
.blk--orange { --bg: var(--orange); --fg: var(--ink); }
.blk--violet { --bg: var(--violet); --fg: var(--white); }
.blk--green  { --bg: var(--green);  --fg: var(--ink); }
.blk--yellow { --bg: var(--yellow); --fg: var(--ink); }
.blk--red    { --bg: var(--red);    --fg: var(--white); }
.blk--cream  { --bg: var(--cream);  --fg: var(--ink); }

/* ---------- the cable ---------- */
.wire { position: absolute; left: 0; top: 0; width: 100%; height: 100px; z-index: 1; pointer-events: none; overflow: visible; }
.wire path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wire__out { stroke: var(--ink); stroke-width: calc(var(--wire-w) + 6px); }
.wire__core { stroke-width: var(--wire-w); }
.wire__sheen { stroke: #fff; stroke-opacity: .38; stroke-width: calc(var(--wire-w) * .18); transform: translate(-2px, -3px); }
.plug { visibility: hidden; }
.wire.is-built .plug--xlr { visibility: visible; }
.wire.is-done .plug--jack { visibility: visible; }
.plug__boot, .plug__body { fill: #2a2231; stroke: #8d8597; stroke-width: 2; }
.plug__ring { fill: var(--plug-c, var(--violet)); }
.plug__grip { stroke: #463c52; stroke-width: 3; stroke-linecap: round; fill: none; }
.plug__metal { fill: var(--metal); stroke: var(--ink); stroke-width: 2.5; }
.plug__pins { stroke: var(--metal); stroke-width: 5; stroke-linecap: round; }
.plug__ins { fill: var(--ink); }
.cp { position: absolute; width: 2px; height: 2px; pointer-events: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em; min-height: 56px; padding: 0 1.6em;
  border-radius: 2px; font-weight: 700; font-size: 1.05rem; text-decoration: none; border: 3px solid var(--btn-b, var(--ink));
  transition: transform .25s var(--ease), background-color .25s, color .25s; cursor: pointer;
}
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--line { background: transparent; color: var(--fg); --btn-b: currentColor; }
.btn--pink { background: var(--pink); color: var(--ink); --btn-b: var(--pink); --btn-sh: var(--yellow); }
.btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--btn-sh, var(--yellow)); }
.btn--line:hover { background: var(--fg); color: var(--bg); }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr);
  --hbg: var(--violet); --hfg: var(--white);
  background: var(--hbg); color: var(--hfg);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .3s;
}
.top.is-scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--hfg) 22%, transparent); }
.top__in { height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { color: var(--hfg); }
.brand__pin { fill: var(--hbg); transition: fill .45s; }
.brand__word { font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; font-stretch: 88%; white-space: nowrap; }
.brand__word i { font-style: normal; font-weight: 300; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 4px; }
.nav__list a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
  text-decoration: none; font-weight: 640; border-bottom: 3px solid transparent; transition: border-color .2s;
}
.nav__list a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--hfg); }
.nav__list a:hover, .nav__list a[aria-current] { border-bottom-color: currentColor; }
.nav__order { font-weight: 640; text-decoration: none; font-size: .95rem; white-space: nowrap; }
.nav__order span { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; opacity: .8; margin-right: 6px; }
.nav__order:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-btn { display: none; }

@media (max-width: 1100px) { .nav__order { display: none; } }
@media (max-width: 860px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px 0 18px;
    border-radius: 2px; border: 2.5px solid currentColor; background: transparent; font-weight: 700; cursor: pointer;
  }
  .menu-btn__bars { position: relative; width: 32px; height: 32px; background: currentColor; }
  .menu-btn__bars span { position: absolute; left: 9px; right: 9px; height: 2.5px; background: var(--hbg); border-radius: 2px; transition: transform .3s var(--ease); }
  .menu-btn__bars span:first-child { top: 12px; } .menu-btn__bars span:last-child { top: 18px; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav {
    position: fixed; inset: var(--hdr) 0 0 0; background: var(--ink); color: var(--cream);
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 24px;
    padding: 24px var(--gut) 32px; visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; overflow-y: auto;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav__list { flex-direction: column; gap: 6px; }
  .nav__list a { font-size: clamp(2.2rem, 11vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; padding: 6px 4px; gap: 16px; font-stretch: 85%; }
  .nav__list a::before { width: 22px; height: 22px; box-shadow: none; }
  .nav__list a:hover, .nav__list a[aria-current] { border-bottom-color: transparent; color: var(--c); }
  .nav__order { display: block; font-size: 1.1rem; }
  .nav__order span { display: block; margin-bottom: 4px; }
}

/* ---------- shared section head ---------- */
.head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kick port" "title port" "desc desc";
  column-gap: 32px; align-items: end; margin-bottom: clamp(40px, 6vw, 88px);
}
.head--flip { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "port kick" "port title" "desc desc"; }
.head__kick { grid-area: kick; margin-bottom: 10px; }
.head__title, .contact__title {
  grid-area: title; font-weight: 800; font-stretch: 82%; letter-spacing: -.045em; line-height: .86;
  font-size: clamp(3.6rem, 12.5vw, 11.5rem);
}
.head__desc { grid-area: desc; max-width: 46ch; margin-top: 24px; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.45; }
.head--flip .head__desc { justify-self: start; }
.port {
  grid-area: port; align-self: center; width: clamp(64px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); color: var(--cream); display: grid; place-items: center; position: relative;
  box-shadow: inset 0 0 0 6px var(--ink), inset 0 0 0 9px var(--metal);
}
.port span { font-family: var(--mono); font-size: clamp(.9rem, 1.4vw, 1.25rem); }
.port::before, .port::after { content: ""; position: absolute; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--metal); top: 30%; }
.port::before { left: 24%; } .port::after { right: 24%; }

/* ---------- HERO ---------- */
.hero { padding-top: calc(var(--hdr) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(96px, 12vw, 200px); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "meta meta" "title disc" "foot disc"; column-gap: clamp(24px, 4vw, 64px); }
.hero__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-bottom: clamp(64px, 9vw, 130px); }
.hum { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; animation: hum 1.2s ease-in-out infinite; }
@keyframes hum { 50% { transform: scale(.55); } }
.hero__title {
  grid-area: title; align-self: end; font-weight: 800; font-stretch: 80%; letter-spacing: -.035em; line-height: .8;
  font-size: clamp(5.2rem, 16vw, 15rem); margin-left: -.04em;
}
.hero__title > span[class^="hero__w"] { display: block; }
.hero__w2 { margin-left: .36em; }
.hero__i { font-weight: 260; font-stretch: 100%; letter-spacing: 0; }
.hero__disc { grid-area: disc; align-self: center; justify-self: center; width: min(100%, 560px); position: relative; margin-top: -40px; }
.hero__disc img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 10px var(--ink); }
.hero__cap { position: absolute; left: 0; right: 0; bottom: -60px; display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 2px solid currentColor; white-space: nowrap; }
.hero__foot { grid-area: foot; display: flex; flex-direction: column; gap: 28px; margin-top: clamp(32px, 4vw, 56px); }
.hero__lead { max-width: 30ch; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.25; font-weight: 520; letter-spacing: -.01em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.cp--hero-a { left: var(--wire-x); top: calc(var(--hdr) + clamp(24px, 4vw, 56px) + 22px + clamp(64px, 9vw, 130px) / 2); }
.cp--hero-b { right: var(--wire-x); bottom: 40px; }

/* ---------- SPEC ---------- */
.spec { padding-block: clamp(56px, 7vw, 104px); }
.plugs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 5vw, 72px); }
.plugs li {
  font-weight: 800; font-stretch: 85%; letter-spacing: -.03em; font-size: clamp(1.6rem, 3.6vw, 3.4rem); line-height: 1;
  padding: .2em .5em .24em; background: var(--c); color: var(--ink); box-shadow: inset -.45em 0 0 rgba(0,0,0,.18);
}
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; padding-right: var(--gut); }
.facts div { border-top: 2px solid color-mix(in srgb, var(--cream) 30%, transparent); padding-top: 16px; }
.facts dt { color: var(--yellow); margin-bottom: 8px; }
.facts dd { font-size: 1.15rem; line-height: 1.35; font-weight: 520; }
.cp--spec { right: var(--wire-x); bottom: 20px; }

/* ---------- SHOP ---------- */
.shop { padding-block: clamp(96px, 11vw, 176px) clamp(120px, 12vw, 200px); }
.shop .head { padding-right: calc(var(--gut) * .4); }
.cp--shop-a { right: var(--wire-x); top: 30px; }
.cp--shop-b { right: var(--wire-x); bottom: 110px; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-bottom: 40px; }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__label { margin-right: 6px; }
.chip {
  min-height: 44px; padding: 0 16px; border-radius: 2px; border: 2.5px solid currentColor; background: transparent;
  font-weight: 680; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color .2s, color .2s;
}
.chip__n { font-family: var(--mono); font-size: .72rem; opacity: .75; }
.chip:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.sw {
  width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 0; cursor: pointer; position: relative;
  box-shadow: 0 0 0 2.5px var(--ink); transition: transform .2s var(--ease);
}
.sw:hover { transform: scale(1.12); }
.sw[aria-pressed="true"]::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--fg); }
.filters__count { margin-left: auto; }

.prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 28px); }
.prod[hidden] { display: none; }
.prod__link { display: block; text-decoration: none; border-radius: var(--r); }
.prod__field {
  display: block; position: relative; aspect-ratio: 1; border-radius: var(--r); background: var(--t); color: var(--t-on);
  overflow: hidden;
}
.prod__disc { position: absolute; inset: 13%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--ink); transition: transform .7s var(--ease); }
.prod__disc img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.prod__no { position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: .8rem; }
.prod__plug { position: absolute; right: 14px; bottom: 14px; font-family: var(--mono); font-size: .72rem; padding: 3px 7px; border: 1.5px solid currentColor; }
.prod__body { padding: 16px 4px 0; display: grid; gap: 4px; }
.prod__kind { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; opacity: .85; }
.prod__title { font-weight: 800; font-stretch: 86%; letter-spacing: -.03em; font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); line-height: 1; }
.prod__len { font-weight: 380; font-stretch: 100%; letter-spacing: -.01em; }
.prod__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.prod__color { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--fg); }
.prod__price { font-weight: 800; font-size: 1.15rem; white-space: nowrap; border-bottom: 3px solid var(--c); line-height: 1.2; }
.prod__price small { font-weight: 420; font-size: .72em; opacity: .8; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .prod__link:hover .prod__disc { transform: rotate(-24deg) scale(1.04); }
}
.prod__link:hover .prod__title, .prod__link:focus-visible .prod__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.prod.is-entering { animation: pop .5s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.cta-tile a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; min-height: 240px;
  padding: 24px; border-radius: var(--r); background: var(--ink); color: var(--cream); text-decoration: none;
  transition: transform .3s var(--ease);
}
.cta-tile__t { font-weight: 800; font-stretch: 84%; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: -.035em; line-height: .95; }
.cta-tile__go { font-weight: 700; color: var(--pink); }
.cta-tile a:hover { transform: rotate(-2deg); }
.prods.is-filtered .cta-tile a { aspect-ratio: auto; }
.prods__empty { margin-top: 24px; font-size: 1.2rem; }

/* ---------- 13:00 ---------- */
.cutoff { padding-block: clamp(96px, 11vw, 180px); }
.cutoff__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.cp--cut-b { left: var(--wire-x); bottom: 70px; }
.clock { width: clamp(180px, 26vw, 380px); }
.clock__face { fill: var(--ink); }
.clock__ticks rect { fill: var(--orange); }
.clock__h, .clock__m { fill: var(--cream); transform-origin: 100px 100px; }
.clock__c { fill: var(--orange); stroke: var(--ink); stroke-width: 4; }
@media (min-width: 861px) { .cutoff__text { padding-top: 72px; } }
.cutoff__title { display: flex; flex-direction: column; gap: 4px; }
.cutoff__kick { font-size: .9rem; }
.cutoff__time { font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .82; font-size: clamp(6rem, 21vw, 20rem); }
.cutoff__p { max-width: 40ch; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.35; font-weight: 520; margin-top: 16px; }
.cutoff__status { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 12px 16px; border-left: 6px solid var(--ink); background: var(--ink); color: var(--cream); text-transform: none; font-size: .88rem; }
.cutoff__status .led { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 35%, transparent); }
.cutoff__status.is-late .led { background: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 35%, transparent); }

/* ---------- SERVICES ---------- */
.svcs-sec { padding-block: clamp(96px, 11vw, 180px) clamp(120px, 12vw, 200px); }
.svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px) clamp(20px, 3vw, 48px); }
.svc:nth-child(3n+2) { margin-top: clamp(0px, 6vw, 96px); }
.svc__link { display: block; text-decoration: none; }
.svc__media { display: block; overflow: hidden; background: var(--ink); transition: border-radius .5s var(--ease); }
.svc__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s var(--ease); }
.svc--arch .svc__media { border-radius: 999px 999px 24px 24px; }
.svc--circle .svc__media { border-radius: 50%; } .svc--circle .svc__media img { aspect-ratio: 1; }
.svc--pill .svc__media { border-radius: 0 0 0 50%; }
.svc--leaf .svc__media { border-radius: 50% 24px 50% 24px / 40% 24px 40% 24px; }
.svc--drop .svc__media { border-radius: 24px 50% 50% 50%; } .svc--drop .svc__media img { aspect-ratio: 1; }
.svc--squircle .svc__media { border-radius: 64px; }
.svc__row { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; font-family: var(--mono); font-size: .76rem; text-transform: uppercase; }
.svc__no { font-weight: 700; }
.svc__title { margin-top: 8px; font-weight: 760; font-stretch: 88%; letter-spacing: -.025em; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem); line-height: 1.02; }
.arrow { display: inline-block; transition: transform .3s var(--ease); }
.svc__link:hover .arrow, .case__link:hover .arrow { transform: translateX(8px); }
.svc__link:hover .svc__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (hover: hover) { .svc__link:hover .svc__media img { transform: scale(1.05); } }
.cp--svc-b { left: var(--wire-x); bottom: 40px; }

/* ---------- CASES ---------- */
.cases-sec { padding-block: clamp(96px, 11vw, 180px) clamp(120px, 12vw, 200px); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cats a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 2px; background: var(--ink); color: var(--cream); text-decoration: none; font-weight: 640; }
.cats a:hover { background: var(--cream); color: var(--ink); }
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) clamp(20px, 3vw, 48px); align-items: start; }
.case--n1 { grid-column: 1 / span 5; }
.case--n2 { grid-column: 7 / span 6; margin-top: clamp(0px, 10vw, 180px); }
.case--n3 { grid-column: 1 / span 6; }
.case--n4 { grid-column: 8 / span 5; margin-top: clamp(0px, 6vw, 96px); }
.case--n5 { grid-column: 2 / span 5; }
.case--n6 { grid-column: 7 / span 6; margin-top: clamp(0px, 8vw, 140px); }
.case--n7 { grid-column: 1 / span 5; }
.case--n8 { grid-column: 7 / span 5; margin-top: clamp(0px, 8vw, 140px); }
.case__link { display: block; text-decoration: none; }
.case__media { display: block; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.case__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); }
.case--tall .case__media img { aspect-ratio: 4 / 5; }
.case__no { display: block; margin-top: 18px; padding-top: 8px; font-family: var(--mono); font-size: .76rem; border-top: 2px solid currentColor; }
.case__title { margin-top: 12px; font-weight: 760; font-stretch: 88%; letter-spacing: -.025em; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); line-height: 1.04; max-width: 24ch; }
.case__ex { margin-top: 12px; max-width: 52ch; }
.case__more { display: inline-flex; gap: 8px; margin-top: 14px; font-weight: 720; border-bottom: 2.5px solid currentColor; padding-bottom: 2px; }
@media (hover: hover) { .case__link:hover .case__media img { transform: scale(1.04); } }
.case__link:hover .case__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.cp--cases-a { right: var(--wire-x); top: 50px; }
.cp--cases-b { right: var(--wire-x); bottom: 40px; }

/* ---------- WORKSHOP ---------- */
.workshop { padding-block: clamp(80px, 9vw, 150px); }
.workshop__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.workshop__title { font-weight: 800; font-stretch: 82%; letter-spacing: -.045em; line-height: .86; font-size: clamp(3.2rem, 9vw, 8.5rem); }
.workshop__ctrl { display: flex; gap: 10px; }
.arrow-btn { width: 64px; height: 64px; border-radius: 2px; border: 3px solid var(--ink); background: var(--ink); color: var(--yellow); font-size: 1.5rem; cursor: pointer; transition: transform .2s var(--ease); }
.arrow-btn:hover:not(:disabled) { transform: scale(1.08); }
.arrow-btn:disabled { background: transparent; color: var(--ink); opacity: .45; cursor: default; }
.tape {
  position: relative; z-index: 2; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); scroll-padding-inline: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
  padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.tape:focus-visible { outline-offset: -4px; }
.tape__item { flex: 0 0 min(60vw, 960px); scroll-snap-align: start; position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.tape__item img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.tape__n { position: absolute; left: 14px; bottom: 14px; font-family: var(--mono); font-size: .74rem; background: var(--yellow); color: var(--ink); padding: 4px 8px; }
.cp--work-b { right: var(--wire-x); bottom: 50px; }

/* ---------- NEWS ---------- */
.news { padding-block: clamp(96px, 11vw, 180px) clamp(120px, 12vw, 200px); }
.outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.out {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; min-height: clamp(160px, 18vw, 260px); padding: clamp(20px, 2.5vw, 36px);
  border-radius: 2px; background: var(--cream); color: var(--ink); text-decoration: none; border-top: 14px solid var(--ink);
  transition: transform .3s var(--ease), background-color .3s;
}
.out:nth-child(1) { }

.out__n { grid-column: 1 / -1; align-self: start; }
.out__name { font-weight: 800; font-stretch: 80%; letter-spacing: -.045em; line-height: .9; font-size: clamp(2.6rem, 6.5vw, 6rem); }
.out__go { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.out:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); background: var(--yellow); }
.cp--news-a { left: var(--wire-x); top: 50px; }
.cp--news-b { left: var(--wire-x); bottom: 70px; }

/* ---------- CONTACT ---------- */
.contact { padding-block: clamp(96px, 11vw, 180px) clamp(120px, 12vw, 200px); }
.contact .head { grid-template-areas: "kick port" "title port"; }
.contact__title { font-size: clamp(3rem, 8.4vw, 8rem); line-height: .9; max-width: 13ch; }
.contact__title span { display: block; color: var(--violet); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.lines { display: grid; gap: 14px; }
.line {
  display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 16px; min-height: 92px; padding: 0 28px 0 12px;
  border-radius: 2px; background: var(--ink); color: var(--cream); text-decoration: none; transition: transform .3s var(--ease);
}
.line__who { display: inline-grid; place-items: center; align-self: stretch; margin-block: 10px; background: var(--c); color: var(--ink); }
.line[style*="6A3AE6"] .line__who { color: #fff; }
.line__val { font-weight: 760; font-stretch: 88%; letter-spacing: -.02em; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.3rem); overflow-wrap: anywhere; line-height: 1.05; }
.line__go { font-size: 1.6rem; transition: transform .3s var(--ease); }
.line:hover { transform: translateX(8px); }
.line:hover .line__go { transform: translateX(6px); }
.about { padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: var(--yellow); }
.about__h { margin-bottom: 14px; font-size: .8rem; }
.about__p { font-size: 1.2rem; line-height: 1.4; font-weight: 520; }
.about__addr { font-style: normal; margin-top: 20px; font-size: 1.1rem; line-height: 1.45; }
.about__map { display: inline-flex; margin-top: 20px; font-weight: 720; border-bottom: 2.5px solid currentColor; text-decoration: none; }
.cp--contact-a { right: var(--wire-x); top: 50px; }
.cp--contact-b { right: var(--wire-x); bottom: 0; }

/* ---------- FOOTER ---------- */
.foot { padding-block: clamp(80px, 9vw, 140px) 40px; }
.nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.nl__title { font-weight: 800; font-stretch: 82%; letter-spacing: -.045em; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: .9; color: var(--pink); margin-bottom: 16px; }
.nl__text p { max-width: 46ch; }
.nl__form { width: 100%; max-width: 480px; }
.nl__label { display: block; margin-bottom: 10px; }
.nl__row { display: flex; gap: 10px; flex-wrap: wrap; }
.nl__input {
  flex: 1 1 220px; min-height: 56px; padding: 0 18px; border-radius: 2px; border: 2.5px solid var(--cream);
  background: transparent; color: var(--cream);
}
.nl__input::placeholder { color: color-mix(in srgb, var(--cream) 60%, transparent); }
.nl__input:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.nl__note { margin-top: 12px; font-size: .9rem; opacity: .85; }
.nl__msg { margin-top: 8px; color: var(--green); }
.foot a:focus-visible { outline-color: var(--pink); }
.foot__out { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block: clamp(64px, 8vw, 120px) 40px; }
.foot__wm { font-weight: 800; font-stretch: 78%; letter-spacing: -.055em; line-height: .8; font-size: clamp(4rem, 15vw, 15rem); color: var(--cream); }
.foot__wm i { font-style: normal; font-weight: 260; font-stretch: 100%; }
.foot__out { position: relative; }
.cp--foot { right: calc(var(--gut) * -.5); top: -240px; }
.socket {
  flex: none; position: relative; width: clamp(120px, 12vw, 170px); height: 72px; border-radius: 18px; margin-top: 80px;
  background: #2a2231; box-shadow: inset 0 0 0 3px var(--metal); display: grid; place-items: center;
}
.socket__nut { position: absolute; left: 50%; top: -12px; width: 46px; height: 14px; transform: translateX(-50%); border-radius: 4px; background: var(--metal); box-shadow: 0 0 0 2.5px var(--ink); }
.socket__lbl { color: var(--pink); margin-top: 8px; }
.foot__base { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 20px 40px; align-items: center; border-top: 2px solid color-mix(in srgb, var(--cream) 25%, transparent); padding-top: 28px; }
.foot__def dfn { font-style: normal; font-weight: 760; color: var(--yellow); }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__links a { text-decoration: none; font-weight: 600; }
.foot__links a:hover { color: var(--pink); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc:nth-child(3n+2) { margin-top: 0; }
  .svc:nth-child(even) { margin-top: clamp(0px, 8vw, 96px); }
  .foot__base { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  :root { --hdr: 64px; --wire-w: 10px; --plug-scale: .62; --gut: 24px; }
  .hero__in { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "disc" "foot"; }
  .hero__meta { padding-bottom: 72px; }
  .cp--hero-a { top: calc(var(--hdr) + 24px + 52px + 72px + 1.6 * clamp(5.2rem, 16vw, 15rem) + 30px); }
  .hero__disc { width: min(78%, 420px); margin-top: 84px; justify-self: end; margin-right: 6%; }
  .hero__cap { bottom: -52px; }
  .hero__foot { margin-top: 88px; }
  .cases { grid-template-columns: 1fr; }
  .cases > .case { grid-column: 1 !important; margin-top: 0 !important; }
  .cases > .case:nth-child(even) { padding-left: 12%; }
  .cases > .case:nth-child(odd) { padding-right: 12%; }
  .cutoff__in { grid-template-columns: 1fr; }
  .contact__grid, .nl { grid-template-columns: 1fr; }
  .outs { grid-template-columns: 1fr; }
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters__count { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  :root { --gut: 26px; --r: 20px; --wire-w: 8px; --plug-scale: .5; }
  .head, .head--flip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kick port" "title title" "desc desc"; }
  .head--flip { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "port kick" "title title" "desc desc"; }
  .head__kick { align-self: center; margin-bottom: 0; }
  .head--flip .head__kick { padding-left: 4px; }
  .port { margin-bottom: 18px; }
  .head__title { font-size: clamp(3.2rem, 17vw, 5rem); }
  .svcs { grid-template-columns: 1fr; }
  .svc:nth-child(even) { margin-top: 0; }
  .svc:nth-child(odd) { padding-right: 14%; } .svc:nth-child(even) { padding-left: 14%; }
  .prods { gap: 28px 12px; }
  .prod__field { --r: 18px; }
  .prod__title { font-size: 1.25rem; }
  .prod__meta { flex-direction: column; align-items: flex-start; }
  .prod__plug { display: none; }
  .line { grid-template-columns: 5.2rem 1fr auto; min-height: 76px; padding: 0 18px 0 8px; gap: 10px; }
  .line__who { margin-block: 8px; }
  .tape__item { flex-basis: 86vw; }
  .workshop__head { flex-wrap: wrap; }
  .arrow-btn { width: 52px; height: 52px; }
  .workshop__title { font-size: clamp(2.8rem, 15vw, 4rem); }
  .tape__item img { aspect-ratio: 2 / 1; }
  .out { min-height: 140px; }
  .cases > .case:nth-child(n) { padding-inline: 0; }
  .foot__out { flex-direction: column; align-items: flex-start; }
  .socket { align-self: flex-end; }
  .cp--cut-b { left: var(--wire-x); bottom: 70px; }
.clock { width: 64vw; margin-inline: auto; }
  .contact .head { grid-template-areas: "kick port" "title title"; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print { .wire, .top, .filters { display: none !important; } .blk { background: #fff !important; color: #000 !important; } }
.prod[data-color="bialy"] .prod__price { border-bottom-color: var(--ink); }
.shop[style*="--bg"] .prod__price { border-bottom-color: currentColor; }