:root {
  --primary-color: #1a1a1a;
  --secondary-color: #333333;
  --accent-color: #f8f9fa;
  --highlight-color: #004aad;
  --text-color: #333;
  --text-light: #666;
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-800: #343a40;
  --gray-900: #212529;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  
  /* Font families */
  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text-color);
  overflow-x: hidden;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  /* Impact was condensed and needed positive tracking. Montserrat is wider,
     so display sizes want it pulled slightly tighter instead. */
  letter-spacing: -0.015em;
}

h1 {
  font-size: 3rem;
  line-height: 1.1;
}

h2 {
  font-size: 2.5rem;
  line-height: 1.2;
}

h3 {
  font-size: 2rem;
  line-height: 1.3;
}

h4 {
  font-size: 1.5rem;
  line-height: 1.4;
}

h5, h6 {
  font-size: 1.25rem;
  line-height: 1.4;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.navbar {
  background: var(--white);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.logo img {
  height: 42px;
  width: auto;
}

/* Wordmark. Montserrat rather than the Impact heading face: Impact ships a
   single weight (so font-weight had no effect) and is a headline face, too
   heavy beside the mark at this size. Uppercase and tracked out reads as
   signage, which suits the trade. The rule ties mark and name into one
   lockup instead of two adjacent elements. */
.company-name {
  font-family: var(--font-body);
  color: var(--primary-color);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.875rem;
  border-left: 2px solid var(--gray-300);
  line-height: 1.2;
}

.navbar nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
}

.navbar a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: var(--highlight-color);
}

.cta-button {
  background: var(--highlight-color) !important;
  color: var(--white) !important;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background: #003d8f !important;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
}

.hero {
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.8), rgba(255, 107, 53, 0.7)), 
              url('images/470173373_1058480426291606_251035608076363021_n.jpg') center/cover no-repeat;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  position: relative;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
}

.hero-content h1,
.hero-content h2 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.hero-quote {
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 2.5rem;
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--white);
  border: 2px solid var(--primary-color);
}

.btn-primary:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn-secondary:hover {
  background: var(--white);
  color: var(--primary-color);
}

.stats-section {
  background: var(--gray-900);
  color: var(--white);
  padding: 4rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}

.stat-item {
  padding: 1.5rem;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--highlight-color);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.1rem;
  font-weight: 500;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.section-header p {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

.services-section {
  padding: 6rem 0;
  background: var(--gray-100);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.service-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: 10px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--white);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  border: 3px solid var(--primary-color);
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  border-width: 4px;
}

.service-icon i {
  font-size: 2rem;
  color: var(--primary-color);
}

.service-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.service-card p {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-learn-more {
  display: inline-block;
  background: var(--primary-color);
  color: var(--white);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

.service-learn-more:hover {
  background: var(--secondary-color);
  color: var(--white);
  transform: translateY(-2px);
}


/* Service Detail Pages */
.service-hero {
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.8), rgba(255, 107, 53, 0.7)), 
              url('images/470173373_1058480426291606_251035608076363021_n.jpg') center/cover no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  position: relative;
}

.service-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.service-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.service-icon-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: var(--white);
  border-radius: 15px;
  margin-bottom: 2rem;
  border: 4px solid var(--primary-color);
}

.service-icon-large i {
  font-size: 3.5rem;
  color: var(--primary-color);
}

.service-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.service-hero p {
  font-size: 1.3rem;
  opacity: 0.9;
}

.service-details {
  padding: 6rem 0;
}

.service-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
}

.service-main h2 {
  color: var(--secondary-color);
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
}

.service-main h3 {
  color: var(--secondary-color);
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.service-main p {
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.service-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.service-features li {
  padding: 0.75rem 0;
  padding-left: 2rem;
  position: relative;
  color: var(--text-color);
  border-bottom: 1px solid var(--gray-200);
}

.service-features li:last-child {
  border-bottom: none;
}

.service-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--highlight-color);
  font-weight: bold;
  font-size: 1.2rem;
}

.service-sidebar {
  background: var(--gray-100);
  padding: 2.5rem;
  border-radius: 15px;
  height: fit-content;
}

.customer-testimonial {
  margin-bottom: 2.5rem;
}

