/*
Theme Name: Grunge Printing & Graphics — Approved Layout
Theme URI: https://grungeprinting.com.au
Author: Grunge Printing & Graphics
Description: Custom one-page industrial printing and graphics theme.
Version: 2.2.0
Text Domain: grunge
*/
:root{--ink:#121313;--panel:#202121;--paper:#eae6dd;--muted:#aaa9a2;--gold:#c7a76c;--line:#474542}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.wrap{max-width:1190px;margin:0 auto;padding:0 27px}.topbar{border-bottom:1px solid #4a4a45;background:#111;position:sticky;top:0;z-index:20}.nav{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:inline-flex;flex-direction:column;font-weight:900;font-size:32px;line-height:.86;letter-spacing:-2px;transform:skew(-7deg)}.logo small{font-size:10px;letter-spacing:5.3px;font-weight:700;transform:skew(7deg);margin-top:10px}.links{display:flex;gap:28px;align-items:center;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.links a:hover{color:var(--gold)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;background:var(--gold);color:#141414;font-size:12px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;border:1px solid var(--gold);border-radius:0}.btn:hover{background:#e2c38a}.btn-outline{background:transparent;color:var(--paper);border-color:#8b8171}.btn-outline:hover{color:#121212}.hero{position:relative;min-height:630px;display:flex;align-items:center;background:radial-gradient(circle at 72% 45%,#4f483f 0%,transparent 40%),linear-gradient(115deg,#141414 10%,#262625 70%,#191919 100%);overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 42px,#ffffff07 42px 43px);opacity:.7}.hero .wrap{position:relative;width:100%;padding-top:85px;padding-bottom:95px}.eyebrow{text-transform:uppercase;letter-spacing:3.5px;font-size:12px;color:var(--gold);font-weight:900}.hero h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(74px,12vw,157px);letter-spacing:-1px;line-height:.85;margin:24px 0 24px;font-weight:900;max-width:900px}.hero h1 em{font-style:normal;color:var(--gold)}.hero p{font-size:22px;max-width:540px;color:#e1ded8;margin-bottom:35px}.actions{display:flex;gap:13px;flex-wrap:wrap}.hero-stamp{position:absolute;right:6%;bottom:55px;width:160px;height:160px;border:3px solid #a78e62;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:13px;font-weight:900;letter-spacing:2px;color:#d4bd8d;transform:rotate(15deg)}section{padding:90px 0}.section-lead{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:33px}.section-lead h2,.big-title{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(44px,6.5vw,78px);line-height:.99;letter-spacing:.3px;text-transform:uppercase;margin:11px 0}.section-lead p{max-width:390px;color:#bbb9b0;margin:0}.services{background:#191a1a}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service{background:#272828;min-height:225px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;border-top:3px solid #77664c;transition:transform .2s,background .2s}.service:hover{transform:translateY(-4px);background:#303131}.service .number{font-weight:900;font-size:13px;color:var(--gold)}.service h3{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-size:30px;line-height:1.02;margin:15px 0 8px}.service p{font-size:14px;color:#b8b6af;margin:0}.service .arrow{align-self:flex-end;color:var(--gold);font-size:24px}.split{display:grid;grid-template-columns:1fr 1fr}.split .copy{padding:75px max(27px,calc((100vw - 1190px)/2));padding-right:75px}.split .copy p{color:#c4c0b7;font-size:17px;max-width:470px}.split .visual{min-height:475px;background:linear-gradient(130deg,#373736,#141515);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.split .visual:before{content:"";position:absolute;width:68%;height:80%;border:2px solid #7b6b51;transform:rotate(-8deg)}.visual strong{position:relative;font-family:Impact,'Arial Narrow',sans-serif;text-align:center;font-size:clamp(45px,5vw,78px);line-height:.95;color:#ded8ca;transform:rotate(-8deg)}.visual strong span{color:var(--gold)}.about{background:#e4dfd5;color:#191919}.about .section-lead p{color:#57534d}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:30px}.benefit{border-top:3px solid #c0a070;padding-top:22px}.benefit h3{text-transform:uppercase;font-size:17px;letter-spacing:.8px}.benefit p{color:#595650}.dark-banner{background:#242323;text-align:center;padding:85px 20px}.dark-banner h2{margin:10px auto 25px;font-size:clamp(45px,7vw,90px);max-width:900px}.quote{background:#111}.quote-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:75px}.quote-info p{color:#bfbcb5;max-width:380px}.contact-line{margin-top:24px;font-size:17px;font-weight:700}.contact-line span{display:block;color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase}.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.field input,.field select,.field textarea{width:100%;background:#222;color:#f4f0e9;border:1px solid #4b4945;padding:14px;border-radius:0}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold)}.field input[type=file]{padding:11px}.note{font-size:12px;color:#aaa}.message{border-left:3px solid var(--gold);padding:13px;margin-bottom:20px;background:#242424}.honeypot{position:absolute;left:-9999px}.footer{background:#080808;padding:39px 0;border-top:1px solid #393939}.footer .wrap{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer p{font-size:12px;color:#aaa}.footer a:hover{color:var(--gold)}@media(max-width:850px){.links{display:none}.service-grid,.benefits{grid-template-columns:repeat(2,1fr)}.split,.quote-layout{grid-template-columns:1fr}.split .copy{padding:70px 27px}.hero-stamp{display:none}}@media(max-width:550px){.nav{min-height:73px}.logo{font-size:27px}.hero{min-height:550px}.hero .wrap{padding-top:65px;padding-bottom:65px}.hero h1{font-size:75px}.hero p{font-size:18px}.section-lead{display:block}.service-grid,.benefits,.quote-form{grid-template-columns:1fr}.service{min-height:200px}.field.full{grid-column:auto}section{padding:65px 0}.footer .wrap{display:block}}

/* Version 1.1: original approved industrial photo-led direction. */
.hero{min-height:680px;background:linear-gradient(90deg,rgba(7,8,8,.97) 0%,rgba(8,8,8,.83) 40%,rgba(8,8,8,.18) 100%),url('assets/workshop-wide.png') center 48%/cover no-repeat}
.hero:before{background:none}
.hero .wrap{padding-top:98px;padding-bottom:108px}
.hero h1{font-size:clamp(72px,9vw,128px);max-width:730px}
.hero p{font-size:22px;margin-bottom:10px}
.hero .hero-detail{font-size:16px;color:#d0ccc4;line-height:1.6;max-width:465px;margin-bottom:27px}
.services{background:#e8e3d9;color:#161616}
.services .section-lead h2{font-size:clamp(38px,5vw,60px)}
.services .section-lead p{color:#4b4943}
.service-grid{gap:12px}
.service{background-color:#202020;background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.88)),url('assets/workshop-interior.png');background-size:cover;background-position:center;min-height:250px;border:0;color:#fff;padding:23px}
.service:hover{background-color:#262626;transform:translateY(-3px)}
.service .number,.service .arrow{color:#e2bd7d}
.service h3{text-shadow:0 2px 8px #000;font-size:31px}
.service p{color:#f2f0e9;max-width:240px;text-shadow:0 2px 7px #000}
.service-apparel{background-position:5% 32%}
.service-signs{background-image:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.85)),url('assets/workshop-wide.png');background-position:50% 22%}
.service-stickers{background-position:20% 70%}
.service-print{background-position:75% 55%}
.service-vehicle{background-image:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.89)),url('assets/silverado-2500.png');background-position:center 68%}
.service-promo{background-position:93% 45%}
.split{background:#111}
.split .visual{background:linear-gradient(0deg,rgba(0,0,0,.74),rgba(0,0,0,.08)),url('assets/workshop-interior.png') center/cover no-repeat}
.split .visual:before{display:none}
.split .visual strong{transform:none;font-size:clamp(38px,4vw,70px);text-shadow:0 3px 12px #000}
.about-showcase{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;gap:34px}
.about-showcase .benefits{display:flex;flex-direction:column;gap:10px;margin:0}
.about-showcase .benefit{padding-top:12px}
.workshop-photo{margin:0;position:relative;min-height:340px;overflow:hidden;background:#252525}
.workshop-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.workshop-photo figcaption{position:absolute;bottom:15px;left:15px;background:#151515df;color:#fff;padding:11px 17px;font-size:12px;font-weight:900;letter-spacing:2px}
.dark-banner{min-height:470px;display:flex;align-items:center;text-align:left;background:linear-gradient(90deg,rgba(8,8,8,.97) 0%,rgba(8,8,8,.89) 40%,rgba(8,8,8,.15) 90%),url('assets/silverado-2500.png') center 64%/cover no-repeat;padding:65px 0}
.dark-banner .wrap{width:100%}
.dark-banner .banner-copy{max-width:515px}
.dark-banner h2{font-size:clamp(54px,6vw,87px);margin:9px 0 18px}
.dark-banner p{max-width:410px;color:#e0ddd5;margin:0 0 24px}
@media(max-width:850px){.about-showcase{grid-template-columns:1fr}.workshop-photo{min-height:350px}.hero{background-position:57% 50%}}
@media(max-width:550px){.hero{min-height:620px;background-image:linear-gradient(90deg,rgba(7,8,8,.95),rgba(8,8,8,.66)),url('assets/workshop-wide.png')}.hero h1{font-size:clamp(59px,17vw,78px)}.hero .hero-detail{font-size:14px}.service-grid{grid-template-columns:1fr}.service{min-height:220px}.dark-banner{background-position:62% 50%}.workshop-photo{min-height:270px}}

/* Approved homepage artwork direction — compact, photo-led sections. */
.topbar{position:relative;background:#090909;border:0}
.wrap{max-width:1190px}
.nav{min-height:75px}
.logo{font-family:Arial,Helvetica,sans-serif;font-size:34px;letter-spacing:-1.8px;transform:none}
.logo small{letter-spacing:2px;font-size:11px;transform:none;margin-top:9px}
.links{gap:29px}
.hero{min-height:490px;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.85) 24%,rgba(0,0,0,.06) 72%),url('assets/workshop-wide.png') center 53%/cover no-repeat}
.hero .wrap{padding-top:37px;padding-bottom:48px}
.hero .eyebrow{display:none}
.hero h1{font-size:clamp(65px,7.6vw,100px);line-height:.82;letter-spacing:-.6px;margin:0 0 18px;max-width:430px}
.hero h1 em{color:var(--paper)}
.hero h1 em:after{content:".";color:var(--gold)}
.hero p{max-width:380px;font-size:20px;line-height:1.18;color:var(--gold);font-weight:700;margin:0 0 7px}
.hero .hero-detail{max-width:355px;font-size:13px;line-height:1.42;color:#fff;margin-bottom:15px;font-weight:400}
.btn{padding:12px 20px;font-size:12px}
.services{padding:28px 0 22px;background:#f0eee9}
.services .section-lead{justify-content:center;margin-bottom:14px}
.services .section-lead h2{font-size:36px;margin:0;text-align:center;color:#121212}
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.service{position:relative;aspect-ratio:293/154;min-height:0;padding:0;border:0;background-image:url('assets/approved-layout.png');background-size:349.5% auto;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #ddd}
.service:hover{transform:translateY(-2px);filter:brightness(1.08)}
.service-apparel{background-image:url('assets/approved-layout.png');background-position:8.1% 32.78%}
.service-signs{background-image:url('assets/approved-layout.png');background-position:50.0% 32.78%}
.service-stickers{background-image:url('assets/approved-layout.png');background-position:91.8% 32.78%}
.service-print{background-image:url('assets/approved-layout.png');background-position:8.1% 44.50%}
.service-vehicle{background-image:url('assets/approved-layout.png');background-position:50.0% 44.50%}
.service-promo{background-image:url('assets/approved-layout.png');background-position:91.8% 44.50%}
.service .number,.service .arrow,.service>div{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.split{grid-template-columns:43% 57%;min-height:250px;background:#0d0d0d}
.split .visual{grid-column:1;grid-row:1;background-image:url('assets/approved-layout.png');background-size:243.8% auto;background-position:0 59.8%;min-height:250px}
.split .visual strong{display:none}
.split .copy{grid-column:2;grid-row:1;padding:25px 7% 23px 4%}
.split .copy .eyebrow{display:none}
.split .copy .big-title{font-size:clamp(31px,3.7vw,53px);margin:0}
.split .copy .big-title br{display:none}
.split .copy p{font-size:14px;line-height:1.36;margin:5px 0 10px}
.split .copy strong{font-size:13px;letter-spacing:1px}
.about{padding:17px 0;background:#f1efeb}
.about .section-lead{margin:0}
.about .section-lead h2{font-size:clamp(28px,3vw,39px)}
.about .section-lead .eyebrow,.about .section-lead p{display:none}
.about-showcase{grid-template-columns:1fr 1.05fr;gap:25px;align-items:start}
.about-showcase .benefits{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.about-showcase .benefit{border:0;padding:0}
.about-showcase .benefit h3{font-size:12px;line-height:1.16;margin:9px 0 5px}
.about-showcase .benefit p{font-size:11px;line-height:1.3;margin:0}
.workshop-photo{min-height:220px}
.workshop-photo figcaption{display:none}
.dark-banner{min-height:245px;padding:20px 0;background:linear-gradient(90deg,rgba(0,0,0,.98),rgba(0,0,0,.85) 38%,rgba(0,0,0,.05) 68%),url('assets/silverado-2500.png') right 64%/cover no-repeat}
.dark-banner h2{font-size:clamp(45px,5vw,65px);margin:0 0 8px}
.dark-banner .eyebrow{display:none}
.dark-banner p{font-size:14px;line-height:1.4;max-width:400px;margin:0 0 13px}
.quote{background:linear-gradient(100deg,#d5ae80,#b8844c 75%,#c79b69);color:#151515;padding:27px 0}
.quote-layout{grid-template-columns:250px 1fr;gap:27px}
.quote-info .eyebrow,.quote-info>p,.contact-line{display:none}
.quote-info .big-title{font-size:clamp(37px,4.7vw,58px);margin:0}
.quote-form{grid-template-columns:1fr 1fr;gap:9px}
.field label{font-size:11px}
.field input,.field select,.field textarea{background:#fff;color:#141414;border:1px solid #d7c4a9;padding:8px}
.quote .field button{background:#111;color:#fff;border:1px solid #111}
.quote .note{color:#3c2d1d}
.footer{padding:25px 0;background:#0b0b0b}
@media(max-width:850px){.hero{background-position:60% 50%}.split .copy{padding:24px}.about-showcase{grid-template-columns:1fr 1fr}.quote-layout{grid-template-columns:220px 1fr;gap:15px}}
@media(max-width:650px){.topbar .nav{min-height:70px}.hero{min-height:525px;background:linear-gradient(90deg,rgba(0,0,0,.89),rgba(0,0,0,.45)),url('assets/workshop-wide.png') 57% 45%/cover no-repeat}.hero .wrap{padding-top:45px}.hero h1{font-size:clamp(58px,15vw,83px)}.hero p{font-size:19px}.services .section-lead h2{font-size:34px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.split{display:flex;flex-direction:column}.split .visual{min-height:205px;width:100%;order:0;background-size:230% auto;background-position:0 60%}.split .copy{order:1;padding:25px 27px}.about .section-lead h2{font-size:34px}.about-showcase{display:flex;flex-direction:column}.workshop-photo{width:100%;min-height:250px}.dark-banner{min-height:350px;background-position:65% center}.quote-layout{grid-template-columns:1fr}.quote-info .big-title{font-size:45px}.quote-info .big-title br{display:none}.quote-form{grid-template-columns:1fr 1fr}.footer .wrap{display:flex;align-items:flex-start;flex-direction:column}}
@media(max-width:420px){.service-grid{gap:7px}.service{aspect-ratio:293/154}.quote-form{grid-template-columns:1fr}.hero h1{font-size:57px}.hero .hero-detail{font-size:13px}}

/* Final art direction refinements. */
@media(min-width:651px){.hero{background-image:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.96) 22%,rgba(8,8,8,.65) 42%,rgba(8,8,8,.04) 68%),url('assets/approved-layout.png');background-size:cover,145% 500%;background-position:center,right -100px}}
@media(max-width:650px){.hero h1{line-height:.98;letter-spacing:0;font-size:clamp(51px,13.2vw,68px)}.hero .wrap{padding-top:36px;padding-bottom:40px}}
@media(max-width:420px){.hero h1{font-size:51px;line-height:.99}}
