/*
  Global stylesheet for the Graffiti‑Enz commercial website overhaul.

  This CSS file consolidates the styling used across all pages.  It
  implements a modern, professional look suitable for commercial and
  government procurement audiences while keeping the existing colour
  palette found on graffiti‑enz.com.au.  Everything is mobile responsive
  using simple grid and flexbox layouts.  Colours are defined as CSS
  custom properties at the top so the palette can be adjusted easily.
*/
:root {
  --navy: #071a2f;
  --navy-dark: #03101f;
  --teal: #0f5e7c;
  --green: #00a062;
  --green-soft: #e3f6ec;
  --grey: #f4f5f7;
  --text-main: #0c1520;
  --text-soft: #6b7280;
  --accent: #f4b41a;
  --border-soft: #dde2eb;
  --container-width: 1120px;
  --radius-lg: 14px;
  --shadow-soft: 0 12px 24px rgba(7, 26, 47, 0.12);
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-main);
  background: #ffffff;
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(6,18,32,.98), rgba(6,18,32,.92));
  border-bottom: 1px solid rgba(255,255,255,.08);
  height: 80px;
  display: flex;
  align-items: center;
  transition: height .18s ease, background .18s ease, box-shadow .18s ease;
}

header.is-scrolled{
  height: 60px;
  background: rgba(6,18,32,.98);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}


header.is-scrolled .brand-name{
  font-size: 16px;
}

.nav-inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 15px;
}

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

.product-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

.product-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  color: var(--text-soft);
  background:#f8fafc;
  white-space:nowrap;
}

.muted{ color: var(--text-soft); font-size:14px; }

.ticks{
  margin: 12px 0;
  padding-left: 18px;
  display:grid;
  gap:6px;
  font-size:14px;
}
.trust-strip {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 18px 0 26px;
}

.trust-headline {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}

.trust-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: #334155;
}

.trust-points li::before {
  content: "✔";
  color: #16a34a;
  margin-right: 8px;
}

.products-page .intro-support {
  font-size: 16px;        /* up from ~13–14px */
  line-height: 1.6;
  color: #334155;         /* darker slate for authority */
  max-width: 520px;       /* stops it feeling floaty */
  margin-top: 6px;
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 12px 0 14px;
}

.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: #f1f5f9;
  border: 1px solid var(--border-soft);
  color: #334155;
}

.btn-row{
  display:flex;
  gap:10px;
  align-items:center;
}


/*
  The logo is now served as an image instead of text.  The `.brand-logo` class
  mirrors the size and shape of the original badge but allows us to display
  the Graffiti‑Enz logo graphic.  It uses the same dimensions as the old
  `.brand-badge` so the layout of the header remains unchanged.
*/



nav{ justify-self: center; }


.logo-panel{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo{
  height: 36px;
  width: auto;
  object-fit: contain;
}

.brand-name{
  font-family: "League Spartan", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 18px;
  line-height: 1;
  color: #081725;
}

header.is-scrolled .brand-name{
  font-size: 16px;
}

.brand-icon{
  height: 34px;
  width: auto;
}

header.is-scrolled .brand-icon{
  height: 28px;
}

.logo-box{
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.logo-box img{
  height: 34px;
  width: auto;
  display: block;
}

nav ul{
  list-style: none;
  display: flex;
  gap: 18px;
  font-size: 14px;
}


nav a {
  opacity: .9;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease-out;
}

nav a:hover {
  border-color: var(--green);
  opacity: 1;
}

.main-nav a{
  color: rgba(255,255,255,.85);
  font-weight: 500;
}

.main-nav a:hover{
  color: rgba(255,255,255,1);
}

.nav-cta{ justify-self: end; }

/* Product photos inside cards */
.product-photo{
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border-soft);
  padding: 10px;
  margin-bottom: 10px;
}

/* CASE STUDIES PAGE: alignment + consistent container */
.case-studies-page .section-inner{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 18px;
}

/* Ensure section headings align nicely */
.case-studies-page .section-head{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}
@media (max-width: 900px){
  .case-studies-page .section-head{
    grid-template-columns: 1fr;
  }
}

/* 2-column grid for the case cards */
.case-studies-page .grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px){
  .case-studies-page .grid-2{
    grid-template-columns: 1fr;
  }
}

/* Make cards fill height evenly + stop “floating” look */
.case-studies-page .grid-2 .card{
  height: 100%;
}


/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease-out;
  white-space: nowrap;
}

