/* =========================
   RESET
========================= */

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


html {
  scroll-behavior: smooth;
}


body {
  font-family: Arial, Helvetica, sans-serif;

  background-color: #050709;

  color: #f5f5f5;

  line-height: 1.6;
}


img {
  max-width: 100%;
}


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


button,
input,
textarea,
select {
  font: inherit;
}



/* =========================
   VARIABLES
========================= */

:root {

  --background: #050709;

  --background-light: #0c1116;

  --card: #0f161d;

  --card-light: #16212b;

  --border: #1d4f73;

  --text: #f7f9fb;

  --muted: #b8c4cf;

  --blue: #009cff;

  --blue-hover: #0077d6;

  --max-width: 1180px;

}



/* =========================
   GENERAL
========================= */

.container {

  width: min(
    calc(100% - 40px),
    var(--max-width)
  );

  margin-inline: auto;

}


.eyebrow {

  color: var(--blue);

  text-transform: uppercase;

  letter-spacing: 3px;

  font-size: 13px;

  font-weight: bold;

  margin-bottom: 12px;

}


.section-title {

  font-size: clamp(
    36px,
    5vw,
    58px
  );

  line-height: 1.05;

  margin-bottom: 18px;

}


.section-description {

  color: var(--muted);

  max-width: 650px;

  font-size: 17px;

}



/* =========================
   HEADER
========================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background-color: rgba(
    5,
    7,
    9,
    0.96
  );

  border-bottom:
    1px solid var(--border);

}


.nav-container {

  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}


.logo {

  font-weight: 900;

  font-size: 21px;

  letter-spacing: 1px;

}


.logo span {

  color: var(--blue);

}


nav {

  display: flex;

  gap: 28px;

}


nav a {

  color: var(--muted);

  font-size: 14px;

  font-weight: 600;

  transition: color 0.2s ease;

}


nav a:hover {

  color: var(--blue);

}



/* =========================
   HERO
========================= */

.hero {

  min-height: 720px;

  display: flex;

  align-items: center;

  background:

    radial-gradient(
      circle at 75% 30%,
      rgba(0, 156, 255, 0.18),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #0c1116,
      #050709
    );

}


.hero-grid {

  display: grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap: 70px;

  align-items: center;

}


.hero h1 {

  font-size: clamp(
    58px,
    8vw,
    100px
  );

  line-height: 1.02;

  max-width: 720px;

  margin-bottom: 30px;

}


.hero h1 span {

  color: var(--blue);

}


.hero-description {

  color: var(--muted);

  font-size: 19px;

  max-width: 650px;

}


.hero-buttons {

  display: flex;

  gap: 15px;

  flex-wrap: wrap;

  margin-top: 35px;

}



/* =========================
   BUTTONS
========================= */

.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding: 0 25px;

  border-radius: 6px;

  border: none;

  cursor: pointer;

  font-weight: bold;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease;

}


.primary-button {

  background-color:
    var(--blue);

  color: #111;

}


.primary-button:hover {

  background-color:
    var(--blue-hover);

  transform:
    translateY(-2px);

}


.secondary-button {

  background-color:
    var(--card);

  border:
    1px solid var(--border);

}


.secondary-button:hover {

  background-color:
    var(--card-light);

}



/* =========================
   HERO DIAGNOSTIC INFO
========================= */

.hero-card {

  background:
    transparent;

  border:
    none;

  border-radius:
    0;

  padding:
    0;

  box-shadow:
    none;

  max-width:
    430px;

}


.card-label {

  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    2px;

  font-size:
    12px;

  font-weight:
    bold;

  margin-bottom:
    8px;

}


.hero-card h2 {

  color:
    var(--blue);

  font-size:
    78px;

  line-height:
    1;

  margin:
    0 0 22px;

}


.hero-card > p {

  color:
    var(--muted);

  font-size:
    17px;

  max-width:
    390px;

}


.waiver-box {

  margin-top:
    30px;

  padding:
    24px 0 0;

  background:
    transparent;

  border-radius:
    0;

  border-top:
    1px solid rgba(0, 156, 255, 0.35);

}


.waiver-box strong {

  color:
    var(--text);

  font-size:
    16px;

}


.waiver-box p {

  color:
    var(--muted);

  margin-top:
    8px;

  max-width:
    390px;

}


