/* DWEBMEDIA V7 — hero image replaced by a real web-design visual study and oversized approved wordmark. */
:root{--accent:#121212}
/* Keep the exact black logotype from the previous approved concept, now front and centre. */
.brand-statement{margin-top:4px;padding-top:21px;padding-bottom:2px;border:0;overflow:hidden;position:relative}
.brand-statement-top{margin-bottom:9px;font-size:9px;font-weight:550;letter-spacing:.095em;color:#6b6b6b}
.brand-statement img{width:100%;max-width:none;display:block}
/* The VELYR-inspired stepped cut-out survives, without the watch product shot. */
.hero{padding-top:25px;padding-bottom:26px}
.hero-grid{min-height:650px}
.hero-left{padding-top:45px}
.hero-image{height:625px;background:#e8eaec}
.hero-image.is-web-concept{background:linear-gradient(135deg,#eef0f1 0%,#d9dee1 43%,#adb7bf 100%)}
.hero-image.is-web-concept > #hero-project-image{display:none!important}
.hero-web-scene{display:none}
.hero-image.is-web-concept .hero-web-scene{display:block;position:absolute;inset:0;overflow:hidden}
.hero-web-scene::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 63% 8%,#fff9,transparent 44%),linear-gradient(144deg,transparent 42%,#64717b16 42.1%,transparent 69%);pointer-events:none}
.hero-web-scene::after{content:'';position:absolute;left:-6%;right:-9%;bottom:-13%;height:42%;background:linear-gradient(0deg,#89949e40,transparent);pointer-events:none}
.web-browser-window{position:absolute;top:20%;left:10%;width:85%;height:60%;border:1px solid #a2a9ae;border-radius:16px 16px 10px 10px;background:#fdfdfd;box-shadow:25px 31px 42px #111b2445,0 0 0 5px #d0d6da50;overflow:hidden;transform:perspective(1000px) rotateY(-5deg) rotateX(1deg) rotateZ(-4deg);transform-origin:center;transition:transform .65s cubic-bezier(.2,.65,.2,1)}
.hero-image:hover .web-browser-window{transform:perspective(1000px) rotateY(-2deg) rotateX(1deg) rotateZ(-2deg) translateY(-4px)}
.web-browser-bar{height:39px;display:flex;align-items:center;gap:5px;padding:0 13px;border-bottom:1px solid #d9e0e4;background:#f3f4f4}
.browser-dot{width:7px;height:7px;border:1px solid #c6cccf;border-radius:50%;background:#dce0e1;flex:none}
.browser-url{margin:auto;color:#6f787f;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.015em}
.browser-more{color:#5f6a70;font-size:16px}
.web-browser-screen{height:calc(100% - 39px);overflow:hidden;background:#d3dfe8}
.web-browser-screen img{position:static!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 20%!important;filter:none!important;transform:none!important;transition:none!important}
.web-mobile-window{position:absolute;right:4.8%;bottom:11%;width:28%;height:37%;padding:13px 5px 6px;background:#161a1e;border:4px solid #3c4247;border-radius:23px;box-shadow:-13px 18px 25px #1d273b35;transform:rotate(5deg);overflow:hidden;transition:transform .5s}
.hero-image:hover .web-mobile-window{transform:rotate(3deg) translateY(-5px)}
.web-mobile-window img{position:static!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:22% center!important;border-radius:12px;filter:none!important;transform:none!important;transition:none!important}
.mobile-sensor{height:5px;width:25%;border-radius:30px;position:absolute;left:37.5%;top:6px;background:#565b60;z-index:1}
.scene-meta{position:absolute;top:10%;left:11%;display:flex;gap:17px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;letter-spacing:.09em;color:#53606c}
.scene-meta span{border-bottom:1px solid #9faab0;padding-bottom:5px}
.hero-image.is-web-concept .hero-project-tag{top:30px;right:30px;background:#111;color:#fff;font-size:9px}
.hero-corner-cta{background:#111;border-color:white}
.hero-corner-cta:hover{background:#333}
.hero-indicators button.active{background:#111}
.hero-visual-caption b{letter-spacing:.02em}
@media(max-width:1320px){.hero-grid{min-height:650px}.hero-image{height:620px}.hero-left{padding-top:35px}.hero h1{font-size:5.05vw}.mini-case-shell{height:226px}.hero-corner-cta{bottom:120px}}
@media(max-width:1020px){.hero-grid{min-height:590px}.hero-image{height:575px}.hero-left{padding-top:28px}.hero h1{font-size:5.2vw}.brand-statement img{width:100%}}
@media(max-width:760px){.brand-statement{margin-top:12px;padding-bottom:0}.hero{padding-top:16px}.hero-image{height:405px}.hero-image.is-web-concept .hero-web-scene{display:block}.web-browser-bar{height:25px}.web-browser-screen{height:calc(100% - 25px)}.web-browser-window{top:22%;width:88%;left:9%;height:55%}.web-mobile-window{height:36%;bottom:14%;width:28%}.browser-url{font-size:7px}.scene-meta{font-size:7px;gap:8px}.hero-image.is-web-concept .hero-project-tag{top:24px;right:16px}.hero-corner-cta{background:#111}}