/* Demontazh102 — UX V2. These rules apply only to the isolated preview. */
.hero-art{display:block;text-decoration:none;color:inherit;cursor:pointer;grid-column:2;grid-row:1}
.hero-art:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.hero-scene{position:absolute;inset:0;opacity:0;transition:opacity .85s ease;pointer-events:none}
.hero-scene.is-current{opacity:1}
.hero-art .hero-after{z-index:auto}
.hero-before{width:37%;height:43%;bottom:24px;right:24px;border:0;box-shadow:none;background:transparent}
.hero-before img{display:block}
.hero-art .hero-label{z-index:3}
.hero-switch{grid-column:2;grid-row:1;justify-self:end;align-self:start;z-index:5;display:flex;align-items:center;gap:4px;margin:12px;padding:3px 5px;background:rgba(12,14,12,.68);border:1px solid rgba(255,255,255,.18);color:#f5f3ef}
.hero-switch button{height:30px;width:30px;min-width:30px;min-height:30px;border:0;padding:0;color:#f5f3ef;background:transparent;font-size:17px;line-height:1;border-radius:0;display:grid;place-items:center}
.hero-switch button:hover,.hero-switch button:focus-visible{background:rgba(255,255,255,.14)}
.hero-switch span{min-width:40px;text-align:center;font-size:10px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.works-section .case-grid{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);gap:14px}
.works-section .case{padding-top:12px}
.works-section .case-meta{padding-inline:clamp(18px,2.8vw,40px)}
.works-section .case-photos{gap:0}
.works-section .case-photo{height:clamp(220px,23vw,430px)}
.works-section .extra-grid{margin-top:22px}
#lightbox.lightbox{display:flex;align-items:center;justify-content:center;padding:0;gap:0;overflow:hidden}
#lightbox.lightbox[hidden]{display:none!important}
#lightbox figure{width:100vw;max-width:100vw;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#lightbox img{display:block;width:100vw;max-width:100vw;height:auto;max-height:calc(100dvh - 80px);object-fit:contain}
#lightbox figcaption{padding:9px 18px 0;margin:0;max-width:100%;font-size:12px;text-align:center}
#lightbox .light-nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);border-radius:0;background:rgba(0,0,0,.46);width:48px;height:56px}
#lightbox [data-prev-photo]{left:0}
#lightbox [data-next-photo]{right:0}
#lightbox .modal-close{z-index:5;top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));background:rgba(0,0,0,.48)}
@media(max-width:730px){
  .hero-art .hero-before{width:43%;height:43%;bottom:16px;right:16px}
  .hero-art .hero-label{left:18px;bottom:22px;max-width:47%}
  .hero-art .hero-label strong{font-size:clamp(23px,6vw,32px)}
  .hero-art{grid-column:1;grid-row:2}
  .hero-switch{grid-column:1;grid-row:2;margin:9px;gap:2px;padding:2px 4px}
  .hero-switch button{height:29px;width:29px;min-width:29px;min-height:29px}
  .hero-switch span{min-width:38px;font-size:10px}
  .works-section .case-grid{grid-template-columns:minmax(0,1fr);gap:27px}
  .works-section .case-meta{padding-inline:19px}
  .works-section .case-photo{height:clamp(205px,57vw,330px)}
  .quote-cta{padding-bottom:0}
  .quote-cta .quote-grid{width:100%;display:flex;flex-direction:column;gap:30px}
  .quote-cta .quote-grid>div:first-child{padding-inline:19px}
  .quote-cta .quote-form{width:100%;padding:30px 19px 34px;margin:0;border:0}
  .mobile-bar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(110%);transition:transform .26s ease,opacity .26s ease,visibility .26s ease;z-index:60;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
  .mobile-bar.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  #lightbox .light-nav{width:40px;height:52px;font-size:26px}
  #lightbox img{max-height:calc(100dvh - 70px)}
  #lightbox figcaption{font-size:11px}
}
@media(max-width:355px){
  .hero-art .hero-before{width:45%;right:12px}
  .hero-art .hero-label{max-width:45%}
  .quote-cta .quote-grid>div:first-child{padding-inline:15px}
  .quote-cta .quote-form{padding-inline:15px}
}
@media(prefers-reduced-motion:reduce){
  .hero-scene,.mobile-bar{transition:none!important}
}


/* Readability and portfolio density (UX V2.1). */
.topline{font-size:12px}
.brand-word small{font-size:11px}
.main-nav a,.head-action{font-size:14px}
.eyebrow,.section-kicker{font-size:13px;letter-spacing:.11em}
.cta{font-size:15px}
.hero-sub{font-size:17px}
.hero-label{font-size:13px}
.ribbon-grid div{padding-block:19px}
.ribbon-grid strong{font-size:16px;line-height:1.4}
.section-aside{font-size:16px}
.price-amount{font-size:16px}
.price-foot p{font-size:14px;line-height:1.5}
.process-item p{font-size:15px}
.review footer{font-size:14px}
.form-label{font-size:14px;letter-spacing:.08em}
.quote-form input[type=text],.quote-form input[type=tel]{font-size:16px}
.consent-line{font-size:14px;line-height:1.55}
.contact-alternative,.form-status{font-size:14px}
.footer-bottom{font-size:13px;line-height:1.55}
.dialog p{font-size:15px}
.works-section.section-block{padding-block:76px}
.works-section .section-head{margin-bottom:22px}
.works-section .case-grid{gap:15px}
.works-section .case{border:0;padding-top:0}
.works-section .case-meta{min-height:0;display:block;margin:0 0 9px}
.works-section .case-meta h3{font-size:20px;line-height:1.22}
.works-section .case-photo span{font-size:12px;letter-spacing:.06em}
.works-section .extra-grid{padding-top:0;margin-top:15px}
.works-section .details-menu{margin-top:18px}
.works-section .details-menu>summary{padding-block:16px;font-size:16px}
@media(max-width:730px){
 .topline{font-size:11px}
 .brand-word small{font-size:10px;letter-spacing:.12em}
 .head-action{font-size:12px}
 .eyebrow{font-size:12px;letter-spacing:.1em}
 .hero-sub{font-size:16px;line-height:1.5}
 .hero-actions .cta{font-size:14px}
 .hero-label{font-size:12px}
 .ribbon-grid{grid-template-columns:minmax(0,1fr)}
 .ribbon-grid div,.ribbon-grid div+div{padding:11px 0;border-right:0;border-bottom:1px solid #cdd0c6}
 .ribbon-grid div:last-child{border-bottom:0}
 .ribbon-grid strong{font-size:15px}
 .section-kicker{font-size:13px}
 .section-aside{font-size:16px}
 .price-amount{font-size:15px}
 .price-foot p{font-size:14px}
 .process-item p{font-size:15px}
 .review footer{font-size:14px}
 .quote-cta p{font-size:16px}
 .form-label,.consent-line,.contact-alternative{font-size:14px}
 .site-footer .footer-bottom{font-size:13px}
 .mobile-bar a,.mobile-bar button{font-size:15px}
 .works-section.section-block{padding-top:49px;padding-bottom:48px}
 .works-section .section-head{margin-bottom:17px}
 .works-section .case-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .works-section .case-meta{margin-bottom:6px;padding-inline:19px}
 .works-section .case-meta h3{font-size:19px;line-height:1.2}
 .works-section .case-photo span{font-size:12px}
 .works-section .extra-grid{padding-top:0;margin-top:10px}
 .works-section .details-menu{margin-top:14px}
 .works-section .details-menu>summary{padding-block:14px}
}

/* Keep the sales message in one band, not repeated in multiple sections. */
.hero-micro,.quote-micro{display:none!important}
.intro-ribbon .ribbon-grid span{display:none}
.intro-ribbon .ribbon-grid div{min-height:0}
.works-section .section-kicker,.works-section .section-aside,.works-section .case-index{display:none}
.works-section .case-meta{min-height:0;margin-bottom:7px}
.works-section .section-head{margin-bottom:18px}
@media(max-width:730px){
 .works-section .case-grid{row-gap:12px}
 .works-section .case-meta{margin-bottom:6px}
 .works-section .section-head{margin-bottom:16px}
 .intro-ribbon .ribbon-grid div{min-height:0}
}

/* Small but essential on-photo labels remain readable on iPhone. */
.hero-before span{font-size:12px}
#lightbox figcaption{font-size:13px;line-height:1.45}
@media(max-width:730px){
 .topline .shell{font-size:11px}
 .hero-before span{font-size:12px}
 #lightbox figcaption{font-size:13px}
}


/* UX V2.2 — concise section headings and work titles ON the photographs. */
.section-block{padding-block:72px}
.section-head{margin-bottom:28px;gap:24px}
.section-kicker{margin-bottom:12px}
.section-aside{margin-top:12px}
.price-foot{margin-top:22px}
.process-list{margin-top:26px}
.quote-cta{padding-top:65px;padding-bottom:72px}
.quote-cta h2{margin-bottom:14px}
.works-section.section-block{padding-top:54px;padding-bottom:56px}
.works-section .section-head{margin-bottom:16px}

/* Title occupies no vertical space outside the image pair. */
.works-section .case{position:relative;isolation:isolate}
.works-section .case-meta{
 position:absolute;top:0;left:0;right:0;z-index:3;
 margin:0;min-height:0;padding:14px 16px 28px;
 background:linear-gradient(to bottom,rgba(0,0,0,.79),rgba(0,0,0,.32) 68%,transparent);
 color:#fff;pointer-events:none
}
.works-section .case-meta h3{
 display:block;margin:0;max-width:100%;
 font-size:clamp(17px,1.7vw,22px);
 line-height:1.22;font-weight:760;letter-spacing:-.02em;
 color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.4)
}
.works-section .case-grid{row-gap:12px}
.works-section .case-photo{display:block}
.works-section .case-photo span{z-index:1}
@media(max-width:730px){
 .section-block{padding-top:48px;padding-bottom:48px}
 .section-head{margin-bottom:20px;gap:12px}
 .section-kicker{margin-bottom:9px}
 .section-aside{margin-top:9px}
 .price-foot{margin-top:15px}
 .process-list{margin-top:22px}
 .quote-cta{padding-top:48px;padding-bottom:0}
 .works-section.section-block{padding-top:40px;padding-bottom:43px}
 .works-section .section-head{margin-bottom:14px}
 .works-section .case-grid{row-gap:10px}
 .works-section .case-meta{padding:12px 14px 25px;margin:0}
 .works-section .case-meta h3{font-size:18px;line-height:1.2}
 .works-section .extra-grid{margin-top:9px}
}


/* UX V3: only completed-work images appear in the gallery. */
.works-section .case-photo[hidden]{display:none!important}
.works-section .case-photos{grid-template-columns:minmax(0,1fr);gap:0}
.works-section .case-photo[data-compare-open]{width:100%;height:clamp(250px,28vw,470px);cursor:zoom-in}
.works-section .case-photo[data-compare-open] img{width:100%;height:100%;object-fit:cover}
.works-section .case-photo[data-compare-open] span{
  left:auto;right:14px;bottom:13px;
  padding:10px 13px;background:rgba(12,14,12,.83);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:13px;font-weight:720;letter-spacing:0;text-transform:none;
}
.works-section .case-photo[data-compare-open]:focus-visible{outline-offset:-4px}
.works-section .case-meta{pointer-events:none}

/* Full-width, accessible comparison for one object at a time. */
.compare-modal[hidden]{display:none!important}
.compare-modal{
 position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;
 align-items:stretch;justify-content:center;overflow-y:auto;overscroll-behavior:contain;
 padding:max(15px,env(safe-area-inset-top,0px)) 0 max(16px,env(safe-area-inset-bottom,0px));
 background:#080a08;color:#f7f7f3;
}
.compare-top{
 width:100%;display:flex;justify-content:space-between;align-items:center;
 gap:12px;padding:0 max(17px,env(safe-area-inset-right,0px)) 10px max(17px,env(safe-area-inset-left,0px));
}
.compare-heading{min-width:0;display:flex;flex-direction:column;gap:4px}
.compare-heading strong{font-size:clamp(18px,2.5vw,24px);font-weight:760;line-height:1.2}
.compare-heading span{font-size:13px;color:#b9bfb7}
.compare-close{
 width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid #50564e;
 background:#1d211c;color:#fff;font-size:28px;line-height:1
}
.compare-toggle{display:flex;justify-content:center;gap:4px;padding:3px;align-self:center;margin:8px 0 14px;background:#242923}
.compare-toggle button{
 min-width:92px;min-height:44px;border:0;background:transparent;
 color:#e4e6e0;font-size:16px;font-weight:730
}
.compare-toggle button[aria-pressed="true"]{background:#f2f2ec;color:#191b19}
.compare-image-area{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;flex:0 1 auto;width:100vw}
.compare-image-area img{
 display:block;width:100vw;max-width:100vw;height:auto;max-height:calc(100dvh - 245px);
 object-fit:contain;touch-action:pan-y;background:#0b0c0a
}
.compare-navigation{
 position:absolute;z-index:1;top:50%;transform:translateY(-50%);
 width:44px;height:56px;border:0;background:rgba(0,0,0,.55);
 color:#fff;font-size:31px;line-height:1
}
.compare-navigation[data-compare-prev]{left:0}
.compare-navigation[data-compare-next]{right:0}
.compare-help{margin:10px 12px 0;text-align:center;font-size:12px;line-height:1.5;color:#b4b9b1}
@media(max-width:730px){
 .works-section .case-photo[data-compare-open]{height:clamp(245px,69vw,430px)}
 .works-section .case-photo[data-compare-open] span{right:12px;bottom:12px;padding:9px 12px;font-size:13px}
 .compare-top{padding-inline:max(14px,env(safe-area-inset-left,0px))}
 .compare-heading strong{font-size:18px}
 .compare-toggle{margin:3px 0 12px}
 .compare-image-area img{max-height:calc(100dvh - 223px)}
 .compare-help{font-size:12px;margin-top:10px}
}
@media(max-height:520px){
 .compare-toggle{margin:2px 0 4px}
 .compare-top{padding-bottom:2px}
 .compare-image-area img{max-height:calc(100dvh - 150px)}
 .compare-help{margin-top:4px}
}