/* Madhouse Studio — публичен стил.
   Посока A „Печатница": хартиен фон, офсетно черно и реалната CMYK лента
   като единствен акцент.

   Схемата е СВЕТЛА винаги — няма тъмен вариант и няма тъмни фонове.
   Снимките могат да са тъмни, но стоят в своя рамка върху хартията.
   Смяната на визуална посока се прави в този файл. */

:root{
  --paper:#EFF0EC;
  --sheet:#FFFFFF;
  --shade:#E5E7E2;
  --ink:#11161A;
  --ink-2:#39434B;
  --mute:#646E76;
  --rule:#D2D6D0;
  --m:#D6006F;
  --swatch-m:#E6007E; --swatch-c:#009EE0; --swatch-y:#FFED00; --swatch-k:#11161A;
  --on-accent:#FFFFFF;
  /* Типография — всичко идва от темата; тук са само резервните стойности. */
  --font-head:"Oswald","Arial Narrow",Impact,sans-serif;
  --weight-head:600; --scale-head:1; --track-head:.005em; --case-head:uppercase;
  --font-body:"Golos Text","Segoe UI",system-ui,sans-serif;
  --weight-body:400; --size-body:16.5px;
  --font-label:"IBM Plex Mono",ui-monospace,monospace;
  --weight-label:500; --size-label:11.5px; --track-label:.1em; --case-label:uppercase;
  --shadow:0 1px 0 rgba(17,22,26,.06), 0 18px 40px -28px rgba(17,22,26,.45);
  --maxw:1240px;
}

/* Схемата е фиксирано светла — казва се на браузъра, за да не обръща
   контролите (полета, скролбари) в тъмно на устройство с нощен режим. */
:root{color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:var(--size-body)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:var(--weight-body);
  font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-head);
  font-weight:var(--weight-head);
  letter-spacing:var(--track-head);
  text-transform:var(--case-head);
  line-height:.96;text-wrap:balance;margin:0;
}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--m);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--m);outline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
/* Ролята „дребни надписи" — надзаглавия, подписи, брояч, етикети. */
.mono,.idx,.count,.tick,.credit,.flow .n,.brand span,.langs,.callbtn,
.filters button,.item .cap span,.lines .lbl,.lb figcaption span{
  font-family:var(--font-label);
  font-weight:var(--weight-label);
  font-size:var(--size-label);
  letter-spacing:var(--track-label);
  text-transform:var(--case-label);
}

.inkbar{display:flex;height:6px;width:100%}
.inkbar i{flex:1}
.inkbar i:nth-child(1){background:var(--swatch-c)}
.inkbar i:nth-child(2){background:var(--swatch-m)}
.inkbar i:nth-child(3){background:var(--swatch-y)}
.inkbar i:nth-child(4){background:var(--swatch-k)}

/* ---------------------------------------------------------------- шапка */
.top{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .inkbar{height:3px}
.topin{display:flex;align-items:center;gap:1.2rem;height:62px}
.brand{display:flex;align-items:baseline;gap:.42rem;text-decoration:none;margin-right:auto}
.brand b{font-family:var(--font-head);font-weight:700;font-size:1.34rem;letter-spacing:-.01em;text-transform:uppercase}
.brand b em{font-style:normal;color:var(--m)}
.brand span{color:var(--mute)}
.nav{display:flex;gap:1.3rem}
.nav a{font-family:var(--font-head);text-transform:var(--case-head);font-size:.87rem;letter-spacing:.045em;text-decoration:none;color:var(--ink-2);padding-block:.35rem;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--m)}
.langs{display:flex;gap:.35rem;letter-spacing:.08em}
.langs a{text-decoration:none;color:var(--mute);padding:.25rem .4rem;border:1px solid transparent}
.langs a:hover{color:var(--ink)}
.langs a.on{color:var(--ink);border-color:var(--rule);background:var(--sheet)}
.callbtn{text-decoration:none;background:var(--m);color:var(--on-accent);padding:.5rem .8rem;white-space:nowrap}
.callbtn:hover{filter:brightness(1.08)}
@media(max-width:900px){.nav{display:none}}

/* ---------------------------------------------------------------- хиро
   Текстът стои върху хартията; снимката е поставена в рамка до него, както
   се позиционира изображение върху печатен лист. Кроп-марките ограждат
   снимката, а не екрана. */
