@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');:root{--dark:#0d1921;--ink:#0b2333;--tur:#12d8d7;--mag:#f02ab5;--mist:#edf3f6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);line-height:1.75}a{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.hero{min-height:690px;background:linear-gradient(90deg,rgba(5,15,24,.95) 0%,rgba(5,15,24,.83) 43%,rgba(5,15,24,.33) 100%),url('assets/everything-home.jpg') center 39%/cover;display:flex;align-items:center;color:#fff}.hero .wrap{padding:80px 0}.eyebrow{text-transform:uppercase;letter-spacing:.19em;color:#007f8d;font-weight:800;font-size:12px}.hero .eyebrow,.dark .eyebrow{color:var(--tur)}h1,h2,h3{line-height:1.16;letter-spacing:-.045em}h1{font-size:clamp(50px,7vw,90px);margin:18px 0}h2{font-size:clamp(31px,3.6vw,49px);margin:14px 0 24px}h3{font-size:21px;margin:12px 0}p{margin:0 0 17px}.lead{font-size:20px;max-width:680px}.pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}.pills span{border:1px solid #ffffff75;padding:6px 13px;border-radius:24px;font-size:12px;font-weight:700}.btn{display:inline-block;background:var(--tur);color:#061e25;padding:15px 23px;border-radius:4px;text-decoration:none;font-weight:800;margin-top:24px}.btn:hover{background:#fff}section{padding:90px 0}.dark{background:var(--dark);color:#fff}.dark p{color:#c8d6dc}.mist{background:var(--mist)}.grid2{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}.gallery2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:34px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}.card{position:relative;background:#142731;border:1px solid #35515d;padding:29px;min-height:218px}.card b{color:var(--tur);font-size:13px;letter-spacing:.12em}.card:before,.feature:before,.factbox:before,.shot:before{content:'';position:absolute;top:-1px;left:-1px;width:58px;height:58px;border-top:4px solid var(--tur);border-left:4px solid var(--tur);pointer-events:none;z-index:1}.card:after,.feature:after,.factbox:after,.shot:after{content:'';position:absolute;right:-1px;bottom:-1px;width:58px;height:58px;border-bottom:4px solid var(--mag);border-right:4px solid var(--mag);pointer-events:none;z-index:1}.feature,.factbox{position:relative;background:#122630;color:#fff;padding:40px;border:1px solid #34515d}.feature .eyebrow,.factbox .eyebrow{color:var(--tur)}.feature ul{padding-left:21px}.feature li{margin:8px 0}.feature.light{background:#fff;color:var(--ink);border:1px solid #d6e2e7}.factbox dl{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 20px}.factbox dt{color:#a8c6cd;font-size:13px}.factbox dd{margin:0;font-weight:700}.note{border-left:4px solid var(--mag);padding-left:16px;font-size:14px;color:#45606a}.section-intro{max-width:900px}.shot{position:relative;min-width:0;margin:0;background:#fff;padding:10px;border:1px solid #d8e3e8;box-shadow:0 16px 42px #102d3d22}.shot img{display:block;width:100%;height:auto;max-height:410px;object-fit:cover;object-position:top}.shot figcaption{font-size:12px;color:#50616c;padding:10px 7px 2px}.dark .shot figcaption{color:#526a75}.browser{height:32px;background:#162a34;display:flex;align-items:center;gap:5px;padding:0 12px;color:#a8bdc7;font-size:11px;overflow:hidden}.browser i{height:7px;width:7px;background:#d96879;border-radius:50%;flex:none}.browser i:nth-child(2){background:#e7b95c}.browser i:nth-child(3){background:#66c5b4}.browser span{padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.textlink{color:#007f8d;font-weight:800}.closing{background:#fff}.cta{text-align:center}.cta p{margin-top:20px;font-size:14px}@media(max-width:850px){.grid2,.gallery2,.cards{grid-template-columns:1fr}.hero{min-height:600px;background-position:55% center}.wrap{width:min(100% - 36px,1180px)}section{padding:62px 0}.grid2{gap:28px}.factbox,.feature{padding:30px}.card{min-height:auto}.shot img{max-height:440px}}

