/* ==========================================================================
   WASIK COMPANY SP Z O O — design tokens
   "Wąsik" is Polish for a little moustache — and the street is Warsztatowa,
   Workshop Street. So: a workshop with a sense of humour. Mustard-yellow
   shop-sign ground, black ink, one hot-pink wink. The process is a ruler.
   No white, no beige, no blue.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=Hanken+Grotesk:wght@400;500;600&family=Fragment+Mono&display=swap');

:root{
  --mustard:    #f2b632;   /* page */
  --mustard-dk: #dba01a;   /* recessed */
  --mustard-lt: #f7c95e;   /* raised */
  --ink:        #16110a;
  --ink-sft:    #3d3217;
  --ink-dim:    #6b5920;
  --pink:       #ee4b8b;
  --pink-in:    #16110a;
  --rule:       #16110a;

  --display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --body: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Fragment Mono', ui-monospace, 'Courier New', monospace;

  --wrap: 1180px;
  --pad: clamp(18px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--mustard);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.03em;
  margin:0;
}
h4{ font-family:var(--body); margin:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* ------------------------------- header --------------------------------- */

.strip{ background:var(--ink); color:var(--mustard); }
.strip .wrap{ display:flex; justify-content:space-between; align-items:center; gap:14px; height:38px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.strip a{ text-decoration:none; }
.strip a:hover{ color:var(--pink); }
@media (max-width:560px){ .strip .where{ display:none; } .strip .wrap{ justify-content:center; } }

.mast{ text-align:center; padding-block:clamp(22px,3.4vw,36px) clamp(14px,2vw,22px); }
.mast a{ text-decoration:none; display:inline-block; }
.mast .mark{ width:74px; margin:0 auto 8px; }
.mast .word{ font-family:var(--display); font-weight:800; font-size:clamp(40px,7vw,76px); letter-spacing:-.05em; line-height:.9; display:block; }
.mast .sub{ display:block; margin-top:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-sft); }

.navbar{ position:sticky; top:0; z-index:60; background:var(--mustard); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.navbar ul{ list-style:none; margin:0 auto; padding:0 var(--pad); max-width:var(--wrap); display:flex; justify-content:center; overflow-x:auto; scrollbar-width:none; }
.navbar ul::-webkit-scrollbar{ display:none; }
.navbar li + li{ border-left:2px solid var(--ink); }
.navbar a{
  display:block; padding:13px clamp(14px,2.6vw,30px); white-space:nowrap;
  text-decoration:none; font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em;
  transition:background .18s, color .18s;
}
.navbar a:hover{ background:var(--ink); color:var(--mustard); }
@media (max-width:640px){ .navbar ul{ justify-content:flex-start; padding-inline:0; } }

/* ------------------------------- hero ----------------------------------- */

.hero{ border-bottom:2px solid var(--ink); }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,60px); padding-block:clamp(40px,6vw,84px); align-items:center; }
@media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } }

.hero h1{ font-size:clamp(40px,6.6vw,84px); }
.hero h1 .wink{ background:var(--pink); padding:0 .1em; display:inline-block; transform:rotate(-1.5deg); }
.hero .lede{ margin-top:22px; font-size:18px; color:var(--ink-sft); max-width:46ch; }
.hero-actions{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px;
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;
  text-decoration:none; border:2px solid var(--ink); cursor:pointer;
  box-shadow:4px 4px 0 var(--ink); transition:transform .14s, box-shadow .14s, background .14s;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn-pink{ background:var(--pink); color:var(--pink-in); }
.btn-ink{ background:var(--ink); color:var(--mustard); }
.btn-plain{ background:transparent; color:var(--ink); }

/* the unique bit: the moustache you can wax */
.stage{ position:relative; }
.disc{
  background:var(--pink); border:2px solid var(--ink); border-radius:50%;
  aspect-ratio:1; width:min(100%,460px); margin-inline:auto;
  display:grid; place-items:center; box-shadow:8px 8px 0 var(--ink);
}
.disc svg{ width:92%; height:auto; overflow:visible; }
#stache path{ fill:var(--ink); transition:d .12s ease-out; }
.wax{ margin:30px auto 0; max-width:460px; }
.wax label{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.wax label b{ font-weight:400; background:var(--ink); color:var(--mustard); padding:1px 8px; }
.wax input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:14px; background:transparent; cursor:ew-resize; }
.wax input[type=range]::-webkit-slider-runnable-track{ height:14px; background:var(--mustard-lt); border:2px solid var(--ink); }
.wax input[type=range]::-moz-range-track{ height:10px; background:var(--mustard-lt); border:2px solid var(--ink); }
.wax input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-8px; background:var(--pink); border:2px solid var(--ink); border-radius:50%; }
.wax input[type=range]::-moz-range-thumb{ width:22px; height:22px; background:var(--pink); border:2px solid var(--ink); border-radius:50%; }
.wax .tip{ margin-top:10px; font-size:13.5px; color:var(--ink-sft); text-align:center; }

