:root{--navy:#031b3d;--deep:#02132c;--blue:#07366b;--cream:#fff0c9;--orange:#ff8b24;--cyan:#63e8f3;--muted:#b6c9dd;--line:#8ec9ee30}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--navy);color:var(--cream);font:16px Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}header{min-height:138px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;gap:25px;background:radial-gradient(ellipse at 16% 90%,#083b75,transparent 55%),var(--deep);border-bottom:1px solid var(--line)}.logo{display:block;line-height:0;flex-shrink:0}.logo img{display:block;width:270px;height:132px;object-fit:cover}nav{display:flex;gap:28px;align-items:center;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:1.1px}nav>a:not(.pill){padding:14px 0}nav>a:hover{color:var(--cyan)}.pill,.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:18px 25px;background:linear-gradient(115deg,#ff8a20,#ffe4a7);color:var(--deep);font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:1.2px;border:1px solid transparent;border-radius:3px;transition:transform .2s,box-shadow .2s}.cta:hover{transform:translateY(-3px);box-shadow:0 8px 28px #ff9c2638}.pill{background:#63e8f309;border-color:#63e8f366;color:var(--cream)}.pill:hover{background:#63e8f318}.menu{display:none;background:transparent;color:var(--cream);border:1px solid var(--line);border-radius:3px;padding:12px}.hero{position:relative;min-height:720px;display:flex;align-items:center;padding:85px 7% 115px;isolation:isolate;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#02132cf5 0%,#031b3dbb 50%,#07366b28),url('assets/photos/1558981806-ec527fa84c39-2200.jpg') center 55%/cover}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--navy),transparent 55%)}.eyebrow{font-size:10px;letter-spacing:2.3px;text-transform:uppercase;font-weight:bold;color:var(--cyan);display:flex;align-items:center;gap:13px}.eyebrow:before{content:'';width:30px;height:2px;background:linear-gradient(90deg,var(--orange),var(--cyan))}h1{font-size:clamp(62px,7.4vw,114px);letter-spacing:-.055em;line-height:.98;text-transform:uppercase;margin:30px 0;font-weight:900}h1 em{font-style:normal;color:var(--orange);background:linear-gradient(100deg,#ff9229 5%,#ffe4ac 60%,#63e8f3);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}p{line-height:1.8;color:var(--muted)}.hero p{max-width:475px;font-size:17px;margin:28px 0 35px;color:#d8e4ef}.hero-index{position:absolute;right:7%;bottom:40px;font-size:9px;letter-spacing:2px;color:var(--cyan)}.strip{padding:24px 7%;display:flex;justify-content:space-between;gap:20px;background:var(--deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--cream);font-size:11px;font-weight:bold;letter-spacing:2px}.strip span:nth-child(even){color:var(--orange)}.section{padding:110px 7%}.intro{display:grid;grid-template-columns:1fr 1fr;gap:10%;background:radial-gradient(ellipse at 0% 90%,#08457b55,transparent 55%)}h2{font-size:clamp(36px,4.3vw,64px);letter-spacing:-.045em;line-height:1.08;margin:22px 0;text-transform:uppercase}h3{font-size:24px;letter-spacing:-.7px}.intro p{max-width:520px}.textlink{display:inline-block;border-bottom:1px solid var(--orange);padding:12px 0;font-weight:bold;font-size:12px}.textlink:hover{color:var(--cyan)}.work{background:#f8f1e3;color:var(--navy)}.work .eyebrow{color:#08566d}.work .top{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:45px}.work p{color:#4d6075}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.card{display:block;background:var(--navy);color:var(--cream);border-bottom:3px solid var(--orange);border-radius:4px;overflow:hidden;transition:transform .25s,box-shadow .25s}.card:nth-child(2){border-color:var(--cyan)}.card:nth-child(3){border-color:#f6da9e}.card:hover{transform:translateY(-7px);box-shadow:0 18px 35px #031b3d25}.card .photo{height:300px;overflow:hidden;position:relative;background:var(--blue)}.card .photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#02132c70,transparent 50%,#031b3d55);pointer-events:none}.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.card:hover img{transform:scale(1.04)}.card .number{position:absolute;z-index:1;top:20px;left:22px;color:var(--cream);font-size:10px;letter-spacing:1px}.card h3{margin:25px 22px 14px;display:flex;justify-content:space-between;gap:8px;font-size:22px}.card h3 span{color:var(--cyan)}.card p{font-size:13px;color:var(--muted);margin:14px 22px 27px}.tag{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;margin:0 22px;color:var(--cyan)}.process{display:grid;grid-template-columns:1fr 2fr;gap:10%;background:linear-gradient(135deg,var(--deep),#07366b)}.steps{display:grid;grid-template-columns:1fr 1fr;gap:35px}.step{border-top:1px solid var(--line);padding:25px 0 0}.step span{color:var(--cyan);font-size:10px;letter-spacing:1.5px}.step h3{font-size:23px}.step p{font-size:14px}.contact{position:relative;background:radial-gradient(ellipse at 95% 100%,#08719b88,transparent 65%),linear-gradient(120deg,#06254e,#073b76);color:var(--cream);padding:95px 7%;border-top:1px solid #63e8f34d;overflow:hidden}.contact:after{content:'';position:absolute;right:-100px;top:40px;width:300px;height:600px;border:1px solid #63e8f322;transform:skewX(-25deg);pointer-events:none}.contact .eyebrow{color:var(--cyan)}.contact p{color:#d0dfed;max-width:640px}.contact h2{max-width:950px;font-size:clamp(42px,5.8vw,82px)}.contact .cta{margin-top:18px}.contactbox{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;max-width:650px}.contact .textlink{margin-top:20px}footer{padding:35px 7%;display:flex;justify-content:space-between;gap:30px;background:var(--deep);color:#a8c1d9;font-size:10px;line-height:1.6}.note{font-size:11px}.detailhero{padding:80px 7% 65px;background:radial-gradient(ellipse at 90% 10%,#084b8d88,transparent 65%)}.detailhero h1{font-size:clamp(58px,7vw,104px);max-width:1100px}.wide{display:block;width:86%;margin:0 auto;height:460px;object-fit:cover;border-radius:4px;border-bottom:3px solid var(--cyan)}.brief{padding:85px 7%;display:grid;grid-template-columns:1fr 2fr;gap:10%}.brief ul{padding-left:18px;line-height:2.2;color:var(--muted)}.brief li::marker{color:var(--orange)}.demo{border:1px solid #63e8f34d;color:var(--cyan);padding:10px 14px;font-size:9px;letter-spacing:1px;display:inline-block;margin-top:20px;border-radius:3px}.back{font-size:12px;color:var(--muted)}.back:hover{color:var(--cyan)}.legal{max-width:950px;padding:80px 7%}.legal h3{color:var(--cyan)}@media(min-width:1500px){header,.section,.contact,.brief,.detailhero,footer{padding-left:max(7%,calc((100vw - 1320px)/2));padding-right:max(7%,calc((100vw - 1320px)/2))}}@media(max-width:1100px){nav{gap:17px;font-size:10px}.logo img{width:225px}.card h3{font-size:19px}.card .photo{height:260px}}@media(max-width:800px){header{min-height:110px;padding:0 6%}.logo img{width:220px;height:108px}nav{display:none;position:absolute;top:110px;left:0;right:0;background:var(--deep);z-index:5;padding:28px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line);gap:12px}nav.open{display:flex}.menu{display:block}.hero{min-height:650px;padding:65px 6% 90px}.hero:before{background-position:62% center}.hero h1{font-size:clamp(46px,9.2vw,72px)}.hero p{font-size:16px}.hero-index{display:none}.strip{font-size:9px;letter-spacing:.7px;flex-wrap:wrap;justify-content:center;padding:22px 5%}.section{padding:65px 6%}.intro,.process,.brief{grid-template-columns:1fr;gap:25px}.cards{grid-template-columns:1fr;gap:30px}.card .photo{height:340px}.card h3{font-size:24px}.work .top{display:block}.steps{gap:25px}.contact{padding:65px 6%}.contact:after{display:none}footer{flex-wrap:wrap;gap:15px}.wide{width:88%;height:310px}.detailhero{padding:55px 6% 40px}.detailhero h1{font-size:clamp(43px,8.5vw,70px)}.brief{padding:55px 6%}.eyebrow{font-size:9px;letter-spacing:1.7px}}@media(max-width:420px){.logo img{width:190px;height:100px}header{min-height:102px}nav{top:102px}.steps{grid-template-columns:1fr}.card .photo{height:280px}.strip span:nth-child(even){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.brand-references{background:var(--deep);border-bottom:1px solid var(--line)}.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:45px}.brand-tile{height:160px;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:32px}.brand-tile img{display:block;max-width:100%;width:220px;height:92px;object-fit:contain}@media(max-width:800px){.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.brand-tile{height:135px;padding:22px}.brand-tile img{height:85px}}@media(max-width:380px){.brand-grid{grid-template-columns:1fr}}

.legal p a:not(.textlink){text-decoration:underline;text-underline-offset:3px}.legal h3{margin-top:36px}.legal code{overflow-wrap:anywhere}.legal p{max-width:760px}.legal strong{color:var(--cream)}

.legal h1{font-size:clamp(30px,4.3vw,64px);letter-spacing:-.045em;line-height:1.12;overflow-wrap:anywhere}.legal{overflow-wrap:anywhere}.contact>h1{max-width:950px;font-size:clamp(42px,5.8vw,82px);line-height:1.08;letter-spacing:-.045em;margin:22px 0}header{position:relative;z-index:10}footer{flex-wrap:wrap}@media(max-width:420px){.contact .cta{max-width:100%;gap:15px;padding:18px 15px;letter-spacing:.5px}}

.form-panel{max-width:820px;margin:50px 0;padding:35px;background:#02132c99;border:1px solid var(--line);border-radius:5px;position:relative;z-index:1}.form-panel h2{font-size:clamp(26px,3vw,40px)}.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}.form-panel label{display:block;margin:22px 0 9px;font-weight:bold;font-size:13px}.form-panel input:not([type=hidden]),.form-panel textarea{display:block;width:100%;padding:15px;background:var(--deep);color:var(--cream);border:1px solid #8ec9ee66;border-radius:3px;font:inherit;line-height:1.5}.form-panel textarea{resize:vertical;min-height:180px}.form-panel input:focus,.form-panel textarea:focus{outline:2px solid var(--cyan);outline-offset:2px}.form-panel textarea::placeholder{color:#a3b9cf}.form-panel .form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.form-panel .form-privacy{font-size:12px}.form-privacy a{text-decoration:underline}.form-panel button{cursor:pointer}.form-panel button:disabled{opacity:.55;cursor:not-allowed;transform:none}.form-panel #form-status{font-size:13px;min-height:24px}.form-panel [aria-busy=true]{cursor:wait}@media(max-width:600px){.form-panel{padding:22px 18px}.form-fields{grid-template-columns:1fr;gap:0}}

/* Fluid reading layout for privacy and legal pages. */
.legal{width:calc(100% - 2 * clamp(20px,6vw,84px));max-width:960px;margin-inline:auto;padding:clamp(36px,6vw,80px) 0;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.legal h1{font-size:clamp(26px,4vw,48px);line-height:1.15;letter-spacing:-.035em;max-width:100%;hyphens:auto;word-break:normal;margin-block:22px 30px}
.legal h2{font-size:clamp(25px,3.5vw,42px)}
.legal h3{font-size:clamp(20px,2.4vw,25px);line-height:1.35;letter-spacing:-.025em}
.legal p,.legal ul{max-width:100%;font-size:clamp(15px,1.1vw,17px);line-height:1.8}
.legal ul{padding-inline-start:1.3em}.legal li{margin-block:14px}.legal a{overflow-wrap:anywhere}
@media(max-width:420px){header{gap:12px}.logo img{width:clamp(150px,47vw,190px);max-width:100%;height:100px}.menu{flex-shrink:0;padding:10px}.legal h1{margin-block:20px 26px}}

/* Shared responsive safeguards, including intermediate tablet widths. */
img,video{max-width:100%}
header>*,.hero>*,.intro>*,.process>*,.brief>*,.work .top>*,.steps>*,.cards>*,.brand-grid>*,.form-fields>*{min-width:0}
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
p,li,.textlink,footer a,.contactbox a{overflow-wrap:anywhere}
.eyebrow{line-height:1.6}.eyebrow:before{flex-shrink:0}
.pill,.cta{max-width:100%;white-space:normal;line-height:1.5;overflow-wrap:anywhere;text-align:left}
.form-panel{width:100%;min-width:0}.form-panel input,.form-panel textarea{min-width:0;max-width:100%;font-size:16px}
.card h3 span{flex-shrink:0}.tag{display:block;line-height:1.6}
.demo{max-width:100%;line-height:1.6;overflow-wrap:anywhere}
@media(max-width:1000px){
 header{min-height:110px;padding-inline:6%;gap:16px}
 .logo img{width:220px;height:108px}
 nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--deep);z-index:5;padding:24px 6%;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line);gap:12px;font-size:12px}
 nav.open{display:flex}.menu{display:block;flex-shrink:0}
 nav>a{min-height:44px}.intro,.process,.brief{grid-template-columns:minmax(0,1fr);gap:28px}
 .work .top{display:block}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card h3{font-size:22px}.strip{flex-wrap:wrap;justify-content:center}
}
@media(max-width:800px){.cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
 .section,.brief,.detailhero,.contact{padding-inline:6%}
 .hero{min-height:580px;padding:55px 6% 75px}
 .hero h1{font-size:clamp(34px,9vw,54px);line-height:1.06}
 .detailhero h1{font-size:clamp(32px,8.5vw,51px);line-height:1.08}
 h2{font-size:clamp(28px,7vw,40px)}
 .contact>h1,.contact h2{font-size:clamp(30px,8vw,44px);line-height:1.12}
 .form-panel h2{font-size:clamp(24px,6vw,32px)}
 .steps{grid-template-columns:minmax(0,1fr)}
 .card .photo{height:clamp(210px,65vw,340px)}
 .wide{height:clamp(200px,58vw,310px)}
 .contact .cta,.cta{padding:16px 18px;letter-spacing:.6px;gap:16px}
 footer{gap:16px 22px;font-size:11px;line-height:1.7}
}
@media(max-width:420px){
 header{gap:12px;min-height:102px}.logo img{width:clamp(140px,47vw,190px);height:100px}
 nav{top:100%}.menu{padding:10px}
 .brand-grid{grid-template-columns:minmax(0,1fr)}
 .brand-tile{height:135px}.brand-tile img{max-height:90px}
}

/* Homepage: align the visible logo artwork with the ink edge of the B in Benzin.
   Original PNG artwork starts at x=159 of 1536 px; Arial Bold B bearing is .073em. */
.home{--home-gutter:7vw;--home-logo-width:270px;--home-title-size:clamp(62px,7.4vw,114px)}
.home header{padding-inline-end:var(--home-gutter);padding-inline-start:calc(var(--home-gutter) + var(--home-title-size)*.073 - var(--home-logo-width)*.103515625)}
.home .logo img{width:var(--home-logo-width)}
.home .hero{padding-inline:var(--home-gutter)}
.home .hero h1{font-size:var(--home-title-size)}
@media(min-width:1500px){.home{--home-gutter:max(7vw,calc((100vw - 1320px)/2))}}
@media(max-width:1100px){.home{--home-logo-width:225px}}
@media(max-width:1000px){.home{--home-logo-width:220px}}
@media(max-width:800px){.home{--home-gutter:6vw;--home-title-size:clamp(46px,9.2vw,72px)}}
@media(max-width:600px){.home{--home-title-size:clamp(34px,9vw,54px)}}
@media(max-width:420px){.home{--home-logo-width:clamp(140px,47vw,190px)}}