.hero{background:var(--paper);border-bottom:1px solid var(--rule)}
.heroin{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,4.5vw,3.6rem);
  align-items:center;
  padding-block:clamp(2.6rem,6vw,4.8rem);
}
.tick{display:inline-flex;align-items:center;gap:.6rem;color:var(--mute)}
.tick s{display:block;width:26px;height:2px;background:var(--m);text-decoration:none}
.hero h1{font-size:calc(clamp(2.4rem,6.2vw,4.7rem) * var(--scale-head));color:var(--ink);margin-top:1rem;max-width:13ch}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.hero .lede{max-width:42ch;margin-top:1.3rem;color:var(--ink-2);font-size:1.04rem}
.herocta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.btn{font-family:var(--font-head);text-transform:var(--case-head);letter-spacing:.05em;font-size:.95rem;text-decoration:none;padding:.72rem 1.35rem;border:1px solid transparent;display:inline-block}
.btn-fill{background:var(--m);color:var(--on-accent)}
.btn-fill:hover{filter:brightness(1.08)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}

.heroshot{position:relative;margin:0}
.heroshot img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);background:var(--shade)}
.heroshot .crops i{position:absolute;width:16px;height:16px;border:0 solid var(--ink);pointer-events:none}
.heroshot .crops i:nth-child(1){top:-7px;left:-7px;border-top-width:1px;border-left-width:1px}
.heroshot .crops i:nth-child(2){top:-7px;right:-7px;border-top-width:1px;border-right-width:1px}
.heroshot .crops i:nth-child(3){bottom:-7px;left:-7px;border-bottom-width:1px;border-left-width:1px}
.heroshot .crops i:nth-child(4){bottom:-7px;right:-7px;border-bottom-width:1px;border-right-width:1px}
.credit{color:var(--mute);margin-top:.8rem;line-height:1.6}

@media(max-width:860px){
  .heroin{grid-template-columns:1fr;gap:2rem}
  .hero h1{max-width:16ch}
  .heroshot{margin-top:.4rem}
}

/* ---------------------------------------------------------------- секции */
section{padding-block:clamp(3.4rem,7vw,6rem)}
.hero{padding-block:0}
.head{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.4rem);align-items:start;border-top:1px solid var(--ink);padding-top:1rem;margin-bottom:clamp(2rem,4vw,3rem)}
.head .idx{color:var(--mute)}
.head h2{font-size:calc(clamp(1.9rem,4.6vw,3.2rem) * var(--scale-head));max-width:20ch}
.head .sub{grid-column:2;color:var(--ink-2);max-width:62ch;margin-top:.9rem}
@media(max-width:640px){.head{grid-template-columns:1fr}.head .sub{grid-column:1}}

/* ---------------------------------------------------------------- цикъл */
.flow{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--rule)}
.flow .step{border-right:1px solid var(--rule);padding:1.35rem 1.2rem 2rem;position:relative}
.flow .step::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--rule)}
.flow .step:nth-child(4n+1)::before{background:var(--swatch-c)}
.flow .step:nth-child(4n+2)::before{background:var(--swatch-m)}
.flow .step:nth-child(4n+3)::before{background:var(--swatch-y)}
.flow .step:nth-child(4n+4)::before{background:var(--swatch-k)}
.flow .n{color:var(--mute)}
.flow h3{font-size:calc(clamp(1.15rem,1.7vw,1.5rem) * var(--scale-head));margin-top:.55rem}
.flow p{font-size:.88rem;color:var(--ink-2);margin-top:.5rem;line-height:1.55}
@media(max-width:900px){.flow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.flow{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- услуги */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(1.4rem,3vw,2.8rem)}
.svc{padding:1.15rem 0 1.5rem;border-top:1px solid var(--rule)}
.svc:nth-child(-n+3){border-top-color:var(--ink)}
.svc .tagn{display:flex;align-items:center;height:8px}
.svc .tagn s{width:8px;height:8px;background:var(--m);text-decoration:none;flex:none}
.svc h3{font-size:calc(1.16rem * var(--scale-head));margin-top:.5rem}
.svc p{color:var(--ink-2);font-size:.9rem;margin-top:.4rem;max-width:34ch}
@media(max-width:900px){
  .svcs{grid-template-columns:repeat(2,1fr)}
  .svc:nth-child(-n+3){border-top-color:var(--rule)}
  .svc:nth-child(-n+2){border-top-color:var(--ink)}
}
@media(max-width:600px){
  .svcs{grid-template-columns:1fr}
  .svc:nth-child(-n+2){border-top-color:var(--rule)}
  .svc:first-child{border-top-color:var(--ink)}
}

/* ---------------------------------------------------------------- портфолио */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem}
.filters button{background:transparent;color:var(--ink-2);border:1px solid var(--rule);padding:.46rem .8rem;cursor:pointer}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.4vw,1.05rem)}
.item{position:relative;background:var(--sheet);border:1px solid var(--rule);padding:0;cursor:zoom-in;text-align:left;font:inherit;color:inherit;overflow:hidden;display:block;width:100%}
.item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.item:hover img{transform:scale(1.035)}
.item .cap{display:block;padding:.72rem .8rem .85rem;border-top:1px solid var(--rule)}
.item .cap b{display:block;font-family:var(--font-head);font-weight:var(--weight-head);text-transform:var(--case-head);letter-spacing:var(--track-head);font-size:.95rem;line-height:1.15}
.item .cap span{display:block;color:var(--mute);margin-top:.34rem}
.item.wide{grid-column:span 2}
.count{margin-top:1.1rem;color:var(--mute)}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.item.wide{grid-column:span 1}}