.customer-testimonial h4 {
  color: var(--secondary-color);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.customer-testimonial blockquote {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 10px;
  border-left: 4px solid var(--highlight-color);
  margin: 0 0 1rem 0;
  font-style: italic;
  color: var(--text-color);
  line-height: 1.6;
}

.customer-testimonial cite {
  color: var(--text-light);
  font-weight: 600;
  font-style: normal;
}

.service-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.service-stats .stat {
  flex: 1;
  text-align: center;
  background: var(--white);
  padding: 1.5rem 1rem;
  border-radius: 10px;
}

.service-stats .stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--highlight-color);
  margin-bottom: 0.5rem;
}

.service-stats .stat-label {
  font-size: 0.9rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-cta {
  text-align: center;
}

.service-cta .btn {
  width: 100%;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  padding: 1rem;
}

.service-cta p {
  color: var(--text-light);
  font-size: 0.9rem;
  margin: 0;
}

.service-gallery {
  padding: 4rem 0;
  background: var(--gray-100);
}

.service-gallery h2 {
  text-align: center;
  color: var(--secondary-color);
  margin-bottom: 3rem;
  font-size: 2.2rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.gallery-grid img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: translateY(-5px);
}

.about-section {
  padding: 6rem 0;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
}

.lead {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--highlight-color);
}

.about-text p {
  margin-bottom: 1.5rem;
  color: var(--text-light);
  line-height: 1.7;
}

.about-features {
  margin-top: 2rem;
}

.feature {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.feature i {
  color: var(--highlight-color);
  font-size: 1.2rem;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

.equipment-section {
  padding: 6rem 0;
  background: var(--gray-900);
  color: var(--white);
}

.equipment-section .section-header h2 {
  color: var(--white);
}

.equipment-section .section-header p {
  color: var(--gray-300);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.equipment-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s ease;
}

.equipment-item:hover {
  transform: translateY(-5px);
}

.equipment-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.equipment-item:hover img {
  transform: scale(1.05);
}

.equipment-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 2rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.equipment-item:hover .equipment-overlay {
  transform: translateY(0);
}

.equipment-overlay h3 {
  color: var(--white);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.equipment-overlay p {
  color: var(--gray-300);
  font-size: 0.9rem;
}

.projects-section {
  padding: 6rem 0;
  background: var(--gray-100);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.project-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.project-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.project-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-item:hover img {
  transform: scale(1.05);
}

.project-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  padding: 2rem;
  color: var(--white);
}

.project-overlay h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.project-overlay p {
  color: var(--gray-300);
  font-size: 0.9rem;
}


.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  border-radius: 8px;
  flex-shrink: 0;
}

.feature-icon i {
  color: var(--white);
  font-size: 1.2rem;
}


@keyframes spin {
  to { transform: rotate(360deg); }
}

.contact-section {
  padding: 6rem 0;
  background: var(--gray-100);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  border-radius: 8px;
  flex-shrink: 0;
}

.contact-icon i {
  color: var(--white);
  font-size: 1.2rem;
}

.contact-details h4 {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

.contact-details p,
.contact-details a {
  color: var(--text-light);
  text-decoration: none;
}

.contact-details a:hover {
  color: var(--highlight-color);
}

.contact-form {
  background: var(--white);
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--gray-300);
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

.footer {
  background: var(--gray-900);
  color: var(--white);
  padding: 3rem 0 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.footer-logo img {
  height: 40px;
  width: auto;
  filter: invert(1);
}

/* Same lockup as the header wordmark, on a dark ground: uppercase Montserrat
   with a rule tying it to the mark. Rule is white at low alpha so it reads as
   a hairline rather than a hard edge. */
.footer-info h3 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.875rem;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
  line-height: 1.2;
  margin: 0;
}

.footer-links h4 {
  margin-bottom: 1rem;
  color: var(--white);
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--gray-300);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--highlight-color);
}

.footer-bottom {
  border-top: 1px solid var(--gray-800);
  padding-top: 2rem;
  text-align: center;
  color: var(--gray-300);
}

@media (max-width: 1024px) {
  .navbar nav {
    gap: 1.5rem;
  }
  
  .navbar a {
    font-size: 0.95rem;
  }
  
  .cta-button {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 900px) {
  .navbar nav {
    gap: 1rem;
  }
  
  .navbar a {
    font-size: 0.9rem;
  }
  
  .cta-button {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 768px) {
  .navbar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 1rem;
    box-shadow: var(--shadow);
    gap: 1rem;
    white-space: normal;
  }

  .navbar nav.active {
    display: flex;
  }

  .navbar nav a {
    font-size: 1rem;
  }
  
  .cta-button {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
  }

  .menu-toggle {
    display: block;
  }

  .company-name {
    /* Was display:none. The business name is worth keeping on the device
       most visitors arrive on; shrink it rather than hide it. Tracking
       and padding tighten too, so the lockup clears the hamburger at 375px. */
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding-left: 0.625rem;
  }

  .logo img {
    height: 40px;
  }

  .hero-content h1,
  .hero-content h2 {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 300px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-hero h1 {
    font-size: 2.2rem;
  }

  .service-hero p {
    font-size: 1.1rem;
  }

  .service-icon-large {
    width: 100px;
    height: 100px;
  }

  .service-icon-large i {
    font-size: 3rem;
  }

  .service-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }


  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .section-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-content h1,
  .hero-content h2 {
    font-size: 2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-number {
    font-size: 2.5rem;
  }
}

/* ---- Phone links (header + footer) ---- */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--highlight-color);
}

.nav-phone i {
  font-size: 0.9em;
}

.nav-phone:hover {
  color: #003d8f;
}

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
}

