/*
  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;
}
/* =========================
   TRUST LOGO STRIP
   ========================= */
.logo-strip{
  margin-top: -40px;
  padding: 22px 0 14px;
  border-bottom: 1px solid var(--border-soft);
  background: #ffffff;
}

.logo-strip-inner{
  max-width: calc(var(--container-width) + 120px);
  margin: 0 auto;
  padding: 0 18px;
}

.logo-strip-title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.logo-strip-context{
  font-size: 13px;
  color: #374151;
  margin-bottom: 12px;
  max-width: 680px;
}

.logo-row{
  display: flex;
  flex-wrap: nowrap;              /* ONE LINE */
  justify-content: space-between; /* spread across */
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;               /* safety net */
}

.logo-row img{
  max-height: 90px;   /* smaller so 6 fit */
  height: auto;
  max-width: 150px;
  width: auto;        /* IMPORTANT */
  flex: 0 0 auto;     /* don't stretch */
  object-fit: contain;
  padding: 6px 10px;
  filter: grayscale(1);
  opacity: .96;
}


.logo-row img:hover{
  filter: none;
  opacity: 1;
}

.logo-strip-note{
  margin-top: 10px;
  font-size: 12px;
  color: #374151;
  line-height: 1.45;
}

.logo-strip-note span{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-soft);
}



/* Tablet/mobile: switch to 2x2 grid */
@media (max-width: 880px){
  .logo-row{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    justify-items: center;
  }
  .logo-row img{
    max-width: 220px;
    height: 60px;
  }
}

/* Phones: remove negative overlap */
@media (max-width: 640px){
  .logo-strip{ margin-top: 0; }
}

@media (max-width: 480px){
  .logo-row img{ height: 54px; }
}

/* =========================
   MOBILE HEADER FIX
========================= */
/* ===== Mobile header: stack + centre + stop cramped layout ===== */
@media (max-width: 640px){
  header{
    height: auto;                 /* override fixed 80px */
    padding: 10px 0;
  }

  .nav-inner{
    grid-template-columns: 1fr;   /* stack logo + nav + CTA */
    gap: 10px;
    justify-items: center;
    width: min(1200px, 94vw);
  }

  nav{ justify-self: center; }

  .logo-panel{
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .nav-cta{
    justify-self: center;
    width: 100%;
    max-width: 320px;
  }

  .nav-cta .btn{
    width: 100%;                  /* full width button on mobile */
    justify-content: center;
  }
}

.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;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;

  padding: 11px 22px 9px;
  border-radius: 999px;

  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 CTA button: centred, consistent */
.card a.btn.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 22px;
  min-height: 44px;

  width: fit-content;
  max-width: 100%;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;

 margin: 14px auto 0;
}




.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;
}


.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; }
}

/* Commercial pricing page layout: form-first, less friction */
.pricing-layout{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pricing-aside{
  position: sticky;
  top: 90px; /* below header */
}

.step-list{
  margin: 10px 0 0 18px;
  color: var(--text-soft);
  font-size: 13px;
  display: grid;
  gap: 6px;
}

@media (max-width: 900px){
  .pricing-layout{ grid-template-columns: 1fr; }
  .pricing-aside{ position: static; }
}


/* 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;sty
  margin-top: 8px;
  font-size: 11px;
}
.card .btn-primary {
  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(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .grid-3{
    grid-template-columns: 1fr;   /* one per row on phones */
  }

  .card{
    padding: 18px;
  }

  .card h3{
    word-break: normal;
    overflow-wrap: anywhere;      /* prevents awkward breaks like “Biodegrada” */
  }
}
@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;
  }
}
/* =========================
   MOBILE POLISH (GLOBAL)
   ========================= */

