@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#101c2a;--orange:#f27b48;--paper:#f7f6f1;--ink:#142333}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:'DM Sans',Arial,sans-serif;background:var(--paper);color:var(--ink)}
.shell{min-height:100svh;display:flex;flex-direction:column}
.masthead{height:115px;padding:0 7%;display:flex;align-items:center;gap:13px}
.brandmark{width:54px;height:54px;border:4px solid var(--navy);border-radius:12px 2px 12px 2px;transform:skew(-7deg);display:grid;place-items:center;font:800 20px Manrope,sans-serif;letter-spacing:-3px;position:relative}
.brandmark span{position:absolute;width:20px;height:4px;background:var(--orange);right:-8px;bottom:-8px}
.identity{display:flex;flex-direction:column}.identity strong{font:800 18px Manrope,sans-serif;letter-spacing:-1px}.identity strong span{color:var(--orange)}.identity small{font-size:9px;font-weight:800;letter-spacing:3px;margin-top:3px}
.layout{display:grid;grid-template-columns:55% 45%;flex:1;min-height:590px}
.message{padding:75px 6% 85px 12.7%;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.1px;color:#d56f43;display:flex;align-items:center;gap:11px}.eyebrow i{display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:100%}
h1{font:800 clamp(58px,6vw,102px)/1.06 Manrope,sans-serif;letter-spacing:-.07em;margin:32px 0 44px}h1 em{font-style:normal;color:var(--orange)}
.statement{display:flex;gap:24px;max-width:520px}.statement .line{width:3px;background:var(--orange);flex:none}.statement h2{font:800 20px/1.45 Manrope,sans-serif;letter-spacing:1.3px;margin:0 0 15px}.statement p{font-size:15px;line-height:1.9;color:#697781;margin:0;max-width:420px}
.tagrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:52px}.tagrow span{border:1px solid #d3d9d9;font-weight:800;font-size:9px;letter-spacing:1px;padding:11px 13px;color:#56646d}
.visual{background:var(--navy);min-height:590px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:35px}.gridlines{position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:50px 50px}.figure-number{position:absolute;top:48px;left:45px;color:#96a9b9;font-size:10px;letter-spacing:2px;font-weight:800}.frame{width:min(86%,550px);aspect-ratio:2.8/1;background:#080e14;border:15px solid #050b10;border-radius:22px;box-shadow:inset 0 0 0 2px #53616a,20px 30px 50px #000a;transform:perspective(700px) rotateY(-11deg) rotateZ(-8deg);padding:6px;display:flex;flex-direction:column;position:relative;z-index:1}.frame-inside{background:#e5e8e7;border-radius:5px;flex:1;display:flex;align-items:center;gap:10px;padding:0 13px}.frame-inside .blue{background:#20528f;color:white;display:grid;place-items:center;height:72%;padding:0 10px;font-weight:800;font-size:16px}.frame-inside strong{font:800 clamp(15px,2.6vw,36px) Manrope,sans-serif;letter-spacing:-1px;white-space:nowrap}.frame-inside b{color:var(--orange)}.frame small{text-align:center;color:#e2e8ea;font-size:clamp(7px,.7vw,10px);font-weight:800;letter-spacing:2px;padding-top:8px}.corner-mark{position:absolute;bottom:25px;right:35px;font:800 80px Manrope,sans-serif;color:#ffffff0c;letter-spacing:-12px}.corner-mark span{font-size:14px;vertical-align:top;color:var(--orange);letter-spacing:0}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 7%;border-top:1px solid #dfe1df;font-size:10px;font-weight:800;letter-spacing:1.2px;color:#677681}footer b{color:var(--orange);font-size:17px;margin-left:10px}
@media(max-width:900px){.masthead{height:90px}.layout{grid-template-columns:1fr}.message{padding:60px 7% 65px}.message h1{font-size:clamp(56px,10vw,83px)}.visual{min-height:420px}.frame{max-width:520px}.frame-inside strong{font-size:clamp(16px,4vw,30px)}footer{flex-wrap:wrap;line-height:1.7}}
@media(max-width:480px){.masthead{padding:0 6%}.brandmark{width:45px;height:45px;font-size:17px;flex:none}.identity strong{font-size:15px}.identity small{font-size:8px;letter-spacing:2px}.message{padding:45px 7% 55px}.eyebrow{font-size:9px;letter-spacing:1.4px}h1{font-size:clamp(46px,13vw,62px);margin:26px 0 34px}.statement{gap:17px}.statement h2{font-size:17px}.statement p{font-size:14px}.tagrow{margin-top:35px}.visual{min-height:310px;padding:22px}.figure-number{left:20px;top:24px}.frame{border-width:9px;border-radius:12px;width:95%;padding:3px}.frame-inside{gap:5px;padding:0 5px}.frame-inside .blue{padding:0 6px;font-size:10px}.frame-inside strong{font-size:clamp(12px,4.2vw,18px);letter-spacing:-1px}.frame small{font-size:6px;letter-spacing:1px;padding-top:4px}.corner-mark{font-size:55px;bottom:10px;right:20px}footer{padding:23px 7%;font-size:9px}}