.small-text {

  color:
    var(--muted);

  font-size:
    13px;

  margin-top:
    18px;

  font-weight:
    bold;

}

/* =========================
   SERVICES
========================= */

.services-section {

  padding:
    110px 0;

  border-top:
    1px solid var(--border);

}


/* =========================
   FEATURED SERVICES
========================= */

.services-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    24px;

  margin-top:
    55px;

}


.featured-service-card {

  min-height:
    0;

  padding:
    0;

  background:
    transparent;

  border:
    none;

  border-radius:
    0;

  overflow:
    visible;

  display:
    flex;

  flex-direction:
    column;

  transition:
    transform 0.2s ease;

}


.featured-service-card:hover {

  transform:
    translateY(-4px);

}


.service-image {

  width:
    100%;

  height:
    210px;

  object-fit:
    cover;

  display:
    block;

  border:
    none;

  border-radius:
    8px;

  margin-bottom:
    18px;

}


.service-card-content {

  padding:
    0;

  flex:
    1;

}


.service-card-content h3 {

  font-size:
    21px;

  margin-bottom:
    10px;

}


.service-card-content p {

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.6;

}


/* Additional services */

.additional-services {

  margin-top:
    65px;

  padding-top:
    35px;

  border-top:
    1px solid var(--border);

}


.additional-services-label {

  color:
    var(--blue);

  text-transform:
    uppercase;

  letter-spacing:
    3px;

  font-size:
    13px;

  font-weight:
    bold;

  margin-bottom:
    30px;

}


.additional-services-list {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    30px 60px;

}


.additional-service-item {

  padding:
    0 0 22px;

  border-right:
    none;

  border-bottom:
    1px solid rgba(29, 79, 115, 0.45);

}


.additional-service-item h3 {

  font-size:
    18px;

  margin-bottom:
    7px;

}


.additional-service-item p {

  color:
    var(--muted);

  max-width:
    430px;

  font-size:
    14px;

  line-height:
    1.65;

}



/* =========================
   DIAGNOSTIC SECTION
========================= */

.diagnostic-section {

  padding:
    100px 0;

  background:
    var(--background-light);

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

}


.diagnostic-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    70px;

  align-items:
    center;

}


.symptom-list {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  column-gap:
    55px;
  
  row-gap: 
    22px;
  

}


.symptom-list div {

  padding:
    0px;

  background:
    transparent;

  border:
    none;

  border-radius:
    0px;

  display:
    flex;

  align-items: center;

  color: var(--text);

  font-size: 15px;

  font-weight: 600;

}


.symptom-list span {

  color:
    var(--blue);

  font-weight:
    900;

  font-size: 17px;

  margin-right:
    11px;

}



/* =========================
   ABOUT SECTION
========================= */

.about-section {

  padding:
    65px 0;

  background:
    var(--background);

  border-top:
    1px solid var(--border);

  border-bottom:
    none;

}


.about-strip {

  display:
    grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap:
    70px;

  align-items:
    center;

}


.about-strip h2 {

  font-size:
    clamp(30px, 4vw, 46px);

  line-height:
    1.1;

}


.about-strip > p {

  color:
    var(--muted);

  font-size:
    17px;

  line-height:
    1.8;

  max-width:
    650px;

}



/* =========================
   REQUEST SECTION
========================= */

.request-section {

  padding:
    110px 0;

}


.request-grid {

  display:
    grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    80px;

  align-items:
    start;

}


.request-intro {

  position:
    sticky;

  top:
    110px;

}


.info-box {

  margin-top:
    25px;

  padding:
    20px;

}


.info-box strong {

  display:
    block;

  margin-bottom:
    6px;

}


.info-box p {

  color:
    var(--muted);

}



/* =========================
   FORM
========================= */

.service-form {

  background:
    var(--card);

  padding:
    35px;

  border:
    1px solid var(--border);

  border-radius:
    12px;

}


.service-form h3 {

  font-size:
    22px;

  margin-bottom:
    22px;

}


.form-section-heading {

  margin-top:
    35px;

}


.form-row {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;

}


.form-group {

  margin-bottom:
    19px;

}


.form-group label {

  display:
    block;

  font-size:
    14px;

  font-weight:
    bold;

  margin-bottom:
    8px;

}


.form-group input,

