/* --------------------------------------------------------------------------
   service.css – service presentation pages (Интериорен дизайн).
   Opt in per page with $page['css'] = ['service'].
   Uses only the tokens from base.css: --wf-cp, --wf-cg, --wf-cg2, --wf-cg3.
   -------------------------------------------------------------------------- */

/* Eyebrow above a section title */
.wf_eyebrow{display:block;font-size:1.2rem;letter-spacing:.3rem;text-transform:uppercase;
    color:var(--wf-cp);font-weight:500;text-align:center;margin-bottom:1.2rem}

@media (min-width:1024px){
.wf_eyebrow{font-size:1.4rem;margin-bottom:2rem}
}

/* --- .wf_svc_hero ---------------------------------------------------------
   Page opener. The heading block is .wf_intro / .wf_intro--centered verbatim
   (same sizes, weights and rhythm), followed by the CTAs, a wide photo and a
   white facts bar riding up over its bottom edge. */
.wf_svc_hero{margin:2rem auto 6rem;position:relative;text-align:center;opacity:0;
    animation:cubicReveal 1.2s cubic-bezier(.77,0,.175,1) .1s forwards}
.wf_svc_hero .wf_breadcrumbs{margin-bottom:2rem;display:flex;align-items:center;
    justify-content:center}
.wf_svc_hero h1{font-size:3rem;font-weight:300;margin-bottom:1.2rem}
.wf_svc_hero h2{font-size:1.8rem;font-weight:300;margin-bottom:0}
.wf_svc_hero h1 strong,.wf_svc_hero h2 strong{font-weight:500}
.wf_svc_hero_cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:1.6rem 3.2rem;margin:3.2rem 0 4rem}
.wf_svc_hero_media{position:relative;height:34rem;border-radius:1rem;overflow:hidden}
.wf_svc_hero_media img{width:100%;height:100%;object-fit:cover}
.wf_svc_hero_facts{position:relative;z-index:2;text-align:left;background-color:#fff;
    border-radius:1rem;box-shadow:0 8px 32px #00000014;margin:-4rem 1.6rem 0;
    padding:2.8rem 2.4rem;display:grid;grid-template-columns:1fr;gap:2.4rem}