html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* Prevent skinny grids on phones */
@media (max-width: 900px){
  .grid-3, .grid-4, .features-grid, .pillars-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px){
  .grid-3, .grid-4, .features-grid, .pillars-grid {
    grid-template-columns: 1fr !important;
  }

  .card{
    padding: 16px !important;
  }

  h1{ font-size: clamp(28px, 7vw, 38px); line-height: 1.05; }
  h2{ font-size: clamp(22px, 5.5vw, 30px); line-height: 1.15; }
  p { font-size: 15px; line-height: 1.55; }
}
@media (max-width: 640px){
  .btn, .button, .cta, .btn-primary {
    min-height: 48px;
    font-size: 16px;
  }
}
/* === Mobile hamburger menu for current header.php structure === */

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.nav-toggle{
  display:none; /* desktop hidden */
  background: rgba(2,6,23,.08);
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.nav-toggle-bars{
  width:18px; height:2px; background:#0b1220;
  position:relative; display:block;
}
.nav-toggle-bars:before,
.nav-toggle-bars:after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:2px; background:#0b1220;
}
.nav-toggle-bars:before{ top:-6px; }
.nav-toggle-bars:after{ top: 6px; }

/* Desktop menu normal */
.primary-nav{ display:block; }
.primary-nav .nav-list{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
}