/* V3 — approved Option A: full-bleed premium digital portfolio hero */
.hero.hero-portfolio{position:relative;display:block;min-height:720px;overflow:hidden;background:radial-gradient(ellipse at 77% 37%,#1b3b45 0%,transparent 42%),linear-gradient(125deg,#07151e 0%,#101e2a 70%,#08141c 100%);color:#fff;padding:0}
.hero-portfolio:before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:linear-gradient(#5dd2d522 1px,transparent 1px),linear-gradient(90deg,#5dd2d522 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,transparent 20%,#000 100%)}
.hero-layout{position:relative;z-index:1;max-width:1450px;width:calc(100% - 96px);margin:0 auto;min-height:635px;display:grid;grid-template-columns:.86fr 1.14fr;gap:55px;align-items:center;padding:65px 0 45px}
.hero-copy{max-width:610px}.hero-portfolio h1{font-size:clamp(54px,6.3vw,94px);margin:15px 0 10px}.hero-subtitle{font-size:clamp(21px,2.1vw,30px);font-weight:800;line-height:1.35;color:#fff;margin-bottom:20px}.hero-portfolio .lead{font-size:17px;max-width:560px;color:#d0dce2}.hero-portfolio .pills{margin-top:25px}.hero-portfolio .pills span{background:#102b35;border-color:#48626c}
.hero-devices{position:relative;min-width:0;padding:30px 46px 55px 0}.hero-glow{position:absolute;inset:6% 5% 3% 8%;background:radial-gradient(ellipse,#10d8d52e,transparent 65%);filter:blur(24px)}
.hero-desktop{position:relative;z-index:1;background:#0a151c;border:1px solid #5a7680;border-radius:12px;padding:8px;box-shadow:0 35px 75px #0009,0 0 0 1px #11d7d733;transform:perspective(1100px) rotateY(-5deg)}
.device-bar{height:30px;display:flex;align-items:center;gap:16px;background:#1c2e39;border-radius:6px 6px 0 0;padding:0 12px;color:#b4c9d1;font-size:11px}.device-dots{display:flex;gap:5px}.device-dots i{width:7px;height:7px;border-radius:50%;background:#f17482}.device-dots i:nth-child(2){background:#f0c56e}.device-dots i:nth-child(3){background:#6fd7b5}.device-address{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desktop-viewport{height:clamp(240px,29vw,395px);overflow:hidden;background:#000}.desktop-viewport img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hero-desktop:after{content:"";position:absolute;top:-4px;left:-4px;width:70px;height:70px;border-left:4px solid var(--tur);border-top:4px solid var(--tur);border-radius:10px 0 0 0;pointer-events:none}
.hero-mobile{position:absolute;z-index:2;width:clamp(120px,14vw,190px);height:clamp(255px,27vw,360px);right:0;bottom:5px;border:7px solid #111b23;border-radius:25px;background:#0b1217;box-shadow:0 20px 45px #000a,0 0 0 1px #6d8790;overflow:hidden;transform:rotate(4deg)}.mobile-notch{position:absolute;z-index:2;top:4px;left:34%;width:32%;height:10px;background:#0b1217;border-radius:0 0 10px 10px}.mobile-viewport{height:100%;overflow:hidden;background:#fff}.mobile-viewport img{height:100%;width:100%;object-fit:cover;object-position:35% top}.mobile-home{position:absolute;bottom:6px;left:35%;width:30%;height:4px;border-radius:5px;background:#ddd}
.hero-bottom{position:relative;z-index:2;min-height:75px;border-top:1px solid #33525e;background:#091923d9;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;padding:16px 28px;color:#d8e5e9;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.11em}.hero-bottom i{width:7px;height:7px;background:var(--tur);transform:rotate(45deg)}.hero-bottom i:nth-of-type(2){background:var(--mag)}
@media(max-width:1000px){.hero-layout{width:calc(100% - 52px);gap:22px;grid-template-columns:1fr 1fr}.hero-devices{padding-right:28px}.hero-mobile{right:-10px}.hero-portfolio h1{font-size:clamp(48px,6vw,70px)}}
@media(max-width:760px){.hero-layout{display:block;width:calc(100% - 38px);padding:70px 0 30px}.hero-copy{margin-bottom:34px}.hero-portfolio h1{font-size:58px}.hero-devices{max-width:620px;margin:auto;padding:10px 38px 40px 0}.desktop-viewport{height:260px}.hero-mobile{height:230px;width:118px;right:0;bottom:0}.hero-bottom{gap:12px;font-size:10px}.hero-bottom i{width:5px;height:5px}}
@media(max-width:420px){.hero-portfolio h1{font-size:50px}.hero-subtitle{font-size:22px}.desktop-viewport{height:205px}.hero-mobile{height:190px;width:100px}.hero-devices{padding-right:27px}.hero-bottom{gap:10px}}

/* Everything Containers case study refinements */
.hero-portfolio h1{font-size:clamp(48px,5.4vw,78px)}
.hero-mobile .mobile-viewport img{object-position:center top}
.dark-pills span{border-color:#a8cbd2;color:#163341}
.shot img{width:100%;height:auto;display:block}
.shot small{display:block;padding:10px 14px;background:#fff;color:#385363;font-size:12px;font-weight:700}
.factbox{position:relative;padding:34px;background:#f5f9fa;box-shadow:0 12px 36px #082d3c12}
.factbox p{margin-bottom:12px}
.closing-tag{margin-top:30px;font-weight:800;letter-spacing:.02em}

/* V2 image reliability: stable intrinsic sizes and explicit visibility */
.shot img,.desktop-viewport img,.mobile-viewport img{visibility:visible!important;opacity:1!important;content-visibility:visible!important}
.shot{overflow:hidden}

/* V3 accessibility: correct contrast for light fact boxes (previously white-on-white). */
.factbox{color:#0b2333;background:#f5f9fa}
.factbox h2,.factbox h3,.factbox strong,.factbox b,.factbox dd{color:#0b2333}
.factbox p,.factbox li,.factbox dt{color:#385363}
.factbox .eyebrow{color:#007f8d}

/* V4: CTA button centred in right-hand column */
.closing-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.closing-action{display:flex;align-items:center;justify-content:center;min-height:230px}
.closing-action .btn{margin-top:0;text-align:center}
@media(max-width:850px){.closing-grid{grid-template-columns:1fr;gap:18px}.closing-action{min-height:auto;justify-content:center;padding:12px 0 0}}