.btn-primary {
  background: var(--green);
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: #019255;
  transform: translateY(-1px);
}
/* Environment cards – polished CTA buttons */
.card a.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  padding: 12px 22px;
  min-height: 44px;
  width: fit-content;          /* KEY: stops full-width look */
  max-width: 100%;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}


.btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
}

.btn-ghost:hover {
  border-color: #ffffff;
}

/* Hero section */
.hero {
  position: relative;
  color: #ffffff;
  overflow: hidden;
}

/* Slider wrapper for hero images */
.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlides 24s infinite;
}




/*
  Use local high‑resolution background photos instead of the remote
  WordPress images.  Each slide layers a subtle navy gradient over
  the photograph to improve text contrast.  The same two photos are
  reused to provide a smooth loop through four slides without
  requiring additional assets.
*/
.hero-slide:nth-child(1) {
  background-image:
    linear-gradient(135deg, rgba(7,26,47,0.55), rgba(7,26,47,0.55)),
    url('https://graffiti-enz.com.au/wp-content/uploads/2025/12/corporate-facility-300x153.avif');
  animation-delay: 0s;
}
.hero-slide:nth-child(2) {
  background-image:
    linear-gradient(135deg, rgba(7,26,47,0.55), rgba(7,26,47,0.55)),
    url('https://graffiti-enz.com.au/wp-content/uploads/2025/12/school-campus-300x200.png');
  animation-delay: 6s;
}
/* Use four unique high‑resolution photos in the slider to keep the page fresh. */
.hero-slide:nth-child(3) {
  background-image:
    linear-gradient(135deg, rgba(7,26,47,0.55), rgba(7,26,47,0.55)),
    url('https://graffiti-enz.com.au/wp-content/uploads/2025/12/train-station-200x300.png');
  animation-delay: 12s;
}
.hero-slide:nth-child(4) {
  background-image:
    linear-gradient(135deg, rgba(7,26,47,0.55), rgba(7,26,47,0.55)),
    url('https://graffiti-enz.com.au/wp-content/uploads/2025/12/council-building-300x228.jpg');
  animation-delay: 18s;
}

@keyframes fadeSlides {
  0% { opacity: 0; }
  8% { opacity: 1; }
  25% { opacity: 1; }
  33% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 60px 18px 80px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
  gap: 40px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: rgba(15, 94, 124, 0.2);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 14px;
}

.hero-badge span {
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #ffffff;
}

.hero h1 {
  font-size: 32px;
  line-height: 1.15;
  margin-bottom: 12px;
}

.hero h1 span {
  color: var(--green);
}

.hero-sub {
  font-size: 15px;
  max-width: 520px;
  color: #e5e7eb;
  margin-bottom: 18px;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(148,163,184,.8);
  color: #e5e7eb;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.hero-note {
  font-size: 12px;
  color: #d1d5db;
}

.hero-right {
  background: rgba(15, 23, 42, 0.8);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(148,163,184,.4);
  color: #e5e7eb;
  font-size: 13px;
}

/* Before/After - make both images the same size */
.impact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.impact-shot{
  margin: 0;
}

.impact-shot img{
  width: 100%;
  aspect-ratio: 16 / 9;   /* forces same visual frame */
  height: auto;           /* still responsive */
  object-fit: cover;      /* crop instead of stretch */
  border-radius: 14px;
  display: block;
  box-shadow: 0 14px 28px rgba(2,6,23,.14);
}

.impact-shot figcaption{
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin-top: 10px;
}

/* Mobile stack */
@media (max-width: 900px){
  .impact-grid{
    grid-template-columns: 1fr;
  }
}


.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
}

.stat-badge {
  font-size: 12px;
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  padding: 3px 8px;
  border-radius: 999px;
}

.hero-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  font-size: 12px;
  margin-bottom: 12px;
}
.hero-slogan{
  margin-top: 10px;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 16px;
  opacity: .92;
}
.hero-matrix-item {
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(75,85,99,.7);
}

.hero-matrix-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.hero-logos {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 10px;
}
/* FAQ page: buyer-psychology layout (scan -> validate -> act) */
.faq-page .faq-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.faq-page .faq-hero-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.faq-page .faq-group-title {
  font-size: 18px;
  margin: 18px 0 10px 0;
}

.faq-page .faq-list { padding: 4px 0; }

.faq-page details.faq-item {
  border-top: 1px solid var(--border-soft);
  padding: 10px 14px;
}

.faq-page details.faq-item:first-child { border-top: 0; }

.faq-page details.faq-item summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faq-page details.faq-item summary::-webkit-details-marker { display:none; }