/* Mobile behaviour */
@media (max-width: 880px){
  .nav-toggle{ display:inline-flex; }

  /* Start collapsed */
  .primary-nav{ display:none; width:100%; margin-top:10px; }

  /* When open */
  .menu.menu-open .primary-nav{ display:block; }

  .primary-nav .nav-list{
    flex-direction:column;
    gap:10px;
    background: rgba(2,6,23,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:12px;
  }

  .primary-nav .nav-list a{
    color:#fff;
    padding:10px 12px;
    border-radius:10px;
    display:block;
  }
  .primary-nav .nav-list a:hover{
    background: rgba(255,255,255,.08);
  }
}
/* =========================================
   MOBILE FIX PACK (paste at end of file)
   ========================================= */

/* 0) hard stop horizontal scroll */
html, body { overflow-x: hidden; }
* { max-width: 100%; }

/* 1) Header: stop sticky eating space on phones */
@media (max-width: 640px){
  header{
    position: sticky;
    top: 0;
    height: auto !important;
    padding: 10px 0 !important;
  }

  /* Make the header content one clean row: logo + hamburger */
  .nav-inner{
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    width: min(1200px, 94vw) !important;
  }

  /* Keep logo panel compact */
  .logo-panel{
    max-width: 100% !important;
    padding: 6px 10px !important;
  }

  .brand-name{ font-size: 16px !important; }

  /* CTA in header: hide on small screens (move CTA into hero instead) */
  .nav-cta{ display: none !important; }
}

/* 2) Hero: force one column, fix padding, improve readability */
@media (max-width: 880px){
  .hero-content{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 26px 18px 26px !important;
  }

  .hero h1{
    font-size: clamp(26px, 6.5vw, 34px) !important;
    line-height: 1.05 !important;
  }

  .hero-sub{
    font-size: 15px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* Pills + CTA: tighten and stack */
  .hero-pills{ margin-bottom: 14px !important; }

  .hero-cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-cta .btn{
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Right panel becomes "trust card" below content */
  .hero-right{
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .hero-matrix{
    grid-template-columns: 1fr !important;
  }
}

/* 3) Main spacing: stop huge whitespace on phones */
@media (max-width: 640px){
  main{
    padding: 22px 16px 40px !important;
  }

  .section{
    margin-bottom: 24px !important;
  }

  .section-header{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .section-header h2{
    font-size: 20px !important;
  }

  .section-header p{
    max-width: 100% !important;
    font-size: 14px !important;
  }
}

/* 4) Buttons everywhere: thumb-friendly */
@media (max-width: 640px){
  .btn, .btn-primary, .btn-ghost, .doc-link{
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

/* 5) Trust logo strip: remove negative overlap + ensure grid feels clean */
@media (max-width: 640px){
  .logo-strip{ margin-top: 0 !important; }
  .logo-strip-inner{ padding: 0 14px !important; }
  .logo-row{ padding: 12px 12px !important; }
}

/* 6) Fix common grid pain: force single column on phones (one source of truth) */
@media (max-width: 640px){
  .grid-2, .grid-3, .product-grid, .case-strip, .trust-strip, .split, .footer-inner{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================
   MOBILE MENU - make it exist
   ========================================= */

/* Your CSS currently hides nav ul at <=880px. Undo that. */
@media (max-width: 880px){
  .primary-nav .nav-list{ display: flex !important; }
}


/* Show hamburger + dropdown layout */
@media (max-width: 880px){
  .nav-toggle{ display: inline-flex !important; }

  /* Put burger on the right, logo on the left */
  .nav-inner{
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  /* Hide the desktop row menu until opened */
  .primary-nav{
    display: none !important;
    width: 100%;
    margin-top: 10px;
    grid-column: 1 / -1; /* full width under header row */
  }

  /* When menu is open */
  header.menu-open .primary-nav,
.menu.menu-open .primary-nav{
  display: block !important;
}

  /* Dropdown styling */
  .primary-nav .nav-list{
    flex-direction: column !important;
    gap: 10px !important;
    background: rgba(2,6,23,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px;
  }

  .primary-nav .nav-list a{
    color:#fff;
    display:block;
    padding: 12px;
    border-radius: 10px;
  }
}
/* =========================================
   TRUST LOGOS - mobile size + centering
   ========================================= */

@media (max-width: 880px){
  .logo-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .logo-row img{
    max-width: 150px !important;
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 4px 6px !important;
  }
}

@media (max-width: 480px){
  .logo-row{ grid-template-columns: 1fr !important; }
  .logo-row img{
    max-width: 170px !important;
    max-height: 46px !important;
  }
}
/* =========================
   MOBILE MENU - FINAL
   ========================= */
@media (max-width: 880px){
  .nav-toggle{ display: inline-flex !important; }

  .nav-inner{
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  /* Hide menu until opened */
  .primary-nav{
    display: none !important;
    width: 100%;
    margin-top: 10px;
    grid-column: 1 / -1;
  }

  /* Open state (works if you toggle class on header OR .menu) */
  header.menu-open .primary-nav,
  .menu.menu-open .primary-nav{
    display: block !important;
  }

  /* Ensure your actual list shows (don’t revive generic nav ul) */
  .primary-nav .nav-list{
    list-style: none;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: rgba(2,6,23,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px;
    margin: 0;
  }

  .primary-nav .nav-list a{
    color:#fff;
    display:block;
    padding: 12px;
    border-radius: 10px;
  }
}

/* =========================
   TRUST LOGOS - MOBILE SIZE + CENTER
   ========================= */
@media (max-width: 880px){
  .logo-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .logo-row img{
    max-width: 150px !important;
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 4px 6px !important;
  }
}

@media (max-width: 480px){
  .logo-row{ grid-template-columns: 1fr !important; }
  .logo-row img{
    max-width: 170px !important;
    max-height: 46px !important;
  }
}
/* =========================
   MOBILE MENU for your actual HTML (.main-nav)
   ========================= */
@media (max-width: 880px){

  /* show burger */
  .nav-toggle{ display: inline-flex !important; justify-self: end; }

  /* header grid: logo left, burger right, nav drops below */
  .nav-inner{
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  /* hide inline nav by default */
  nav.main-nav{ 
    display: none !important;
    grid-column: 1 / -1;
    margin-top: 10px;
  }

  /* open state */
  header.menu-open nav.main-nav{
    display: block !important;
  }

  /* dropdown styling */
  nav.main-nav ul{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: rgba(2,6,23,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px;
  }

  nav.main-nav a{
    color: #fff !important;
    display: block;
    padding: 12px;
    border-radius: 10px;
  }

  nav.main-nav a:hover{
    background: rgba(255,255,255,.08);
  }

  /* hide CTA in header on mobile (optional) */
  .nav-cta{ display:none !important; }
}