.form-group textarea,

.form-group select {

  width:
    100%;

  border:
    1px solid var(--border);

  background:
    #081017;

  color:
    var(--text);

  padding:
    14px 15px;

  border-radius:
    6px;

}


.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

  outline:
    none;

  border-color:
    var(--blue);

  box-shadow:
    0 0 0 3px
    rgba(0, 156, 255, 0.12);

}


textarea {

  resize:
    vertical;

}


.or-divider {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  margin:
    10px 0 25px;

  color:
    var(--muted);

}


.or-divider::before,

.or-divider::after {

  content:
    "";

  flex:
    1;

  height:
    1px;

  background:
    var(--border);

}


.or-divider span {

  font-size:
    12px;

  font-weight:
    bold;

}



/* =========================
   AGREEMENT
========================= */

.diagnostic-agreement {

  background:
    var(--card-light);

  border:
    1px solid var(--border);

  padding:
    20px;

  margin-top:
    15px;

  border-radius:
    6px;

}


.checkbox-label {

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  gap:
    14px;

  align-items:
    start;

  color:
    var(--muted);

  font-size:
    14px;

}


.checkbox-label input {

  margin-top:
    5px;

}


.checkbox-label strong {

  color:
    var(--blue);

}


.submit-button {

  width:
    100%;

  margin-top:
    25px;

  font-size:
    16px;

}


.form-message {

  color:
    var(--muted);

  margin-top:
    15px;

  font-size:
    14px;

}



/* =========================

   FOOTER

========================= */

.site-footer {

  padding:
    55px 0;

  border-top:
    1px solid var(--border);

  background:
    #030405;

}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    1.15fr 1fr 1.25fr 0.8fr;

  gap:
    40px;

  align-items:
    center;

}


.footer-brand {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;

}


.footer-logo {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    12px;

}


.footer-logo-image {

  display:
    block;

  width:
    85px;

  height:
    auto;

  object-fit:
    contain;

}


.footer-brand > p {

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.6;

  max-width:
    220px;

  margin:
    0 auto;

}


.site-footer p {

  color:
    var(--muted);

}


.footer-contact p {

  font-size:
    12px;

  text-transform:
    uppercase;

  letter-spacing:
    2px;

}


.footer-contact a {

  color:
    var(--blue);

}


.footer-contact p + a {

  display:
    inline-block;

  margin-bottom:
    12px;

}


.footer-location .footer-label {

  font-size:
    12px;

  text-transform:
    uppercase;

  letter-spacing:
    2px;

  color:
    var(--text);

  margin-bottom:
    8px;

}


.footer-location address {

  color:
    var(--muted);

  font-style:
    normal;

  line-height:
    1.7;

}


.footer-location-note {

  margin-top:
    8px;

  font-size:
    13px;

}


.copyright {

  text-align:
    right;

}



/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1050px) {

  .featured-services-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

}


@media (max-width: 950px) {

  .hero {

    min-height:
      auto;

    padding:
      100px 0;

  }


  .hero-grid,

  .diagnostic-grid,

  .request-grid,

  .about-strip {

    grid-template-columns:
      1fr;

  }


  .request-intro {

    position:
      static;

  }


  .about-strip {

    gap:
      20px;

  }


  .footer-grid {

    grid-template-columns:
      1fr;

  }


  .copyright {

    text-align:
      left;

  }

}



@media (max-width: 650px) {

  .container {

    width:
      min(
        calc(100% - 28px),
        var(--max-width)
      );

  }


  nav {

    display:
      none;

  }


  .hero {

    padding:
      75px 0;

  }


  .hero h1 {

    font-size:
      55px;

  }


  .hero-card {

    padding:
      25px;

  }


  .services-section,

  .about-section,

  .request-section {

    padding:
      75px 0;

  }


  .featured-services-grid {

    grid-template-columns:
      1fr;

  }


  .service-image {

    height:
      250px;

  }


  .additional-services-list {

    grid-template-columns:
      1fr;

    gap:
      28px;

  }


  .symptom-list {

    grid-template-columns:
      1fr;

  }


  .form-row {

    grid-template-columns:
      1fr;

    gap:
      0;

  }


  .service-form {

    padding:
      22px;

  }

}

.header-logo {
  display: block;
  width: 120px;
  height: auto;
  object-fit: contain;
}