:root { --short-night:#071426; --short-panel:#10233f; --short-chalk:#f7f8fb; --short-accent:#f59e0b; --short-blue:#60a5fa; --short-slate:#a9b7cd; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--short-night); }
.shorts-shell { min-height:100vh; color:var(--short-chalk); background:radial-gradient(circle at 84% 6%,rgba(59,130,246,.22),transparent 29rem),var(--short-night); font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
/* Site header — mirrors the SPA Header (two bands), minus language selector + Download App */
.site-banner { background:linear-gradient(90deg,#1a2a4a,#2a2a45,#3d2520); }
.site-banner-inner { max-width:1400px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; }
.site-banner-left { display:flex; align-items:center; gap:40px; }
.site-logo { font-weight:800; font-size:42px; letter-spacing:-1.5px; text-decoration:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.logo-job { color:#60a5fa; } .logo-master { color:#fff; } .logo-360 { color:#ef4444; }
.site-phone { display:flex; align-items:center; gap:10px; color:var(--short-accent); font-weight:600; font-size:22px; text-decoration:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.site-phone:hover { color:#fff; }
.site-phone svg { width:20px; height:20px; }
.site-call { display:inline-flex; align-items:center; gap:8px; background:#fff; color:#0f172a; border-radius:10px; padding:9px 14px; font-weight:700; font-size:13px; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.site-call svg { width:15px; height:15px; }
.site-banner-right { display:flex; align-items:center; gap:20px; }
.site-signup { background:#16a34a; color:#fff; border-radius:9999px; padding:9px 22px; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 6px 18px rgba(22,163,74,.4); transition:transform .2s; }
.site-signup:hover { transform:scale(1.06); }
.site-login { display:flex; align-items:center; gap:9px; color:#fff; font-size:17px; font-weight:600; text-decoration:none; border-radius:10px; padding:8px 12px; }
.site-login:hover { background:rgba(255,255,255,.15); }
.site-login svg { width:19px; height:19px; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; background:rgba(255,255,255,.97); border-bottom:1px solid rgba(15,23,42,.1); padding:8px 16px; }
.site-nav a { display:inline-flex; align-items:center; gap:8px; color:rgba(30,41,59,.72); padding:8px 13px; font-size:14px; font-weight:500; border-radius:8px; text-decoration:none; transition:color .2s,background .2s; }
.site-nav a:hover { color:#0f172a; background:rgba(15,23,42,.06); }
.site-nav svg { width:16px; height:16px; }
.shorts-hero { max-width:1240px; margin:auto; padding:94px 34px 0; }
.shorts-kicker,.shorts-section-heading p,.shorts-philosophy>p { margin:0 0 24px; color:var(--short-accent); text-transform:uppercase; font-size:12px; font-weight:900; letter-spacing:3.5px; }
.shorts-hero h1 { max-width:1000px; margin:0; font-weight:800; font-size:clamp(54px,8vw,104px); line-height:.94; letter-spacing:-4px; }
.shorts-hero h1 em,.shorts-philosophy h2 em { color:var(--short-blue); font-weight:600; font-style:italic; }
.shorts-intro { max-width:720px; margin:36px 0 32px; color:var(--short-slate); font-size:20px; line-height:1.65; }
.shorts-rule { width:100%; height:3px; margin-top:50px; background:rgba(169,183,205,.16); }
.shorts-rule span { display:block; width:28%; height:100%; background:linear-gradient(90deg,var(--short-accent),var(--short-blue)); }
.shorts-library { padding:2px max(34px,calc((100vw - 1172px)/2)) 86px; background:#0b1c33; }
.shorts-section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:46px; }
.shorts-section-heading p { margin-bottom:16px; }
.shorts-section-heading h2 { max-width:760px; margin:0; font-weight:800; font-size:clamp(34px,5vw,60px); line-height:1; letter-spacing:-2px; }
.shorts-section-heading>span { color:var(--short-slate); font-size:12px; text-transform:uppercase; letter-spacing:2px; }
.shorts-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.short-card { overflow:hidden; background:var(--short-panel); border:1px solid rgba(255,255,255,.12); border-radius:24px; box-shadow:0 30px 60px rgba(0,0,0,.24); }
.short-poster { position:relative; display:block; width:100%; aspect-ratio:9/12; padding:0; overflow:hidden; cursor:pointer; border:0; background:linear-gradient(145deg,#1e3a66,#09152a); }
.short-poster:disabled { cursor:default; }
.short-poster img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease,filter .5s ease; }
.short-card:hover .short-poster img { transform:scale(1.035); filter:saturate(1.06); }
.short-poster::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,10,20,.04),rgba(4,10,20,.18)); }
/* .short-number removed 2026-08-20 (Rick): the big orange card id overlapped poster headlines and added nothing. Video id still appears in the eyebrow line. */
.short-play { position:absolute; z-index:3; left:50%; top:50%; display:grid; place-items:center; width:66px; height:66px; color:#0f172a; background:var(--short-accent); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 14px 30px rgba(0,0,0,.34); font-size:18px; padding-left:4px; }
.short-coming { position:absolute; z-index:3; left:20px; bottom:20px; padding:9px 12px; color:var(--short-chalk); background:rgba(7,20,38,.9); border:1px solid rgba(255,255,255,.24); border-radius:10px; text-transform:uppercase; font-size:10px; font-weight:900; letter-spacing:1.5px; }
.short-copy { padding:24px 24px 22px; }
.short-copy>p,.shorts-player p { margin:0 0 10px; color:var(--short-accent); font-size:10px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
.short-copy h3 { min-height:54px; margin:0 0 12px; font-weight:700; font-size:22px; line-height:1.16; }
.short-copy>span { display:block; min-height:82px; color:var(--short-slate); font-size:13px; line-height:1.55; }
.shorts-philosophy { padding:110px 34px; text-align:center; background:linear-gradient(145deg,#14335e,#0a1a33); }
.shorts-philosophy h2 { margin:0 auto 30px; font-weight:800; font-size:clamp(44px,6vw,76px); line-height:1; letter-spacing:-2.5px; }
.shorts-philosophy>span { display:block; max-width:760px; margin:auto; color:var(--short-slate); font-size:18px; line-height:1.7; }
.shorts-footer { max-width:1240px; margin:auto; padding:40px 34px 54px; display:flex; justify-content:space-between; gap:30px; color:var(--short-slate); text-transform:uppercase; font-size:10px; font-weight:900; letter-spacing:2px; }
.shorts-footer a { color:var(--short-accent); text-decoration:none; }
.shorts-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(3,8,18,.88); backdrop-filter:blur(18px); }
.shorts-player { position:relative; display:grid; grid-template-columns:minmax(260px,390px) minmax(260px,460px); align-items:center; width:min(900px,100%); max-height:92vh; overflow:auto; background:var(--short-panel); border:1px solid rgba(255,255,255,.18); border-radius:28px; box-shadow:0 40px 120px rgba(0,0,0,.6); }
.shorts-player video { display:block; width:100%; max-height:86vh; background:#000; }
.shorts-player>div { padding:42px; }.shorts-player h2 { margin:0 0 18px; font-weight:800; font-size:38px; line-height:1.06; letter-spacing:-1px; }.shorts-player span { color:var(--short-slate); line-height:1.6; }
.shorts-download { display:inline-flex; margin-top:24px; padding:12px 16px; color:#0f172a; background:var(--short-accent); border-radius:12px; text-decoration:none; text-transform:uppercase; font-size:10px; font-weight:900; letter-spacing:1.4px; }
.shorts-close { position:absolute; z-index:4; right:14px; top:14px; width:42px; height:42px; color:var(--short-chalk); background:rgba(7,20,38,.88); border:1px solid rgba(255,255,255,.3); border-radius:50%; cursor:pointer; font-size:25px; }
@media (max-width:1080px) { .site-phone,.site-call { display:none; } .site-logo { font-size:34px; } }
@media (max-width:900px) { .shorts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.shorts-player{grid-template-columns:1fr;max-width:430px}.shorts-player>div{padding:25px}.shorts-player h2{font-size:30px}.shorts-section-heading{align-items:start;flex-direction:column}.shorts-hero h1{letter-spacing:-3px} }
@media (max-width:580px) { .site-banner-inner{padding:12px 16px}.site-logo{font-size:28px}.site-signup{padding:8px 16px;font-size:13px}.site-login{font-size:15px}.site-nav{gap:0;padding:6px 8px}.site-nav a{padding:7px 9px;font-size:13px}.shorts-hero{padding:68px 20px 0}.shorts-hero h1{font-size:49px;letter-spacing:-2.5px}.shorts-intro{font-size:17px}.shorts-library{padding:2px 20px 65px}.shorts-grid{grid-template-columns:1fr;gap:2px}.short-poster{aspect-ratio:9/11}.shorts-philosophy{padding:78px 20px}.shorts-footer{padding:32px 20px 44px;flex-direction:column}.short-copy>span{min-height:0}.short-copy h3{min-height:0}.shorts-player{display:block}.shorts-player>div{display:none}.shorts-modal{padding:10px} }