/*
Theme Name: TPP Website Theme
Theme URI: https://www.tppco.au
Author: Traffic Plan Professionals
Description: Custom WordPress theme homepage for Traffic Plan Professionals Pty Ltd.
Version: 1.0.0
License: Proprietary
Text Domain: tpp-theme
*/

:root {
  --tpp-bg: #05090b;
  --tpp-panel: #071014;
  --tpp-card: #0b1418;
  --tpp-green: #67b346;
  --tpp-green-dark: #2c7a3f;
  --tpp-white: #ffffff;
  --tpp-muted: #cbd5e1;
  --tpp-border: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tpp-bg);
  color: var(--tpp-white);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.tpp-container { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.tpp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,9,11,.94);
  border-bottom: 1px solid rgba(44,122,63,.55);
  backdrop-filter: blur(12px);
}
.tpp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.tpp-brand { display: flex; align-items: center; gap: 14px; }
.tpp-logo-text { font-size: 46px; font-weight: 900; font-style: italic; letter-spacing: -3px; line-height: 1; }
.tpp-brand-line { width: 1px; height: 44px; background: var(--tpp-green); }
.tpp-brand-name { font-size: 13px; font-weight: 800; text-transform: uppercase; line-height: 1.15; letter-spacing: .5px; }
.tpp-nav { display: flex; gap: 34px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.tpp-nav a:hover { color: var(--tpp-green); }
.tpp-phone { display: flex; align-items: center; gap: 8px; color: var(--tpp-green); font-size: 18px; font-weight: 900; }

.tpp-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(44,122,63,.55); }
.tpp-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(5,9,11,.98), rgba(5,9,11,.76), rgba(5,9,11,.30)), url('https://images.unsplash.com/photo-1694085252856-200093718d70?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D?auto=format&fit=crop&w=1900&q=80');
  background-size: cover; background-position: center;
  opacity: .92;
}
.tpp-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 72% 40%, rgba(103,179,70,.24), transparent 34%);
}
.tpp-hero-inner { position: relative; z-index: 2; min-height: 720px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; padding: 92px 0; }
.tpp-kicker { display: flex; align-items: center; gap: 14px; color: var(--tpp-green); font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 18px; }
.tpp-kicker span { display: inline-block; width: 34px; height: 4px; background: var(--tpp-green); }
.tpp-hero h1 { margin: 0; max-width: 780px; font-size: clamp(48px, 7vw, 92px); line-height: .95; text-transform: uppercase; letter-spacing: -2px; font-weight: 950; }
.tpp-green { color: var(--tpp-green); }
.tpp-hero p { max-width: 650px; margin: 26px 0 0; font-size: 21px; line-height: 1.45; color: #f1f5f9; }
.tpp-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.tpp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 6px; text-transform: uppercase; font-weight: 950; letter-spacing: .5px; }
.tpp-btn-primary { background: var(--tpp-green); color: #000; box-shadow: 0 12px 26px rgba(103,179,70,.18); }
.tpp-btn-primary:hover { background: #7ed25a; }
.tpp-btn-outline { border: 1px solid rgba(255,255,255,.56); background: rgba(0,0,0,.35); color: #fff; }
.tpp-btn-outline:hover { border-color: var(--tpp-green); color: var(--tpp-green); }
.tpp-vms { justify-self: end; border: 1px solid rgba(103,179,70,.7); background: rgba(0,0,0,.76); border-radius: 14px; padding: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.56); }
.tpp-vms div { font-family: 'Courier New', monospace; color: var(--tpp-green); font-size: clamp(28px, 3vw, 44px); line-height: 1.08; text-transform: uppercase; letter-spacing: 5px; }

.tpp-metrics { background: var(--tpp-panel); border-bottom: 1px solid var(--tpp-border); }
.tpp-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tpp-metric { display: flex; align-items: center; gap: 18px; padding: 30px 26px; border-right: 1px solid var(--tpp-border); }
.tpp-metric:last-child { border-right: none; }
.tpp-icon { color: var(--tpp-green); font-size: 46px; line-height: 1; }
.tpp-metric-value { font-size: 38px; font-weight: 950; text-transform: uppercase; line-height: 1; }
.tpp-metric-label { margin-top: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; color: #e2e8f0; line-height: 1.25; }

.tpp-section { padding: 78px 0; }
.tpp-about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 46px; align-items: center; }
.tpp-section-label { color: var(--tpp-green); font-size: 13px; font-weight: 950; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 14px; }
.tpp-h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; text-transform: uppercase; font-weight: 950; }
.tpp-copy { color: var(--tpp-muted); line-height: 1.7; font-size: 16px; }

.tpp-services { background: var(--tpp-panel); border-top: 1px solid var(--tpp-border); border-bottom: 1px solid var(--tpp-border); }
.tpp-center { text-align: center; }
.tpp-services-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tpp-card { background: var(--tpp-card); border: 1px solid var(--tpp-border); border-radius: 14px; padding: 28px; box-shadow: 0 16px 40px rgba(0,0,0,.24); transition: .22s ease; }
.tpp-card:hover { transform: translateY(-4px); border-color: rgba(103,179,70,.75); }
.tpp-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.tpp-card-icon { width: 62px; height: 62px; border: 1px solid var(--tpp-green); border-radius: 50%; display: grid; place-items: center; color: var(--tpp-green); font-size: 32px; flex: 0 0 auto; }
.tpp-card h3 { margin: 0; font-size: 23px; text-transform: uppercase; font-weight: 950; }
.tpp-card ul { list-style: none; padding: 0; margin: 0; color: #e2e8f0; }
.tpp-card li { position: relative; padding-left: 26px; margin: 11px 0; line-height: 1.35; }
.tpp-card li::before { content: "✓"; position: absolute; left: 0; color: var(--tpp-green); font-weight: 900; }
.tpp-learn { display: inline-flex; margin-top: 18px; color: var(--tpp-green); font-weight: 950; text-transform: uppercase; font-size: 13px; letter-spacing: .6px; }

.tpp-strength { border: 1px solid rgba(103,179,70,.55); border-radius: 14px; background: var(--tpp-panel); padding: 30px; display: grid; grid-template-columns: 1.2fr 2fr; gap: 30px; align-items: center; }
.tpp-strength-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tpp-strength-item { border-left: 1px solid var(--tpp-border); padding-left: 20px; color: #e2e8f0; font-size: 14px; line-height: 1.45; }
.tpp-strength-item .tpp-icon { font-size: 36px; margin-bottom: 10px; }

.tpp-work-contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; padding-bottom: 80px; }
.tpp-work { border: 1px solid var(--tpp-border); border-radius: 14px; background: var(--tpp-panel); padding: 34px; }
.tpp-work-inner { display: grid; grid-template-columns: .8fr 1fr; gap: 26px; align-items: center; }
.tpp-location { color: #e2e8f0; margin: 13px 0; }
.tpp-location span { color: var(--tpp-green); font-weight: 900; margin-right: 10px; }
.tpp-contact-panel { border-radius: 14px; background: var(--tpp-green); color: #000; padding: 34px; }
.tpp-contact-panel h2 { margin: 0; font-size: clamp(32px, 4vw, 44px); line-height: 1; text-transform: uppercase; font-weight: 950; }
.tpp-contact-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.tpp-contact-buttons a { padding: 13px 20px; border-radius: 6px; text-transform: uppercase; font-weight: 950; font-size: 13px; }
.tpp-black { background: #000; color: #fff; }
.tpp-border-black { border: 1px solid #000; color: #000; }

.tpp-footer { border-top: 1px solid rgba(44,122,63,.55); padding: 34px 0; }
.tpp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tpp-footer-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; color: #e2e8f0; }
.tpp-footer-links a,
.tpp-footer-links span {display: flex; align-items: center; line-height: 1; color: #fff; text-decoration: none;}
.tpp-footer-links a::before { color: var(--tpp-green); margin-right: 8px; }
.tpp-social {
  background: #2c7a3f;
  border-radius: 50%;
  padding: 6px;
  transition: 0.3s;
}

.tpp-social img {
  filter: brightness(0) invert(1);
}

.tpp-social:hover {
  background: #1f5c2e;
}

@media (max-width: 960px) {
  .tpp-nav, .tpp-phone { display: none; }
  .tpp-hero-inner, .tpp-about-grid, .tpp-strength, .tpp-work-contact, .tpp-work-inner { grid-template-columns: 1fr; }
  .tpp-vms { justify-self: start; }
  .tpp-metrics-grid, .tpp-services-grid, .tpp-strength-grid { grid-template-columns: 1fr 1fr; }
  .tpp-footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .tpp-metrics-grid, .tpp-services-grid, .tpp-strength-grid { grid-template-columns: 1fr; }
  .tpp-metric { border-right: none; border-bottom: 1px solid var(--tpp-border); }
  .tpp-logo-text { font-size: 40px; }
  .tpp-hero-inner { min-height: auto; padding: 64px 0; }
}