/* Sharawi Studio — Private Deliveries, editorial glass redesign
   Client-scoped content only. Preserve brand type, black/white/gray/#ff5a00. */
:root{--glass:rgba(26,26,27,.74);--glass-line:rgba(255,255,255,.105);--soft-white:#f7f6f4}
html{scroll-behavior:smooth;background:#0a0a0a}
body{background:radial-gradient(ellipse 80% 35% at 90% 6%,rgba(255,255,255,.045),transparent 75%),linear-gradient(170deg,#0a0a0a,#111112 42%,#090909);color:var(--soft-white)}
.app{max-width:1540px;padding:0 clamp(20px,5vw,76px) 40px}
.topbar{position:relative;z-index:2;padding:23px 0 21px;gap:24px;border-color:rgba(255,255,255,.1)}
.logo{flex:0 0 auto;letter-spacing:.15em}
.mark{font-size:36px}
.primary-nav{display:flex;align-items:center;gap:clamp(16px,2.5vw,34px);margin-left:auto}
.primary-nav a{color:#b2b2b2;font-size:11px;transition:color .15s;white-space:nowrap}
.primary-nav a:hover,.primary-nav a.active{color:var(--orange)}
.topright{gap:12px}
.ghost{border-radius:999px;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.14);padding:11px 17px}
.ghost:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.25)}
.hero-lux{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,1.04fr);gap:clamp(22px,4vw,65px);align-items:center;min-height:470px;padding:clamp(45px,6.6vw,102px) 0 66px;position:relative}
.hero-copy{position:relative;z-index:1}
.hero-copy h1{font-weight:400;letter-spacing:-.065em;font-size:clamp(52px,6.3vw,102px);line-height:.99;margin:22px 0 23px}
.hero-copy h1 span{color:#999;display:block}
.hero-copy p{max-width:450px;color:#aaa;line-height:1.85;font-size:14px}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin:28px 0 31px}
.hero-actions .button,.cta-outline{display:inline-flex;align-items:center;justify-content:center;gap:14px;text-decoration:none;border-radius:999px;min-height:43px;font-size:12px}
.hero-actions .button{box-shadow:none;padding:12px 23px}
.cta-outline{padding:10px 18px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.035);color:#ddd}
.hero-stats{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.09);padding-top:20px}
.hero-stats div{border-right:1px solid rgba(255,255,255,.11);padding:0 24px 0 0;margin-right:24px;color:#888;text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.hero-stats div:last-child{border:0}
.hero-stats strong{display:block;color:#fff;font-size:22px;font-weight:400;letter-spacing:-.04em;line-height:1.4}
.hero-display{position:relative;padding:29px clamp(16px,3vw,42px) 28px 0;min-width:0}
.hero-display::before,.hero-display::after{content:"";position:absolute;width:78%;height:88%;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:linear-gradient(135deg,#292523,#111113 72%);transform:translate(13%,2%) rotate(5deg);right:0;top:7%;pointer-events:none;box-shadow:0 20px 42px #0007}
.hero-display::after{width:83%;transform:translate(6%,1%) rotate(2.7deg);background:linear-gradient(145deg,#242424,#0f0f11 70%);top:4%}
.hero-feature{position:relative;z-index:1;display:block;width:100%;border-radius:24px;padding:8px;color:#fff;overflow:hidden;text-align:left;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.015) 50%),rgba(20,20,22,.88);border:1px solid rgba(255,255,255,.17);box-shadow:inset 0 1px rgba(255,255,255,.17),0 22px 65px #0009;backdrop-filter:blur(25px)}
.hero-feature .hero-cover{position:relative;aspect-ratio:1.5;background:#19191a;overflow:hidden;border-radius:17px}
.hero-feature .hero-cover img,.hero-feature .hero-cover video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.hero-feature .hero-cover .fallback{background:linear-gradient(155deg,#40342d 0%,#1b1a19 48%,#0f0f0f)}
.hero-feature .hero-cover .fallback::before{content:"S";font-size:clamp(100px,17vw,250px);letter-spacing:-.12em;color:#eee9;transform:rotate(-9deg);font-weight:600;position:absolute}
.hero-feature .hero-cover .fallback{font-size:0}
.hero-feature .format{border:1px solid rgba(255,255,255,.27);border-radius:5px;top:13px;left:13px}
.hero-feature .videoicon{left:calc(50% - 27px);top:calc(50% - 27px)}
.hero-cover::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(0deg,#000a,transparent);pointer-events:none}
.hero-feature-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 11px}
.hero-feature-bottom strong{display:block;font-size:16px;font-weight:500;overflow-wrap:anywhere}
.hero-feature-bottom span{display:block;font-size:10px;color:#a5a5a5;text-transform:uppercase;letter-spacing:.12em;margin-top:3px}
.hero-feature-bottom b{font-weight:400;color:var(--orange);font-size:21px}
.hero-display .hero-empty{cursor:default}
.section-kicker{color:var(--orange);font-size:10px;letter-spacing:.23em;font-weight:700;text-transform:uppercase}
.feature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin:0 0 54px}
.feature-card{min-width:0;padding:22px 19px 25px;border:1px solid var(--glass-line);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 44%),var(--glass);box-shadow:inset 0 1px rgba(255,255,255,.10),0 12px 32px #0003;backdrop-filter:blur(18px)}
.feature-icon{width:40px;height:40px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);display:grid;place-items:center;color:var(--orange);font-size:20px;border-radius:13px;margin-bottom:20px}
.feature-card strong{font-size:13px;font-weight:500;display:block}
.feature-card p{font-size:11px;line-height:1.7;color:#999;margin:7px 0 0}
.section-bar{height:1px;background:rgba(255,255,255,.09);margin:0 0 58px}
.collection-section{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,2fr);gap:32px;padding-bottom:60px;align-items:start}
.section-intro h2,.deliveries-heading h2,.process-copy h2{font-weight:400;font-size:clamp(30px,3.3vw,52px);line-height:1.13;letter-spacing:-.045em;margin:12px 0 16px}
.section-intro p{font-size:13px;line-height:1.8;color:#a6a6a6;max-width:350px}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.collection-card{position:relative;display:flex;min-width:0;min-height:215px;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;padding:16px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.014) 38%),linear-gradient(155deg,#2a2625,#141416 65%,#0e0e0f);border-radius:23px;overflow:hidden;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.14)}
.collection-card::before{content:"";position:absolute;inset:10% -35% auto auto;width:145px;height:145px;border:1px solid rgba(255,255,255,.095);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.012),0 0 0 48px rgba(255,255,255,.012);pointer-events:none}
.collection-card:nth-child(even){background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 55%),linear-gradient(135deg,#201d1b,#0d0d0f)}
.collection-card:hover{border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.collection-card small{border:1px solid rgba(255,255,255,.22);padding:5px 9px;border-radius:8px;font-size:9px;letter-spacing:.12em;color:#ddd}
.collection-card strong{position:relative;font-weight:500;font-size:clamp(16px,1.7vw,25px);line-height:1.1;max-width:95%;word-break:break-word}
.collection-card .collection-count{display:block;font-size:11px;color:#999;margin-top:7px}
.collection-card .collection-arrow{color:var(--orange);font-size:22px;position:absolute;bottom:17px;right:17px}
.collection-empty{grid-column:1/-1;min-height:180px;border:1px dashed rgba(255,255,255,.13);border-radius:18px;padding:25px;color:#aaa;display:flex;align-items:center}
.deliveries-section{padding:36px 0 56px;border-top:1px solid rgba(255,255,255,.09)}
.deliveries-heading{display:flex;justify-content:space-between;gap:18px;align-items:end}
.deliveries-heading .deliveries-note{font-size:11px;color:#999;text-align:right}
.toolbar{border-top:0;margin-top:21px;margin-bottom:22px;padding-top:0}
.filter{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.016)),#181819;border-color:rgba(255,255,255,.11)}
.filter.active{box-shadow:none}
.gallery{columns:4 235px;column-gap:15px}
.pin{border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.064),transparent 50%),#181819;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 25px #0004;margin-bottom:15px}
.pin:hover{border-color:rgba(255,255,255,.27);transform:translateY(-3px)}
.art{background:#242324}
.pin .format{border:1px solid rgba(255,255,255,.15);border-radius:7px}
.pin-meta{padding:16px}
.pin-bottom{border-color:rgba(255,255,255,.1)}
.pin-review{border-radius:999px;padding:6px 10px}
.empty{border-radius:20px;background:var(--glass);border-color:var(--glass-line)}
.process-section{padding:46px 0 55px;border-top:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,2.4fr);gap:30px}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.process-step{border-left:1px solid rgba(255,255,255,.1);padding:6px 8px 8px 20px}
.process-step .feature-icon{margin-bottom:18px}
.process-step small{color:var(--orange);letter-spacing:.12em;font-size:10px}
.process-step strong{display:block;margin-top:9px;font-size:12px;font-weight:500}
.process-step p{font-size:11px;color:#999;line-height:1.6}
.last-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid var(--glass-line);border-radius:25px;padding:28px 35px;background:linear-gradient(135deg,rgba(255,255,255,.075),transparent 50%),#171718}
.last-cta h2{font-weight:400;font-size:clamp(27px,3vw,40px);letter-spacing:-.045em;line-height:1.08;margin:0}
.last-cta p{color:#aaa;font-size:12px;line-height:1.6}
.last-cta .button{display:inline-flex;border-radius:999px;white-space:nowrap;padding:13px 19px}
.footer{margin-top:38px;border-color:rgba(255,255,255,.1)}
.overlay{backdrop-filter:blur(26px) saturate(1.05);background:#050505bf}
.modal{border-radius:25px;border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px rgba(255,255,255,.1),0 28px 92px #000b}
.stage{background:#0e0e0f}
.stage-media{background:linear-gradient(155deg,#211d1b,#0b0b0c)}
.button,.close{border-radius:12px}
.detail{background:linear-gradient(135deg,#19191b,#121213)}
.write textarea,.review-note{border-radius:12px}
.review-panel{background:linear-gradient(135deg,#211c19,#161617)!important}
.review-action,.review-status{border-radius:10px}
.toast{border-radius:11px}
@media(max-width:1150px){.primary-nav{gap:14px}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery{columns:3 230px}}
@media(max-width:850px){.primary-nav{display:none}.hero-lux{grid-template-columns:1fr;gap:25px;padding:48px 0}.hero-display{max-width:680px;width:94%;justify-self:center}.collection-section{grid-template-columns:1fr}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.process-section{grid-template-columns:1fr}.modal{border-radius:18px}}
@media(max-width:600px){
 .app{padding:0 16px 30px}
 .topbar{padding:16px 0;gap:10px}.logo{gap:8px;font-size:10px}.mark{font-size:28px}.subbrand{font-size:7px;margin-top:4px}.topright{gap:7px}.topright .ghost{font-size:10px;padding:9px 11px}
 .hero-lux{padding:48px 0 38px;gap:17px;min-height:0}
 .hero-copy h1{font-size:clamp(45px,13vw,72px);margin:15px 0 18px}
 .hero-copy p{font-size:12px;line-height:1.75}
 .hero-actions{margin:23px 0}.hero-stats{padding-top:15px;justify-content:space-between}
 .hero-stats div{margin:0;padding:0 11px 0 0;border:0;font-size:8px}.hero-stats strong{font-size:17px}
 .hero-display{width:100%;padding:18px 25px 18px 0}
 .hero-display::before,.hero-display::after{border-radius:19px}.hero-feature{border-radius:19px}.hero-feature .hero-cover{border-radius:12px;aspect-ratio:1.5}
 .hero-feature-bottom{padding:10px 8px}.hero-feature-bottom strong{font-size:13px}
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:36px}
 .feature-card{padding:16px 14px 20px;border-radius:17px}.feature-icon{width:36px;height:36px;margin-bottom:11px}.feature-card strong{font-size:12px}.feature-card p{font-size:10px}
 .section-bar{margin-bottom:34px}.collection-section{gap:17px;padding-bottom:32px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .collection-card{min-height:165px;padding:13px;border-radius:18px}.collection-card strong{font-size:17px}.collection-card .collection-arrow{right:10px;bottom:9px}
 .deliveries-section{padding:30px 0}.deliveries-heading{align-items:start}.deliveries-heading h2{font-size:31px}
 .deliveries-heading .deliveries-note{font-size:9px;max-width:100px}
 .toolbar{margin:16px 0 20px}.sortinfo{display:none}.gallery{columns:2 130px;column-gap:10px}.pin{border-radius:16px;margin-bottom:10px}
 .pin-meta{padding:11px}.pin-meta strong{font-size:12px}
 .process-section{padding:35px 0}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 6px}
 .process-step{padding-left:12px}.last-cta{display:block;padding:22px;border-radius:19px}.last-cta .button{margin-top:8px}
 .footer{gap:12px;flex-wrap:wrap;font-size:9px}
 .overlay{padding:0}.modal{height:100dvh;width:100%;border:0;border-radius:0}
 .review-panel{padding:13px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pin,.collection-card{transition:none}}


/* Per-client private visual guideline — matches the editorial glass language, no colored glow. */
.guidelines-section{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.15fr);gap:clamp(22px,5vw,78px);align-items:center;margin:30px 0 64px;padding:36px clamp(22px,3.7vw,52px);border:1px solid rgba(255,255,255,.13);border-radius:24px;background:linear-gradient(120deg,rgba(38,38,40,.85),rgba(18,18,19,.88));backdrop-filter:blur(18px)}
.guidelines-text h2{font-size:clamp(31px,3.7vw,53px);font-weight:400;letter-spacing:-.05em;line-height:1.1;margin:12px 0 14px}
.guidelines-text p{max-width:430px;color:#aaa;font-size:13px;line-height:1.85;margin:0}
.guidelines-panel{min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:17px;padding:21px;background:rgba(4,4,5,.45)}
.guidelines-message{margin:0;color:#c7c5c4;line-height:1.6;font-size:12px}.guidelines-message.is-error{color:#ffaf8e}
.guidelines-file{display:flex;align-items:center;gap:13px;min-width:0}.guidelines-file-icon{display:grid;place-items:center;flex:0 0 52px;height:65px;border:1px solid rgba(255,90,0,.4);background:rgba(255,90,0,.09);border-radius:9px;color:#ff8d50;letter-spacing:.08em;font-size:11px;font-weight:700}
.guidelines-file-details{min-width:0}.guidelines-file-details strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}.guidelines-file-details small{display:block;color:#999;margin-top:6px;line-height:1.5;font-size:10px}
.guidelines-file-actions,.guidelines-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;align-items:center}
.guidelines-open,.guidelines-picker{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(255,255,255,.055);color:#eee;padding:10px 15px;font-size:11px;font-weight:600;cursor:pointer}
.guidelines-open:hover,.guidelines-picker:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.guidelines-picker input{max-width:210px;font-size:11px;cursor:pointer;color:#c7c7c7}
.guidelines-picker input::file-selector-button{border:0;background:transparent;color:#ff8c48;padding:2px 7px 2px 0;cursor:pointer;font:inherit}
.guidelines-upload-btn{min-height:42px;border-radius:999px;font-size:11px}
.guidelines-help{font-size:10px;color:#888;line-height:1.6;margin:13px 0 0}
.guidelines-progress{display:block;width:100%;height:5px;margin-top:14px;accent-color:var(--orange)}
.guidelines-progress[hidden]{display:none}
@media(max-width:820px){.guidelines-section{grid-template-columns:1fr;gap:23px;margin-bottom:44px;padding:26px}}
@media(max-width:520px){.guidelines-section{padding:20px 17px;border-radius:18px}.guidelines-panel{padding:15px}.guidelines-file-icon{flex-basis:44px;height:57px}.guidelines-picker,.guidelines-upload-btn{width:100%}.guidelines-picker input{max-width:100%}}


/* A single deliverable may contain platform video versions or ordered carousel slides. */
.card-variants{display:flex;gap:7px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.1);max-height:130px;overflow:auto;background:#111}
.card-variant{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.025);color:#d9d9d9;border-radius:999px;padding:8px 12px;font-size:10px;letter-spacing:.03em;transition:background .12s,border-color .12s}
.card-variant:hover{border-color:#888}.card-variant.selected{background:#ff5a00;color:#130b07;border-color:#ff5a00;font-weight:700}
.card-variant:focus-visible{outline:2px solid #ff5a00;outline-offset:2px}
@media(max-width:800px){.card-variants{padding:10px;max-height:120px}.card-variant{padding:7px 11px}}


/* Ordered carousel slide previews within the unified card. */
.card-variants.card-slide-strip{flex-wrap:nowrap;overflow-x:auto;max-height:160px;padding:12px 16px}
.card-slide-strip .card-variant{flex:0 0 85px;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:9px;padding:6px 6px 9px}
.card-slide-thumb{width:72px;height:78px;display:block;overflow:hidden;border-radius:5px;background:#292929}
.card-slide-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:520px){.card-variants.card-slide-strip{max-height:130px}.card-slide-strip .card-variant{flex-basis:70px}.card-slide-thumb{width:58px;height:60px}}