*{box-sizing:border-box}
:root{--navy:#07111f;--navy2:#0b1c31;--paper:#e8eef5;--white:#f4f6fa;--blue:#2853d5;--lime:#d8ff4f;--red:#d71f51;--muted:#99a8b8;--line:rgba(231,239,247,.22);--anton:"Anton",Impact,sans-serif;--mont:"Montserrat",Arial,sans-serif;--script:"Dancing Script",cursive}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--mont);font-size:15px}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit}
h1,h2,h3,h4,.display-title,.wordmark,.cover-word,.cover-role,.recap-year,.cinema-meta h3,.social-card h3,.motion-card h3,.ai-card h3,.design-category h3,.chapter-tile,.tool-item span,.closing-sign{font-family:var(--anton);font-weight:400;letter-spacing:.012em}
em{font-style:normal;color:var(--blue);font-family:var(--anton)}
.section-pad{padding-left:7vw;padding-right:7vw}
.site-header{height:72px;padding:0 5vw;position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;background:rgba(7,17,31,.97);border-bottom:1px solid rgba(255,255,255,.13);backdrop-filter:blur(15px)}
.header-left{display:flex;align-items:center;gap:22px}
.wordmark{font-size:25px;line-height:1;color:#f5f7fa}.wordmark span{font:700 9px var(--mont);color:var(--lime);vertical-align:top;margin-left:3px}
.primary-nav{display:flex;align-items:center;gap:35px}
.primary-nav a{font:700 10px var(--mont);letter-spacing:.12em;color:#d9e2eb;transition:color .2s}
.primary-nav a:hover{color:var(--lime)}
.chapter-toggle{width:28px;height:28px;padding:4px 2px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.chapter-toggle span{height:2px;width:23px;background:var(--lime);display:block;transition:transform .25s,width .25s}
.chapter-toggle:hover span:nth-child(2){width:16px}
.drawer-backdrop{position:fixed;inset:0;background:#02060cba;z-index:80;opacity:0;visibility:hidden;transition:.3s}
.chapter-drawer{position:fixed;z-index:81;inset:0 auto 0 0;width:min(410px,88vw);background:#0a192b;border-right:1px solid #28415d;padding:32px 30px;transform:translateX(-102%);transition:transform .38s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;gap:0}
.drawer-open .drawer-backdrop{opacity:1;visibility:visible}.drawer-open .chapter-drawer{transform:translateX(0)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line);font:700 10px var(--mont);letter-spacing:.15em;color:var(--lime);margin-bottom:8px}
.drawer-close{border:0;background:transparent;color:var(--white);font-size:30px;cursor:pointer}
.chapter-drawer>a{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #ffffff18;font:400 22px var(--anton);letter-spacing:.02em;transition:color .2s,padding .2s}
.chapter-drawer>a:hover{color:var(--lime);padding-left:7px}
.chapter-drawer>a small{font:700 9px var(--mont);color:var(--lime);width:22px}
.chapter-drawer>a b{margin-left:auto;color:var(--blue);font:400 18px var(--mont)}
/* COVER */
.cover{height:min(850px,calc(100vh - 72px));min-height:690px;position:relative;overflow:hidden;background:var(--lime);color:var(--navy);padding:30px 7vw 55px}
.cover-mark{position:absolute;top:26px;left:7vw;font:400 44px var(--anton);color:var(--navy);z-index:5}
.cover-word{position:absolute;left:6vw;top:8%;font-size:clamp(108px,21vw,300px);line-height:.82;letter-spacing:-.025em;color:var(--blue);white-space:nowrap;z-index:1}
.cover-signature{position:absolute;left:7.5vw;top:42%;font:600 clamp(34px,5.6vw,78px)/1 var(--script);color:#d92059;white-space:nowrap;z-index:4;transform:rotate(-3deg)}
.cover-role{position:absolute;left:7.5vw;bottom:14%;font-size:clamp(24px,3vw,43px);line-height:.94;color:#07111f;max-width:320px;z-index:4}
.cover-statement{position:absolute;left:7.5vw;bottom:6.8%;max-width:470px;font:600 12px/1.65 var(--mont);color:#14243c;z-index:5;margin:0}
.cover-credentials{position:absolute;right:34%;bottom:6.8%;display:flex;gap:14px;align-items:center;z-index:5;color:#081322}
.cover-credentials div{display:flex;flex-direction:column;gap:4px}
.cover-credentials strong{font:400 26px var(--anton);line-height:1}
.cover-credentials span{font:700 8px var(--mont);letter-spacing:.11em}
.cover-credentials i{height:32px;width:1px;background:#07111f66}
.cover-portrait{position:absolute;z-index:3;right:3%;bottom:-4%;height:88%;width:auto;max-width:49%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 20px #20341122)}
.cover-bottom{position:absolute;right:7vw;bottom:2.4%;display:flex;gap:25px;font:700 8px var(--mont);letter-spacing:.15em;color:#263b15;z-index:5}
/* COMMON */
.section-label{font:700 10px var(--mont);letter-spacing:.16em;color:#aebed0;text-transform:uppercase;margin-bottom:26px}
.section-label span{color:var(--lime);margin-right:8px}
.display-title{font:400 clamp(52px,7vw,100px)/.95 var(--anton);letter-spacing:.008em;margin:0}
.display-title em{font-family:var(--anton);font-style:normal}
/* ABOUT */
.about{background:linear-gradient(110deg,#081524,#0b1f35);padding-top:104px;padding-bottom:105px;border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:center}
.about .display-title{font-size:clamp(56px,7.1vw,96px)}
.about-copy{border-left:1px solid #6f849c;padding-left:34px;max-width:570px}
.about-copy p{font:500 13px/1.9 var(--mont);color:#aebfd0;margin:0 0 15px}
.about-copy .about-lead{font:600 20px/1.45 var(--mont);color:#f3f6fa;margin-bottom:20px}
.about-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:23px}
.about-tags span{border:1px solid #48617d;color:var(--lime);padding:8px 10px;font:700 8px var(--mont);letter-spacing:.1em}
/* TOOLKIT */
.toolkit{background:#0a1929;padding-top:68px;padding-bottom:78px;border-top:1px solid var(--line)}
.toolkit-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}
.toolkit-head .display-title{font-size:clamp(43px,5.2vw,70px)}
.toolkit-head p{font:500 12px var(--mont);color:#9eafc1;margin:0 0 8px}
.tool-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:12px}
.tool-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 7px 13px;background:#07111f;border:1px solid #304b69;transition:transform .25s,border-color .25s}
.tool-item:hover{transform:translateY(-4px);border-color:var(--lime)}
.tool-item img{width:min(100%,68px);height:68px;object-fit:contain}
.tool-item span{font-size:13px;text-align:center;color:#e6edf5;line-height:1.1}
/* 2025 RECAP */
.recap{background:#8baeff;color:#173d9f;padding-top:85px;padding-bottom:85px;display:grid;grid-template-columns:.92fr 1.08fr;gap:5vw;align-items:center}
.recap .section-label{color:#244aa4}.recap .section-label span{color:#f1ff72}
.recap-copy .display-title{font-size:clamp(48px,6vw,80px);color:white}
.recap-kicker{font:800 10px var(--mont);letter-spacing:.16em;color:#244aa4;margin:36px 0 0}
.recap-year{font-size:clamp(115px,16vw,210px);line-height:.85;color:var(--blue);margin:4px 0}
.recap-desc{font:600 16px/1.5 var(--mont);color:#244aa4;margin:10px 0 17px}
.recap-process{font:500 11px/1.8 var(--mont);color:#234596;max-width:510px}
.video-card{position:relative;display:block;padding:0;border:0;background:#0c1d32;overflow:hidden;cursor:pointer;text-align:left;color:white}
.video-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s}
.video-card:hover img{transform:scale(1.04)}
.video-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,#03070cb0);pointer-events:none}
.video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:1px solid var(--lime);background:#06101caa;border-radius:50%;display:grid;place-items:center;padding-left:4px;color:var(--lime);font-size:18px;transition:transform .25s,background .25s}
.video-card:hover .video-play{transform:translate(-50%,-50%) scale(1.1);background:var(--lime);color:#07111f}
.video-card-label{position:absolute;z-index:2;left:18px;bottom:16px;font:700 9px var(--mont);letter-spacing:.13em}
.recap-video{aspect-ratio:1.15/1;width:100%;min-height:350px;border:9px solid #0d2856;box-shadow:18px 18px 0 #2853d5}
/* CINEMATIC */
.cinematic{background:var(--paper);color:var(--navy);padding-top:94px;padding-bottom:100px}
.cinematic .section-label{color:#53667c}.cinematic .section-label span{color:var(--blue)}
.cinematic-heading,.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:38px}
.cinematic-heading .display-title,.section-heading .display-title{font-size:clamp(52px,7vw,92px)}
.cinematic-heading>p,.section-heading>p{max-width:330px;color:#66778a;font:500 12px/1.85 var(--mont);border-left:3px solid var(--lime);padding-left:19px;margin:0 0 6px}
.cinematic-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cinema-still{width:100%;height:clamp(270px,34vw,500px)}
.cinema-still img{object-position:center}
.cinema-meta{display:flex;justify-content:space-between;align-items:end;margin-top:15px}
.cinema-meta span{font:700 8px var(--mont);letter-spacing:.13em;color:#65788e}
.cinema-meta h3{font-size:clamp(28px,3.1vw,42px);line-height:1;margin:6px 0 0}
.cinema-meta>b{font:400 26px var(--anton);color:var(--blue)}
.cinema-project>p{font:500 11px/1.75 var(--mont);color:#6c7c8e;max-width:520px;margin:10px 0 0}
/* SOCIAL VIDEOS */
.social-videos{background:#07111f;padding-top:95px;padding-bottom:105px}
.social-videos .section-heading .display-title{color:var(--white)}
.social-videos .section-heading>p{color:#aebccc}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 18px}
.social-card{min-width:0}
.dummy-video{width:100%;aspect-ratio:16/10;display:grid;place-items:center;position:relative}
.dummy-video:before{content:"";position:absolute;inset:0;opacity:.9}
.dummy-video.tone-1{background-image:linear-gradient(180deg,rgba(3,7,12,.04) 35%,rgba(3,7,12,.62)),url("assets/social-video-01.webp"),radial-gradient(circle at 70% 30%,#2f67d9,#101d37 65%);background-position:center,center,center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-2{background-image:linear-gradient(180deg,rgba(3,7,12,.04) 35%,rgba(3,7,12,.62)),url("assets/social-video-02.webp"),radial-gradient(circle at 20% 80%,#d21c54,#251426 68%);background-position:center,center,center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-3{background-image:linear-gradient(180deg,rgba(3,7,12,.04) 35%,rgba(3,7,12,.62)),url("assets/social-video-03.webp"),radial-gradient(circle at 80% 20%,#d5ff4f,#173d51 65%);background-position:center,center,center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-4{background-image:linear-gradient(180deg,rgba(3,7,12,.04) 35%,rgba(3,7,12,.62)),url("assets/social-video-04.webp"),radial-gradient(circle at 30% 30%,#7347c8,#101a37 68%);background-position:center,center,center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-5{background-image:linear-gradient(180deg,rgba(3,7,12,.04) 35%,rgba(3,7,12,.62)),url("assets/social-video-05.webp"),radial-gradient(circle at 75% 75%,#ec9c37,#172235 68%);background-position:center,center,center;background-size:cover;background-repeat:no-repeat}
.dummy-index{position:absolute;left:14px;top:13px;z-index:2;font:700 9px var(--mont);color:#e9f1fb;letter-spacing:.1em}
.dummy-tag{position:absolute;z-index:2;left:17px;bottom:15px;font:700 9px var(--mont);letter-spacing:.14em}
.social-card h3{font-size:22px;margin:13px 0 5px}
.social-card p{font:500 10px/1.65 var(--mont);color:#9babbc;margin:0}
/* SOMA BAY */
.soma{background:#2853d5;color:white;padding-top:90px;padding-bottom:90px;display:grid;grid-template-columns:.95fr 1.05fr;gap:6vw;align-items:center}
.soma-image{position:relative}.soma-image:after{content:"SOMA BAY / EGYPT";position:absolute;left:14px;bottom:14px;background:#07111f;color:var(--lime);padding:8px 10px;font:700 8px var(--mont);letter-spacing:.13em}
.soma-image img{width:100%;height:480px;object-fit:cover}
.soma .section-label{color:#dce5ff}.soma .section-label span{color:var(--lime)}
.soma-overline{font:700 9px var(--mont);letter-spacing:.14em;color:var(--lime);line-height:1.7}
.soma .display-title{font-size:clamp(70px,9vw,120px);line-height:.82;margin:10px 0 24px;color:white}
.soma .display-title em{color:var(--lime)}
.soma-copy>p:not(.soma-overline){font:500 12px/1.85 var(--mont);color:#e3eaff;max-width:560px}
.folder-link{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:14px 17px;background:var(--lime);color:#07111f;font:800 9px var(--mont);letter-spacing:.1em;transition:transform .2s}
.folder-link span{font-size:18px}.folder-link:hover{transform:translateY(-3px)}
.edit-hint{display:none}
/* COLOR */
.color{background:#e7edf4;color:#07111f;padding-top:95px;padding-bottom:90px}
.color .section-label{color:#61758a}.color .section-label span{color:var(--blue)}
.color-heading{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:38px}
.color-heading .display-title{font-size:clamp(60px,8vw,105px)}
.color-heading>div{display:flex;align-items:center;gap:20px;max-width:490px}
.color-heading p{font:500 11px/1.8 var(--mont);color:#5d6f82;margin:0;border-left:2px solid var(--blue);padding-left:18px}
.color-stamp{flex:none;border:1px solid var(--blue);color:var(--blue);font:400 15px/1 var(--anton);padding:13px;transform:rotate(-5deg)}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.color-video{aspect-ratio:1/1;background-image:linear-gradient(180deg,rgba(3,7,12,.02) 35%,rgba(3,7,12,.45)),url("assets/color-study-01.webp"),linear-gradient(140deg,#122039,#315c91 48%,#d5a25c);background-position:center,center,center;background-size:cover;background-repeat:no-repeat}
.color-video.second{background-image:linear-gradient(180deg,rgba(3,7,12,.02) 35%,rgba(3,7,12,.45)),url("assets/color-study-02.webp"),linear-gradient(130deg,#1a273e,#b15d46 50%,#e9c99b);background-position:center,center,center;background-size:cover;background-repeat:no-repeat}
.color-video:before{content:"";position:absolute;inset:10%;border:1px solid #ffffff66;pointer-events:none}
.color-video-no{position:absolute;top:18px;left:19px;z-index:2;color:var(--lime);font:400 30px var(--anton)}
.color-foot{display:flex;align-items:center;gap:14px;margin-top:22px;color:#6b7b8d;font:700 8px var(--mont);letter-spacing:.14em}
.color-foot b{color:var(--blue);font-size:15px}
/* MOTION */
.motion{background:linear-gradient(105deg,#c9194d 0 34%,#2853d5 34% 100%);padding-top:95px;padding-bottom:100px}
.motion .section-label{color:#ffe3eb}.motion .section-label span{color:var(--lime)}
.motion .section-heading .display-title{color:white}.motion .section-heading .display-title em{color:var(--lime)}
.motion .section-heading>p{color:#f5dfe7;border-color:var(--lime)}
.motion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.motion-still{aspect-ratio:1.2/1;width:100%;background:#081a32;border:1px solid #ffffff55}
.motion-still img{width:100%;height:100%;object-fit:cover}
.motion-label{display:block;margin-top:13px;font:700 8px var(--mont);letter-spacing:.13em;color:#f6dfe7}
.motion-card h3{font-size:28px;margin:5px 0;color:white}
.motion-card p{font:500 10px/1.6 var(--mont);color:#f3dfe7;margin:0}
/* AI */
.ai{position:relative;overflow:hidden;background:#030a15;padding-top:105px;padding-bottom:110px}
.ai:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(45,93,151,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(45,93,151,.11) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 80%,transparent);pointer-events:none}
.ai-noise{position:absolute;inset:-30%;background:radial-gradient(ellipse at 75% 35%,#15579a44,transparent 45%),radial-gradient(ellipse at 20% 80%,#8e1c8b22,transparent 40%);pointer-events:none}
.ai>*{position:relative;z-index:1}
.ai .section-label{color:#b3c5d7}.ai .section-label span{color:var(--lime)}
.ai-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
.ai-eyebrow{font:700 9px var(--mont);letter-spacing:.17em;color:#39d8f1}
.ai-heading .display-title{font-size:clamp(60px,8vw,105px);text-shadow:0 0 28px #2c55d455}
.ai-heading .display-title em{color:#4b82ff}
.ai-heading>p{max-width:330px;color:#9bacbf;font:500 12px/1.8 var(--mont);margin:0 0 8px}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ai-card{background:#08172a;border:1px solid #24466a;padding:10px;box-shadow:0 0 25px #0e469a18}
.ai-still{width:100%;aspect-ratio:4/5;background:linear-gradient(145deg,#112542,#174d74,#291748)}
.ai-still img{width:100%;height:100%;object-fit:cover}
.ai-code{position:absolute;top:12px;left:12px;padding:7px 9px;background:#07111f;color:#49e1ec;font:700 8px var(--mont);letter-spacing:.12em}
.ai-card h3{font-size:22px;margin:13px 4px 4px}
.ai-card p{margin:0 4px 7px;color:#8fa6be;font:500 10px/1.65 var(--mont)}
/* DESIGN */
.design{background:#e8eef5;color:#07111f;padding-top:95px;padding-bottom:95px}
.design .section-label{color:#61758a}.design .section-label span{color:var(--blue)}
.design .section-heading>p{color:#637589}
.design-categories{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.design-category{background:#0b1a2d;color:white;position:relative;overflow:hidden;min-height:490px}
.design-category img{width:100%;height:310px;object-fit:cover;object-position:center}
.design-category-copy{padding:22px 24px 18px;background:#d31d51;color:#e5ff5a;min-height:180px}
.social-design .design-category-copy{background:#2853d5;color:#d8ff4f}
.design-category-copy>span{font:700 8px var(--mont);letter-spacing:.15em;color:white}
.design-category h3{font-size:clamp(31px,4vw,50px);line-height:.93;margin:13px 0 8px}
.design-category p{font:500 10px/1.6 var(--mont);color:#fff;margin:0;max-width:380px}
/* PHOTO EDITING */
.photo-editing{background:#0a192a;padding-top:95px;padding-bottom:105px}
.photo-editing .section-heading .display-title{font-size:clamp(48px,6vw,83px)}
.photo-editing .section-heading>p{color:#9eafc0;border-color:var(--lime)}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.compare-card>p{font:700 8px var(--mont);letter-spacing:.13em;color:#a4b4c5;margin:12px 0 0}
.compare-view{position:relative;aspect-ratio:1.08/1;overflow:hidden;background:#13263b;--split:50%}
.compare-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-after{z-index:1}
.compare-before{z-index:2;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.compare-label{position:absolute;z-index:4;top:12px;padding:6px 8px;background:#07111fdd;color:white;font:700 8px var(--mont);letter-spacing:.12em}
.before-label{left:12px}.after-label{right:12px}
.compare-divider{position:absolute;z-index:4;top:0;bottom:0;left:var(--split);width:2px;background:var(--lime);transform:translateX(-50%);pointer-events:none}
.compare-handle{position:absolute;z-index:5;top:50%;left:var(--split);width:40px;height:40px;border-radius:50%;border:1px solid var(--lime);background:#07111fee;color:var(--lime);display:grid;place-items:center;font:700 17px var(--mont);transform:translate(-50%,-50%);pointer-events:none}
.compare-range{position:absolute;inset:0;width:100%;height:100%;z-index:6;opacity:0;cursor:ew-resize;margin:0}
/* CLOSING + CONTACT */
.closing{background:var(--lime);color:#07111f;padding-top:105px;padding-bottom:100px}
.closing-index{display:block;font:700 9px var(--mont);letter-spacing:.16em;margin-bottom:33px}
.closing .display-title{font-size:clamp(58px,9vw,122px);line-height:.9}
.closing .display-title em{color:var(--blue)}
.closing>p{max-width:550px;font:600 15px/1.8 var(--mont);margin:34px 0 20px}
.closing-sign{font-size:29px;color:#d31d51}
.contact{padding-top:95px;padding-bottom:80px;background:linear-gradient(120deg,#08182a,#07111f 70%)}
.contact .section-label span{color:var(--lime)}
.contact .display-title{font-size:clamp(56px,8.3vw,112px);margin-bottom:26px}
.contact .display-title em{color:var(--lime)}
.contact>p{font:500 12px var(--mont);color:#a6b7c8;margin-bottom:30px}
.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:0 35px;border-top:1px solid var(--line)}
.contact-links a{display:flex;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);font:700 9px var(--mont);letter-spacing:.08em}
.contact-links b{font:400 17px var(--mont);color:var(--lime)}
footer{display:flex;justify-content:space-between;align-items:center;padding:23px 6vw;background:#030912;border-top:1px solid var(--line);color:#94a7ba;font:700 8px var(--mont);letter-spacing:.12em}
footer .wordmark{font-size:27px;color:var(--lime)}
/* VIDEO MODAL */
.video-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:25px;opacity:0;visibility:hidden;transition:.25s}
.video-modal.open{opacity:1;visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:#020509ed}
.modal-panel{position:relative;width:min(100%,1050px);background:#07111f;border:1px solid #385577;padding:14px;z-index:2}
.modal-close{position:absolute;right:8px;top:-48px;width:38px;height:38px;border:1px solid #7d8ea0;color:white;background:#0b1a2b;border-radius:50%;font-size:25px;cursor:pointer}
.modal-content{aspect-ratio:16/9;display:grid;place-items:center;background:#0c1e32}
.modal-content iframe{width:100%;height:100%;border:0}
.modal-placeholder{text-align:center;padding:35px;max-width:530px}
.modal-placeholder strong{display:block;font:400 35px var(--anton);color:var(--lime);margin-bottom:10px}
.modal-placeholder p{font:500 12px/1.8 var(--mont);color:#b2c3d4}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{opacity:1;transform:translateY(0)}
@media(max-width:950px){.tool-grid{grid-template-columns:repeat(5,1fr)}.cover-word{font-size:26vw}.cover-portrait{height:80%;right:1%}.cover-credentials{right:28%}.social-grid{grid-template-columns:repeat(2,1fr)}.motion-grid{grid-template-columns:1fr 1fr}.motion-card:last-child{grid-column:1/-1}.motion-card:last-child .motion-still{aspect-ratio:2.2/1}}
@media(max-width:700px){
 .site-header{height:64px;padding:0 5vw}.header-left{gap:15px}.wordmark{font-size:23px}.primary-nav{gap:14px}.primary-nav a{font-size:8px;letter-spacing:.05em}.section-pad{padding-left:6vw;padding-right:6vw}
 .cover{height:calc(100svh - 64px);min-height:690px;padding:20px 6vw 45px}
 .cover-mark{top:20px;left:6vw;font-size:35px}.cover-word{top:12%;left:4vw;font-size:24vw;letter-spacing:-.04em}
 .cover-signature{left:6vw;top:34%;font-size:clamp(27px,7vw,45px)}
 .cover-role{left:6vw;bottom:23%;font-size:26px}
 .cover-statement{left:6vw;bottom:14%;right:33%;font-size:9px;line-height:1.5}
 .cover-credentials{left:6vw;right:auto;bottom:5.5%;gap:10px}.cover-credentials strong{font-size:19px}.cover-credentials span{font-size:6px}.cover-credentials i{height:26px}
 .cover-portrait{height:62%;max-width:67%;right:-6%;bottom:0}
 .cover-bottom{right:6vw;bottom:1.5%;font-size:6px;gap:12px}
 .primary-nav{gap:11px}.primary-nav a{font-size:7px}
 .about,.toolkit,.recap,.cinematic,.social-videos,.soma,.color,.motion,.ai,.design,.photo-editing,.closing,.contact{padding-top:70px;padding-bottom:72px}
 .about-grid{grid-template-columns:1fr;gap:25px}.about .display-title{font-size:clamp(48px,12vw,70px)}
 .about-copy{padding-left:18px}.about-copy .about-lead{font-size:17px}
 .toolkit-head{display:block}.toolkit-head .display-title{font-size:48px}.toolkit-head>p{margin-top:15px}
 .tool-grid{grid-template-columns:repeat(3,1fr);gap:8px}.tool-item{padding:10px 4px}.tool-item img{width:55px;height:55px}.tool-item span{font-size:11px}
 .recap{grid-template-columns:1fr;gap:24px}.recap-copy .display-title{font-size:56px}.recap-year{font-size:140px}.recap-video{min-height:0;aspect-ratio:1.25/1}
 .cinematic-heading,.section-heading,.ai-heading,.color-heading{display:block}.cinematic-heading .display-title,.section-heading .display-title{font-size:clamp(47px,11vw,68px)}
 .cinematic-heading>p,.section-heading>p{margin-top:19px;max-width:330px}
 .cinematic-grid{grid-template-columns:1fr;gap:34px}.cinema-still{height:auto;aspect-ratio:4/3}
 .social-grid{grid-template-columns:1fr 1fr;gap:24px 10px}.social-card h3{font-size:18px}.social-card p{font-size:9px}.dummy-video{aspect-ratio:4/5}.video-play{width:48px;height:48px;font-size:14px}
 .soma{grid-template-columns:1fr;gap:25px}.soma-image img{height:290px}.soma .display-title{font-size:90px}
 .color-heading .display-title{font-size:66px}.color-heading>div{margin-top:22px}.color-stamp{font-size:12px;padding:10px}.color-grid{gap:10px}.color-foot{font-size:6px;gap:7px;letter-spacing:.06em}
 .motion .section-heading .display-title{font-size:58px}.motion-grid{grid-template-columns:1fr 1fr;gap:24px 10px}.motion-card:last-child{grid-column:1/-1}.motion-card:last-child .motion-still{aspect-ratio:1.2/1}.motion-card h3{font-size:22px}.motion-card p{font-size:9px}
 .ai-heading .display-title{font-size:70px}.ai-heading>p{margin-top:18px}.ai-grid{grid-template-columns:1fr;gap:18px}.ai-still{aspect-ratio:16/10}.ai-card h3{font-size:24px}
 .design .section-heading .display-title{font-size:58px}.design-categories{grid-template-columns:1fr;gap:20px}.design-category{min-height:0}.design-category-copy{min-height:170px}.design-category img{height:235px}
 .photo-editing .section-heading .display-title{font-size:51px}.compare-grid{grid-template-columns:1fr;gap:26px}.compare-view{aspect-ratio:1.2/1}.compare-card>p{font-size:8px}
 .closing .display-title{font-size:67px}.closing>p{font-size:12px}.closing-sign{font-size:24px}
 .contact .display-title{font-size:63px}.contact-links{grid-template-columns:1fr}.contact-links a{font-size:8px}
 footer{gap:10px;flex-wrap:wrap}footer span{font-size:7px}
}
@media(max-width:390px){.primary-nav{gap:8px}.primary-nav a{font-size:6.5px}.cover-role{font-size:23px}.cover-statement{right:30%}.cover-portrait{height:58%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* =========================================================
   DRAFT 08 — RESTORED COVER ONLY
   Restores the earlier split-panel dark cover shown in the
   user's reference screenshot. Other page sections unchanged.
   ========================================================= */
.site-header{
  height:78px;
  padding:0 6.2vw;
  border-top:5px solid var(--lime);
  border-bottom:1px solid rgba(255,255,255,.14);
  background:#050b13;
}
.site-header .wordmark{font:400 25px var(--anton);letter-spacing:.015em;color:#f3f6fb}
.site-header .wordmark span{font:700 9px var(--mont);color:var(--lime);vertical-align:top;margin-left:3px}
.primary-nav{display:flex;align-items:center;gap:clamp(25px,3.2vw,58px)}
.primary-nav a{font:500 10px var(--mont);letter-spacing:.14em;color:#d3d9e1;opacity:1}
.primary-nav a:hover{color:var(--lime)}
.primary-nav .nav-talk{color:var(--lime);display:flex;align-items:center;gap:15px}
.primary-nav .nav-talk span{font:400 22px var(--mont);line-height:.7}
.site-header .chapter-toggle{display:none}

/* Cover frame */
.cover{
  height:auto;min-height:0;overflow:hidden;
  padding:clamp(65px,7.2vw,145px) 0 58px;
  background:#050b13;color:#eef2f8;
}
.cover-meta{
  width:min(84%,1680px);margin:0 auto 48px;
  display:flex;align-items:center;gap:15px;
  color:#c8d0da;font:600 10px var(--mont);letter-spacing:.13em;
}
.cover-meta-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);display:inline-block}
.cover-meta i{width:55px;height:1px;background:#718093;display:inline-block}
.cover-card{
  width:min(84%,1680px);margin:0 auto;
  min-height:clamp(520px,44vw,900px);
  display:grid;grid-template-columns:53% 47%;
  border:1px solid #19354d;
  background:#07182a;
}
.cover-left{
  position:relative;min-width:0;min-height:inherit;overflow:hidden;
  padding:0;
  background:linear-gradient(125deg,#071a2c 0%,#061527 58%,#071a2c 100%);
}
.cover-mark{
  position:absolute;top:9%;left:5.2%;
  font:400 clamp(34px,3.4vw,54px)/1 var(--anton);
  color:var(--lime);z-index:3;
}
.cover-note{
  position:absolute;top:10%;right:7%;
  font:600 clamp(18px,1.9vw,29px)/1.1 var(--script);
  color:var(--lime);transform:rotate(-6deg);z-index:3;
}
.cover-title-line{
  position:absolute;left:5.2%;top:39%;
  display:flex;align-items:center;gap:clamp(15px,2vw,34px);
  width:90%;z-index:3;
}
.cover-word{
  margin:0;white-space:nowrap;
  font:400 clamp(65px,7.2vw,124px)/.95 var(--anton)!important;
  color:#eff3f9;letter-spacing:.005em!important;
  min-width:0;
}
.cover-typed-output{display:inline-block}
.cover-caret{
  display:inline-block;width:2px;height:.78em;
  margin-left:4px;background:var(--lime);vertical-align:-.03em;
  animation:coverCaretBlink .78s steps(1,end) infinite;
}
.cover-word .typing-done + .cover-caret{animation:coverCaretBlink .78s steps(1,end) 3,coverCaretHide 0s 2.8s forwards}
@keyframes coverCaretBlink{50%{opacity:0}}
@keyframes coverCaretHide{to{opacity:0}}
.cover-year{
  color:var(--lime);font:400 clamp(18px,2vw,31px)/1 var(--mont);
  white-space:nowrap;margin-top:.05em;
}
.cover-role{
  position:absolute;left:5.2%;top:58%;
  display:flex;align-items:center;gap:12px;
  font:700 clamp(9px,.85vw,13px)/1.2 var(--mont)!important;
  letter-spacing:.08em;color:#c5d0dd;max-width:none;
}
.cover-role-square{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.cover-statement{
  position:absolute;left:5.2%;top:66%;
  max-width:85%;margin:0;
  color:#8296ac;font:500 clamp(9px,.82vw,12px)/1.9 var(--mont);
  letter-spacing:.11em;
}
.cover-explore{
  position:absolute;left:5.2%;bottom:8%;
  display:inline-flex;align-items:center;gap:16px;
  font:700 10px var(--mont);letter-spacing:.12em;color:var(--lime);
  transition:gap .25s;
}
.cover-explore span{font:400 20px var(--mont)}
.cover-explore:hover{gap:23px}
.cover-photo-wrap{position:relative;min-width:0;min-height:inherit;overflow:hidden;background:#243b50}
.cover-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 48%;
  filter:saturate(.88) contrast(.96);
}
.cover-photo-caption{
  position:absolute;right:4%;bottom:3%;
  padding:11px 17px;background:rgba(5,11,19,.82);
  color:#8593a2;font:500 9px var(--mont);letter-spacing:.13em;
}
.cover-footer{
  width:min(84%,1680px);margin:43px auto 0;
  display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;
}
.cover-footer>p{
  margin:0;color:#a8b5c5;
  font:500 clamp(12px,1.15vw,17px)/1.8 var(--mont);
}
.cover-down{
  width:58px;height:58px;border:1px solid #526d88;border-radius:50%;
  display:grid;place-items:center;color:var(--lime);
  font:400 24px var(--mont);transition:background .2s,transform .2s;
}
.cover-down:hover{background:#112943;transform:translateY(4px)}
.cover-footer-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.cover-footer-meta strong,.cover-footer-meta span{
  font:700 9px var(--mont);letter-spacing:.11em;color:#d1dae4;
}
.cover-footer-meta span{color:#78889b}

/* Medium / mobile cover only */
@media(max-width:900px){
  .cover-card{min-height:clamp(470px,58vw,650px)}
  .cover-title-line{top:40%}
  .cover-word{font-size:clamp(58px,8vw,86px)!important}
  .cover-note{font-size:19px}
  .cover-footer{margin-top:32px}
}
@media(max-width:700px){
  .site-header{height:68px;padding:0 5vw}
  .site-header .chapter-toggle{display:flex;order:-1;width:25px}
  .site-header .wordmark{margin-right:auto}
  .site-header .primary-nav{gap:12px}
  .site-header .primary-nav a{font-size:7px;letter-spacing:.045em}
  .site-header .primary-nav a:nth-child(2){display:none}
  .site-header .primary-nav .nav-talk{gap:4px}
  .site-header .primary-nav .nav-talk span{font-size:15px}
  .cover{padding:55px 0 38px}
  .cover-meta{width:88%;margin-bottom:22px;gap:9px;font-size:8px}
  .cover-meta i{width:24px}
  .cover-card{width:88%;min-height:650px;grid-template-columns:1fr;grid-template-rows:1fr}
  .cover-left{min-height:650px;z-index:2;background:linear-gradient(100deg,#07182a 0%,#07182aee 54%,#07182a88 100%)}
  .cover-photo-wrap{position:absolute;right:0;bottom:0;width:62%;height:70%;min-height:0;z-index:1;opacity:.9}
  .cover-photo{object-position:center 46%}
  .cover-mark{top:6%;left:7%;font-size:38px}
  .cover-note{top:7%;right:7%;font-size:20px}
  .cover-title-line{top:29%;left:7%;width:90%;gap:12px}
  .cover-word{font-size:clamp(55px,14vw,82px)!important}
  .cover-year{font-size:16px}
  .cover-role{top:43%;left:7%;font-size:8px!important;max-width:85%}
  .cover-statement{top:51%;left:7%;max-width:75%;font-size:8px}
  .cover-explore{left:7%;bottom:7%;font-size:8px}
  .cover-photo-caption{display:none}
  .cover-footer{width:88%;grid-template-columns:1fr auto;gap:12px;margin-top:25px}
  .cover-footer>p{font-size:10px}
  .cover-down{width:42px;height:42px;font-size:18px}
  .cover-footer-meta{grid-column:1/-1;align-items:flex-start;margin-top:8px}
  .cover-footer-meta strong,.cover-footer-meta span{font-size:7px}
}



/* =========================================================
   DRAFT 09 — COVER POSITION MATCH + MOBILE COMPARE FIX
   Cover coordinates follow the user's supplied reference:
   header, metadata row, split cover card and lower footer.
   All sections below the cover keep their existing styling.
   ========================================================= */
.site-header{
  height:154px;
  padding:0 6.2vw;
  border-top:6px solid var(--lime);
  border-bottom:1px solid rgba(255,255,255,.14);
  background:#050b13;
}
.cover{
  padding:154px 0 200px;
  background:#050b13;
}
.cover-meta{
  width:82.4%;
  margin:0 auto 80px;
}
.cover-card{
  width:82.4%;
  max-width:none;
  min-height:900px;
  grid-template-columns:52% 48%;
}
.cover-left,.cover-photo-wrap{min-height:900px}
.cover-mark{
  top:9%;
  left:5.2%;
}
.cover-note{
  top:10%;
  right:7.5%;
}
.cover-title-line{
  left:5.2%;
  top:35.7%;
  width:91%;
  gap:clamp(16px,1.65vw,30px);
}
.cover-word{
  font-size:clamp(70px,6.1vw,126px)!important;
}
.cover-year{
  font-size:clamp(18px,1.55vw,27px);
}
.cover-role{
  left:5.2%;
  top:58%;
}
.cover-statement{
  left:5.2%;
  top:65.2%;
}
.cover-explore{
  left:5.2%;
  bottom:8%;
}
.cover-photo{object-position:center 48%}
.cover-photo-caption{right:4%;bottom:2.7%}
.cover-footer{
  width:82.4%;
  margin:58px auto 0;
  grid-template-columns:1fr auto 1fr;
}
.cover-footer>p{font-size:clamp(12px,1.08vw,17px)}
.cover-down{width:58px;height:58px}

/* Make the comparison surface itself receive touch/pointer gestures.
   The invisible range remains keyboard accessible, but no longer blocks
   mobile pointer events over the comparison image. */
.compare-view{
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:ew-resize;
}
.compare-view img,
.compare-label,
.compare-divider,
.compare-handle{
  pointer-events:none;
}
.compare-range{
  pointer-events:none;
  touch-action:pan-y;
}

/* Medium screens */
@media(max-width:1100px) and (min-width:701px){
  .site-header{height:112px}
  .cover{padding-top:105px;padding-bottom:120px}
  .cover-meta{margin-bottom:45px}
  .cover-card{min-height:620px;grid-template-columns:52% 48%}
  .cover-left,.cover-photo-wrap{min-height:620px}
  .cover-word{font-size:clamp(58px,6.2vw,90px)!important}
  .cover-title-line{top:36%;gap:12px}
  .cover-note{font-size:19px}
  .cover-footer{margin-top:38px}
}

/* Mobile: keep the restored cover compact while retaining its hierarchy. */
@media(max-width:700px){
  .site-header{height:68px;padding:0 5vw;border-top-width:5px}
  .cover{padding:55px 0 65px}
  .cover-meta{width:88%;margin-bottom:22px}
  .cover-card{width:88%;min-height:650px;grid-template-columns:1fr}
  .cover-left{min-height:650px}
  .cover-photo-wrap{min-height:0}
  .cover-footer{width:88%;margin-top:25px}
}


/* Draft 11 — use Hadeer's supplied 2025 Recap frame without aggressive cropping */
.recap-video{
  aspect-ratio:4/5;
  min-height:0;
  max-height:760px;
  background:#06101d;
}
.recap-video img{
  object-fit:cover;
  object-position:center center;
}
@media(max-width:700px){
  .recap-video{
    aspect-ratio:4/5;
    min-height:0;
    max-height:620px;
  }
}



/* =========================================================
   DRAFT 12 — MOBILE COVER REBUILD
   Desktop/tablet cover remains unchanged. On phones the text
   gets its own clean panel and the portrait sits below it,
   so title, role, tagline and CTA never collide.
   ========================================================= */
@media(max-width:700px){
  .cover{
    height:auto;
    min-height:0;
    padding:34px 0 42px;
    overflow:hidden;
  }

  .cover-meta{
    width:88%;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:8px;
    letter-spacing:.09em;
  }
  .cover-meta-dot{width:7px;height:7px;flex:none}
  .cover-meta i{width:22px;flex:none}

  .cover-card{
    width:88%;
    min-height:0;
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    grid-template-rows:none;
  }

  .cover-left{
    order:1;
    position:relative;
    width:100%;
    min-height:455px;
    height:455px;
    overflow:hidden;
    background:linear-gradient(140deg,#071a2c 0%,#061527 62%,#09213a 100%);
    z-index:2;
  }

  .cover-mark{
    top:25px;
    left:7%;
    font-size:37px;
  }
  .cover-note{
    top:31px;
    right:7%;
    max-width:52%;
    white-space:normal;
    text-align:right;
    font-size:clamp(17px,4.7vw,21px);
    line-height:1.05;
  }

  .cover-title-line{
    position:absolute;
    left:7%;
    top:36%;
    width:86%;
    display:flex;
    align-items:baseline;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:clamp(7px,2.3vw,12px);
  }
  .cover-word{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    font-size:clamp(40px,11.3vw,52px)!important;
    line-height:1!important;
    letter-spacing:0!important;
  }
  .cover-typed-output{white-space:nowrap}
  .cover-caret{
    width:2px;
    height:.76em;
    margin-left:2px;
  }
  .cover-year{
    flex:0 0 auto;
    font-size:clamp(13px,3.8vw,16px);
    margin:0;
    line-height:1;
  }

  .cover-role{
    position:absolute;
    top:58%;
    left:7%;
    right:7%;
    width:auto;
    max-width:none;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:8px!important;
    line-height:1.35!important;
    letter-spacing:.075em!important;
    white-space:normal;
  }
  .cover-role-square{width:8px;height:8px;flex:none}

  .cover-statement{
    position:absolute;
    top:68%;
    left:7%;
    right:9%;
    width:auto;
    max-width:none;
    margin:0;
    font-size:8px;
    line-height:1.75;
    letter-spacing:.08em;
    color:#a8b9ca;
  }

  .cover-explore{
    position:absolute;
    left:7%;
    right:auto;
    bottom:6%;
    gap:11px;
    font-size:8px;
    line-height:1.2;
  }
  .cover-explore span{font-size:17px}

  .cover-photo-wrap{
    order:2;
    position:relative;
    inset:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:4/5;
    opacity:1;
    z-index:1;
    overflow:hidden;
    background:#1a344a;
  }
  .cover-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 43%;
  }
  .cover-photo-caption{
    display:block;
    right:4%;
    bottom:3%;
    padding:8px 10px;
    font-size:7px;
  }

  .cover-footer{
    width:88%;
    margin:22px auto 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
  }
  .cover-footer>p{
    min-width:0;
    font-size:9px;
    line-height:1.8;
  }
  .cover-down{
    width:40px;
    height:40px;
    font-size:17px;
  }
  .cover-footer-meta{
    grid-column:1/-1;
    margin:3px 0 0;
    align-items:flex-start;
    gap:5px;
  }
  .cover-footer-meta strong,.cover-footer-meta span{
    font-size:7px;
  }
}

/* Narrow phones: give the portfolio title a little more breathing room. */
@media(max-width:380px){
  .cover-left{height:440px;min-height:440px}
  .cover-title-line{top:37%;gap:6px}
  .cover-word{font-size:clamp(37px,10.8vw,43px)!important}
  .cover-year{font-size:12px}
  .cover-role{top:59%;font-size:7.5px!important}
  .cover-statement{top:69%;font-size:7.5px}
  .cover-explore{font-size:7.5px}
}



/* =========================================================
   DRAFT 13 — COVER COPY ORDER & SPACING
   Required reading order:
   2026 → PORTFOLIO (typed on load) → role + lime square
   → two-line visual statement → explore work.
   ========================================================= */
.cover-copy-stack{
  position:absolute;
  left:5.2%;
  right:5%;
  top:29%;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.cover-copy-stack .cover-year{
  position:static;
  display:block;
  order:0;
  margin:0 0 10px 2px;
  font:500 clamp(20px,1.8vw,29px)/1 var(--mont);
  color:var(--lime);
}
.cover-copy-stack .cover-title-line{
  position:static;
  display:block;
  width:auto;
  margin:0;
  order:1;
}
.cover-copy-stack .cover-word{
  display:block;
  width:max-content;
  max-width:100%;
  min-width:0;
  font-size:clamp(68px,6.1vw,118px)!important;
  line-height:.98!important;
  white-space:nowrap;
}
.cover-copy-stack .cover-role{
  position:static;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:100%;
  margin:42px 0 0;
  order:2;
  font:700 clamp(9px,.85vw,13px)/1.3 var(--mont)!important;
  letter-spacing:.08em!important;
  color:#c5d0dd;
}
.cover-copy-stack .cover-role-square{
  display:inline-block;
  width:10px;
  height:10px;
  background:var(--lime);
  flex:0 0 10px;
}
.cover-copy-stack .cover-statement{
  position:static;
  display:block;
  margin:34px 0 0;
  max-width:90%;
  order:3;
  color:#8296ac;
  font:500 clamp(9px,.82vw,12px)/1.9 var(--mont);
  letter-spacing:.11em;
}
.cover-copy-stack .cover-explore{
  position:static;
  display:inline-flex;
  margin:48px 0 0;
  order:4;
}

/* Mobile: dedicate a clean vertical rhythm to each text element. */
@media(max-width:700px){
  .cover-left{
    min-height:570px;
    height:570px;
  }
  .cover-copy-stack{
    top:28%;
    left:7%;
    right:7%;
  }
  .cover-copy-stack .cover-year{
    margin:0 0 9px 1px;
    font-size:16px;
    line-height:1;
  }
  .cover-copy-stack .cover-title-line{
    width:100%;
    margin:0;
  }
  .cover-copy-stack .cover-word{
    font-size:clamp(43px,11.7vw,54px)!important;
    line-height:1!important;
    letter-spacing:0!important;
  }
  .cover-copy-stack .cover-role{
    margin-top:34px;
    gap:9px;
    font-size:8px!important;
    line-height:1.35!important;
    letter-spacing:.065em!important;
  }
  .cover-copy-stack .cover-role-square{
    width:8px;
    height:8px;
    flex-basis:8px;
  }
  .cover-copy-stack .cover-statement{
    margin-top:29px;
    max-width:100%;
    font-size:8px;
    line-height:1.85;
    letter-spacing:.075em;
  }
  .cover-copy-stack .cover-explore{
    margin-top:37px;
    font-size:8px;
    gap:11px;
  }
  .cover-copy-stack .cover-explore span{font-size:17px}
}
@media(max-width:380px){
  .cover-left{min-height:555px;height:555px}
  .cover-copy-stack{top:29%}
  .cover-copy-stack .cover-word{font-size:clamp(39px,10.9vw,43px)!important}
  .cover-copy-stack .cover-role{margin-top:31px;font-size:7.5px!important}
  .cover-copy-stack .cover-statement{margin-top:26px;font-size:7.5px}
  .cover-copy-stack .cover-explore{margin-top:32px;font-size:7.5px}
}


/* DRAFT 14 — cover cleanup: remove tagline and restore clean vertical rhythm */
.cover-copy-stack .cover-role{
  margin-top: clamp(48px, 5vw, 76px);
}
.cover-copy-stack .cover-explore{
  margin-top: clamp(66px, 6.2vw, 92px);
}

/* Mobile spacing: PORTFOLIO, role and CTA each get their own clear line. */
@media(max-width:700px){
  .cover-left{
    min-height:570px;
    height:570px;
  }
  .cover-copy-stack{
    top:28%;
  }
  .cover-copy-stack .cover-role{
    margin-top:52px;
  }
  .cover-copy-stack .cover-explore{
    margin-top:70px;
  }
}
@media(max-width:380px){
  .cover-left{
    min-height:550px;
    height:550px;
  }
  .cover-copy-stack .cover-role{
    margin-top:46px;
  }
  .cover-copy-stack .cover-explore{
    margin-top:62px;
  }
}


/* =========================================================
   DRAFT 15 — MOBILE COPY PLACEMENT FROM HADER'S MARKUP
   The arrows indicate destination positions:
   role -> lower red oval; Explore CTA -> lower lime oval.
   No additional tagline or copy is added.
   ========================================================= */
@media(max-width:700px){
  /* Make the copy stack fill the dark panel so each item can
     be placed independently instead of flowing into each other. */
  .cover-copy-stack{
    top:0;
    bottom:0;
    left:0;
    right:0;
  }

  /* Year stays above the PORTFOLIO title. */
  .cover-copy-stack .cover-year{
    position:absolute;
    top:24%;
    left:7%;
    margin:0;
    font-size:16px;
    line-height:1;
  }

  .cover-copy-stack .cover-title-line{
    position:absolute;
    top:31%;
    left:7%;
    width:86%;
    margin:0;
  }

  .cover-copy-stack .cover-word{
    display:block;
    width:max-content;
    max-width:100%;
    font-size:clamp(43px,11.7vw,54px)!important;
    line-height:1!important;
    white-space:nowrap;
  }

  /* Role moves down into the lower red-marked position. */
  .cover-copy-stack .cover-role{
    position:absolute;
    top:52%;
    left:7%;
    right:7%;
    margin:0;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:8px!important;
    line-height:1.35!important;
    letter-spacing:.065em!important;
    white-space:normal;
  }

  .cover-copy-stack .cover-role-square{
    width:8px;
    height:8px;
    flex:0 0 8px;
  }

  /* CTA moves near the bottom, into the lower lime-marked position. */
  .cover-copy-stack .cover-explore{
    position:absolute;
    top:91%;
    left:7%;
    right:auto;
    bottom:auto;
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:11px;
    font-size:8px;
    line-height:1.2;
    white-space:nowrap;
  }

  .cover-copy-stack .cover-explore span{font-size:17px}
}

@media(max-width:380px){
  .cover-copy-stack .cover-year{top:24%}
  .cover-copy-stack .cover-title-line{top:31%}
  .cover-copy-stack .cover-word{font-size:clamp(39px,10.9vw,43px)!important}
  .cover-copy-stack .cover-role{top:52%;font-size:7.5px!important}
  .cover-copy-stack .cover-explore{top:91%;font-size:7.5px}
}

/* =========================================================
   DRAFT 18 — SIMPLIFIED COVER + BRAND IDENTITY CHAPTER
   Built on the user's current Draft 17 stylesheet.
   ========================================================= */

/* A quieter, more editorial cover with fewer competing elements. */
.cover{
  height:auto;
  min-height:0;
  padding:clamp(48px,5.2vw,76px) 0 36px;
  background:#050b13;
  color:#eef2f8;
}
.cover-meta{
  width:min(84%,1680px);
  margin:0 auto 24px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#b8c5d3;
  font:700 9px var(--mont);
  letter-spacing:.16em;
}
.cover-meta-dot{width:7px;height:7px;flex:none;background:var(--lime);border-radius:50%}
.cover-meta i{width:44px;height:1px;flex:none;background:#52647a}
.cover-card{
  position:relative;
  width:min(84%,1680px);
  min-height:clamp(520px,42vw,670px);
  margin:0 auto;
  grid-template-columns:54% 46%;
  border:1px solid #1b344d;
  background:#07182a;
}
.cover-left{
  min-width:0;
  min-height:inherit;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 86% 24%,rgba(40,83,213,.22),transparent 42%),
    linear-gradient(140deg,#091b2f,#061322 72%);
}
.cover-copy-stack{
  position:absolute;
  inset:0;
  left:8%;
  right:6%;
  top:0;
  display:block;
  z-index:4;
}
.cover-edition-line{
  position:absolute;
  top:20%;
  left:0;
  display:flex;
  align-items:center;
  gap:15px;
}
.cover-copy-stack .cover-year{
  position:static;
  display:block;
  margin:0;
  color:var(--lime);
  font:700 13px/1 var(--mont);
  letter-spacing:.18em;
}
.cover-work-label{
  color:#91a5ba;
  font:700 8px/1 var(--mont);
  letter-spacing:.2em;
}
.cover-copy-stack .cover-title-line{
  position:absolute;
  top:30%;
  left:0;
  width:96%;
  margin:0;
  display:block;
}
.cover-copy-stack .cover-word{
  display:block;
  width:max-content;
  max-width:100%;
  min-width:0;
  margin:0;
  white-space:nowrap;
  color:#f4f6fa;
  font:400 clamp(58px,7.5vw,108px)/.95 var(--anton)!important;
  letter-spacing:0!important;
}
.cover-copy-stack .cover-role{
  position:absolute;
  top:52%;
  left:0;
  right:0;
  margin:0;
  display:flex;
  align-items:center;
  gap:11px;
  color:#c2cedb;
  font:700 clamp(9px,.84vw,12px)/1.35 var(--mont)!important;
  letter-spacing:.09em!important;
}
.cover-copy-stack .cover-role-square{
  width:9px;height:9px;flex:0 0 9px;background:var(--lime);
}
.cover-copy-stack .cover-explore{
  position:absolute;
  left:0;
  top:78%;
  bottom:auto;
  margin:0;
  padding:0 0 13px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid rgba(216,255,79,.65);
  color:var(--lime);
  font:700 9px var(--mont);
  letter-spacing:.15em;
  transition:gap .25s;
}
.cover-copy-stack .cover-explore span{font:400 18px var(--mont)}
.cover-copy-stack .cover-explore:hover{gap:24px}
.cover-photo-wrap{
  position:relative;
  min-width:0;
  min-height:inherit;
  overflow:hidden;
  background:#243b50;
}
.cover-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  filter:saturate(.9) contrast(.97);
}
.cover-photo-caption{
  right:4%;
  bottom:3%;
  padding:10px 13px;
  background:rgba(5,11,19,.76);
  color:#a7b4c3;
  font:600 8px var(--mont);
  letter-spacing:.14em;
}
.cover-footer{
  width:min(84%,1680px);
  margin:26px auto 0;
  grid-template-columns:1fr auto 1fr;
  gap:22px;
}
.cover-footer>p{
  color:#8495a8;
  font:700 8px/1.5 var(--mont);
  letter-spacing:.13em;
}
.cover-down{width:43px;height:43px;font-size:18px}
.cover-footer-meta strong,.cover-footer-meta span{font-size:8px}

/* Branding chapter */
.branding{
  background:#e8eef5;
  color:#07111f;
  padding-top:100px;
  padding-bottom:108px;
  border-top:1px solid #cdd6e1;
}
.branding .section-label{color:#5e7186}
.branding .section-label span{color:var(--blue)}
.branding-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:36px;
  margin-bottom:40px;
}
.branding-heading .display-title{
  color:#07111f;
  font-size:clamp(56px,7.2vw,98px);
}
.branding-heading .display-title em{color:var(--blue)}
.branding-heading>p{
  max-width:360px;
  margin:0 0 7px;
  padding-left:18px;
  border-left:3px solid var(--lime);
  color:#64768a;
  font:500 12px/1.85 var(--mont);
}
.branding-projects{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.brand-project{
  min-width:0;
  background:#f8f7f2;
  border:1px solid #d1d9e2;
  color:#081525;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.brand-gewan{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(270px,.75fr);
  min-height:340px;
}
.brand-visual{
  min-width:0;
  overflow:hidden;
  background:#dedbd4;
}
.brand-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.brand-gewan-visual{min-height:360px}
.brand-gewan-visual img{object-position:center}
.brand-kamos-visual{
  height:auto;
  aspect-ratio:16/9;
}
.brand-kamos-visual img{object-position:center}
.brand-copy{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(23px,3vw,42px);
}
.brand-gewan .brand-copy{justify-content:center}
.brand-kicker{
  color:#68798a;
  font:700 8px/1.5 var(--mont);
  letter-spacing:.15em;
}
.brand-copy h3{
  margin:21px 0 12px;
  color:#07111f;
  font:400 clamp(28px,3.2vw,46px)/.98 var(--anton);
  letter-spacing:.012em;
}
.brand-copy p{
  max-width:440px;
  margin:0;
  color:#657487;
  font:500 10px/1.8 var(--mont);
}
.brand-client{
  display:inline-block;
  margin-top:28px;
  padding-top:11px;
  border-top:1px solid #cbd3dc;
  color:#2853d5;
  font:700 8px/1 var(--mont);
  letter-spacing:.15em;
}
.brand-bake-mosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(2,minmax(145px,1fr));
  gap:6px;
  padding:6px;
  background:#e3d8c8;
}
.brand-bake-mosaic img{
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:cover;
}
.brand-bake-mosaic img:nth-child(1){object-position:center 40%}
.brand-bake-mosaic img:nth-child(2){object-position:center 48%}
.brand-bake-mosaic img:nth-child(3){object-position:center 55%}
.brand-bake-mosaic img:nth-child(4){object-position:center 50%}
.brand-kamos .brand-copy,.brand-bake .brand-copy{flex:1}

/* Medium screens */
@media(max-width:900px) and (min-width:701px){
  .cover-card{min-height:540px}
  .cover-copy-stack .cover-word{font-size:clamp(56px,7.1vw,78px)!important}
  .cover-copy-stack .cover-role{top:55%}
  .cover-copy-stack .cover-explore{top:78%}
  .brand-gewan{grid-template-columns:1.25fr .8fr}
  .brand-gewan-visual{min-height:300px}
  .brand-copy{padding:22px}
  .brand-copy h3{font-size:32px}
}

/* Mobile */
@media(max-width:700px){
  .cover{padding:43px 0 35px}
  .cover-meta{
    width:88%;
    margin:0 auto 16px;
    gap:8px;
    font-size:7px;
    letter-spacing:.10em;
    flex-wrap:wrap;
  }
  .cover-meta i{width:18px}
  .cover-card{
    width:88%;
    min-height:620px;
    display:block;
    position:relative;
  }
  .cover-left{
    position:relative;
    z-index:2;
    width:100%;
    height:620px;
    min-height:620px;
    background:linear-gradient(180deg,#07182a 0%,#07182a 43%,rgba(7,24,42,.94) 58%,rgba(7,24,42,.38) 100%);
  }
  .cover-copy-stack{left:7%;right:6%;top:0;bottom:0}
  .cover-edition-line{top:18%;gap:12px}
  .cover-copy-stack .cover-year{font-size:12px}
  .cover-work-label{font-size:7px}
  .cover-copy-stack .cover-title-line{top:28%;width:100%}
  .cover-copy-stack .cover-word{font-size:clamp(42px,11.8vw,54px)!important}
  .cover-copy-stack .cover-role{top:48%;font-size:8px!important;letter-spacing:.07em!important}
  .cover-copy-stack .cover-explore{top:84%;font-size:7.5px;padding-bottom:10px;gap:10px}
  .cover-photo-wrap{
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    width:100%;
    height:57%;
    min-height:0;
    opacity:.95;
  }
  .cover-photo{object-position:center 43%}
  .cover-photo-caption{display:none}
  .cover-footer{
    width:88%;
    margin:20px auto 0;
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
  }
  .cover-footer>p{font-size:7px;line-height:1.6}
  .cover-down{width:37px;height:37px}
  .cover-footer-meta{grid-column:1/-1;align-items:flex-start;margin-top:2px}
  .cover-footer-meta strong,.cover-footer-meta span{font-size:7px}

  .branding{padding-top:70px;padding-bottom:76px}
  .branding-heading{display:block;margin-bottom:27px}
  .branding-heading .display-title{font-size:clamp(48px,11vw,68px)}
  .branding-heading>p{margin-top:18px;max-width:340px;font-size:10px}
  .branding-projects{grid-template-columns:1fr;gap:16px}
  .brand-gewan{grid-column:auto;grid-template-columns:1fr}
  .brand-gewan-visual{min-height:0;aspect-ratio:2.05/1}
  .brand-copy{padding:23px}
  .brand-copy h3{font-size:32px;margin:15px 0 10px}
  .brand-copy p{font-size:10px}
  .brand-client{margin-top:20px}
  .brand-kamos-visual{aspect-ratio:16/9}
  .brand-bake-mosaic{grid-template-rows:repeat(2,minmax(130px,1fr))}
}

/* RESTORED SOCIAL VIDEO THUMBNAILS — recovered from Hadeer's supplied screenshot.
   The source screenshot already contains the play ring; the card still uses its live title/tag. */
.dummy-video.tone-1{background-image:url("assets/social-video-01.webp");background-position:center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-2{background-image:url("assets/social-video-02.webp");background-position:center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-3{background-image:url("assets/social-video-03.webp");background-position:center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-4{background-image:url("assets/social-video-04.webp");background-position:center;background-size:cover;background-repeat:no-repeat}
.dummy-video.tone-5{background-image:url("assets/social-video-05.webp");background-position:center;background-size:cover;background-repeat:no-repeat}
.dummy-video:after{content:none}
.dummy-video .video-play{display:none}