/* HUMBEL. — Static company profile | Easily editable, no framework required */
:root{--ink:#151515;--muted:#707070;--paper:#f5f5f2;--white:#fff;--line:#e6e6e3;--red:#d9272f;--red-dark:#b91e25;--radius:3px;--container:1200px;--display:Impact,'Arial Narrow','Franklin Gothic Heavy',sans-serif;--body:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;color:var(--ink);font:16px/1.65 var(--body);background:var(--white);-webkit-font-smoothing:antialiased}body.no-scroll{overflow:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}::selection{background:var(--red);color:white}:focus-visible{outline:3px solid #e7484c;outline-offset:4px}.container{width:min(var(--container),calc(100% - 80px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.topbar{background:#151515;color:#d6d6d6;font-size:10px;font-weight:700;letter-spacing:.06em}.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:32px;gap:20px}.topbar-links{display:flex;align-items:center;gap:18px}.topbar-links a:hover{color:white}.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid #eee;backdrop-filter:blur(16px)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:25px}.logo{font:900 36px/1 Arial,Helvetica,sans-serif;letter-spacing:-.095em;white-space:nowrap}.logo b{color:var(--red)}.desktop-nav{display:flex;align-items:center;gap:30px;margin-left:auto}.desktop-nav a{font-size:13px;font-weight:750;color:#282828;position:relative;padding:30px 0}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:21px;height:2px;background:var(--red);transition:right .2s}.desktop-nav a:hover:after,.desktop-nav a[aria-current="page"]:after{right:0}.desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--red)}.header-actions{display:flex;align-items:center;gap:10px;margin-left:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 23px;font-size:12px;font-weight:800;line-height:1.2;white-space:nowrap;transition:transform .2s,background .2s,border-color .2s;letter-spacing:.01em;border:1px solid transparent;border-radius:var(--radius)}.btn:hover{transform:translateY(-2px)}.btn-red{background:var(--red);color:white}.btn-red:hover{background:var(--red-dark)}.btn-outline-light{color:white;border-color:rgba(255,255,255,.55);background:transparent}.btn-outline-light:hover{background:white;color:var(--ink)}.btn-outline-dark{border-color:var(--ink);color:var(--ink);background:transparent}.btn-outline-dark:hover{background:var(--ink);color:white}.btn-white{background:white;color:var(--ink)}.btn-small{min-height:38px;padding:10px 15px;font-size:11px}.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);background:white;border-radius:2px;flex-shrink:0}.nav-toggle svg{width:22px;height:22px}.mobile-nav{display:none}.wa-icon{width:17px;height:17px;fill:currentColor}.arrow{font-size:17px;line-height:.8}.eyebrow{margin:0 0 16px;text-transform:uppercase;color:var(--red);font-size:11px;font-weight:900;letter-spacing:.3em}.eyebrow-light{color:#fe555d}.section-title{font-family:var(--display);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:1.05;font-size:clamp(36px,4.7vw,65px);margin:0}.section-copy{color:var(--muted);max-width:430px;font-size:14px;line-height:1.85}.section{padding:100px 0}.section-light{background:#f7f7f5}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}.section-heading .section-copy{margin:0 0 2px}.section-heading .eyebrow{margin-bottom:12px}
/* homepage hero */
.hero{min-height:590px;background:#101112;color:#fff;position:relative;overflow:hidden;isolation:isolate}.hero-photo{position:absolute;z-index:-2;inset:0 0 0 45%;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 29%;filter:contrast(1.07) brightness(.83)}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101112 0%,rgba(16,17,18,.93) 5%,rgba(16,17,18,.35) 29%,transparent 48%),linear-gradient(0deg,rgba(16,17,18,.68),transparent 32%);pointer-events:none}.hero:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#101112 0%,#101112 37%,rgba(16,17,18,.55) 57%,transparent 80%)}.hero-inner{display:flex;align-items:center;min-height:590px;padding:85px 0}.hero-content{max-width:765px}.hero h1{font:900 clamp(61px,7.8vw,116px)/.95 var(--display);letter-spacing:-.025em;text-transform:uppercase;margin:0 0 20px;max-width:850px}.hero h1 span{color:var(--red)}.hero h2{font-size:clamp(16px,2vw,22px);line-height:1.4;margin:0 0 12px;font-weight:750}.hero p.hero-desc{color:#ddd;max-width:460px;margin:0 0 31px;font-size:14px;line-height:1.8}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.hero-note{position:absolute;right:3.5%;bottom:32px;z-index:1;font-size:11px;letter-spacing:.12em;line-height:1.4;font-weight:900;color:#fff;text-align:right;text-transform:uppercase}.proof-strip{border-bottom:1px solid var(--line);background:#fff}.proof-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:72px;align-items:center}.proof-item{display:flex;justify-content:center;align-items:center;gap:12px;font-size:11px;font-weight:850;text-transform:uppercase}.proof-item+.proof-item{border-left:1px solid var(--line)}.proof-icon{font-size:22px;color:var(--ink);line-height:1}
/* category cards */
.categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.category-card{background:white;border:1px solid #e9e9e9;transition:box-shadow .25s,transform .25s}.category-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00000012}.category-card img{width:100%;aspect-ratio:1.37;object-fit:cover}.category-content{padding:20px 22px 22px;position:relative}.category-title{font-family:var(--display);font-size:29px;line-height:1.15;margin:0 0 6px}.category-content p{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 16px;max-width:310px}.text-link{font-size:12px;font-weight:850;color:var(--red);display:inline-flex;align-items:center;gap:7px}.text-link:hover{text-decoration:underline}.category-num{position:absolute;right:22px;bottom:15px;font-family:var(--display);font-size:40px;color:#dedede;line-height:1}
/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.about-image{min-height:520px;position:relative;overflow:hidden}.about-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}.about-badge{position:absolute;bottom:0;left:0;display:flex;align-items:stretch;max-width:100%;color:white}.about-badge strong{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px;min-height:110px;padding:14px;background:var(--red);font:900 54px/.8 var(--display)}.about-badge strong span{font:600 11px/1.2 var(--body);margin-top:11px;text-align:center}.about-badge>div{display:flex;align-items:center;max-width:310px;padding:18px 22px;background:rgba(10,10,10,.85);font-size:13px;font-weight:750;line-height:1.5}.about-content{padding:65px clamp(28px,5vw,80px);align-self:center}.about-content .section-title{margin-bottom:20px}.about-content>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.85;max-width:550px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px 22px;margin:27px 0 31px}.feature{display:flex;align-items:start;gap:13px}.feature-icon{display:grid;place-items:center;min-width:31px;height:33px;border:1px solid #ffb7bd;color:var(--red);font-size:20px}.feature h3{margin:0;font-size:13px}.feature p{font-size:11px;color:var(--muted);line-height:1.55;margin:4px 0 0}
/* portfolio */
.portfolio-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:25px}.filters{display:flex;flex-wrap:wrap;gap:8px}.filter-btn{border:1px solid #dcdcdc;background:#fff;color:#555;padding:8px 17px;font-size:12px;font-weight:750;border-radius:2px}.filter-btn:hover,.filter-btn.active{background:var(--ink);border-color:var(--ink);color:white}.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:175px;gap:10px}.work{position:relative;overflow:hidden;display:block;background:#e7e7e7;border:0;padding:0;text-align:left}.work:nth-child(1){grid-row:span 2}.work:nth-child(2){grid-column:span 1}.work:nth-child(5){grid-column:span 1}.work img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.work:hover img{transform:scale(1.06)}.work:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .25s}.work:hover:after,.work:focus-visible:after{opacity:1}.work-info{position:absolute;z-index:2;left:16px;right:15px;bottom:16px;color:white;opacity:0;transition:opacity .2s;display:flex;align-items:end;justify-content:space-between;gap:10px;font-size:12px;font-weight:800}.work:hover .work-info,.work:focus-visible .work-info{opacity:1}.work[hidden]{display:none}
/* process */
.process-section{padding:80px 0;background:#f6f6f4}.process-flex{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:center}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}.step{position:relative;text-align:center;padding:23px 12px;border:1px solid #e5e5e3;background:#fff}.step+.step:before{content:"→";position:absolute;top:43%;left:-12px;z-index:1;font-size:18px;font-weight:800;color:#a1a1a1}.step .step-icon{font-size:27px;display:block;line-height:1;margin-bottom:12px}.step small{display:block;color:var(--red);font-weight:850;letter-spacing:.1em;font-size:10px}.step p{font-weight:650;font-size:12px;line-height:1.5;margin:8px 0 0}
/* CTA, contact, footer */
.cta{background:#131416;color:white;position:relative;isolation:isolate;overflow:hidden;padding:56px 0}.cta:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(13,14,15,.98),rgba(13,14,15,.76)),url('../images/production.webp') center 52%/cover}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.cta .section-title{font-size:clamp(36px,4.5vw,58px)}.cta .section-copy{color:#d7d7d7;margin:0 0 18px}.contact-strip{padding:80px 0;background:#f7f7f5}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.contact-card{background:#fff;border:1px solid var(--line);padding:30px}.contact-card h3{margin:0 0 12px;font-size:20px}.contact-row{display:flex;gap:13px;align-items:start;margin:18px 0}.contact-row .ci{width:30px;height:30px;border-radius:50%;background:#f8eeee;display:grid;place-items:center;color:var(--red);flex-shrink:0}.contact-row strong{font-size:13px}.contact-row p{margin:2px 0 0;font-size:13px;color:var(--muted)}.contact-card .buttons-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.footer{background:white;border-top:1px solid var(--line)}.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:35px;padding:60px 0}.footer .logo{font-size:28px;display:inline-block;margin-bottom:14px}.footer-about{font-size:12px;color:var(--muted);max-width:250px}.footer h4{font-size:13px;margin:4px 0 16px}.footer ul{list-style:none;margin:0;padding:0}.footer li{margin:9px 0;font-size:12px;color:var(--muted)}.footer li a:hover{color:var(--red)}.social-links{display:flex;gap:12px;flex-wrap:wrap}.social-links a{border:1px solid var(--line);padding:8px 11px;font-size:11px;font-weight:750}.social-links a:hover{border-color:var(--red);color:var(--red)}.footer-bottom{background:#f8f8f8;border-top:1px solid #eee;padding:16px 0;font-size:11px;color:#777}.footer-bottom .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.floating-wa{position:fixed;right:22px;bottom:22px;z-index:80;background:#1db45a;color:white;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 28px #0004;transition:transform .2s}.floating-wa .wa-icon{width:27px;height:27px}.floating-wa:hover{transform:translateY(-3px)}
/* detail pages */
.detail-hero{background:#151515;color:white;padding:75px 0 80px;position:relative;overflow:hidden}.detail-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.detail-hero .section-title{font-size:clamp(55px,6.2vw,88px);margin-bottom:18px}.detail-hero p:not(.eyebrow){max-width:520px;color:#d0d0d0;font-size:15px}.detail-hero-photo{height:390px;overflow:hidden}.detail-hero-photo img{height:100%;width:100%;object-fit:cover}.breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:35px;text-transform:uppercase;font-weight:750;letter-spacing:.1em;font-size:10px;color:#bbb}.breadcrumb span:last-child{color:white}.detail-section{padding:90px 0}.detail-two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.detail-two p{color:var(--muted);font-size:14px}.detail-list{list-style:none;margin:25px 0;padding:0}.detail-list li{padding:12px 0;border-bottom:1px solid #e4e4e4;font-size:14px}.detail-list li:before{content:'✓';font-weight:900;color:var(--red);margin-right:14px}.quote-panel{background:#f7f7f5;padding:30px;border:1px solid #eaeaea}.quote-panel h3{font-size:27px;font-family:var(--display);line-height:1;margin:0 0 10px;text-transform:uppercase}.quote-panel>p{color:var(--muted);font-size:12px;margin:0 0 22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:6px}.field-full{grid-column:1/-1}.field label{font-size:11px;font-weight:800;text-transform:uppercase}.field input,.field select,.field textarea{background:white;border:1px solid #d9d9d9;min-height:47px;border-radius:1px;padding:11px 12px;color:#222;outline:none;width:100%}.field textarea{resize:vertical;min-height:104px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px #d9272f1b}.quote-note{display:block;margin:10px 0 0;font-size:11px;color:#777}.cards-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.info-card{padding:27px;border:1px solid var(--line);background:white}.info-card .num{display:block;font-family:var(--display);font-size:44px;color:var(--red)}.info-card h3{margin:5px 0 10px;font-size:17px}.info-card p{margin:0;color:var(--muted);font-size:13px}.faq{max-width:850px;margin:0 auto}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{list-style:none;cursor:pointer;font-size:15px;font-weight:800;display:flex;justify-content:space-between;gap:15px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:22px;color:var(--red);line-height:1}.faq details[open] summary:after{content:'−'}.faq details p{font-size:13px;color:var(--muted);margin-bottom:0}.mini-cta{padding:65px 0;text-align:center;background:#181818;color:white}.mini-cta p{max-width:560px;margin:12px auto 22px;color:#bbb}.back-top{position:fixed;bottom:89px;right:28px;z-index:60;width:44px;height:44px;border:1px solid #ddd;background:white;color:#333;display:none;place-items:center;box-shadow:0 5px 16px #0002}.back-top.visible{display:grid}
/* lightbox */
.lightbox{position:fixed;z-index:200;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:70px 25px 55px}.lightbox[aria-hidden="false"]{display:flex}.lightbox figure{margin:0;max-width:min(900px,90vw);max-height:80vh;display:flex;flex-direction:column;align-items:center;gap:13px}.lightbox img{max-height:70vh;width:auto;object-fit:contain}.lightbox figcaption{color:#eee;font-size:13px}.lightbox-close{position:absolute;top:20px;right:23px;width:44px;height:44px;color:white;border:1px solid #777;background:transparent;font-size:28px;line-height:1}.lightbox-close:hover{background:#333}
@media(max-width:1060px){.container{width:min(var(--container),calc(100% - 48px))}.desktop-nav{gap:19px}.header-actions{margin-left:0}.header .btn{padding:12px 13px}.hero h1{font-size:clamp(60px,7vw,85px)}.about-content{padding:42px 30px}.about-image{min-height:560px}.step{padding:20px 7px}.portfolio-grid{grid-auto-rows:155px}}
@media(max-width:790px){.container{width:calc(100% - 36px)}.topbar-links{display:none}.topbar-inner{justify-content:center;text-align:center}.header-inner{min-height:67px}.logo{font-size:32px}.desktop-nav,.header-actions .btn{display:none}.nav-toggle{display:flex}.mobile-nav{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;max-height:0;overflow:hidden;box-shadow:0 15px 30px #0001;transition:max-height .28s}.mobile-nav.open{max-height:430px}.mobile-nav a{display:block;padding:15px 25px;border-bottom:1px solid #eee;font-size:14px;font-weight:800}.mobile-nav a:hover{color:var(--red)}.hero,.hero-inner{min-height:660px}.hero:before{background:linear-gradient(90deg,rgba(16,17,18,.96),rgba(16,17,18,.65) 65%,rgba(16,17,18,.3))}.hero-photo{inset:0 0 0 20%;opacity:.75}.hero-photo:after{background:linear-gradient(0deg,#101112,transparent 65%)}.hero-inner{align-items:end;padding:55px 0 70px}.hero-content{max-width:640px}.hero h1{font-size:clamp(60px,11.5vw,95px)}.hero-note{display:none}.proof-inner{grid-template-columns:repeat(2,1fr);row-gap:0}.proof-item{min-height:58px;border-bottom:1px solid var(--line)}.proof-item:nth-child(3){border-left:none}.categories{gap:14px}.category-content{padding:16px}.category-title{font-size:23px}.category-num{display:none}.about-grid{grid-template-columns:1fr}.about-image{min-height:440px}.about-content{padding:60px 25px}.section{padding:75px 0}.section-heading{align-items:start}.portfolio-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:160px}.process-flex{grid-template-columns:1fr;gap:25px}.cta-inner{align-items:start;flex-direction:column;gap:22px}.contact-grid,.detail-hero-inner,.detail-two{grid-template-columns:1fr;gap:32px}.detail-hero{padding:42px 0}.detail-hero-photo{height:350px}.footer-main{grid-template-columns:repeat(2,1fr);gap:32px}.cards-three{gap:12px}}
@media(max-width:560px){.section{padding:62px 0}.section-title{font-size:39px}.section-heading{display:block}.section-copy{font-size:13px}.hero,.hero-inner{min-height:590px}.hero h1{font-size:clamp(54px,12.2vw,75px)}.hero h2{font-size:16px}.hero-photo{inset:0 0 0 16%;opacity:.52}.hero-content{padding-top:150px}.hero-inner{padding-bottom:56px}.hero-buttons{gap:9px}.hero-buttons .btn{padding:14px 15px}.proof-item{font-size:9px;gap:7px}.proof-icon{font-size:18px}.categories{grid-template-columns:1fr;gap:17px}.category-card img{aspect-ratio:1.56}.category-content{padding:21px}.category-title{font-size:28px}.category-content p{max-width:initial}.category-num{display:block}.about-image{min-height:370px}.about-badge strong{min-width:108px;min-height:88px;font-size:42px}.about-badge>div{font-size:11px;padding:12px}.about-content{padding:48px 18px}.feature-grid{gap:21px 11px}.feature{gap:8px}.feature h3{font-size:11px}.feature p{font-size:10px}.feature-icon{min-width:25px;height:27px}.portfolio-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:145px;gap:7px}.work:nth-child(1){grid-row:span 2}.work:nth-child(7){grid-column:span 2}.work-info{font-size:10px;opacity:1}.work:after{opacity:1}.steps{grid-template-columns:repeat(2,1fr)}.step:nth-child(3):before{content:none}.step+.step:before{left:-8px}.step:nth-child(4):before{left:-8px}.cta{padding:42px 0}.cta .section-title{font-size:43px}.contact-strip{padding:55px 0}.contact-card{padding:23px}.footer-main{padding:43px 0;gap:24px 16px}.footer-main h4{font-size:12px}.footer li{font-size:11px}.footer-bottom{padding-bottom:88px}.floating-wa{bottom:18px;right:16px;width:53px;height:53px}.back-top{bottom:83px;right:20px}.detail-hero .section-title{font-size:57px}.detail-hero-photo{height:235px}.detail-section{padding:60px 0}.quote-panel{padding:22px}.form-grid,.cards-three{grid-template-columns:1fr}.field-full{grid-column:auto}.mini-cta .section-title{font-size:37px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}