/* AV meets IP — website mockup. Brand: Multiview. */
@font-face{font-family:'Chakra Petch';font-weight:500;font-display:swap;src:url(fonts/chakra-petch-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:600;font-display:swap;src:url(fonts/chakra-petch-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:700;font-display:swap;src:url(fonts/chakra-petch-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(fonts/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(fonts/manrope-latin-700-normal.woff2) format('woff2')}
:root{--petrol:#0C2229;--rack:#12313A;--fiber:#2F5660;--mist:#EEF3F2;--signal:#FF7A1A;--deep:#B84A00;--dim:#8FAAAD;--soft:#C5D5D4;--ink2:#35525A;--gut:clamp(20px,6.6vw,96px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--petrol);color:var(--mist);font-family:Manrope,Arial,sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.cp{font-family:'Chakra Petch','Trebuchet MS',sans-serif}
h1{font-size:clamp(44px,7vw,96px);line-height:.98;margin:0;font-weight:700;letter-spacing:-.5px}
h2{font-size:clamp(32px,4vw,52px);line-height:1.05;margin:0;font-weight:700}
h3{font-size:24px;margin:0;font-weight:700;letter-spacing:1px}
p{margin:0}
a{color:inherit}
img,video,svg{max-width:100%}
.wrap{padding-inline:var(--gut);max-width:1440px;margin-inline:auto}
.eyebrow{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;letter-spacing:5px;text-transform:uppercase;color:var(--signal)}
.eyebrow.dim{color:var(--dim)}
.lead{font-size:clamp(18px,1.6vw,22px);color:var(--soft);max-width:640px}
.soft{color:var(--soft)}
.btn{display:inline-block;padding:18px 28px;min-height:44px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;background:var(--signal);color:var(--petrol);border:1px solid var(--signal);transition:background .15s,color .15s}
.btn:hover{background:var(--mist);border-color:var(--mist)}
.btn.ghost{background:transparent;color:var(--mist);border-color:var(--fiber);font-weight:600}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal)}
.btn.dark{background:var(--petrol);color:var(--mist);border-color:var(--petrol)}
.btn.dark:hover{background:var(--rack)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

header.site{position:sticky;top:0;z-index:10;background:rgba(12,34,41,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rack)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
header.site .logo img{height:30px;display:block}
nav.main{display:flex;align-items:center;gap:36px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;letter-spacing:2px;text-transform:uppercase}
nav.main a{text-decoration:none}
nav.main a:hover{color:var(--signal)}
nav.main a.btn{padding:12px 20px;font-size:14px}
nav.main a.btn:hover{color:var(--petrol)}
@media(max-width:860px){nav.main a:not(.btn){display:none}}

.grid-bg{background-image:linear-gradient(#102A32 1px,transparent 1px),linear-gradient(90deg,#102A32 1px,transparent 1px);background-size:60px 60px}
.hero{padding-block:clamp(56px,8vw,110px) 40px}
.hero .stack{display:flex;flex-direction:column;gap:28px;max-width:880px}
.cta{display:flex;flex-wrap:wrap;gap:16px}
.path{display:block;width:100%;height:auto;margin-top:clamp(40px,6vw,80px)}

.strip{background:var(--rack)}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:36px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:20px;letter-spacing:4px}
.strip .label{font-size:13px;color:var(--dim)}

section.block{padding-block:clamp(64px,8vw,110px)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.head p{max-width:480px;color:var(--soft)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--rack);padding:24px;border-bottom:4px solid var(--fiber);display:flex;flex-direction:column;gap:12px;min-height:230px;transition:border-color .2s}
.tile:hover,.tile.live{border-color:var(--signal)}
.tile .n{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:32px;color:var(--fiber)}
.tile p{font-size:16px;color:var(--soft)}

.light{background:var(--mist);color:var(--petrol)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.card{padding:40px;display:flex;flex-direction:column;gap:18px;background:#fff}
.card.dark{background:var(--petrol);color:var(--mist)}
.card h3{font-size:clamp(30px,3.2vw,44px);line-height:1.05;letter-spacing:0}
.card p{color:var(--ink2)}.card.dark p{color:var(--soft)}
.card .eyebrow{color:var(--deep)}.card.dark .eyebrow{color:var(--signal)}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .stack{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.frame{position:relative;background:var(--rack)}
.frame:before,.frame:after{content:'';position:absolute;width:40px;height:40px;z-index:2;pointer-events:none}
.frame:before{left:-1px;top:-1px;border-left:5px solid var(--signal);border-top:5px solid var(--signal)}
.frame:after{right:-1px;bottom:-1px;border-right:5px solid var(--signal);border-bottom:5px solid var(--signal)}
.frame video,.frame img{display:block;width:100%;height:auto}
.ph{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;letter-spacing:4px;color:var(--dim)}

.rackbg{background:var(--rack)}
.nums{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,56px)}
.num b{display:block;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(96px,11vw,160px);line-height:.9}
.num span{display:block;margin-top:14px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:15px;letter-spacing:5px;color:var(--dim)}
.nametitle{display:inline-flex;align-items:stretch}
.nametitle i{width:6px;background:var(--signal)}
.nametitle div{background:var(--mist);color:var(--petrol);padding:10px 16px}
.nametitle b{display:block;font-family:'Chakra Petch',sans-serif;font-size:18px}
.nametitle small{font-size:13px;color:var(--ink2)}

.casecard{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--rack);text-decoration:none;border-bottom:4px solid var(--signal)}
@media(max-width:860px){.casecard{grid-template-columns:1fr}}
.casecard .txt{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.casecard .facts{background:#0F2A32;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-content:center}
.fact b{display:block;font-family:'Chakra Petch',sans-serif;font-size:clamp(36px,4vw,56px);line-height:1}
.fact span{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:13px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
.more{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:2px;color:var(--signal)}

.contact{background:var(--signal);color:var(--petrol)}
.contact .wrap{display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:space-between;padding-block:clamp(64px,8vw,110px)}
.contact h2{font-size:clamp(40px,5.4vw,72px);line-height:1}
.contact .stack{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact .tel{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:28px;text-decoration:none}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-block:56px;font-size:14px;color:var(--dim)}
footer.site .cp{font-weight:600;letter-spacing:6px}
.mock{background:#0A1B21;color:var(--dim);font-size:13px;text-align:center;padding:8px 16px;font-family:'Chakra Petch',sans-serif;letter-spacing:2px}

/* case study */
.casehero{padding-block:clamp(56px,7vw,96px)}
.casehero h1{font-size:clamp(40px,6vw,80px);max-width:1100px}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
@media(max-width:860px){.meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.meta div{background:var(--rack);padding:20px;border-bottom:3px solid var(--fiber)}
.meta span{display:block;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:12px;letter-spacing:3px;color:var(--dim);margin-bottom:6px}
.prose{max-width:760px;display:flex;flex-direction:column;gap:20px}
.prose h2{margin-top:8px}
.light .prose p{color:var(--ink2)}
.cols{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.side{background:#fff;padding:28px;display:flex;flex-direction:column;gap:14px}
.side h3{font-size:16px;letter-spacing:3px}
.side ul{margin:0;padding-left:18px;color:var(--ink2);font-size:16px}
.timeline{display:grid;gap:0;margin-top:40px}
.step{display:grid;grid-template-columns:150px 28px minmax(0,1fr);gap:0 20px;align-items:stretch}
@media(max-width:640px){.step{grid-template-columns:22px minmax(0,1fr)}.step .when{grid-column:2;order:-1}.step .rail{grid-row:1/3}}
.step .when{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;letter-spacing:2px;color:var(--dim);padding-top:2px}
.step .rail{position:relative}
.step .rail:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--fiber)}
.step .rail:after{content:'';position:absolute;left:50%;top:4px;width:16px;height:16px;margin-left:-8px;background:var(--mist)}
.step.key .rail:after{background:var(--signal)}
.step .what{padding-bottom:36px}
.step .what p{color:var(--soft);font-size:16px;margin-top:6px}
.stack-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){.stack-list{grid-template-columns:1fr}}
.quote{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.25;max-width:900px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.path animateMotion{display:none}}
@media print{header.site,.mock,.contact,footer.site{display:none}body{background:#fff;color:#000}}