:root {
  --navy:#082b63;
  --navy-2:#061f48;
  --yellow:#f5b51c;
  --yellow-2:#ffc840;
  --paper:#ffffff;
  --soft:#f4f7fb;
  --soft-2:#eef3f8;
  --ink:#111827;
  --muted:#5f6673;
  --line:rgba(8,43,99,.13);
  --shell:1180px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
}

a { color:inherit; }
img { max-width:100%; display:block; }

.skip-link {
  position:absolute;
  left:-999px;
  top:0;
  z-index:1000;
  background:#fff;
  color:#000;
  padding:.8rem 1rem;
}
.skip-link:focus { left:1rem; top:1rem; }

.site-header {
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.12);
  position:sticky;
  top:0;
  z-index:100;
}

.header-inner {
  width:min(calc(100% - 2rem), var(--shell));
  margin:0 auto;
  min-height:92px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}

.logo-lockup {
  display:inline-flex;
  align-items:center;
  gap:.95rem;
  text-decoration:none;
}

.logo-image {
  width:auto;
  height:84px;
  border-radius:12px;
}

.logo-text {
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.logo-title {
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
}

.logo-place {
  color:rgba(255,255,255,.72);
  font-size:.9rem;
}

.nav {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}

.nav a {
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-weight:850;
  font-size:.9rem;
  padding:.7rem .78rem;
  border-radius:999px;
}

.nav a:hover,
.nav a.active {
  color:var(--navy);
  background:var(--yellow);
}

.nav .cta-nav {
  background:var(--yellow);
  color:var(--navy);
}

.hero {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(8,20,37,.82) 0%, rgba(8,20,37,.56) 44%, rgba(8,20,37,.08) 72%),
    url("assets/homefix-hero.jpg") center right / cover no-repeat;
  color:#fff;
}

.hero-inner {
  width:min(calc(100% - 2rem), var(--shell));
  margin:0 auto;
  min-height:560px;
  display:grid;
  grid-template-columns:1fr 360px;
  gap:2rem;
  align-items:center;
  padding:4.2rem 0;
}

.kicker {
  display:inline-flex;
  color:var(--yellow);
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.82rem;
  margin-bottom:1rem;
}

.hero h1 {
  margin:0;
  max-width:670px;
  font-size:clamp(3.3rem, 7vw, 5.8rem);
  line-height:.96;
  letter-spacing:-.055em;
  text-shadow:0 5px 20px rgba(0,0,0,.32);
}

.hero-copy {
  max-width:560px;
  margin:1rem 0 1.4rem;
  font-size:1.22rem;
  color:rgba(255,255,255,.92);
}

.button-row {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}

.primary-button,
.secondary-button,
.yellow-button,
.dark-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:6px;
  padding:.95rem 1.3rem;
  font-weight:900;
  transition:transform .18s ease, filter .18s ease;
}

.yellow-button {
  background:linear-gradient(135deg, var(--yellow), var(--yellow-2));
  color:var(--navy);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.secondary-button {
  background:rgba(255,255,255,.07);
  color:#fff;
  border:1px solid rgba(255,255,255,.7);
}

.primary-button {
  background:var(--navy);
  color:#fff;
}

.dark-button {
  background:var(--navy);
  color:#fff;
}

.primary-button:hover,
.secondary-button:hover,
.yellow-button:hover,
.dark-button:hover {
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.quote-card {
  background:linear-gradient(180deg, rgba(8,43,99,.96), rgba(6,31,72,.98));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  border-radius:10px;
  padding:1.6rem;
}

.quote-card h2 {
  margin:0 0 .25rem;
  color:var(--yellow);
  font-size:1.25rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.quote-card p {
  margin:0 0 1rem;
  color:rgba(255,255,255,.9);
}

.quote-list {
  display:grid;
  gap:1rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.2);
}

.quote-item {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:.8rem;
  align-items:center;
}

.quote-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:var(--yellow);
  font-size:1.5rem;
}

.section {
  padding:4rem max(1rem, calc((100vw - var(--shell)) / 2));
}

.section.compact {
  padding-top:3rem;
  padding-bottom:3rem;
}

.section.soft {
  background:var(--soft);
}

.section-title {
  margin:0 0 1.7rem;
  color:var(--navy);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:1.45rem;
}

.section-title::after {
  content:"";
  display:block;
  width:46px;
  height:4px;
  background:var(--yellow);
  margin-top:.35rem;
}

.jobs-grid {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:1rem;
}

.job-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 14px 34px rgba(8,43,99,.05);
  padding:1.15rem .85rem;
  text-align:center;
}

.job-icon {
  min-height:46px;
  display:grid;
  place-items:center;
  color:var(--navy);
  font-size:2.2rem;
  margin-bottom:.65rem;
}

.job-card h3 {
  margin:0 0 .45rem;
  color:var(--navy);
  font-size:1rem;
  line-height:1.1;
}

