/* ==========================================================================
   EverNest Home Services — Site Stylesheet
   Palette: Navy #0F1D2E / Gold #C7A252 / Cream #FAF7F1
   ========================================================================== */

:root {
  --navy: #0f1d2e;
  --navy-deep: #0a141f;
  --navy-soft: #17293e;
  --gold: #c7a252;
  --gold-light: #e0c17e;
  --gold-dark: #a3822f;
  --cream: #faf7f1;
  --cream-dark: #f1ead9;
  --ink: #1c2733;
  --gray: #5b6672;
  --gray-light: #8b95a0;
  --white: #ffffff;
  --border: #e7e0d1;
  --shadow: 0 10px 30px rgba(15, 29, 46, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 29, 46, 0.18);
  --radius: 10px;
  --max-width: 1180px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; color: var(--gray); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--gold-dark);
  margin-bottom: 14px;
}

.section {
  padding: 88px 0;
}
.section--tight { padding: 60px 0; }
.section--cream { background: var(--cream); }
.section--navy {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
  color: var(--white);
}
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy p { color: rgba(255,255,255,0.75); }

.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head p { font-size: 1.05rem; }

.rule {
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 20px;
  border: none;
}
.rule--left { margin: 0 0 20px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn--gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--navy-deep);
}
.btn--gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}
.btn--outline:hover { background: rgba(255,255,255,0.1); }
.btn--outline-navy {
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline-navy:hover { background: var(--navy); color: var(--white); }
.btn--block { width: 100%; justify-content: center; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img.brand-icon { height: 44px; width: auto; }
.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.13em;
  color: var(--navy);
}
.brand-wordmark span {
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.34em;
  color: var(--gold-dark);
  font-weight: 700;
  margin-top: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-weight: 600;
  font-size: 0.92rem;
}
.nav-links a {
  color: var(--navy);
  position: relative;
  padding: 6px 0;
}
.nav-links a:hover { color: var(--gold-dark); }
.nav-links a.active { color: var(--gold-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-phone {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-phone svg { flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: 0.2s;
}

.dropdown { position: relative; }
/* The wrapper's own padding extends its hover area right down to the menu, so
   there is no dead gap to cross — nothing to lose hover over on the way down.
   This sits on .dropdown (not the "Services" link itself) so the link's own
   box stays identical to its sibling nav links and stays vertically aligned
   with them; the menu's "top" is pulled back up by the same amount so it
   still opens flush under the bar with a gold top accent. */
.dropdown { padding-bottom: 18px; margin-bottom: -18px; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% - 18px);
  left: -20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  min-width: 240px;
  margin-top: 0;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 500;
}
.dropdown-menu a:hover { background: var(--cream); color: var(--gold-dark); }

/* Hero (home) */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(9,16,25,0.86) 10%, rgba(9,16,25,0.25) 60%, rgba(9,16,25,0.55) 100%);
}
.hero h1, .page-hero h1 { color: var(--white); }
.hero-inner {
  position: relative;
  z-index: 2;
  padding-bottom: 70px;
  max-width: 760px;
}
.hero-trust {
  margin-top: 26px;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--gold-light);
  font-weight: 600;
}
.hero-cta { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

/* Page (interior) hero band */
.page-hero {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
  color: var(--white);
  padding: 70px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
}
.page-hero-icon .icon { width: 100%; height: 100%; color: var(--gold-light); }
.breadcrumb {
  font-size: 0.85rem;
  color: var(--gold-light);
  margin-bottom: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.breadcrumb a { color: rgba(255,255,255,0.65); }
.breadcrumb a:hover { color: var(--gold-light); }
.page-hero p.lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  max-width: 620px;
}
.page-hero-glow {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,162,82,0.18), transparent 70%);
}

/* Cards grid */
.grid {
  display: grid;
  gap: 28px;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Icon spans: every icon() helper call renders <span class="icon ..."><svg>...
   Base rule keeps a sane default size/shape; each context below overrides
   the span's width/height, and the svg always fills its span at 100%. */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: var(--navy);
  flex-shrink: 0;
}
.icon svg { width: 100%; height: 100%; display: block; }

.icon.icon-inline { width: 18px; height: 18px; color: var(--gold-dark); }
.header-phone .icon.icon-inline { color: var(--navy); }

.card .icon {
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  color: var(--gold-dark);
}
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: var(--gold-dark);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.card-link:hover { text-decoration: underline; }

.service-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card .service-card-top {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
  padding: 30px 28px 22px;
}
.service-card .service-card-top .icon { width: 42px; height: 42px; color: var(--gold-light); }
.service-card .service-card-body { padding: 22px 28px 28px; }
.service-card h3 { margin-bottom: 8px; }