.wf_svc_hero_facts li strong{display:block;font-size:1.8rem;font-weight:500;margin-bottom:.6rem}
.wf_svc_hero_facts li span{font-size:1.4rem;line-height:2.2rem;font-weight:300;color:#000000b3}

@media (min-width:768px){
.wf_svc_hero_media{height:46rem}
.wf_svc_hero_facts{grid-template-columns:repeat(2,1fr);margin:-6rem 4rem 0;padding:3.2rem 4rem;
    gap:3rem 4rem}
}

@media (min-width:1024px){
.wf_svc_hero{margin:2.5rem auto 12rem}
.wf_svc_hero .wf_breadcrumbs{margin-bottom:2.5rem}
.wf_svc_hero h1{font-size:4.8rem}
.wf_svc_hero h2{font-size:3.6rem}
.wf_svc_hero_cta{margin:4.8rem 0 5.6rem}
.wf_svc_hero_media{height:60rem}
.wf_svc_hero_facts{grid-template-columns:repeat(4,1fr);margin:-8rem 6rem 0;padding:4rem 5.6rem;gap:4rem}
.wf_svc_hero_facts li+li{border-left:.1rem solid var(--wf-cg3);padding-left:4rem;margin-left:-2rem}
}

/* --- .wf_showcase ---------------------------------------------------------
   Editorial split built for this page: a tall photo and a white text card that
   overlaps it by one grid column on desktop and rides up over the photo on
   mobile. Mirror it with .wf_showcase--reversed. */
.wf_showcase{margin:6rem auto}
.wf_showcase_media{position:relative;height:32rem;border-radius:1rem;overflow:hidden}
.wf_showcase_media img{width:100%;height:100%;object-fit:cover}
.wf_showcase_body{position:relative;z-index:2;background-color:#fff;border-radius:1rem;
    margin:-4rem 1.6rem 0;padding:3.2rem 2.4rem;box-shadow:0 8px 32px #00000014}
.wf_showcase_body .wf_eyebrow{text-align:left;margin-bottom:1.2rem}
.wf_showcase_body h2{font-size:2.4rem;font-weight:300;margin-bottom:1.6rem}
.wf_showcase_body h2 strong{font-weight:500}
.wf_showcase_body>p{font-size:1.4rem;line-height:2.4rem;font-weight:300;margin-bottom:0;
    color:#000000b3}
.wf_showcase_list{margin:2.4rem 0 2.8rem;padding-top:2.4rem;border-top:.1rem solid var(--wf-cg3)}
.wf_showcase_list li{font-size:1.4rem;line-height:2.4rem;font-weight:300}
.wf_showcase_list li+li{margin-top:1.4rem}
.wf_showcase_list li strong{font-weight:600}
.wf_showcase_list li svg{fill:var(--wf-cp);width:1.6rem;height:1.6rem;margin-right:.8rem;
    vertical-align:-.2rem}
/* CTA: outlined at rest, black background with white type on hover */
.btn.wf_cta{padding:0 3.2rem;border:.1rem solid #141414;border-radius:3rem;
    background-color:transparent;font-size:1.6rem;font-weight:500;color:#141414}
.btn.wf_cta svg{fill:#141414;margin-right:1rem;transition:fill .3s}
.btn.wf_cta:hover{opacity:1;background-color:#141414;color:#fff}
.btn.wf_cta:hover svg{fill:#fff}
/* light variant, for the CTA banner's dark background */
.btn.wf_cta--light{border-color:#fff;color:#fff}
.btn.wf_cta--light svg{fill:#fff}
.btn.wf_cta--light:hover{background-color:#fff;color:#141414}
.btn.wf_cta--light:hover svg{fill:#141414}

/* --- .wf_cta_banner -------------------------------------------------------
   Closing call to action: a photo band with a dark wash, sending people to
   /kontakti/ or straight to the phone. */
.wf_cta_banner{margin:6rem auto}
.wf_cta_banner_inner{position:relative;isolation:isolate;overflow:hidden;border-radius:1rem;
    padding:4.8rem 2.4rem;color:#fff}
.wf_cta_banner_bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.wf_cta_banner_inner::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,#000000eb,#000000a6 60%,#00000073)}
.wf_cta_banner .wf_eyebrow{text-align:left}
.wf_cta_banner h2{font-size:2.8rem;font-weight:300;margin-bottom:1.6rem}
.wf_cta_banner h2 strong{font-weight:500}
.wf_cta_banner p{max-width:58rem;font-size:1.6rem;line-height:2.6rem;font-weight:300;
    margin-bottom:3.2rem;color:#ffffffd9}
.wf_cta_banner_actions{display:flex;flex-wrap:wrap;gap:1.6rem}

@media (min-width:768px){
.wf_cta_banner_inner{padding:6.4rem 4.8rem}
}

@media (min-width:1024px){
.wf_cta_banner{margin:12rem auto}
.wf_cta_banner_inner{padding:8rem 7.2rem}
.wf_cta_banner h2{font-size:4.8rem;margin-bottom:2.4rem}
.wf_cta_banner p{font-size:1.8rem;line-height:2.8rem;margin-bottom:4rem}
.wf_cta_banner_actions{gap:2rem}
}

@media (min-width:768px){
.wf_showcase_media{height:44rem}
.wf_showcase_body{margin:-6rem 4rem 0;padding:4rem 3.6rem}
}

@media (min-width:1024px){
.wf_showcase{margin:12rem auto}
.wf_showcase .shell{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.wf_showcase_media{grid-row:1;grid-column:1/8;height:64rem}
.wf_showcase_body{grid-row:1;grid-column:7/13;margin:0;padding:5.6rem 5.2rem}
.wf_showcase_body h2{font-size:3.6rem;margin-bottom:2.4rem}
.wf_showcase_body>p{font-size:1.8rem;line-height:2.8rem}
.wf_showcase_list{margin:3.2rem 0 4rem;padding-top:3.2rem}
.wf_showcase_list li{font-size:1.6rem;line-height:2.6rem}
.wf_showcase_list li+li{margin-top:1.6rem}
.wf_showcase--reversed .wf_showcase_media{grid-column:6/13}
.wf_showcase--reversed .wf_showcase_body{grid-column:1/7}
}

/* Suffix after an .odometer counter – .wf_numbers strong is a flex container,
   so a bare text node loses its leading space. */
.wf_num_suffix{margin-left:.25em}
.wf_num_suffix.is-tight{margin-left:0}

/* Anchor targets must not land under the fixed header */
.wf_anchor{scroll-margin-top:12rem}

@media (min-width:1024px){
.wf_anchor{scroll-margin-top:27rem}
}

/* --- Числа ----------------------------------------------------------------
   Own block rather than the shared .wf_numbers, whose 6rem-gap flex row
   overflows a phone with four counters on it. Keep the .wf_stats class on the
   section so webfactor.min.js still runs the odometers. */
.wf_svc_stats{margin:6rem auto;display:grid;grid-template-columns:repeat(2,1fr);
    gap:3.6rem 2rem;text-align:center}
.wf_svc_stats div strong{display:flex;align-items:baseline;justify-content:center;
    font-size:3.2rem;font-weight:300;margin-bottom:.8rem}
.wf_svc_stats div p{font-size:1.2rem;line-height:1.8rem;letter-spacing:.1rem;
    text-transform:uppercase;font-weight:300;color:#000000b3;margin:0}

@media (min-width:768px){
.wf_svc_stats{grid-template-columns:repeat(4,1fr);gap:4rem}
}

@media (min-width:1024px){
.wf_svc_stats{margin:12rem auto}
.wf_svc_stats div strong{font-size:5.6rem;margin-bottom:1.6rem}
.wf_svc_stats div p{font-size:1.4rem;line-height:2.2rem}
}

/* Mid-page call to action, closing a content section */
.wf_svc_cta{margin-top:4rem;text-align:center}
.wf_svc_cta p{font-size:1.6rem;line-height:2.6rem;font-weight:300;margin:0 auto 2.4rem;
    max-width:56rem;color:#000000b3}
.wf_svc_cta div{display:flex;flex-direction:column;align-items:center;gap:1.6rem}

@media (min-width:768px){
.wf_svc_cta div{flex-direction:row;justify-content:center;gap:2rem}
}

@media (min-width:1024px){
.wf_svc_cta{margin-top:6.4rem}
.wf_svc_cta p{font-size:1.8rem;margin-bottom:3.2rem}
}
.wf_showcase_actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.8rem}

/* --- Пакети / цени -------------------------------------------------------- */
.wf_price_cards{display:grid;grid-template-columns:1fr;gap:2rem}
.wf_price_card{position:relative;display:flex;flex-direction:column;background-color:#fff;
    border:.1rem solid var(--wf-cg3);border-radius:1rem;padding:3.2rem 2.6rem;
    transition:border-color .3s,transform .3s,box-shadow .3s}
.wf_price_card:hover{border-color:#141414;transform:translateY(-.4rem);box-shadow:0 4px 16px #0000001a}
.wf_price_card.is-featured{border-color:var(--wf-cp)}
.wf_price_card.is-featured::before{content:attr(data-badge);position:absolute;top:-1.2rem;left:2.6rem;
    background-color:var(--wf-cp);color:#fff;border-radius:3rem;padding:.5rem 1.4rem;
    font-size:1.1rem;letter-spacing:.2rem;text-transform:uppercase;font-weight:500}
.wf_price_card h3{font-size:2.1rem;font-weight:500;margin-bottom:.8rem}
.wf_price_card>p{font-size:1.4rem;line-height:2.2rem;font-weight:300;color:#000000b3;
    margin-bottom:2.4rem}
.wf_price_tag{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem;
    padding-bottom:2.4rem;border-bottom:.1rem solid var(--wf-cg3)}
.wf_price_tag em{font-style:normal;font-size:1.2rem;font-weight:300;color:#000000b3}
.wf_price_tag span{font-size:3.2rem;font-weight:300}
.wf_price_card ul{margin-bottom:3.2rem}
.wf_price_card li{font-size:1.4rem;line-height:2.2rem;font-weight:300;color:#000000b3}
.wf_price_card li+li{margin-top:1.2rem}
.wf_price_card li svg{fill:var(--wf-cp);width:1.4rem;height:1.4rem;margin-right:.8rem;
    vertical-align:-.2rem}
.wf_price_card .btn{margin-top:auto;width:100%}
.wf_price_note{margin-top:2.4rem;text-align:center;font-size:1.3rem;line-height:2.2rem;
    font-weight:300;color:#000000b3}

@media (min-width:768px){
.wf_price_cards{grid-template-columns:repeat(3,1fr);gap:2.4rem}
}

@media (min-width:1024px){
.wf_price_card{padding:4rem 3.2rem}
.wf_price_card>p{font-size:1.6rem;line-height:2.6rem}
.wf_price_tag span{font-size:4rem}
.wf_price_card li{font-size:1.6rem;line-height:2.6rem}
.wf_price_note{font-size:1.4rem;margin-top:3.2rem}
}

/* --- Section shell used by the custom blocks below ------------------------ */
.wf_svc{margin:6rem auto}
.wf_svc_lead{max-width:90rem;margin:0 auto 3.6rem;text-align:center;
    font-size:1.4rem;line-height:2.4rem;font-weight:300}

@media (min-width:1024px){
.wf_svc{margin:12rem auto}
.wf_svc_lead{font-size:1.8rem;line-height:2.8rem;margin-bottom:6rem}
}

/* --- „Какво включва услугата“ – card grid --------------------------------- */
.wf_svc_grid{display:grid;grid-template-columns:1fr;gap:2rem}

@media (min-width:700px){
.wf_svc_grid{grid-template-columns:repeat(2,1fr);gap:2.4rem}
}

@media (min-width:1024px){
.wf_svc_grid{grid-template-columns:repeat(3,1fr);gap:3rem}
}
.wf_svc_card{border:.1rem solid var(--wf-cg3);border-radius:1rem;background-color:#fff;
    padding:3rem 2.6rem;transition:border-color .3s,transform .3s,box-shadow .3s}
.wf_svc_card:hover{border-color:#141414;transform:translateY(-.4rem);box-shadow:0 4px 16px #0000001a}
.wf_svc_card b{display:block;font-size:1.2rem;letter-spacing:.2rem;font-weight:600;
    color:var(--wf-cp);margin-bottom:1.6rem}
.wf_svc_card h3{font-size:1.8rem;font-weight:500;margin-bottom:1rem}
.wf_svc_card p{font-size:1.4rem;line-height:2.4rem;font-weight:300;margin-bottom:0;color:#000000b3}

@media (min-width:1024px){
.wf_svc_card{padding:3.6rem 3.2rem}
.wf_svc_card h3{font-size:2.1rem}
}

/* --- „Как протича проектът“ – ghost-numeral steps ------------------------- */
.wf_process_steps{display:grid;grid-template-columns:1fr;gap:3.2rem}

@media (min-width:700px){
.wf_process_steps{grid-template-columns:repeat(2,1fr);gap:4rem}
}

@media (min-width:1024px){
.wf_process_steps{grid-template-columns:repeat(3,1fr);gap:5.6rem 4rem}
}
.wf_process_steps li{position:relative;padding-top:2.4rem;border-top:.1rem solid var(--wf-cg3)}
.wf_process_steps li::before{content:"";position:absolute;top:-.1rem;left:0;width:4rem;height:.2rem;
    background-color:var(--wf-cp)}
.wf_process_steps li b{display:block;font-size:4.8rem;line-height:1;font-weight:600;
    color:var(--wf-cg3);margin-bottom:1.6rem}
.wf_process_steps li h3{font-size:1.8rem;font-weight:500;text-transform:uppercase;margin-bottom:1rem}
.wf_process_steps li p{font-size:1.4rem;line-height:2.4rem;font-weight:300;margin-bottom:0;color:#000000b3}

@media (min-width:1024px){
.wf_process_steps li{padding-top:3.2rem}
.wf_process_steps li b{font-size:6.4rem;margin-bottom:2.4rem}
.wf_process_steps li h3{font-size:2.1rem}
}

/* --- Портфолио ------------------------------------------------------------
   Own slider (gallery.js) rather than the shared .wf_places / keen-slider: the
   slide widths live here, the script only measures them. Without JS the strip
   is a plain horizontal scroller. The .wf_place card styling from
   components.css is reused as-is, minus its caption behaviour: on a portfolio
   grid the project name has to be readable at rest, so the caption is centred
   and pinned to the bottom and the photo takes over the hover. */
.wf_gallery{margin:6rem auto}
.wf_gallery_viewport{overflow:hidden;touch-action:pan-y;margin-bottom:2rem}
.wf_gallery.nojs .wf_gallery_viewport{overflow-x:auto;padding-bottom:.8rem}
.wf_gallery_track{display:flex;gap:2rem}
.wf_gallery_track>*{flex:0 0 auto;width:85%}

@media (min-width:768px){
.wf_gallery_track>*{width:calc((100% - 2rem)/2)}
}

@media (min-width:1024px){
.wf_gallery{margin:12rem auto}
.wf_gallery_track>*{width:calc((100% - 4rem)/3)}
}

@media (min-width:1440px){
.wf_gallery_track>*{width:calc((100% - 6rem)/4)}
}
.wf_gallery .wf_place img{transition:transform .6s cubic-bezier(.645,.045,.355,1)}
.wf_gallery .wf_place:hover img{transform:scale(1.06)}
.wf_gallery .wf_place div{bottom:0;transform:none;padding:0 2.4rem 3.2rem;text-align:center}
.wf_gallery .wf_place div strong{font-size:2.4rem;margin-bottom:.8rem}
.wf_gallery .wf_place div p{opacity:1;margin:0}
.wf_gallery .wf_place div p+p{margin-top:.4rem;opacity:.75}
.wf_gallery .wf_place:after{height:70%;
    background:linear-gradient(180deg,#000000e6,#000000a6 35%,#0000)}
.wf_gallery .wf_place:hover:after{height:85%}

@media (min-width:1024px){
.wf_gallery .wf_place div strong{font-size:2.8rem}
}

/* --- FAQ ------------------------------------------------------------------
   Checkbox + label accordion. faq.js measures each answer and writes its
   height to --faq-h on the item, so the panel animates between 0 and a real
   pixel value; .is-ready keeps the first paint from animating. Without JS the
   fallback height is auto, so every answer is simply readable. */
.wf_faq_item{border-bottom:.1rem solid var(--wf-cg3)}
.wf_faq_item:first-of-type{border-top:.1rem solid var(--wf-cg3)}
.wf_faq_toggle{position:absolute;width:.1rem;height:.1rem;opacity:0;margin:0;
    clip:rect(0,0,0,0);overflow:hidden}
.wf_faq_item label{display:flex;align-items:center;justify-content:space-between;gap:2rem;
    padding:2.2rem 1.6rem;font-size:1.6rem;font-weight:500;cursor:pointer;
    user-select:none;-webkit-user-select:none;transition:background-color .3s,color .3s}
.wf_faq_item label:hover{color:var(--wf-cp)}
.wf_faq_item label svg{flex-shrink:0;transition:transform .35s cubic-bezier(.77,0,.175,1)}
.wf_faq_toggle:focus-visible~label{outline:.2rem solid var(--wf-cp);outline-offset:-.2rem}
.wf_faq_body{height:var(--faq-h,auto);overflow:hidden}
.wf_faq_body p{padding:0 1.6rem 2.4rem;font-size:1.4rem;line-height:2.4rem;font-weight:300;
    margin:0;color:#000000b3}
.wf_faq_toggle:not(:checked)~.wf_faq_body{height:0}
.wf_faq_toggle:checked~label{background-color:var(--wf-cg2)}
.wf_faq_toggle:checked~label svg{transform:rotate(180deg)}
.wf_faq.is-ready .wf_faq_body{transition:height .35s cubic-bezier(.77,0,.175,1)}

@media (prefers-reduced-motion:reduce){
.wf_faq.is-ready .wf_faq_body{transition:none}
}

@media (min-width:1024px){
.wf_faq_item label{font-size:2.1rem;padding:2.8rem 2.4rem}
.wf_faq_body p{font-size:1.8rem;line-height:2.8rem;padding:0 2.4rem 3.2rem;max-width:100rem}
}