:root {
  --ink: #252722;
  --paper: #303331;
  --soft: #393936;
  --line: #57564e;
  --yellow: #d9be7b;
  --coral: #d9be7b;
  --muted: #c6c3bb;
  --display: "Space Grotesk", sans-serif;
  --body: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at 50% 0, #393936 0, var(--paper) 55%); color: #f4f0e7; font: 16px/1.5 var(--body); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-header { height: 76px; padding: 0 6vw; display: flex; align-items: center; justify-content: space-between; background: rgba(48,51,49,.96); border-bottom: 1px solid rgba(217,190,123,.2); position: relative; z-index: 4; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 12px/.95 var(--display); letter-spacing: -.03em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font: 700 11px var(--display); }
.nav-links { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 13px; font-weight: 600; }
.nav-links a:not(.nav-cta), .text-link, .google-link { border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav-links a:not(.nav-cta):hover, .text-link:hover, .google-link:hover { border-color: currentColor; }
.nav-cta { background: var(--yellow); color: var(--ink); padding: 11px 15px; }
.nav-cta span, .button span, .text-link span, .google-link span { margin-left: 12px; }
.menu-toggle { display: none; border: 0; background: none; color: inherit; font: 700 12px var(--body); }
.section-pad { padding: 88px 8vw; }
.hero { min-height: min(760px, calc(100svh - 76px)); display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate; padding-top: 58px; padding-bottom: 58px; background: radial-gradient(ellipse at 50% 42%, #4a463e 0, #393936 37%, #303331 100%); }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero::before { inset: 24px; border: 1px solid rgba(219,190,123,.2); }
.hero::after { width: min(78vw, 920px); aspect-ratio: 1; border: 1px solid rgba(219,190,123,.08); border-radius: 50%; box-shadow: 0 0 0 44px rgba(219,190,123,.025), 0 0 0 110px rgba(219,190,123,.02); }
.eyebrow { margin: 0 0 24px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 38px; height: 1px; margin: 0 0 3px 10px; background: currentColor; }
h1, h2 { margin: 0; font: 600 clamp(48px, 6vw, 78px)/.94 var(--display); letter-spacing: -.07em; }
h1 em, h2 em, h3 em { color: var(--coral); font-style: normal; }
.hero-copy { width: min(100%, 1060px); text-align: center; }
.hero-frame { position: relative; padding: clamp(46px, 8vw, 94px) 20px; }
.hero-frame::before { content: ""; position: absolute; inset: 0 7%; border: 1px solid rgba(219,190,123,.32); pointer-events: none; }
.hero-kicker { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 28px; color: #d9be7b; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.hero-kicker span { width: 34px; height: 1px; background: currentColor; opacity: .7; }
.hero-ornament { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: 22px; color: #d9be7b; font: 500 10px var(--display); letter-spacing: .18em; }
.hero-ornament span { width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); }
.hero-ornament b { font-weight: 500; }
.hero h1 { color: #f4f0e7; font: 500 clamp(54px, 9vw, 112px)/.9 var(--display); letter-spacing: .025em; }
.hero h1 .hero-amp { color: #d9be7b; font: 400 .68em/1 Georgia, serif; }
.hero h1 em { color: #d9be7b; font: 400 .9em/1 Georgia, "Times New Roman", serif; letter-spacing: .11em; }
.hero-intro { max-width: 510px; margin: 28px auto 30px; color: #c6c3bb; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; }
.button { display: inline-block; width: auto; padding: 14px 17px; border: 0; font: 700 12px var(--body); cursor: pointer; }
.button-dark { background: var(--ink); color: #fff; }
.button-gold { padding: 15px 19px; background: #d9be7b; color: #252722; letter-spacing: .02em; }
.button-yellow { width: 100%; background: var(--yellow); color: var(--ink); text-align: left; }
.text-link, .google-link { padding-bottom: 4px; font-size: 12px; font-weight: 700; }
.hero-note { margin-top: 38px; color: #c6c3bb; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.sun-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--coral); }
.ticker { overflow: hidden; padding: 12px 0; background: var(--ink); color: #fff; white-space: nowrap; font: 700 10px var(--display); letter-spacing: .13em; }
.ticker div { animation: scroll 22s linear infinite; }
.ticker span { margin: 0 17px; color: var(--yellow); }
.services { background: linear-gradient(180deg, #393936, #303331); border-top: 1px solid rgba(217,190,123,.12); border-bottom: 1px solid rgba(217,190,123,.12); }
.eyebrow { color: var(--yellow); }
h2 em, h3 em { color: var(--yellow); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .015em; }
.section-heading { display: grid; grid-template-columns: .7fr 1.3fr; gap: 22px; max-width: 760px; margin-bottom: 46px; }
.section-heading h2 { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(44px, 5.2vw, 70px); }
.section-heading p:last-child { grid-column: 2; max-width: 350px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.services .section-heading { max-width: 900px; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card { min-height: 350px; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; background: linear-gradient(145deg, #393936, #2e302d); color: #f4f0e7; border: 1px solid rgba(217,190,123,.22); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-5px); border-color: var(--yellow); }
.service-card-top { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: auto; }
.card-number { color: #b5c0b7; font: 700 10px var(--display); letter-spacing: .12em; }
.service-icon { width: 70px; height: 70px; display: grid; place-items: center; background: rgba(247,200,66,.12); color: var(--yellow); }
.service-vehicle .service-icon { background: rgba(217,190,123,.12); color: var(--yellow); }
.service-icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin: 42px 0 0; font: 600 clamp(29px, 3vw, 40px)/.98 var(--display); letter-spacing: -.06em; }
.service-card h3 em { color: var(--yellow); }
.service-vehicle h3 em { color: var(--yellow); }
.service-card p { max-width: 300px; margin: 16px 0 26px; color: #c0c8c2; font-size: 13px; line-height: 1.65; }
.service-card-link { width: 100%; display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 700; }
.service-card-link span { color: var(--yellow); font-size: 16px; line-height: .8; }
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; background: radial-gradient(ellipse at 85% 50%, #393936 0, var(--paper) 60%); }
.work-intro { max-width: 430px; }
.work-intro h2 { margin-bottom: 25px; font-size: clamp(48px, 5.5vw, 76px); }
.work-intro > p:not(.eyebrow) { margin-bottom: 30px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.work-stack { height: 470px; position: relative; }
.work-photo { position: absolute; width: 68%; height: 65%; padding: 20px; display: flex; align-items: flex-end; font: 700 11px var(--display); letter-spacing: .08em; }
.photo-one { top: 0; right: 0; background: linear-gradient(0deg, rgba(25,27,25,.62), transparent 60%), url("https://sunshinecoastsignage.com.au/wp-content/uploads/2022/12/vehicle-signs-noosa-1024x576.jpeg") center/cover; color: #fff; }
.photo-two { bottom: 0; left: 0; background: linear-gradient(0deg, rgba(25,27,25,.62), transparent 60%), url("https://sunshinecoastsignage.com.au/wp-content/uploads/2022/11/Wall-Digital-Print.-Wall-Mural-1024x698.jpg") center/cover; color: #fff; }
.work-photo { border: 1px solid rgba(217,190,123,.35); }
.work-badge { position: absolute; right: 18%; bottom: 11%; width: 100px; height: 100px; display: grid; place-items: center; border: 1px solid rgba(37,39,34,.28); border-radius: 50%; background: var(--yellow); color: var(--ink); text-align: center; font: 700 10px/.95 var(--display); transform: rotate(10deg); }
.blog { background: linear-gradient(180deg, #393936, #303331); border-top: 1px solid rgba(217,190,123,.12); border-bottom: 1px solid rgba(217,190,123,.12); }
.blog-heading { max-width: 760px; margin-bottom: 44px; }
.blog-heading h2 { font-size: clamp(44px, 5.2vw, 70px); }
.blog-heading > p:last-child { max-width: 390px; margin: 22px 0 0; color: var(--muted); font-size: 14px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-card { min-width: 0; overflow: hidden; background: linear-gradient(145deg, #393936, #2e302d); border: 1px solid rgba(217,190,123,.22); transition: transform .25s ease, border-color .25s ease; }
.blog-card:hover { transform: translateY(-5px); border-color: var(--yellow); }
.blog-card > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card-content { padding: 22px; }
.blog-card-label { margin: 0 0 12px; color: var(--yellow); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.blog-card h3 { min-height: 2.2em; margin: 0 0 24px; font: 600 clamp(22px, 2.5vw, 30px)/1.05 var(--display); letter-spacing: -.04em; }
.blog-card-link { display: block; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.18); font-size: 11px; font-weight: 700; }
.post-page { min-height: 65vh; background: radial-gradient(ellipse at 50% 0, #393936 0, var(--paper) 65%); }
.post-article { width: min(100%, 900px); margin: 0 auto; }
.post-back-link { display: inline-block; margin-bottom: 44px; }
.post-article > .eyebrow { margin-bottom: 16px; }
.post-article h1 { max-width: 800px; font-size: clamp(42px, 7vw, 76px); }
.post-hero-image { height: auto; margin: 42px 0; overflow: hidden; border: 1px solid rgba(217,190,123,.35); }
.post-hero-image img { height: auto; max-height: 650px; object-fit: cover; }
.post-copy { max-width: 720px; margin: 0 auto; }
.post-copy p { margin: 0 0 24px; color: #d0cdc5; font-size: 16px; line-height: 1.85; }
.post-copy a { color: var(--yellow); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-copy a:hover, .post-copy a:focus-visible { color: #f4f0e7; }
.post-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 42px 0 0; }
.post-gallery figure { margin: 0; }
.post-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.post-gallery figcaption { margin-top: 9px; color: var(--muted); font-size: 12px; }
.post-not-found { max-width: 900px; margin: 0 auto; color: var(--muted); }
.product-page { padding-top: 0; }
.product-hero { min-height: 540px; padding: 80px 8vw; display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; background: radial-gradient(ellipse at 75% 20%, #45423b, var(--paper) 65%); }
.product-hero-copy { max-width: 600px; }
.product-hero h1 { margin: 0 0 24px; font-size: clamp(46px, 6.4vw, 82px); }
.product-hero-copy > p:not(.eyebrow) { max-width: 550px; margin: 0 0 30px; color: #d0cdc5; font-size: 16px; line-height: 1.8; }
.product-hero-image { height: 390px; margin: 0; overflow: hidden; border: 1px solid rgba(217,190,123,.35); }
.product-hero-image img { object-fit: cover; }
.product-content { max-width: 1040px; margin: 0 auto; }
.product-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.product-intro h2, .product-detail h2 { margin-bottom: 20px; font-size: clamp(34px, 4vw, 52px); }
.product-intro > p:not(.eyebrow), .product-detail > p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.product-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 64px; }
.product-benefit { padding: 24px; background: linear-gradient(145deg, #393936, #2e302d); border: 1px solid rgba(217,190,123,.22); }
.product-benefit h3 { margin: 0 0 12px; color: var(--yellow); font: 600 21px/1.15 var(--display); }
.product-benefit p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.product-detail { max-width: 760px; margin: 0 auto 58px; }
.product-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 42px 0 64px; }
.product-gallery figure { margin: 0; overflow: hidden; border: 1px solid rgba(217,190,123,.22); background: #2e302d; }
.product-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.product-gallery figcaption { padding: 12px 15px; color: var(--muted); font-size: 12px; }
.product-cta { padding: 42px; background: linear-gradient(135deg, #393936, #2e302d); border: 1px solid rgba(217,190,123,.3); text-align: center; }
.product-cta h2 { margin-bottom: 16px; font-size: clamp(32px, 4vw, 48px); }
.product-cta p { max-width: 560px; margin: 0 auto 24px; color: var(--muted); font-size: 14px; }
.product-cta .button { display: inline-block; width: auto; }
.product-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 28px; font-size: 12px; }
.product-related a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.reviews { display: grid; grid-template-columns: 1fr 1fr; min-height: 450px; background: linear-gradient(125deg, #393936, #303331 72%); border-top: 1px solid rgba(217,190,123,.2); border-bottom: 1px solid rgba(217,190,123,.2); }
.reviews h2 { font-size: clamp(48px, 5.5vw, 75px); }
.review-content { max-width: 520px; padding-top: 24px; }
.stars { letter-spacing: .2em; font-size: 20px; }
.review-content blockquote { margin: 25px 0; font: 500 clamp(24px, 2.6vw, 34px)/1.12 var(--display); letter-spacing: -.04em; }
.review-author { font-size: 12px; font-weight: 600; }
.review-author span { margin: 0 7px; }
.google-link { display: inline-block; margin-top: 28px; }
.review-note { max-width: 270px; margin-top: 20px; opacity: .7; font-size: 11px; }
.quote { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; background: radial-gradient(ellipse at 15% 50%, #393936, #252722 75%); color: #f4f0e7; }
.quote h2 { font-size: clamp(47px, 5.5vw, 75px); }
.quote-copy > p:not(.eyebrow) { max-width: 365px; margin: 28px 0; color: #c6c3bb; }
.contact-details { display: flex; flex-direction: column; gap: 5px; margin-top: 48px; font-size: 13px; }
.contact-details a { color: var(--yellow); }
.quote-form { align-self: start; padding: 30px; background: linear-gradient(145deg, #393936, #303331); color: #f4f0e7; border: 1px solid rgba(217,190,123,.3); }
.quote-form label { display: block; margin-bottom: 20px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.quote-form input, .quote-form select, .quote-form textarea { display: block; width: 100%; padding: 11px 0 8px; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: #f4f0e7; font: 15px var(--body); }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: #9f9c93; }
.quote-form select option { background: #303331; color: #f4f0e7; }
.quote-form textarea { resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--yellow); }
.form-status { min-height: 18px; margin: 13px 0 0; font-size: 11px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 6vw; background: #292b28; border-top: 1px solid rgba(217,190,123,.24); font-size: 11px; }
.site-footer p { margin: 0; color: var(--muted); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .12s; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-30%); } }
@media (max-width: 760px) {
  .site-header { height: 68px; }
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 18px 7vw; flex-direction: column; align-items: flex-start; gap: 18px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .menu-toggle { display: block; }
  .section-pad { padding: 64px 7vw; }
  .hero { min-height: calc(100svh - 68px); padding: 38px 7vw; }
  .hero::before { inset: 12px; }
  .hero-frame { padding: 54px 10px; }
  .hero-frame::before { inset: 0; }
  .hero-kicker { gap: 9px; font-size: 8px; letter-spacing: .16em; }
  .hero-kicker span { width: 20px; }
  .hero h1 { font-size: clamp(48px, 13vw, 72px); }
  .hero-intro { max-width: 360px; margin: 24px auto; font-size: 14px; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .hero-note { margin-top: 30px; }
  .section-heading { display: block; margin-bottom: 36px; }
  .section-heading h2 { margin-bottom: 24px; font-size: 46px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 300px; }
  .blog-heading { margin-bottom: 36px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card h3 { min-height: 0; }
  .post-back-link { margin-bottom: 34px; }
  .post-hero-image { margin: 30px 0; }
  .post-copy p { font-size: 15px; }
  .post-gallery { grid-template-columns: 1fr; }
  .product-hero { min-height: 0; padding: 56px 7vw; grid-template-columns: 1fr; gap: 36px; }
  .product-hero-image { height: auto; aspect-ratio: 4 / 3; }
  .product-benefits { grid-template-columns: 1fr; margin-bottom: 48px; }
  .product-gallery { grid-template-columns: 1fr; }
  .product-cta { padding: 30px 20px; }
  .work { display: flex; flex-direction: column; gap: 45px; }
  .work-stack { width: 100%; height: 380px; }
  .work-photo { width: 73%; height: 63%; }
  .work-badge { right: 8%; bottom: 9%; }
  .reviews { display: block; min-height: 0; }
  .review-content { padding-top: 42px; }
  .quote { display: block; }
  .quote-copy { margin-bottom: 42px; }
  .site-footer { align-items: flex-start; flex-direction: column; padding: 25px 7vw; }
  .site-footer p { order: 3; }
  .site-footer > span { order: 2; }
}