/* Image / illustration shown next to a service description */
.service-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Brand statement band */
.statement {
  text-align: center;
  padding: 100px 0;
}
.statement h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 780px;
  margin: 0 auto;
  color: var(--white);
}
.statement .rule { background: var(--gold); }

/* Why choose grid */
.feature-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.feature-item .check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
}
.feature-item span { font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.feature-item .check .icon { width: 14px; height: 14px; color: inherit; }

/* Process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 30px 24px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -18px;
  left: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  font-family: var(--serif);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Testimonials */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  position: relative;
}
.testimonial-card .stars { color: var(--gold); margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-card blockquote {
  margin: 0 0 16px;
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
}
.testimonial-card cite {
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
  display: block;
  font-size: 0.92rem;
}
.testimonial-card .placeholder-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-light);
  border: 1px dashed var(--border);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--cream-dark);
  border: 1px solid var(--border);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(15,29,46,0.85), transparent);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
}
.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gray-light);
  gap: 10px;
  text-align: center;
  padding: 20px;
}
.gallery-placeholder .icon { width: 34px; height: 34px; opacity: 0.6; color: var(--gray-light); }
.gallery-placeholder span { font-size: 0.82rem; font-weight: 600; }

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 700;
  gap: 20px;
}
.faq-question .plus {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-question .plus { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding-bottom: 22px; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: start;
}
.contact-info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}
.contact-info-item .icon-box {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-item .icon-box .icon { width: 22px; height: 22px; color: var(--gold-dark); }
.contact-info-item h4 { margin-bottom: 4px; }
.contact-info-item p { margin-bottom: 0; }

.form-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
}
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: var(--white);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-note { font-size: 0.8rem; color: var(--gray-light); margin-top: 10px; }
.form-success { text-align: center; padding: 24px 4px 8px; }
.form-success h3 { margin-bottom: 10px; }
.form-success p { font-size: 0.95rem; }
.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 30px;
}
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
  color: var(--white);
  padding: 60px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,0.75); margin-bottom: 28px; }
.cta-band .hero-cta { justify-content: center; }

/* Footer */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.72);
  padding: 64px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand-icon { height: 40px; margin-bottom: 14px; }
.footer-wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: 16px;
}
.footer-wordmark span {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: var(--gold);
  font-weight: 700;
  margin-top: 4px;
}
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.92rem; }
.footer-col h4 {
  color: var(--gold-light);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a:hover { color: var(--gold-light); }
.footer-col a, .footer-col p { color: rgba(255,255,255,0.68); font-size: 0.92rem; }
.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: rgba(255,255,255,0.6); }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Responsive */
@media (max-width: 980px) {
  .grid--3, .grid--4, .feature-list, .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-links, .header-phone-desktop { display: none; }
  .nav-toggle { display: block; flex-shrink: 0; }
  .header-actions { gap: 6px; flex-shrink: 0; }
  /* Shrink the brand mark and the estimate button so both fit next to the
     hamburger without overlapping on narrow phones. */
  .site-header .container { flex-wrap: nowrap; }
  .brand { gap: 8px; min-width: 0; }
  .brand img.brand-icon { height: 32px; }
  .brand-wordmark { font-size: 0.88rem; }
  .brand-wordmark span { font-size: 0.42rem; letter-spacing: 0.14em; margin-top: 5px; }
  .header-actions .btn--gold { padding: 10px 14px; font-size: 0.82rem; white-space: nowrap; }
  .grid--3, .grid--4, .grid--2, .feature-list, .steps { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 92vh; }
  .section { padding: 60px 0; }

  .site-header.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 18px 24px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .site-header.nav-open .nav-links a { padding: 10px 0; width: 100%; }
  .site-header.nav-open .dropdown-menu {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 12px;
    margin-top: 4px;
  }
  /* Reset the desktop hover-padding on mobile (menu is static/expanded here). */
  .dropdown { padding-bottom: 0; margin-bottom: 0; }
}

@media (max-width: 500px) {
  .gallery-grid { grid-template-columns: 1fr; }
  /* "HOME SERVICES" runs longer than the old "CONTRACTING" subtitle, so on
     very narrow phones (iPhone SE and similar) the header needs an extra
     size-down pass to keep the wordmark clear of the Free Estimate button. */
  .brand { gap: 6px; }
  .brand img.brand-icon { height: 26px; }
  .brand-wordmark { font-size: 0.7rem; letter-spacing: 0.06em; }
  .brand-wordmark span { font-size: 0.38rem; letter-spacing: 0.1em; margin-top: 4px; }
  .header-actions { gap: 4px; }
  .header-actions .btn--gold { padding: 8px 10px; font-size: 0.72rem; }
}