/* ---------------------------------------------------------------- клиенти */
.clients{display:flex;flex-wrap:wrap}
.clients span{font-family:var(--font-head);text-transform:var(--case-head);letter-spacing:var(--track-head);font-size:calc(clamp(1rem,2.1vw,1.45rem) * var(--scale-head));font-weight:var(--weight-head);color:var(--ink-2);padding:.3rem 0}
.clients span::after{content:"\00b7";color:var(--m);margin-inline:.6rem;font-weight:700}
.clients span:last-child::after{content:""}

/* ---------------------------------------------------------------- контакти */
.contact{background:var(--sheet);border:1px solid var(--rule);box-shadow:var(--shadow)}
.contact .inkbar{height:5px}
.cgrid{display:grid;grid-template-columns:1.1fr 1fr}
.cgrid>div{padding:clamp(1.6rem,3.4vw,2.6rem)}
.cgrid>div+div{border-left:1px solid var(--rule)}
.contact .idx{color:var(--mute)}
.contact h2{font-size:calc(clamp(1.8rem,4vw,2.7rem) * var(--scale-head));max-width:14ch;margin-top:.7rem}
.lines{margin-top:1.7rem;display:grid;gap:1.05rem}
.lines a,.lines p{text-decoration:none;display:block}
.lines .lbl{display:block;color:var(--mute)}
.lines .val{display:block;font-family:var(--font-head);text-transform:var(--case-head);font-size:calc(1.26rem * var(--scale-head));font-weight:var(--weight-head);margin-top:.15rem;line-height:1.22;word-break:break-word}
.lines a:hover .val{color:var(--m)}
.ticket{background:var(--shade);border:1px dashed var(--rule);padding:1.15rem 1.25rem;color:var(--ink-2);font-size:.92rem}
@media(max-width:820px){.cgrid{grid-template-columns:1fr}.cgrid>div+div{border-left:0;border-top:1px solid var(--rule)}}

/* ---------------------------------------------------------------- долен ред */
footer{border-top:1px solid var(--rule);margin-top:clamp(3rem,7vw,5.5rem)}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;padding-block:1.4rem;color:var(--mute)}
.foot .mono{margin-right:auto}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--m)}

/* ---------------------------------------------------------------- лайтбокс
   Завесата е хартиена, не черна — снимката се откроява с рамка и сянка,
   вместо да се показва върху тъмен фон. */
