/* Custom designs keep their settings inside this presentation. The original
   Alpha Lion pages retain the same layout, motion and business adapters. */
.fade-template{color:var(--paper);background:linear-gradient(color-mix(in srgb,var(--template-background) 96%,transparent),color-mix(in srgb,var(--template-background) 96%,transparent)),var(--template-background) url('/acomply-websites/assets/fine-plaster-v3.webp') center/cover}
.fade-template .hero{background:transparent}
.fade-template .shop-wordmark{max-width:25%;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:clamp(15px,1.5vw,23px);line-height:1.05}
.fade-template .shop-wordmark>strong{overflow-wrap:anywhere}
.fade-template .shop-wordmark.has-brand-logo{max-width:29%}
.fade-template .hero .barber{left:calc(51% - 32% * var(--portrait-scale) + var(--portrait-x) * 1%);bottom:calc(-21% + var(--portrait-y) * 1%);width:calc(64% * var(--portrait-scale));height:calc(102% * var(--portrait-scale))}
.fade-template .hero .wordmark{max-width:91%;font-size:min(29.2vw,54svh)}
.fade-template .slogan{max-width:47%;font-size:clamp(34px,5.6vw,84px);overflow-wrap:anywhere}
.fade-template .slogan>span{max-width:100%}
.fade-template .hours strong{white-space:normal;overflow-wrap:anywhere}
.fade-template .scene-script,.fade-template .service-list h2,.fade-template .hours>span,.fade-template .contact-label,.fade-template .studio-promises li>span,.fade-template .studio-portrait-index>span,.fade-template .contact-city-script,.fade-template .contact-city-dot,.fade-template .navbar-account>span:first-child,.fade-template .navbar-products>span:last-child{color:var(--red)}
.fade-template .scene-text-link:hover,.fade-template .service-list button:hover,.fade-template .site-menu button[aria-current]{color:var(--red)}
.fade-template .contact-secondary:hover{background:var(--red);border-color:var(--red)}
.fade-template .studio-portrait-index{background:linear-gradient(transparent,var(--template-background))}
.fade-template .contact-city-word{font-size:min(8.2vw,142px)}
.fade-template .contact-city-panel{min-width:0;overflow:hidden}
.fade-template .site-menu{background:color-mix(in srgb,var(--template-background) 98%,transparent)}
.fade-template .services-filters{flex-wrap:wrap}
.fade-template .services-filters button{max-width:100%;overflow-wrap:anywhere}
.template-catalog-status{position:absolute;z-index:14;bottom:23px;left:5%;max-width:27%;font:9px/1.5 Arial,sans-serif;letter-spacing:.1px;color:color-mix(in srgb,var(--paper) 68%,transparent);pointer-events:none}
.template-catalog-status.is-error{color:var(--paper);background:var(--template-background);padding:6px 8px;border:1px solid #ffffff29}
.template-preview-toast{position:absolute;z-index:200;left:50%;bottom:84px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:13px 18px;border:1px solid #d9d0bf59;background:#171717f5;color:var(--paper);font:12px/1.5 Arial,sans-serif;text-align:center;box-shadow:0 7px 30px #0005}
.template-load-state{min-height:100svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:9%;gap:20px;background:#101010;color:#e9e1d2}
.template-load-state>span{font:11px Arial,sans-serif;letter-spacing:2px;color:#a39a8b}
.template-load-state h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,6vw,70px);line-height:1.05;margin:0}
.template-load-state p{font:14px/1.7 Arial,sans-serif;max-width:560px}
.template-load-state a{border-bottom:1px solid #857c6a;padding:12px 0;font:12px Arial,sans-serif}
@media(min-width:1101px) and (max-height:820px){.fade-template .hero .barber{height:calc(100% * var(--portrait-scale));bottom:calc(-20% + var(--portrait-y) * 1%)}}
@media(min-width:701px) and (max-width:1100px){
 .fade-template .shop-wordmark,.fade-template .shop-wordmark.has-brand-logo{max-width:75%;font-size:21px}
 .fade-template .hero .barber{top:calc(245px - var(--portrait-y) * 8px);bottom:auto;left:calc(50% - 36% * var(--portrait-scale) + var(--portrait-x) * 1%);width:calc(72% * var(--portrait-scale));height:calc((100% - 140px) * var(--portrait-scale))}
 .fade-template .hero .wordmark{max-width:91%;font-size:min(29.5vw,280px)}
 .template-catalog-status{bottom:23px;max-width:24%}
}
@media(max-width:700px){
 .fade-template .shop-wordmark,.fade-template .shop-wordmark.has-brand-logo{max-width:calc(100% - 62px);font-size:18px}
 .fade-template .shop-wordmark>span{letter-spacing:.8px;font-size:6px}
 .fade-template .hero .wordmark{max-width:94%;font-size:29.4vw}
 .fade-template .hero .barber{top:calc(211px - var(--portrait-y) * 6px);bottom:auto;left:calc(69% - 47% * var(--portrait-scale) + var(--portrait-x) * 1%);width:calc(94% * var(--portrait-scale));height:calc(479px * var(--portrait-scale))}
 .fade-template .hero .slogan{max-width:70%;font-size:clamp(32px,10vw,48px)}
 .fade-template .contact-city-word{font-size:25vw}
 .template-catalog-status{left:0;right:0;bottom:66px;max-width:none;padding:4px 12px;background:color-mix(in srgb,var(--template-background) 94%,transparent);text-align:center;font-size:8px}
 .template-catalog-status.is-error{padding:5px 14px;border-inline:0}
 .template-preview-toast{bottom:103px;width:max-content;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.fade-template *{scroll-behavior:auto}}

/* Black's composition and motion stay local; semantic colors share Green's engine. */
.fade-template .shop-navbar{background:color-mix(in srgb,var(--palette-bg) 96%,transparent);border-color:var(--palette-line)}
.fade-template .scene-navigation,.fade-template .site-menu,.fade-template .template-preview-toast,.fade-template .modal,.fade-template .gallery-lightbox{background:var(--palette-bg);color:var(--palette-text);border-color:var(--palette-line)}
.fade-template :is(.scene-overline,.scene-demo-note,.services-edition,.services-intro p,.services-filters button,.services-filter-index,.services-count,.services-footnote p,.services-footnote>span,.hero-footer,.crosshair,.small-dash,.bottom-cross,.shop-wordmark span,.desktop-shop-links button,.navbar-account,.navbar-products,.scene-current small,.scene-navigation button,.site-menu p,.site-menu button small,.menu-products>small,.menu-account small,.studio-description,.studio-promises p,.barbers-caption-content>p,.barbers-roster-count,.barbers-choice,.barbers-choice-index,.barbers-choice-name>small,.barbers-booking>p,.barbers-photo-note,.barbers-foot,.barbers-empty>div>p,.gallery-foot p,.gallery-tile-caption,.contact-city-overline,.contact-local-sign,.contact-address>p,.contact-hours-list dt,.contact-bottom,.modal p,.gallery-lightbox-meta p,.gallery-lightbox-meta small,.gallery-lightbox-disclosure){color:var(--palette-muted)}
.fade-template :is(.scene-script,.services-script,.slogan,.service-list h2,.hours>span,.contact-label,.studio-promises li>span,.studio-portrait-index>span,.contact-city-script,.contact-city-dot,.contact-local-sign>span,.barbers-role,.barbers-choice.is-selected .barbers-choice-index,.barbers-choice.is-selected .barbers-choice-arrow,.barbers-choice:hover .barbers-choice-arrow,.barbers-switch-error,.navbar-account>span:first-child,.navbar-products>span:last-child,.eyebrow){color:var(--palette-accent-ink)}
.fade-template :is(.desktop-shop-links button[aria-current],.site-menu button,.site-menu .menu-account,.site-menu .menu-products,.services-filters button.is-selected,.services-filters button:hover,.barbers-choice.is-selected,.barbers-choice:hover,.contact-hours-text){color:var(--palette-text)}
.fade-template :is(.scene-text-link:hover,.service-list button:hover,.barbers-booking-link:hover,.site-menu button[aria-current]){color:var(--palette-accent-ink)}
.fade-template :is(.services-filter-row,.service-card,.barbers-list,.barbers-choice,.barbers-foot,.barbers-booking-link,.studio-promises li,.studio-portrait,.gallery-foot,.gallery-image-frame,.contact-city-panel,.contact-schedule,.contact-phone,.contact-secondary,.contact-bottom,.book,.arrow,.navbar-book,.menu-toggle,.site-menu,.site-menu button,.site-menu .menu-account,.site-menu .menu-products,.menu-book){border-color:var(--palette-line)}
.fade-template :is(button,a):focus-visible{outline:2px solid var(--palette-accent-ink);outline-offset:4px}
.fade-template :is(.book,.navbar-book,.contact-secondary):hover{background:var(--palette-accent);color:var(--palette-on-accent);border-color:var(--palette-accent)}
.fade-template .book:hover .arrow{background:transparent;color:inherit}
.fade-template .contact-primary{background:var(--palette-accent);color:var(--palette-on-accent);border-color:var(--palette-accent)}
.fade-template .contact-primary:hover{background:var(--palette-accent-hover);color:var(--palette-on-accent-hover)}
.fade-template .scene-navigation button:not(:disabled):hover,.fade-template .site-menu button[aria-current]{background:var(--palette-surface);color:var(--palette-surface-text)}
.fade-template :is(.studio-portrait-type,.barbers-photo-word,.barbers-portrait-placeholder){color:var(--palette-heading-tone)}
.fade-template .barbers-portrait-frame{background:var(--palette-surface)}
.fade-template .contact-city-script{text-shadow:none}
.fade-template .template-catalog-status{color:var(--palette-muted)}
.fade-template .template-catalog-status.is-error{color:var(--palette-text);border-color:var(--palette-line)}
.fade-template :is(.modal-backdrop,.gallery-lightbox-backdrop){background:var(--palette-overlay)}
/* Photography retains a dark base and white ink even in the ivory design. */
.fade-template .service-card{background:#090909;color:var(--palette-photo-text)}
.fade-template .service-image-shade{background:linear-gradient(180deg,#0009 0%,#0003 33%,#07070788 44%,#090909 88%)}
.fade-template .service-card :is(.service-card-detail,.service-meta>span,.service-meta strong small){color:var(--palette-photo-text)}
.fade-template .service-card :is(.service-card-book,.service-arrow){border-color:#ffffff66}
.fade-template .service-card:hover{border-color:var(--palette-accent)}
.fade-template .service-card:hover .service-arrow,.fade-template .gallery-open,.fade-template .gallery-lightbox-arrows button:hover{background:var(--palette-accent);color:var(--palette-on-accent)}
.fade-template .barbers-portrait-index{color:var(--palette-text);background:var(--palette-bg);text-shadow:none;padding:6px}
.fade-template .barbers-portrait-index>span:last-child{color:var(--palette-accent-ink)}
.fade-template .gallery-lightbox-arrows button,.fade-template .gallery-lightbox-close{color:var(--palette-text);border-color:var(--palette-line)}
.fade-template .hero .book{background:transparent;border-color:var(--palette-line);color:var(--palette-text)}
.fade-template .hero .book:hover{background:var(--palette-accent);color:var(--palette-on-accent)}

/* Measure city type inside its real column rather than hiding the last letters. */
.fade-template .contact-city-word{width:100%;min-width:0}
.fade-template .contact-city-line{width:max-content}
.fade-template :is(.shop-scene-title,.services-title-group h2){width:100%;max-width:100%;text-transform:uppercase;overflow-wrap:anywhere}
.fade-template .services-title-group{flex:1;min-width:0}
.fade-template .services-intro{flex:0 1 28%;min-width:0}
.fade-template :is(.scene-script,.contact-city-script,.studio-intro,.studio-description,.left-note p){white-space:pre-line;overflow-wrap:anywhere}
.fade-template .left-note p{text-transform:uppercase}
.fade-template .services-script{white-space:normal;width:fit-content;max-width:100%;overflow-wrap:anywhere}
.fade-template .services-kicker{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){.fade-template .services-intro{width:100%;max-width:none}}
.fade-template :is(.shop-scene-title,.services-title-group h2){white-space:normal}