/* CrossBCN overrides. Keep the purchased template styles intact. */
.crossbcn-wordmark {
    color: #fff;
    font: 500 30px/1.2 'Poppins', Arial, sans-serif;
    letter-spacing: 2px;
    text-decoration: none;
}
.crossbcn-wordmark span { color: #fab702; }
header #logo { padding-top: 24px; }
.preview-label { color: #fab702; font-size: 15px; letter-spacing: 1px; }
#section-pp-welcome h1 { font-size: clamp(40px, 6vw, 76px); }
.project-intro { position:absolute; bottom:24px; left:0; width:100%; text-align:center; pointer-events:none; z-index:2; }
.project-intro .btn-line { pointer-events:auto; border-color:#fab702; background:rgba(17,18,20,.8); }
#section-pp-projects { align-items: flex-start; padding: 0; }
#section-pp-projects .picframe > a { display: block; position: relative; }
#section-pp-services, #section-pp-process, #section-pp-projects, #section-pp-contact { background: linear-gradient(to bottom, #111214 0%, #222426 50%, #36383b 100%); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: .65; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #fab702;
    outline-offset: 5px;
}
#pp-nav li a:focus-visible { outline-offset: 2px; }
#pp-nav { background: #18191bcc; border-radius: 20px; padding: 8px 0; }
.image-popup-no-margins:focus-visible .overlay-v { opacity: 1; }
@media (max-width: 767px) {
    header #logo { padding-top: 16px; }
    .crossbcn-wordmark { font-size: 24px; }
    .pp-scrollable .pp-inner { padding: 100px 32px 40px 12px; }
    #pp-nav.right { right: 6px; }
}
/* Reading and navigation remain available if scripts are unavailable. */
html:not(.crossbcn-stacked), html:not(.crossbcn-stacked) body { overflow: auto; }
html:not(.crossbcn-stacked) .section { min-height: 100vh; position: relative; }
html:not(.crossbcn-stacked) .pp-inner { padding: 100px 24px 48px; }
html:not(.crossbcn-stacked) #section-pp-welcome { background:#18191b; }

/* Homepage-only additions keep the approved template composition isolated from detail pages. */
header.transparent{background:transparent!important;border:0;position:fixed;z-index:1200;width:100%}
.home-header-inner{display:flex;align-items:flex-start;justify-content:space-between;padding-right:40px}
#site-nav{display:flex;gap:0;padding:0;align-items:center;margin-left:auto;margin-right:auto}
/* Archi default navigation: source style.css #mainmenu (font, spacing and FontAwesome dots). */
#site-nav a{font-family:"Roboto",Arial,Helvetica,sans-serif;font-size:11px;font-weight:400;letter-spacing:3px;text-transform:uppercase;line-height:35px;display:inline-block;padding:25px 0 25px 20px;text-decoration:none;text-align:center;color:#fff}
#site-nav a:after{float:right;position:relative;font-family:"FontAwesome";content:"\f111";font-size:6px;margin-left:20px;margin-top:0;color:#FAB702}
#site-nav a:last-child:after{display:none}
@media(min-width:1600px){
 #site-nav{position:absolute;left:50%;width:max-content;transform:translateX(-50%);white-space:nowrap}
}
.pp-wm{top:100px!important;pointer-events:none}
.nav-toggle{display:none;background:#18191bdd;color:#fff;border:1px solid #fff8;padding:8px 12px}
.skip-link{position:fixed;left:12px;top:-100px;z-index:2000;background:#18191b;color:#fff;padding:10px}
.skip-link:focus{top:12px}
#section-pp-projects .picframe img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
#section-pp-projects .picframe>a:focus-visible .overlay-v{opacity:1}
#section-pp-about .btn-line{margin-top:20px}
@media(max-width:767px){
 .home-header-inner{padding-left:24px!important;padding-right:24px;align-items:flex-start}
 .nav-toggle{display:block;margin-top:16px}
 #site-nav{display:none;position:absolute;left:0;top:64px;width:100%;padding:20px 24px;background:#18191bf5;flex-direction:column;align-items:flex-start;gap:20px}
 .menu-open #site-nav{display:flex}
 header.menu-open{background:#18191b!important}
 .pp-wm{top:90px!important;font-size:24px!important;right:32px!important}
}

/* Match the visible transition to the wheel controller's short animation lock. */
.pp-easing{transition:transform 420ms cubic-bezier(.2,.65,.3,1)}
@media(prefers-reduced-motion:reduce){.pp-easing{transition:none}}

/* User-selected Golden Rose background, with the template's subdued dark mood. */
#section-pp-welcome{background:#18191b;isolation:isolate}
#section-pp-welcome>.pp-inner{display:block;width:100%}
#section-pp-welcome::before{content:"";position:absolute;inset:0;z-index:-2;background:url('../images/group/golden-rose-studio-01-large.webp') center/cover no-repeat;filter:saturate(.65) brightness(.65)}
#section-pp-welcome::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.4) 60%,rgba(0,0,0,.56)),radial-gradient(ellipse at center,transparent 20%,rgba(0,0,0,.25));pointer-events:none}
#section-pp-welcome .hero-brand{width:100%;max-width:560px;margin:20px 0 26px;line-height:1}
.hero-brand picture,.hero-brand img{display:block;width:100%;height:auto}
#section-pp-welcome .preview-label{line-height:1.8}
.welcome-carousel{width:100%}
.welcome-slide-frame{position:relative;display:block;aspect-ratio:3/2;perspective:1200px}
.welcome-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;visibility:hidden;backface-visibility:hidden;transform-origin:center}
.welcome-slide.is-active{visibility:visible;z-index:1}
@media(max-width:767px){
 #section-pp-welcome .hero-brand{margin:12px 0 20px}
 #section-pp-welcome .preview-label{font-size:13.75px;letter-spacing:.5px}
}

/* A wider Services composition: four columns on desktop, two on tablet. */
#section-pp-services{align-items:safe center;padding:0}
#section-pp-services>.pp-inner{display:block;width:100%;padding:180px 0 80px}
#section-pp-services .container{width:calc(100% - 128px);max-width:1760px}
#section-pp-services .service-card{display:flex;flex-direction:column}
#section-pp-services h3{font-size:22px;line-height:1.4;margin-bottom:14px}
#section-pp-services p{font-size:17px;line-height:1.7;margin-bottom:28px;flex:1}
#section-pp-services .service-card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media(max-width:1199px){
 #section-pp-services .container{width:calc(100% - 80px)}
}
@media(max-width:767px){
 #section-pp-services>.pp-inner{padding:176px 32px 48px 12px}
 #section-pp-services .container{width:100%}
 #section-pp-services h3{font-size:20px}
 #section-pp-services p{font-size:16px;margin-bottom:22px}
}

/* Barraca provides a warm, subdued backdrop with stronger protection behind the copy. */
#section-pp-about{background:#18191b;isolation:isolate}
#section-pp-about::before{content:"";position:absolute;inset:0;z-index:-2;background:url('../images/projects/fotos-475-large.webp') center/cover no-repeat;filter:sepia(.55) saturate(.45) brightness(.65);pointer-events:none}
#section-pp-about::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,12,9,.88),rgba(15,12,9,.8) 52%,rgba(15,12,9,.55));pointer-events:none}
#section-pp-about p{color:#e6e6e6}

#section-pp-about .lead{font-size:20px}
/* This Archi image class has no responsive sizing in the selected demo. */
#section-pp-about .img-fullwidth{display:block;width:100%;max-width:100%;height:auto}

/* Keep the template navigation clear of the unchanged logo at tablet widths. */
@media(max-width:1199px){
 #homepage .nav-toggle{display:block;margin:0}
 #homepage #site-nav{display:none;position:absolute;top:96px;left:0;width:100%;padding:22px 24px;background:#18191bf5;flex-direction:column;align-items:flex-start;gap:0}
 #homepage header.menu-open #site-nav{display:flex}
 #site-nav a{padding:8px 0;text-align:left;line-height:30px}
 #site-nav a:after{display:none}
}
@media(max-width:1023px){#homepage #site-nav{top:84px}}

/* Edge-to-edge showcase with the fixed logo and navigation over the images. */
#section-pp-projects .showcase-content{position:relative;width:100%;margin:0;padding:0}
#section-pp-projects .picframe{width:100%}
#section-pp-projects .overlay-v{width:100%}
#section-pp-projects .pf_text{padding:0 16px}

/* Preserve the narrow separators between project images. */
#section-pp-projects .gallery{position:relative;z-index:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
#section-pp-projects .gallery>div{width:100%;max-width:100%}
@media(max-width:991px){#section-pp-projects .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){#section-pp-projects .gallery{grid-template-columns:1fr}}

/* The template composition fills the desktop viewport with three rows. */
@media(min-width:992px){
 #section-pp-projects .gallery{height:100dvh;min-height:300px;grid-template-rows:repeat(3,minmax(0,1fr))}
 #section-pp-projects .gallery>div{min-height:0}
 #section-pp-projects .picframe,#section-pp-projects .picframe>a{height:100%}
 #section-pp-projects .picframe img{height:100%;aspect-ratio:auto}
}

/* Archi contact.html: full-width map, eight-column form and four-column details. */
#section-pp-contact{align-items:safe center;padding:0}
#section-pp-contact>.pp-inner{display:block;width:100%;padding:120px 0 40px}
#section-pp-contact .map-container{height:auto}
#section-pp-contact .contact-map-link{display:block}
#section-pp-contact .contact-map-link img{display:block;width:100%;height:auto}
#section-pp-contact .contact-details-row{margin-top:40px}
#section-pp-contact address{overflow-wrap:anywhere}
@media(max-width:767px){
 #section-pp-contact>.pp-inner{padding:116px 32px 32px 12px}
 #section-pp-contact #sidebar{margin-top:32px}
}

/* Shared yellow frames for the homepage calls to action. */
#section-pp-welcome .btn-line,
#section-pp-about .btn-line,
#section-pp-contact #contact_form input[type=submit].btn-line{border-color:#fab702}

/* Original Archi step tabs inside the stacked-page shell. */
#section-pp-process{align-items:safe center;padding:0}
/* Clip decorative horizontal motion before it reaches the RTL scroll container. */
#section-pp-process>.pp-inner{display:block;width:100%;padding:120px 0 48px;overflow-x:clip}
#section-pp-process [role=tab]:focus-visible{outline:2px solid #fab702;outline-offset:5px}
@media(max-width:767px){#section-pp-process>.pp-inner{padding:116px 32px 40px 12px}}

/* Cross Yapı-inspired chevron form, retaining Archi's live step panels. */
#section-pp-process .de_nav{overflow:visible;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:40px}
#section-pp-process .de_nav li{display:block;float:none;margin:0;padding:0;min-width:0;filter:drop-shadow(6px 9px 6px rgba(0,0,0,.42))}
#section-pp-process .de_nav li span{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;height:393.75px;margin:0;padding:24px 20px 24px 28px;line-height:1.5;border:0;border-radius:0;background:#55585b;color:#e6e6e6;clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%,16% 50%);transition:color 2s ease,background 2s ease}
#section-pp-process .de_nav li.active span{background:#fab702;color:#18191b;border:0;margin:0}
#section-pp-process .de_nav li span::before{content:"";position:absolute;inset:2px;z-index:-1;background:#303336;opacity:1;transition:opacity 2s ease;clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%,16% 50%)}
#section-pp-process .de_nav li.active span::before{opacity:0}
#section-pp-process .de_nav li:not(.active) span:hover{background:#888b8e;color:#fff}
#section-pp-process .de_nav li:focus-within{filter:drop-shadow(6px 9px 6px rgba(0,0,0,.42)) drop-shadow(0 0 4px rgba(250,183,2,.65))}
#section-pp-process .de_nav .v-border{display:none!important}
@media(max-width:991px){#section-pp-process .de_nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#section-pp-process .de_nav li span{height:262.5px}}
@media(max-width:480px){#section-pp-process .de_nav{grid-template-columns:1fr;gap:10px;margin-bottom:24px}#section-pp-process .de_nav li span{height:150px}}
@media(prefers-reduced-motion:reduce){#section-pp-process .de_nav li span{transition:none}}

/* Reserve the tallest panel's height so tab changes never move the chevrons. */
#section-pp-process .de_tab_content{display:grid}
#section-pp-process .de_tab_content>[role=tabpanel]{grid-area:1 / 1;display:block!important;visibility:hidden;pointer-events:none}
#section-pp-process .de_tab_content>[aria-hidden="false"]{visibility:visible;pointer-events:auto}

/* Staggered entrance: the fourth chevron settles at exactly two seconds. */
#section-pp-process{overflow-x:hidden}
#section-pp-process.process-entering .de_nav li{animation:process-chevron-arrive 1.4s cubic-bezier(.16,1,.3,1) both}
#section-pp-process.process-entering .de_nav li:nth-child(2){animation-delay:.2s}
#section-pp-process.process-entering .de_nav li:nth-child(3){animation-delay:.4s}
#section-pp-process.process-entering .de_nav li:nth-child(4){animation-delay:.6s}
@keyframes process-chevron-arrive{from{transform:translateX(-100vw);opacity:0}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){#section-pp-process.process-entering .de_nav li{animation:none}}

@media(prefers-reduced-motion:reduce){#section-pp-process .de_nav li span::before{transition:none}}

/* A glowing fuse follows the divider without fading with the paragraph. */
#section-pp-process .process-divider-effect{position:relative;height:0;z-index:1;pointer-events:none}
#section-pp-process .process-divider-trail{position:absolute;top:-1px;left:0;height:2px;width:0;background:#fab702;box-shadow:0 0 7px #fab702,0 0 15px rgba(250,183,2,.45);opacity:0}
#section-pp-process .process-divider-spark{position:absolute;top:0;left:0;width:48px;height:48px;transform:translate(-50%,-50%);opacity:0;background:radial-gradient(ellipse at center,#fffbe3 0%,#fff3a0 8%,#fab702 15%,rgba(250,183,2,.35) 28%,transparent 65%);filter:drop-shadow(0 0 6px #fab702)}
#section-pp-process .process-divider-spark::before{content:"";position:absolute;inset:-8px;background:repeating-conic-gradient(from 12deg,transparent 0deg 19deg,rgba(255,220,72,.85) 21deg,#fff4bb 22deg,transparent 25deg 40deg);mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.75) 25%,transparent 69%)}
#section-pp-process .process-divider-spark::after{content:"";position:absolute;left:23px;top:23px;width:2px;height:2px;border-radius:50%;background:#fffbe3;box-shadow:-24px -11px 2px #fab702,-18px 17px 1px #ffe27a,12px -20px 2px #fab702,22px 9px 1px #fff3a0,-30px 4px 2px #fab702,5px 25px 2px #fab702,-9px -27px 1px #ffe27a,29px -7px 2px #fab702}
#section-pp-process .is-burning .process-divider-spark{animation:process-fuse-spark 16s linear infinite,process-spark-glow 1.1s ease-in-out infinite}
#section-pp-process .is-burning .process-divider-trail{animation:process-fuse-trail 16s linear infinite}
@keyframes process-fuse-spark{0%{left:0;opacity:0}3%{opacity:1}94%{opacity:1}97%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes process-fuse-trail{0%{width:0;opacity:0}3%{opacity:1}97%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){#section-pp-process .process-divider-effect{display:none}}

/* Live flame rendering replaces the geometric starburst. */
#section-pp-process .process-divider-spark{background:none;filter:none}
#section-pp-process .process-divider-spark::before,#section-pp-process .process-divider-spark::after{display:none}
#section-pp-process .process-fire{position:absolute;left:-280px;top:-26px;width:330px;height:100px;max-width:none}
#section-pp-process .is-burning .process-divider-spark{animation:process-fuse-spark 16s linear infinite}
@media(prefers-reduced-motion:reduce){#section-pp-process .is-burning .process-divider-spark{animation:none}}