/* ------------------------------- blocks --------------------------------- */

.block{ border-bottom:2px solid var(--ink); padding-block:clamp(48px,7vw,92px); }
.block.ink{ background:var(--ink); color:var(--mustard); border-bottom-color:var(--ink); }
.block-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,44px); }
.block-head h2{ font-size:clamp(30px,4.8vw,58px); }
.block-head .tag{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; border:2px solid currentColor; padding:5px 10px; }
.block-lead{ max-width:58ch; margin:-12px 0 clamp(24px,4vw,40px); color:var(--ink-sft); }
.block.ink .block-lead{ color:#d9b45a; }

/* services: horizontal drawer */
.drawer-tools{ display:flex; gap:10px; }
.drawer-tools button{
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  background:var(--mustard); border:2px solid var(--ink); font-family:var(--display); font-weight:800; font-size:20px; color:var(--ink);
  box-shadow:3px 3px 0 var(--ink); transition:transform .12s, box-shadow .12s, background .12s;
}
.drawer-tools button:hover{ background:var(--pink); }
.drawer-tools button:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }

.drawer{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px var(--pad) 22px; margin-inline:calc(var(--pad) * -1);
  scrollbar-width:thin; scrollbar-color:var(--ink) transparent;
}
.drawer:focus-visible{ outline:3px solid var(--pink); outline-offset:-3px; }
.card{
  flex:0 0 min(78vw,330px); scroll-snap-align:start;
  background:var(--mustard-lt); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  padding:24px 22px 28px; display:flex; flex-direction:column; min-height:330px; transition:background .18s;
}
.card:nth-child(even){ background:var(--mustard-dk); }
.card:hover{ background:var(--pink); }
.card .no{ font-family:var(--display); font-weight:800; font-size:64px; line-height:1; letter-spacing:-.06em; }
.card h3{ font-size:23px; margin-top:auto; padding-top:26px; }
.card p{ font-size:15px; color:var(--ink-sft); margin-top:10px; }
.card:hover p{ color:var(--ink); }

/* sectors: big type list */
.bigrows{ border-top:2px solid var(--mustard); }
.bigrow{
  display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:baseline;
  padding-block:22px; border-bottom:2px solid var(--mustard); transition:padding-left .2s, background .2s, color .2s;
}
.bigrow:hover{ padding-left:18px; background:var(--pink); color:var(--ink); }
.bigrow h3{ font-size:clamp(26px,4.6vw,56px); letter-spacing:-.04em; }
.bigrow p{ font-size:15.5px; color:#d9b45a; max-width:42ch; }
.bigrow:hover p{ color:var(--ink); }
@media (max-width:760px){ .bigrow{ grid-template-columns:1fr; gap:6px; } }

/* process: the ruler */
.ruler{
  height:46px; border:2px solid var(--ink); background:var(--mustard-lt);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 60px);
  background-size:100% 14px, 100% 26px; background-repeat:repeat-x; background-position:0 0, 0 0;
  position:relative;
}
.ruler .nums{ position:absolute; inset:auto 0 3px 0; display:flex; justify-content:space-between; padding-inline:6px; font-family:var(--mono); font-size:10.5px; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:-2px; }
.step{ padding:22px 20px 8px 0; border-left:2px solid var(--ink); padding-left:18px; position:relative; }
.step::before{ content:""; position:absolute; left:-9px; top:-2px; width:16px; height:16px; background:var(--pink); border:2px solid var(--ink); border-radius:50%; }
.step .n{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; margin-top:8px; display:block; }
.step h3{ font-size:30px; margin:8px 0 10px; }
.step p{ font-size:15px; color:var(--ink-sft); }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; row-gap:14px; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* company */
.two{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); }
.two p{ font-size:17px; color:var(--ink-sft); max-width:54ch; }
.two p + p{ margin-top:15px; }
.pledges{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.pledges li{ padding:15px 0; border-bottom:2px solid var(--ink); }
.pledges h4{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; }
.pledges p{ font-size:14.5px; margin-top:3px; }
@media (max-width:820px){ .two{ grid-template-columns:1fr; } }

/* contact */
.cgrid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,5vw,58px); }
.info{ border:2px solid var(--ink); background:var(--mustard-lt); box-shadow:6px 6px 0 var(--ink); }
.info .row{ padding:15px 18px; border-bottom:2px solid var(--ink); display:grid; grid-template-columns:78px 1fr; gap:12px; }
.info .row:last-child{ border-bottom:0; }
.info dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); padding-top:3px; }
.info dd{ margin:0; font-size:16px; font-weight:500; }
.info a{ text-decoration:none; box-shadow:inset 0 -3px 0 var(--pink); }

