/* Habip Binici — additional editorial inner pages / 04 Nov 2026 */
:root{--hb-paper:#f5f5f2;--hb-ink:#151c25;--hb-deep:#0e1723;--hb-blue:#8daecc}
.editorial-hero{min-height:730px;height:min(840px,93svh);background:#101a27;color:#fff;position:relative;display:grid;grid-template-columns:56% 44%;overflow:hidden}
.editorial-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,#101a27 0%,#101a27e8 36%,transparent 75%)}
.editorial-hero .hero-stage{position:relative;z-index:2;align-self:center;padding:125px 0 75px max(8vw,calc((100vw - 1250px)/2));max-width:850px}
.editorial-hero .hero-stage .eyeline{font-size:10px;letter-spacing:.27em;color:#a9bed2;font-weight:700}
.editorial-hero h1{font:400 clamp(65px,8vw,122px)/.84 var(--serif);letter-spacing:-.065em;margin:35px 0 28px;max-width:810px}
.editorial-hero h1 em{display:block;color:#a9c7e0;font-weight:400}
.editorial-hero .hero-stage p{color:#c7d3df;font-size:13px;line-height:1.95;max-width:450px}
.editorial-hero .hero-stage .hero-actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:34px}
.editorial-hero .hero-photo{position:absolute;right:0;top:0;width:62%;height:100%;z-index:1;overflow:hidden}
.editorial-hero .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.editorial-hero .hero-footer{position:absolute;z-index:3;bottom:38px;left:max(8vw,calc((100vw - 1250px)/2));right:8vw;border-top:1px solid #ffffff3c;padding-top:18px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.24em;color:#d0d9e5}
.hb-btn{border:1px solid #b1c7de;display:inline-flex;align-items:center;justify-content:space-between;gap:33px;border-radius:100px;padding:13px 19px;background:#dce7f2;color:#12253a;font-size:10px;letter-spacing:.09em;font-weight:700;min-height:45px;text-decoration:none}
.hb-btn:hover{background:#fff;color:#15283f}.hb-btn.outline{background:transparent;color:#eaf2fa;border-color:#8aa3bf}.hb-btn.outline:hover{background:#ffffff22}
.hb-container{width:min(1250px,calc(100% - 90px));margin:auto}
.hb-kicker{display:block;font-size:10px;letter-spacing:.23em;font-weight:700;color:#6684a1;margin-bottom:17px}
.hb-section{padding:110px 0;background:var(--hb-paper)}
.hb-section.white{background:#fff}.hb-section.dark{background:#111a25;color:white}.hb-title{font:400 clamp(52px,6vw,90px)/.93 var(--serif);letter-spacing:-.055em;margin:0}.hb-title em{font-weight:400;color:#6d8fac}.hb-lead{font:400 13px/1.9 var(--sans);color:#687785;max-width:520px;margin:0}.dark .hb-lead{color:#a6b8c8}.hb-section-heading{display:grid;grid-template-columns:1fr minmax(240px,440px);gap:30px;align-items:end;margin-bottom:55px}
.hb-rule{border:0;border-top:1px solid #d9dee3;margin:40px 0}
.hb-treat-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hb-treat{min-width:0;position:relative;display:flex;flex-direction:column;background:white;border:1px solid #dfe4e9;transition:transform .3s,border-color .3s;min-height:475px;overflow:hidden}
.hb-treat:hover{transform:translateY(-4px);border-color:#8ba9c6}
.hb-treat-visual{height:220px;background:#142336;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hb-treat-visual img{width:100%;height:100%;object-fit:cover;object-position:center 33%;transition:transform .6s}.hb-treat:hover .hb-treat-visual img{transform:scale(1.04)}
.hb-treat-visual svg{width:185px;height:185px;max-width:80%;opacity:.75}
.hb-treat-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#111e2b65)}
.hb-treat-num{position:absolute;left:19px;top:19px;z-index:2;font-size:10px;letter-spacing:.2em;color:#e3edf6}
.hb-treat-content{padding:26px 26px 30px;display:flex;flex:1;flex-direction:column}
.hb-treat h3{font:400 34px/1 var(--serif);letter-spacing:-.03em;margin:0 0 14px}
.hb-treat p{font-size:12px;color:#6a7783;line-height:1.85;margin:0 0 17px}
.hb-treat details{font-size:12px;border-top:1px solid #dfe6eb;padding-top:14px;margin-top:auto;color:#45596b}
.hb-treat details summary{cursor:pointer;font-weight:700;display:flex;justify-content:space-between;gap:20px;list-style:none}.hb-treat details summary:after{content:'+';font-size:18px;font-weight:400}
.hb-treat details[open] summary:after{content:'−'}.hb-treat details p{margin:12px 0 0}
.hb-treat-nav{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid #d8dfe5;padding:27px 0 0;margin-top:40px;font-size:12px}
.hb-narrative{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.hb-narrative img{width:100%;max-height:630px;object-fit:cover;object-position:center 23%}
.hb-narrative p{font-size:13px;line-height:2;color:#607080}.dark .hb-narrative p{color:#b5c4d0}
.hb-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hb-media-card{background:white;color:#172333;min-width:0;border:1px solid #e0e5e8;display:flex;flex-direction:column}
.hb-media-cover{height:320px;background:#162a40;position:relative;overflow:hidden}
.hb-media-cover img{width:100%;height:100%;object-fit:cover;object-position:center 24%}
.hb-media-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#091b30ad,transparent 65%)}
.hb-media-overlay{position:absolute;left:20px;right:20px;bottom:24px;z-index:1;color:#fff;font:400 31px/1.04 var(--serif)}
.hb-media-meta{padding:24px 24px 27px}.hb-media-meta small{display:block;font-size:10px;letter-spacing:.17em;color:#64829f}.hb-media-meta h3{font-size:15px;font-weight:600;margin:12px 0}.hb-media-meta p{font-size:12px;color:#76828d;line-height:1.7;margin:0}
.hb-wide-text{background:#1a2c41;color:#e6eef7;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:50px}
.hb-wide-text h3{font:400 clamp(36px,4vw,56px)/1 var(--serif);margin:0}.hb-wide-text p{font-size:12px;line-height:1.9;color:#c1ccda;margin:0}
.hb-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #d6dfe5;gap:16px;margin:32px 0}.hb-tabs button{border:0;background:transparent;color:#708092;padding:17px 2px;cursor:pointer;font:600 11px var(--sans);letter-spacing:.08em;border-bottom:2px solid transparent}.hb-tabs button[aria-selected=true]{color:#1c3d5d;border-color:#5b81a7}.hb-panel[hidden]{display:none!important}
.hb-photo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.hb-photo-item{grid-column:span 4;aspect-ratio:3/4;border:0;padding:0;position:relative;overflow:hidden;cursor:pointer;background:#152436;min-width:0}.hb-photo-item.wide{grid-column:span 8;aspect-ratio:1.36}.hb-photo-item img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .6s}.hb-photo-item:hover img{transform:scale(1.04)}.hb-photo-item span{position:absolute;z-index:1;bottom:0;left:0;right:0;color:#fff;text-align:left;background:linear-gradient(transparent,#0c1927ae);padding:46px 20px 19px;font-size:10px;letter-spacing:.11em}
.hb-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hb-case{background:#111c28;border:1px solid #304151;color:white;overflow:hidden;min-width:0}.hb-case img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#020b12;display:block}.hb-case div{padding:15px 18px;display:flex;justify-content:space-between;gap:15px}.hb-case strong{font:400 24px var(--serif)}.hb-case small{font-size:9px;letter-spacing:.1em;color:#b2c8db;align-self:center}
.hb-warning{border:1px solid #c8d7e3;background:#e9f0f5;padding:18px 22px;margin:24px 0 29px;font-size:12px;line-height:1.9;color:#3f586e}
.hb-archive-placeholder{border:1px dashed #9dadb9;background:#eef1f4;padding:45px;min-height:220px;display:flex;flex-direction:column;align-items:start;justify-content:center}.hb-archive-placeholder strong{font:400 33px var(--serif)}.hb-archive-placeholder p{max-width:560px;font-size:12px;color:#647482}
.hb-footer-cta{background:#18283b;color:white;padding:60px 0}.hb-footer-cta .hb-container{display:flex;align-items:center;justify-content:space-between;gap:20px}.hb-footer-cta h2{font:400 clamp(40px,4.5vw,65px) var(--serif);margin:0}
.hb-badge{display:inline-flex;padding:7px 10px;border:1px solid #ccdde8;color:#54728d;font:600 10px var(--sans);letter-spacing:.1em}
.hb-presentation .hb-media-card{transition:transform .25s}.hb-presentation .hb-media-card:hover{transform:translateY(-4px)}
@media(max-width:1000px){.hb-treat-layout,.hb-media-grid,.hb-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editorial-hero{grid-template-columns:1fr}.editorial-hero .hero-stage{padding-left:7vw}.editorial-hero .hero-photo{width:72%}.editorial-hero h1{font-size:clamp(60px,10vw,100px)}.hb-section-heading{grid-template-columns:1fr}}
@media(max-width:720px){.hb-container{width:calc(100% - 40px)}.hb-section{padding:74px 0}.editorial-hero{height:720px;min-height:620px}.editorial-hero::after{background:linear-gradient(0deg,#101a27 7%,#101a27df 30%,#101a270d 82%)}.editorial-hero .hero-photo{width:100%;height:75%}.editorial-hero .hero-stage{align-self:end;padding:220px 20px 125px;max-width:none}.editorial-hero h1{font-size:clamp(57px,12.5vw,77px);margin:19px 0}.editorial-hero .hero-stage p{font-size:12px}.editorial-hero .hero-footer{left:20px;right:20px;bottom:22px}.editorial-hero .hero-footer span:last-child{display:none}.hb-section-heading{margin-bottom:35px}.hb-title{font-size:clamp(49px,12vw,68px)}.hb-treat-layout,.hb-media-grid,.hb-case-grid{grid-template-columns:1fr}.hb-treat{min-height:auto}.hb-treat-visual{height:220px}.hb-narrative{grid-template-columns:1fr;gap:28px}.hb-narrative img{max-height:510px}.hb-media-cover{height:360px}.hb-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hb-photo-item,.hb-photo-item.wide{grid-column:span 1;aspect-ratio:3/4}.hb-wide-text{grid-template-columns:1fr;padding:27px;gap:19px}.hb-footer-cta .hb-container{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.hb-photo-item img,.hb-media-card,.hb-treat,.hb-treat-visual img{transition:none!important}}
/* V7 presentation refinements: keep hero typography off the portrait and legible on mobile */
@media(min-width:721px){
 .editorial-hero .hero-stage{max-width:min(56vw,790px)}
 .editorial-hero h1{font-size:clamp(61px,6.35vw,92px);max-width:580px;overflow-wrap:normal}
 .editorial-hero .hero-stage p{max-width:420px}
}
@media(max-width:720px){
 .editorial-hero::after{background:linear-gradient(0deg,#101a27 0%,#101a27f9 18%,#101a27dc 40%,#101a2790 64%,#101a270a 100%)}
 .editorial-hero .hero-stage{padding-top:260px;padding-bottom:115px}
 .editorial-hero .hero-stage .eyeline{color:#ebf2fa}
 .editorial-hero h1{font-size:clamp(54px,12.5vw,68px)}
 .editorial-hero .hero-photo{height:82%}
}
.principle-card{background:#fff;min-height:265px}
.principle-card h3{font:400 34px/1 var(--serif);color:#17293d;margin:26px 0 16px}
.principle-card>p{font:400 12px/1.85 var(--sans);color:#5e6f7d;margin:0 0 24px;flex:1}
.principle-card .review-person{border-top:1px solid #e1e6eb;padding-top:13px;font-size:9px;letter-spacing:.1em;color:#6b8298}
/* Put cinematic gradient ABOVE photo but BELOW real text on all devices */
.editorial-hero .hero-photo{z-index:0}
.editorial-hero::after{z-index:1}