@font-face{font-family:Inter;src:url("../assets/fonts/inter.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
:root{--accent:#0047ff;--position:40%;--paper:#dfc7a8;color-scheme:dark;font-family:Inter,Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#25221f;color:#fff}button{font:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #fff;outline-offset:6px}
.hero{position:relative;isolation:isolate;min-height:740px;height:100svh;overflow:hidden}.wrap{width:78%;max-width:1440px;margin-inline:auto}.comparison{position:absolute;inset:0;--position:inherit;touch-action:pan-y;cursor:ew-resize;user-select:none}.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 44%;pointer-events:none;filter:sepia(.2) saturate(.75) contrast(1.05)}.photo-before{clip-path:inset(0 calc(100% - var(--position)) 0 0);filter:sepia(.35) saturate(.7) contrast(1.04)}.photo-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(15,13,11,.36),rgba(15,13,11,.27) 35%,transparent 59%),linear-gradient(180deg,rgba(0,0,0,.22),transparent 25%,transparent 80%,rgba(0,0,0,.13))}.divider{position:absolute;left:var(--position);top:0;bottom:0;width:2px;background:rgba(255,255,255,.85);transform:translateX(-1px);pointer-events:none}.handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:0;background:#fff;color:var(--accent);box-shadow:0 3px 15px #0002}.handle svg{width:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.photo-label{position:absolute;bottom:4.2%;padding:8px 22px;background:#fffffff0;color:#191919;font-weight:500;border-radius:0;pointer-events:none}.label-before{left:9.5%}.label-after{right:9%}
.header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:25px}.brand{display:flex;align-items:center;gap:10px;line-height:1;font-weight:700;letter-spacing:-2.8px;white-space:nowrap}.brand-mark{width:63px;height:42px;fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.header nav{display:flex;align-items:center;gap:clamp(22px,3.2vw,58px);margin-left:35px}.header nav a{white-space:nowrap;transition:opacity .2s}.header nav a:hover{opacity:.7}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:0;background:var(--accent);padding:19px 32px;font-weight:500;white-space:nowrap;min-height:56px;transition:background .2s,transform .2s}.button:hover{background:var(--accent);transform:translateY(-2px)}.button span{font-size:23px;line-height:1}.header-cta{padding-inline:36px}.menu-toggle{display:none}
.hero-content{position:relative;z-index:2;pointer-events:none;height:calc(100% - 81px);display:flex;align-items:center;padding-bottom:2vh}.copy{pointer-events:none;max-width:660px}.copy a{pointer-events:auto}.eyebrow{letter-spacing:.31em;font-weight:400;margin:0 0 27px}.copy h1{font-weight:700;letter-spacing:-.052em;line-height:.99;margin:0 0 25px}.copy h1 em{font-style:normal;color:var(--accent)}.lead{line-height:1.4;letter-spacing:-.025em;color:#ffffffe0;margin:0 0 30px}.actions{display:flex;align-items:center;gap:22px}.watch{display:flex;align-items:center;gap:15px;font-weight:500}.play{height:60px;width:60px;display:grid;place-items:center;border:1.5px solid #fff;border-radius:0;transition:background .2s}.play svg{width:22px;fill:currentColor;margin-left:3px}.watch:hover .play{background:#ffffff20}.watch-text{padding-bottom:7px;border-bottom:1px solid #ffffffe0}
@media(min-width:1500px){.wrap{width:74%}.header{width:77%}.hero-content{padding-bottom:0}.copy{max-width:720px}}
@media(max-width:1100px){.wrap{width:88%}.header{gap:20px}.brand-mark{width:48px}.header nav{gap:23px;margin-left:0}.header-cta{padding-inline:24px}.copy{max-width:550px}.photo{object-position:58% center}.label-before{left:6%}.label-after{right:6%}}
@media(max-width:800px){.hero{min-height:740px}.header{padding-top:22px}.header-cta{margin-left:auto;padding:14px 20px;min-height:48px}.menu-toggle{display:grid;gap:6px;place-content:center;width:42px;height:42px;border:1px solid #ffffff70;border-radius:0;background:#0003;color:#fff;cursor:pointer}.menu-toggle span{width:18px;height:2px;background:currentColor}.header nav{display:none;position:absolute;top:88px;left:0;right:0;background:#24201ff5;padding:20px;border-radius:0;flex-direction:column;align-items:stretch;gap:0}.header nav.is-open{display:flex}.header nav a{padding:12px;}.hero-content{padding-top:75px;align-items:center}.copy{max-width:530px}.eyebrow{letter-spacing:.24em}.photo{object-position:62% center}.photo-shade{background:linear-gradient(90deg,#100d0ac9,#100d0a60 65%,#100d0a10)}.handle{top:44%;width:42px;height:42px}.photo-label{padding:7px 17px}}
@media(max-width:480px){.wrap{width:88%}.brand{gap:5px}.brand-mark{width:39px}.header{gap:12px}.header-cta{padding:12px 15px;gap:9px;min-height:42px}.header-cta span{font-size:19px}.hero{min-height:720px}.hero-content{padding-top:60px;padding-bottom:70px}.copy h1{line-height:1.02}.eyebrow{letter-spacing:.2em;margin-bottom:23px}.lead{max-width:320px}.desktop-break{display:none}.actions{align-items:flex-start;flex-direction:column;gap:20px}.button{min-height:52px;padding:16px 26px;}.play{width:47px;height:47px}.handle{top:28%}.photo{object-position:61% center}.label-before,.label-after{bottom:25px}}
@media(prefers-reduced-motion:reduce){a,.button,.play{transition:none}}

html{scroll-behavior:smooth}.brand-logo{display:block;width:150px;height:auto;filter:brightness(0) invert(1)}
@media(max-width:1100px){.brand-logo{width:150px}}
@media(max-width:480px){.brand-logo{width:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Rectangular secondary action. */
.watch{gap:0;border:1.5px solid #fff;min-height:56px}
.play{width:56px;height:56px;border:0;border-right:1.5px solid #fff}
.watch-text{border-bottom:0;padding:0 22px}
@media(max-width:480px){.watch{min-height:52px}.play{width:52px;height:52px}.watch-text{padding:0 20px}}

/* Shared container width for hero, header and all sections. */
.wrap,.section-wrap{width:90%;max-width:1400px;margin-inline:auto}

/* Cool blue tint on the hero photographs. */
.hero .comparison{isolation:isolate}
.hero .photo{filter:grayscale(1) contrast(1.05)}
.hero .comparison::after{content:"";position:absolute;inset:0;background:#265b9938;mix-blend-mode:color;pointer-events:none;z-index:1}
.hero .divider,.hero .photo-label{z-index:2}

/* Darken the copy area while keeping the right side of the photo visible. */
.hero .photo-shade{background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.58) 28%,rgba(0,0,0,.2) 48%,transparent 68%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 25%,transparent 80%,rgba(0,0,0,.13))}

/* The damaged photo is the base (right) layer in this hero. */
.hero .photo-after{filter:grayscale(1) sepia(.7) saturate(.8) contrast(1.05)}

/* Crop the supplied silverlab logo margins for consistent visible sizing. */
.silverlab-logo{position:relative;aspect-ratio:1590/388;overflow:hidden;filter:none;mix-blend-mode:screen}
.silverlab-logo img{position:absolute;width:126.23%;max-width:none;height:auto;left:-13.2%;top:-46.4%}

/* Make the raster logo background transparent using its luminance. */
.silverlab-logo{mix-blend-mode:normal}
.silverlab-logo img{filter:url(#logo-transparent)}

/* Extra desktop-only fade behind the header navigation. */
@media(min-width:801px){
 .hero::after{content:"";position:absolute;inset:0 0 auto;height:180px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.38) 45%,transparent)}
}