.form{ display:flex; flex-direction:column; gap:16px; }
.f{ display:flex; flex-direction:column; gap:6px; }
.f label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.f input,.f select,.f textarea{
  border:2px solid var(--ink); background:var(--mustard-lt);
  padding:11px 12px; font-size:15.5px; font-family:inherit; color:var(--ink); border-radius:0;
}
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; background:var(--pink); }
.f textarea{ resize:vertical; min-height:96px; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; } }
@media (max-width:800px){ .cgrid{ grid-template-columns:1fr; } }
.note{ font-size:12.5px; color:var(--ink-dim); }
.ok{ display:none; padding:12px 14px; background:var(--ink); color:var(--mustard); font-size:14.5px; }
.ok.show{ display:block; }
.form .btn{ align-self:flex-start; }

/* ------------------------------- footer --------------------------------- */

.site-footer{ background:var(--ink); color:var(--mustard); padding:44px 0 24px; }
.f-top{ display:grid; grid-template-columns:1.3fr .8fr .9fr; gap:30px; padding-bottom:28px; border-bottom:1px solid #43380f; }
.f-brand{ font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.03em; }
.f-tag{ margin-top:12px; color:#d9b45a; max-width:38ch; font-size:14px; }
.f-col h5{ margin:0 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pink); font-weight:400; }
.f-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.f-col a,.f-col li{ text-decoration:none; font-size:14px; color:#d9b45a; }
.f-col a:hover{ color:var(--mustard); }
.f-bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:18px; font-family:var(--mono); font-size:11px; color:#a98a35; }
.f-bot a{ color:#a98a35; text-decoration:none; }
.f-bot a:hover{ color:var(--mustard); }
@media (max-width:800px){ .f-top{ grid-template-columns:1fr; gap:24px; } }

/* ------------------------------- legal page ----------------------------- */

.legal-hero{ border-bottom:2px solid var(--ink); padding-block:clamp(34px,5vw,64px); }
.legal-hero h1{ font-size:clamp(34px,6vw,72px); margin-top:14px; max-width:16ch; }
.legal-hero .intro{ margin-top:18px; max-width:60ch; color:var(--ink-sft); font-size:17.5px; }
.legal-date{ margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--ink-dim); }

.lsec{ border-bottom:2px solid var(--ink); padding-block:clamp(34px,5vw,60px); }
.lsec h2{ font-size:clamp(25px,3.6vw,38px); margin-bottom:8px; }
.lsec .sub{ color:var(--ink-sft); max-width:60ch; margin-bottom:22px; }

.tablewrap{ border:2px solid var(--ink); background:var(--mustard-lt); box-shadow:6px 6px 0 var(--ink); overflow:hidden; }
table.glance{ width:100%; border-collapse:collapse; font-size:15px; }
.glance th{ text-align:left; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:var(--mustard); padding:12px 14px; }
.glance td{ padding:14px; border-top:2px solid var(--ink); vertical-align:top; }
.glance td:first-child{ font-weight:600; width:23%; }
@media (max-width:820px){
  .glance thead{ display:none; }
  .glance, .glance tbody, .glance tr, .glance td{ display:block; width:100%; }
  .glance tr{ border-top:2px solid var(--ink); }
  .glance tr:first-child{ border-top:0; }
  .glance td{ border:0; padding:8px 14px; }
  .glance td:first-child{ width:100%; padding-top:14px; font-size:17px; }
  .glance td::before{ content:attr(data-label); display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
  .glance td:first-child::before{ display:none; }
  .glance td:last-child{ padding-bottom:14px; }
}

.rights{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.right{ border:2px solid var(--ink); background:var(--mustard-lt); padding:18px 18px 20px; box-shadow:4px 4px 0 var(--ink); transition:background .16s; }
.right:hover{ background:var(--pink); }
.right .a{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.right h3{ font-size:20px; margin:8px 0 6px; letter-spacing:-.02em; }
.right p{ font-size:14.5px; color:var(--ink-sft); }
.right:hover p{ color:var(--ink); }
@media (max-width:900px){ .rights{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .rights{ grid-template-columns:1fr; } }

.prose h3{ font-size:20px; margin:26px 0 8px; letter-spacing:-.02em; }
.prose h3:first-child{ margin-top:0; }
.prose p{ color:var(--ink-sft); margin-bottom:12px; max-width:68ch; }
.prose ul{ color:var(--ink-sft); padding-left:20px; margin:0 0 12px; max-width:68ch; }
.prose li{ margin-bottom:6px; }
.prose strong{ color:var(--ink); }
.prose a{ box-shadow:inset 0 -3px 0 var(--pink); text-decoration:none; }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,52px); }
@media (max-width:820px){ .cols2{ grid-template-columns:1fr; } }