:root {
      --blue: #168bd2;
      --blue-bright: #1598ed;
      --black: #07090b;
      --panel: #101419;
      --muted: #aeb8c2;
      --white: #f6f8fa;
      --line: #252c34;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--black);
      color: var(--white);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
    }
    a { color: inherit; }
    .wrap { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
    .hero {
      min-height: 92vh;
      display: grid;
      align-items: center;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(7,9,11,.98) 0%, rgba(7,9,11,.88) 48%, rgba(7,9,11,.42) 100%),
        url("../images/oakland-epoxy-filler-photo-PCOxVNa.jpg") center/cover;
    }
    .hero::after {
      content: "";
      position: absolute; inset: auto 0 0;
      height: 5px; background: var(--blue); z-index: -1;
    }
    .hero-inner { padding: 70px 0 90px; max-width: 720px; }
    .logo { display: block; width: min(340px, 80%); height: auto; margin: 0 0 36px; }
    .eyebrow {
      color: var(--blue-bright); font-size: .78rem; font-weight: 800;
      letter-spacing: .2em; text-transform: uppercase;
    }
    h1 { font-size: clamp(2.6rem, 6vw, 5.1rem); line-height: 1.02; letter-spacing: -.045em; margin: 12px 0 22px; }
    h1 span { color: var(--blue-bright); }
    .hero p { max-width: 580px; color: #d1d7dd; font-size: clamp(1rem, 2vw, 1.2rem); margin: 0 0 30px; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; min-height: 49px;
      padding: 12px 22px; border-radius: 4px; text-decoration: none; font-weight: 800;
      border: 1px solid var(--blue); transition: transform .2s, background .2s;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn.primary { background: var(--blue); color: white; }
    .btn.secondary { background: rgba(0,0,0,.35); color: white; }
    section { padding: 82px 0; }
    .section-head { max-width: 650px; margin-bottom: 32px; }
    h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.03em; margin: 8px 0 14px; }
    .section-head p, .muted { color: var(--muted); }
    .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .service {
      background: var(--panel); border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
    }
    .service img { display: block; width: 100%; height: 210px; object-fit: cover; }
    .service-content { padding: 22px; }
    .service h3 { margin: 0 0 8px; font-size: 1.2rem; }
    .service p { margin: 0; color: var(--muted); font-size: .96rem; }
    .why { background: #0c1014; border-top: 1px solid #171d24; border-bottom: 1px solid #171d24; }
    .benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
    .benefit { padding: 22px 0; }
    .benefit-mark { color: var(--blue-bright); font-size: 1.5rem; font-weight: 900; }
    .benefit h3 { margin: 7px 0; }
    .benefit p { margin: 0; color: var(--muted); }
    .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
    .contact-copy p { color: var(--muted); }
    .contact-card { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 26px; }
    form { display: grid; gap: 15px; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 6px; color: #e6ebef; }
    input, select, textarea {
      width: 100%; color: var(--white); background: #080b0e; border: 1px solid #303943;
      border-radius: 4px; padding: 12px 13px; font: inherit; outline: none;
    }
    input:focus, select:focus, textarea:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 2px #168bd229; }
    textarea { min-height: 120px; resize: vertical; }
    .form-note { color: var(--muted); font-size: .8rem; margin: 0; }
    .form-status { display: none; padding: 12px; border-left: 3px solid var(--blue); background: #0a1a25; }
    footer { border-top: 1px solid var(--line); padding: 25px 0; color: #89939e; font-size: .88rem; }
    .footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
    @media (max-width: 780px) {
      .hero { min-height: auto; }
      .hero-inner { padding: 65px 0 78px; }
      .services, .benefits { grid-template-columns: 1fr; }
      .service { display: grid; grid-template-columns: 38% 1fr; }
      .service img { height: 100%; min-height: 180px; }
      .contact-grid { grid-template-columns: 1fr; gap: 28px; }
    }
    @media (max-width: 520px) {
      .wrap { width: min(100% - 28px, 1100px); }
      section { padding: 60px 0; }
      .service { display: block; }
      .service img { height: 205px; }
      .field-row { grid-template-columns: 1fr; }
      .contact-card { padding: 18px; }
      .logo { width: min(280px, 85%); }
    }