.faq-page details.faq-item summary:after {
  content: "+";
  font-weight: 900;
  color: var(--text-soft);
  flex: 0 0 auto;
}

.faq-page details[open].faq-item summary:after { content: "–"; }

.faq-page .faq-body {
  margin-top: 8px;
  color: var(--text-soft);
}

.faq-page .faq-note {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}

@media (max-width: 900px) {
  .faq-page .faq-quick { grid-template-columns: 1fr !important; }
}


/* Section styles */
main {
  padding: 40px 18px 60px;
}

.section {
  max-width: var(--container-width);
  margin: 0 auto 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  gap: 16px;
}

.section-header h2 {
  font-size: 22px;
}

.section-header p {
  font-size: 14px;
  color: var(--text-soft);
  max-width: 430px;
}
.cta-slim { padding: 18px 0; }
.cta-slim-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background: rgba(2, 44, 34, .06);
  border: 1px solid rgba(2, 44, 34, .10);
  border-radius: 14px;
  padding: 14px 16px;
}


.badge-light {
  display: inline-flex;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--green-soft);
  color: #047857;
  margin-bottom: 6px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05);
  font-size: 14px;
}

.card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.card p {
  font-size: 14px;
  color: var(--text-soft);
}

.card-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
}
.card .btn-primary {
  min-width: 220px;
  margin-top: 14px;
}

.tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--grey);
  color: #4b5563;
}

.tag-eco {
  background: var(--green-soft);
  color: #047857;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.eco-pane {
  background: #03121f;
  color: #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #0f172a;
  box-shadow: var(--shadow-soft);
  font-size: 14px;
}

.eco-pane h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.eco-list {
  list-style: none;
  margin-top: 4px;
}

.eco-list li {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.eco-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 6px;
  flex-shrink: 0;
}

.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(148,163,184,.9);
  color: #e5e7eb;
}

.case-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  font-size: 14px;
  align-items: center;
}

.case-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.metric {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--grey);
  font-size: 13px;
}

.logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-soft);
}

.logo-pill {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px dashed var(--border-soft);
  background: #ffffff;
}

.cta-panel {
  border-radius: 18px;
  background: linear-gradient(120deg, var(--teal), var(--green));
  color: #ffffff;
  padding: 22px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-soft);
}

.cta-panel p {
  max-width: 520px;
  font-size: 14px;
  color: #e5e7eb;
}

/* Footer */
footer {
  background: #020617;
  color: #9ca3af;
  padding: 30px 18px 20px;
  font-size: 13px;
}

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 30px;
}

/* Footer brand (logo + text) */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* White logo box (matches header language, smaller + quieter) */
.footer-logo-box {
  background: #ffffff;
  padding: 6px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo-box img {
  height: 26px;
  width: auto;
  display: block;
}

/* Footer brand text */
.footer-brand-text {
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
}

.footer-tagline {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
  color: #9ca3af;
}

/* Footer headings */
.footer-inner h4 {
  font-size: 14px;
  color: #e5e7eb;
  margin-bottom: 8px;
}

/* Footer links */
.footer-links {
  list-style: none;
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
}

.footer-links a {
  text-decoration: none;
  color: #9ca3af;
}

.footer-links a:hover {
  text-decoration: underline;
  color: #ffffff;
}

/* Footer bottom bar */
.footer-bottom {
  max-width: var(--container-width);
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  border-top: 1px solid #111827;
  padding-top: 12px;
}


/* SDS & Procurement page */
.doc-table-wrap { overflow-x: auto; }

.doc-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.doc-table th,
.doc-table td{
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.doc-table th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-soft);
  background: var(--grey);
}

.doc-table tbody tr:hover{
  background: #fbfdff;
}

.doc-col{
  width: 160px;
  white-space: nowrap;
}

.doc-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  text-decoration: none;
  background: #ffffff;
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
}

.doc-link:hover{
  border-color: rgba(15, 94, 124, 0.35);
  box-shadow: var(--shadow-soft);
}

.doc-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-soft);
}

.tick-list{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0 0;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
}

.tick-list li{
  position: relative;
  padding-left: 22px;
}

.tick-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 700;
}


/* Responsive tweaks */
@media (max-width: 880px) {
  .hero-content,
  .split,
  .case-strip,
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  nav ul { display: none; }
  .hero h1 { font-size: 28px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 24px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }

  .cta-panel {
    flex-direction: column;
    text-align: center;
  }

  /* If you’re using brand-icon (you are), target that instead of brand-logo */
  .brand-icon {
    height: 44px;
  }

  .logo-panel {
    max-width: 220px;
    padding: 8px 10px;
  }
}