:root {
  --ink: #17221e;
  --paper: #fbfcf9;
  --soft: #eef2ed;
  --line: #d9e0d9;
  --yellow: #f7c842;
  --coral: #e86f59;
  --muted: #68736c;
  --display: "Space Grotesk", sans-serif;
  --body: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); 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: var(--paper); border-bottom: 1px solid var(--line); 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(--coral); color: #fff; 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(--ink); color: var(--paper); 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; font: 700 12px var(--body); }
.section-pad { padding: 88px 8vw; }
.hero { min-height: 620px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 7vw; align-items: center; padding-top: 58px; background: #fff; }
.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-intro { max-width: 410px; margin: 26px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.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-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: 45px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sun-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--coral); }
.hero-visual { height: 455px; position: relative; }
.image-frame { height: 100%; overflow: hidden; background: var(--coral); }
.image-frame img { filter: saturate(.82); }
.visual-tag { position: absolute; font: 700 11px/1.1 var(--display); letter-spacing: .04em; box-shadow: 5px 5px 0 var(--ink); }
.tag-top { top: 24px; left: -18px; padding: 12px; background: var(--yellow); }
.tag-bottom { right: 18px; bottom: 18px; color: #fff; mix-blend-mode: difference; }
.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: var(--soft); }
.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; }
.service-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.service-card { min-height: 260px; padding: 22px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid rgba(23,34,30,.08); transition: transform .25s ease; }
.service-card:hover { transform: translateY(-5px); }
.service-card h3 { margin: 0; font: 600 29px/.95 var(--display); letter-spacing: -.06em; }
.service-card p { max-width: 225px; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.card-number { position: absolute; top: 20px; left: 22px; font: 600 11px var(--display); }
.card-arrow { position: absolute; top: 16px; right: 20px; font-size: 22px; }
.service-feature { grid-column: span 5; background: var(--yellow); }
.service-image { grid-column: span 4; color: #fff; background: var(--ink); }
.service-image img { position: absolute; inset: 0; z-index: 0; opacity: .55; }
.service-image h3, .service-image .card-number, .service-image .card-arrow { z-index: 1; color: #fff; }
.service-dark { grid-column: span 3; background: var(--ink); color: #fff; }
.service-dark p { color: #b5c0b7; }
.service-light { grid-column: span 4; background: #fff; }
.service-wide { grid-column: span 8; background: var(--coral); }
.service-wide h3 { font-size: 43px; }
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; background: #fff; }
.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: 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: url("https://sunshinecoastsignage.com.au/wp-content/uploads/2022/11/Wall-Digital-Print.-Wall-Mural-1024x698.jpg") center/cover; color: #fff; mix-blend-mode: multiply; }
.work-badge { position: absolute; right: 18%; bottom: 11%; width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); text-align: center; font: 700 10px/.95 var(--display); transform: rotate(10deg); }
.reviews { display: grid; grid-template-columns: 1fr 1fr; min-height: 450px; background: var(--coral); }
.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: var(--ink); color: #fff; }
.quote h2 { font-size: clamp(47px, 5.5vw, 75px); }
.quote-copy > p:not(.eyebrow) { max-width: 365px; margin: 28px 0; color: #aeb9b0; }
.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: 25px; background: #fff; color: var(--ink); }
.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: var(--ink); font: 15px var(--body); }
.quote-form textarea { resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--coral); }
.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: #fff; border-top: 1px solid var(--line); 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 { display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 42px; padding-top: 54px; }
  .hero h1 { font-size: 52px; }
  .hero-visual { height: 340px; }
  .tag-top { left: -10px; }
  .section-heading { display: block; margin-bottom: 36px; }
  .section-heading h2 { margin-bottom: 24px; font-size: 46px; }
  .service-grid { display: flex; flex-direction: column; }
  .service-card { min-height: 215px; }
  .service-wide h3 { font-size: 38px; }
  .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; }
}