.lb{position:fixed;inset:0;z-index:200;background:rgba(239,240,236,.975);align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);display:none}
.lb.on{display:flex}
.lb figure{margin:0;max-width:1080px;width:100%}
.lb img{width:100%;max-height:72vh;object-fit:contain;background:var(--shade);border:1px solid var(--rule);box-shadow:var(--shadow)}
.lb figcaption{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;color:var(--ink);margin-top:.9rem}
.lb figcaption b{font-family:var(--font-head);text-transform:var(--case-head);font-weight:var(--weight-head);font-size:calc(1.15rem * var(--scale-head))}
.lb figcaption span{color:var(--mute)}
.lb .x{position:absolute;top:1rem;right:1rem;background:var(--sheet);border:1px solid var(--rule);color:var(--ink);width:40px;height:40px;font-size:1.1rem;cursor:pointer;line-height:1}
.lb .x:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lbnav{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);display:flex;gap:.35rem}
.lbnav button{width:9px;height:9px;padding:0;border:1px solid var(--mute);background:none;cursor:pointer}
.lbnav button[aria-current="true"]{background:var(--ink);border-color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ================================================================
   ПОДРЕДБА ОТ ТЕМАТА
   Всяка секция получава класове за оформление, фон, отстояние и
   ширина, плюс --cols за броя колони. Стойностите идват от админа.
   ================================================================ */

/* ---------------------------------------------------------------- фон */
.bg--paper {background:var(--paper)}
.bg--sheet {background:var(--sheet)}
.bg--shade {background:var(--shade)}
.bg--accent{background:var(--m);color:var(--on-accent)}
.bg--accent .head h2,.bg--accent h3,.bg--accent .idx{color:var(--on-accent)}
.bg--accent .head .sub,.bg--accent p{color:color-mix(in srgb,var(--on-accent) 82%,transparent)}
.bg--accent .flow .step,.bg--accent .svc{border-color:color-mix(in srgb,var(--on-accent) 30%,transparent)}

/* ---------------------------------------------------------------- отстояние */
.pad--small {padding-block:clamp(1.8rem,3.5vw,2.8rem)}
.pad--normal{padding-block:clamp(3.4rem,7vw,6rem)}
.pad--large {padding-block:clamp(4.6rem,10vw,8.5rem)}
.hero.pad--small,.hero.pad--normal,.hero.pad--large{padding-block:0}

/* ---------------------------------------------------------------- ширина */
.w--full{max-width:none}
.w--full>.head,.w--full>.filters,.w--full>.count{
  max-width:var(--maxw);margin-inline:auto;
}

/* ---------------------------------------------------------------- колони */
.flow,.svcs,.grid,.clogos{--cols:3}
.lay--process-strip .flow,
.lay--process-cards .flow,
.lay--services-dot .svcs,
.lay--services-cards .svcs,
.lay--portfolio-grid .grid,
.lay--portfolio-featured .grid,
.clogos{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}

/* ---------------------------------------------------------------- хиро */
.lay--hero-text-right .heroin{direction:rtl}
.lay--hero-text-right .heroin>*{direction:ltr}
.lay--hero-text-only .heroin{grid-template-columns:minmax(0,1fr)}
.lay--hero-text-only .hero h1{max-width:20ch}
.lay--hero-text-over .heroin{position:relative;grid-template-columns:minmax(0,1fr)}
.lay--hero-text-over .heroshot{position:absolute;inset:0;z-index:0;margin:0}
.lay--hero-text-over .heroshot img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  border:0;filter:brightness(.42) saturate(1.05)}
.lay--hero-text-over .heroshot .crops,.lay--hero-text-over .credit{display:none}
.lay--hero-text-over .herotext{position:relative;z-index:1;padding-block:clamp(3rem,8vw,6rem)}
.lay--hero-text-over .hero h1,.lay--hero-text-over .tick{color:#fff}
.lay--hero-text-over .hero h1 em{-webkit-text-stroke-color:rgba(255,255,255,.65)}
.lay--hero-text-over .hero .lede{color:rgba(255,255,255,.86)}
.lay--hero-text-over .btn-line{border-color:rgba(255,255,255,.5);color:#fff}

/* ---------------------------------------------------------------- процес */
.lay--process-cards .flow{border-left:0;gap:.7rem}
.lay--process-cards .step{border:1px solid var(--rule);border-radius:4px}
.lay--process-numbered .flow{display:block;border-left:0}
.lay--process-numbered .step{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;
  border:0;border-top:1px solid var(--rule);padding:1.1rem 0}
.lay--process-numbered .step::before{display:none}
.lay--process-numbered .n{font-size:1.5rem;color:var(--m)}
.lay--process-numbered h3{margin-top:0}

/* ---------------------------------------------------------------- услуги */
.lay--services-cards .svc{border:1px solid var(--rule);border-top-color:var(--rule);
  padding:1.2rem 1.25rem 1.5rem}
.lay--services-cards .svcs{gap:.7rem}
.lay--services-list .svcs{display:block}
.lay--services-list .svc{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);
  gap:1.4rem;align-items:baseline;padding:1rem 0}
.lay--services-list .tagn{display:none}
.lay--services-list h3{margin-top:0}
.lay--services-list p{max-width:56ch}
@media(max-width:640px){.lay--services-list .svc{grid-template-columns:1fr;gap:.3rem}}

/* ---------------------------------------------------------------- портфолио */
.lay--portfolio-grid .item.wide{grid-column:span 1}
.lay--portfolio-alternating .grid{display:block}
.lay--portfolio-alternating .item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.4rem);align-items:center;border:0;border-top:1px solid var(--rule);
  padding:1.6rem 0;margin:0}
.lay--portfolio-alternating .item:nth-child(even){direction:rtl}
.lay--portfolio-alternating .item:nth-child(even)>*{direction:ltr}
.lay--portfolio-alternating .item img{aspect-ratio:16/10}
.lay--portfolio-alternating .item .cap{border-top:0;padding:0}
.lay--portfolio-alternating .item .cap b{font-size:clamp(1.2rem,2.6vw,1.9rem)}
@media(max-width:700px){.lay--portfolio-alternating .item{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- клиенти с лога */
.clogos{display:grid;gap:.6rem}
.clogo{border:1px solid var(--rule);background:var(--sheet);border-radius:4px;
  aspect-ratio:3/2;display:grid;place-items:center;padding:1rem;overflow:hidden}
.clogo img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.clogo span{font-family:var(--font-head);font-weight:var(--weight-head);
  text-transform:var(--case-head);font-size:.95rem;text-align:center;color:var(--ink-2);line-height:1.2}
@media(max-width:640px){.clogos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- контакти */
.lay--contact-one-col .cgrid{grid-template-columns:1fr}
.lay--contact-one-col .cgrid>div+div{border-left:0;border-top:1px solid var(--rule)}