.job-card p {
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

.process {
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.process-row {
  width:min(calc(100% - 2rem), var(--shell));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.1rem;
  padding:2.3rem 0;
}

.process-step {
  display:grid;
  grid-template-columns:56px 1fr;
  gap:.9rem;
  align-items:center;
  position:relative;
}

.step-number {
  width:56px;
  height:56px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:1.25rem;
  box-shadow:0 8px 20px rgba(8,43,99,.16);
}

.process-step:nth-child(even) .step-number {
  background:var(--yellow);
  color:var(--navy);
}

.process-step h3 {
  margin:0 0 .15rem;
  color:var(--navy);
  text-transform:uppercase;
  font-size:.95rem;
}

.process-step p {
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

.recent-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}

.work-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(8,43,99,.07);
}

.work-image-wrap {
  position:relative;
}

.work-card img {
  width:100%;
  aspect-ratio:1.95 / .85;
  object-fit:cover;
}

.before-after {
  position:absolute;
  left:.7rem;
  bottom:.7rem;
  display:flex;
  gap:.45rem;
}

.before-after span {
  display:inline-flex;
  padding:.32rem .5rem;
  background:rgba(8,43,99,.92);
  color:#fff;
  border-radius:4px;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
}

.before-after span:last-child {
  background:var(--yellow);
  color:var(--navy);
}

.work-card p {
  margin:0;
  padding:.8rem 1rem;
  text-align:center;
  color:#303947;
}

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

.testimonial {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.5rem;
  box-shadow:0 16px 36px rgba(8,43,99,.06);
}

.quote-mark {
  color:var(--navy);
  font-size:3rem;
  line-height:1;
  margin-bottom:.2rem;
}

.testimonial blockquote {
  margin:0;
  color:#303947;
  font-size:1.03rem;
}

.testimonial footer {
  margin-top:1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  color:var(--navy);
  font-weight:850;
}

.stars {
  color:var(--yellow);
  letter-spacing:.08em;
}

.local-grid {
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:2rem;
  align-items:center;
}

.map-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(8,43,99,.07);
}

.map-card img {
  width:100%;
  aspect-ratio:2.4 / .75;
  object-fit:cover;
}

.coverage-list {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.35rem 1rem;
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}

.coverage-list li {
  position:relative;
  padding-left:1.35rem;
  color:#303947;
}

.coverage-list li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--yellow);
  font-weight:900;
}

.bottom-cta {
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  color:#fff;
}

.bottom-cta-inner {
  width:min(calc(100% - 2rem), var(--shell));
  margin:0 auto;
  padding:1.7rem 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:1.5rem;
  align-items:center;
}

.bottom-cta h2 {
  margin:0 0 .25rem;
  font-size:2rem;
  line-height:1;
}

.bottom-cta p {
  margin:0;
  color:rgba(255,255,255,.82);
}

.email-box {
  background:var(--yellow);
  color:var(--navy);
  border-radius:8px;
  padding:1rem 1.4rem;
  text-align:center;
  min-width:320px;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}

.email-box strong {
  display:block;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.84rem;
}

.email-box a {
  color:var(--navy);
  text-decoration:none;
  font-weight:900;
}

.example-note {
  font-size:.88rem;
  color:var(--muted);
  font-style:italic;
}

.site-footer {
  background:#061a3d;
  color:#fff;
}

.footer-inner {
  width:min(calc(100% - 2rem), var(--shell));
  margin:0 auto;
  display:grid;
  grid-template-columns:1.25fr .7fr .85fr;
  gap:3rem;
  padding:2.6rem 0;
}

.footer-logo {
  width:110px;
  border-radius:999px;
  margin-bottom:.9rem;
}

.footer-brand-block p {
  color:rgba(255,255,255,.72);
  max-width:390px;
}

.footer-tagline { color:#fff !important; }

.site-footer h3 {
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.95rem;
}

.footer-links {
  margin:0;
  padding:0;
  list-style:none;
}

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

.footer-links a,
.site-footer a {
  color:rgba(255,255,255,.84);
}

.footer-bottom {
  width:min(calc(100% - 2rem), var(--shell));
  margin:0 auto;
  padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:rgba(255,255,255,.6);
  font-size:.9rem;
}

@media (max-width:1120px) {
  .header-inner {
    align-items:flex-start;
    flex-direction:column;
    padding:1rem 0;
  }
  .hero-inner,
  .local-grid,
  .footer-inner,
  .bottom-cta-inner {
    grid-template-columns:1fr;
  }
  .quote-card {
    max-width:420px;
  }
  .jobs-grid {
    grid-template-columns:repeat(3, 1fr);
  }
  .process-row,
  .recent-grid,
  .testimonials-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:720px) {
  .logo-image { height:70px; }
  .logo-text { display:none; }
  .nav { gap:.1rem; }
  .nav a { font-size:.82rem; padding:.55rem .62rem; }
  .hero {
    background:
      linear-gradient(90deg, rgba(8,20,37,.88), rgba(8,20,37,.72)),
      url("assets/homefix-hero.jpg") center / cover no-repeat;
  }
  .hero-inner {
    min-height:auto;
    padding:3.2rem 0;
  }
  .jobs-grid,
  .coverage-list {
    grid-template-columns:1fr;
  }
  .section {
    padding-top:3rem;
    padding-bottom:3rem;
  }
  .process-step {
    grid-template-columns:48px 1fr;
  }
  .step-number {
    width:48px;
    height:48px;
  }
  .email-box {
    min-width:0;
  }
  .footer-bottom {
    flex-direction:column;
  }
}