/* Derin Optik — consistent editorial imagery, November 2026. */
:root{--r:18px}
img{height:auto}
.hero{height:min(76vh,760px);min-height:560px}
.slide-img{object-position:65% 52%}
.slide:after{background:linear-gradient(90deg,rgba(9,28,42,.87),rgba(9,28,42,.55) 42%,rgba(9,28,42,.06) 80%),linear-gradient(0deg,rgba(9,28,42,.4),transparent 55%)}
.slide-title{font-size:clamp(48px,7.2vw,100px);max-width:730px;line-height:1.04;letter-spacing:-.045em}
.slide-sub{max-width:520px;line-height:1.5;font-size:clamp(16px,1.65vw,22px)}
.slide-foot{max-width:550px;gap:24px}.slide-foot p{max-width:440px}
.about-media{position:relative;overflow:hidden;background:#eef1ef}
.about-media img{object-position:48% 50%}
.about-page .detail-cover.tall img{aspect-ratio:4/4.6;object-position:40% 50%}
.photo-caption{display:block;color:#62747b;font-size:12px;line-height:1.6;padding:10px 2px;font-weight:400;letter-spacing:.015em}
.photo-caption.overlay{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);border-radius:6px;padding:7px 12px;color:#243c49}
.contact-photo{margin:28px 0 24px;overflow:hidden}
.contact-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.contact-photo .photo-caption{display:flex;justify-content:space-between;gap:12px}
.contact-photo .photo-caption span{color:#7c8a90}
.brand{height:125px;padding:26px;background:#fff;border-radius:12px;box-shadow:0 4px 18px #173f5005}
.brand img{width:145px;height:64px;max-width:100%;max-height:64px;filter:none;opacity:1;object-fit:contain}
.brand-grid.big .brand{height:160px;padding:30px}
.brand-grid.big .brand img{width:170px;height:76px;max-height:76px}
.brand:hover{transform:translateY(-3px);border-color:#b4c9ce}
.page-hero.has-bg .page-hero-bg{object-position:50% 50%}
.page-hero.has-bg:after{background:linear-gradient(90deg,#102c40f2,#102c40b8 65%,#102c4080)}
.detail-cover img{aspect-ratio:3/2;object-position:center;background:#f1f1eb}
.info-card-img img,.blog-card-img img,.guide-img img{object-position:center}
.inline-gallery{margin-top:32px;grid-template-columns:repeat(2,minmax(0,1fr))}
.inline-gallery:has(> :only-child){grid-template-columns:1fr}
.inline-gallery .gal-item img{width:100%;aspect-ratio:16/9;object-fit:cover}
.product-img,.p-main{background:#f7f4ef}
.product-img img,.p-main img{object-fit:contain}
.product-caption{margin:12px 0 0;padding:0 4px}
@media(max-width:700px){
 .hero{height:680px;min-height:0;max-height:calc(100svh - 70px)}
 .slide-img{object-position:62% center}
 .slide:after{background:linear-gradient(90deg,#0b2233d9,#0b22335c),linear-gradient(0deg,#0b2233c9,transparent 75%)}
 .slide-copy{padding-top:44px;padding-bottom:120px;justify-content:flex-end}
 .slide-title{font-size:clamp(44px,11vw,68px);max-width:100%;margin-bottom:18px}
 .slide-sub{font-size:16px;max-width:310px}
 .slide-foot p{font-size:14px;line-height:1.65;max-width:330px}
 .slide-foot{gap:18px}.hero-ctrl{bottom:55px}
 .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .brand,.brand-grid.big .brand{height:112px;padding:20px}
 .brand img,.brand-grid.big .brand img{max-height:58px;width:130px}
 .contact-photo .photo-caption{display:block}.contact-photo .photo-caption span{display:block}
 .inline-gallery{grid-template-columns:1fr}
}

/* Blog / SSS banner composition and fixed social contact buttons. */
.page-hero.editorial-header{min-height:280px;display:flex;align-items:center}
.page-hero.editorial-header .wrap{width:100%}
.page-hero.editorial-header .page-hero-bg{object-position:70% 18%}
.page-hero.editorial-header:after{background:linear-gradient(90deg,#102c40e8 0%,#102c40b8 44%,#102c4033 78%)}
.page-hero.editorial-header h1{max-width:660px}
.page-hero.editorial-header p{max-width:600px}
.quick{align-items:flex-end}
.quick a{flex-direction:row-reverse;min-width:50px;justify-content:center;gap:0}
.quick a:hover,.quick a:focus-visible{gap:8px}
.quick .q-instagram{background:linear-gradient(135deg,#773fc2,#cc356f,#df7343)}
.quick .q-facebook{background:#1877f2}
.quick a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.quick a:focus-visible span{max-width:120px}
body:has(.quick .q-instagram) .hero-ctrl,body:has(.quick .q-whatsapp) .hero-ctrl{padding-right:90px}
@media(max-width:640px){
 .page-hero.editorial-header{min-height:260px}
 .page-hero.editorial-header .page-hero-bg{object-position:62% 50%}
 .page-hero.editorial-header:after{background:linear-gradient(90deg,#102c40ed,#102c40b3)}
 .quick{gap:8px;bottom:80px;bottom:max(80px,calc(env(safe-area-inset-bottom) + 64px))}
 .quick a{min-width:44px;height:44px;padding:0 12px}
 body:has(.quick .q-instagram) .hero .slide-foot,body:has(.quick .q-whatsapp) .hero .slide-foot{padding-right:58px}
 body:has(.quick .q-instagram) .hero-ctrl,body:has(.quick .q-whatsapp) .hero-ctrl{padding-right:76px}
}

/* Preserve every pixel of slider photos, including faces, at every breakpoint. */
.slide{background:#0c2331}
.slide-img,.slide.active .slide-img{left:auto;right:0;width:66%;height:100%;object-fit:contain;object-position:right center;transform:none;transition:none}
.slide:after{background:linear-gradient(90deg,#0c2331 0%,#0c2331f5 28%,#0c2331a6 43%,transparent 67%)}
.slide-copy{padding-bottom:115px}
.slide-sub,.slide-title,.slide-foot{max-width:45%}
.slide-title{font-size:clamp(42px,6vw,88px)}
@media(max-width:700px){
 .hero{height:760px;max-height:none;min-height:0}
 .slide-img,.slide.active .slide-img{top:0;left:0;right:0;width:100%;height:300px;object-position:center top}
 .slide:after{background:linear-gradient(0deg,#0c2331 0%,#0c2331 58%,transparent 70%);pointer-events:none}
 .slide-copy{padding-top:315px;padding-bottom:100px;justify-content:flex-start}
 .slide-sub,.slide-title,.slide-foot{max-width:100%}
 .slide-title{font-size:46px;margin-bottom:16px}
 .slide-foot{gap:18px}
 .hero-ctrl{bottom:60px}
}