.footer-phone:hover {
  text-decoration: underline;
}

/* On phones the number is the primary action: give it full width
   and a real tap target (44px min, per WCAG 2.5.5). */
@media (max-width: 768px) {
  .nav-phone {
    justify-content: center;
    min-height: 44px;
    font-size: 1.1rem;
  }
}

/* ---- Contact form: labels, honeypot, status ---- */
.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-color);
}

.form-group label .optional {
  font-weight: 400;
  color: var(--text-light);
}

/* Honeypot: off-screen rather than display:none, so bots that skip
   hidden fields still fill it in. Never shown to people. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  font-size: 0.95rem;
}

.form-status:empty {
  display: none;
}

.form-status.is-ok {
  background: #e6f4ee;
  color: #05683f;
  border-left: 3px solid #05683f;
}

.form-status.is-error {
  background: #fdeceb;
  color: #b42318;
  border-left: 3px solid #b42318;
}

button[type="submit"]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Contact section with the form hidden: one centred column instead of an
   empty second grid cell. Remove this rule when the form comes back. */
.contact-content--solo {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Accessibility ---- */

/* Keyboard focus was only visible on form fields; every link and button
   fell back to the browser default, which is near-invisible on this palette. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--highlight-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Anything focusable inside the dark hero or footer needs a light ring
   to stay visible against the background. */
.hero-content a:focus-visible,
.footer a:focus-visible,
.navbar .cta-button:focus-visible {
  outline-color: var(--white);
}

/* Respect a stated OS preference for reduced motion: keep the interface
   working, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Work-in-progress notice ----
   Sits above the sticky navbar, so it scrolls away and the nav still pins to
   the top. Dismissible, and the dismissal is remembered per browser. */
.site-notice {
  background: var(--gray-900);
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1.4;
}

.site-notice[hidden] {
  display: none;
}

.site-notice-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Plain inline, not flex: a flex container would treat the trailing full
   stop after the phone link as its own item and add a gap before it. */
.site-notice-text {
  text-align: center;
}

.site-notice-text i {
  color: var(--highlight-color);
  margin-right: 0.45rem;
}

/* The phone number is the point of the notice, so it reads as a link.
   Brand blue is too dark on this ground; white underlined carries better. */
.site-notice a {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.site-notice a:hover {
  color: var(--gray-300);
}

.site-notice-close {
  background: none;
  border: none;
  color: var(--gray-300);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
  flex-shrink: 0;
}

.site-notice-close:hover {
  color: var(--white);
}

@media (max-width: 768px) {
  .site-notice {
    font-size: 0.8125rem;
  }

  .site-notice-inner {
    padding: 0.5rem 16px;
    gap: 0.5rem;
  }
}

/* Two copy lengths: the full sentence has room on desktop, but runs to three
   lines on a phone and pushes the hero down. Only one is ever rendered. */
.notice-brief { display: none; }

@media (max-width: 768px) {
  .notice-full { display: none; }
  .notice-brief { display: inline; }
}