/* ==========================================================================
   Components for the multi page site.
   --------------------------------------------------------------------------
   Layered on top of the original stylesheet, which already defines the design
   tokens, buttons, nav, footer, price cards, and gallery. Everything here is
   for patterns the single page site never had: breadcrumbs, answer blocks,
   FAQ disclosure, comparison tables, guide cards, and the longer quote form.

   Uses the existing custom properties throughout so the brand stays identical.
   ========================================================================== */

/* ------------------------------------------------------------------ layout */

.sec {
  padding: 76px 0;
}
.sec:nth-of-type(even) {
  background: var(--off-white);
}
.sec h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.sec h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.sec p {
  font-size: 16.5px;
  line-height: 1.7;
  color: #33405c;
  margin: 0 0 16px;
  max-width: 72ch;
}
.sec-intro {
  font-size: 18px !important;
  color: var(--muted, #5A6785) !important;
  margin-bottom: 28px !important;
}
.sec-foot {
  margin-top: 28px;
}
.sec ul,
.sec ol {
  max-width: 72ch;
}

/* Interior page hero.
   Matches the original homepage hero rather than inventing a new one: light
   background, eyebrow pill, navy headline with a gradient accent. The dark
   gradient version that was here before did not belong to this site. */
.page-hero {
  background: var(--white);
  padding: calc(var(--nav-height) + 56px) 0 48px;
  border-bottom: 1px solid var(--hairline);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 14px 0;
  color: var(--navy);
  max-width: 18ch;
}
.page-hero-sub {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--muted, #5A6785);
  max-width: 58ch;
  margin: 0 0 26px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-price-line {
  margin-top: 20px;
  font-size: 15px;
  color: var(--muted, #5A6785);
}
.hero-lead {
  font-size: 19px;
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 0 26px;
}
.hero-meta {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted, #5A6785);
}

.btn-lg {
  height: 54px;
  padding: 0 28px;
  font-size: 16px;
}
.btn-block {
  display: flex;
  width: 100%;
}

/* ------------------------------------------------------------- breadcrumbs */

.crumbs {
  background: var(--blue-soft);
  border-bottom: 1px solid var(--hairline);
  padding: 12px 0;
  font-size: 13.5px;
  /* Sits directly under the fixed nav. */
  margin-top: var(--nav-height);
}
.crumbs a {
  color: var(--blue);
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}
.crumbs [aria-current='page'] {
  color: var(--muted, #5a6785);
}
.crumb-sep {
  margin: 0 8px;
  color: #9fb0cf;
}
/* With breadcrumbs present the nav is already cleared by .crumbs. */
.crumbs + main .page-hero {
  padding-top: 48px;
}

/* ----------------------------------------------------------- answer block */

/* The answer-first summary. Visually distinct so a reader can find the
   actual answer without reading the pitch, which is the whole point. */
.answer-block {
  background: var(--blue-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin: 40px 0 0;
}
.answer-block p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--navy);
}

/* ------------------------------------------------------------------ lists */

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: #33405c;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}

.steps-list {
  padding-left: 22px;
  margin: 0 0 18px;
}
.steps-list li {
  font-size: 16px;
  line-height: 1.7;
  color: #33405c;
  margin-bottom: 12px;
}
.steps-list li strong {
  color: var(--navy);
}

/* ------------------------------------------------------------------ tables */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  margin: 0 0 20px;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-size: 15.5px;
}
.table-scroll th,
.table-scroll td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.table-scroll thead th {
  background: var(--blue-soft);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue-deep);
}
.table-scroll tbody th {
  font-weight: 600;
  color: var(--navy);
}
.table-scroll tr:last-child th,
.table-scroll tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------- FAQ */

.faq-list {
  display: grid;
  gap: 10px;
  max-width: 860px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  position: relative;
  list-style: none;
  transition: background 0.15s var(--ease);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  background: var(--blue-soft);
}
/* Keyboard users must be able to see which question is focused. */
.faq-item summary:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: -3px;
}
.faq-item summary h3 {
  display: inline;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
}
.faq-answer {
  padding: 0 20px 20px;
}
.faq-answer p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.7;
  color: #33405c;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-answer a {
  color: var(--blue);
}

/* --------------------------------------------------------------- card grids */

.svc-grid,
.guide-grid,
.price-grid,
.project-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.svc-card,
.guide-card,
.project-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.svc-card:hover,
.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.svc-card h3 a,
.guide-card h3 a,
.project-card h3 {
  color: var(--navy);
  text-decoration: none;
}
.svc-card h3 a:hover,
.guide-card h3 a:hover {
  color: var(--blue);
}
.svc-card p,
.guide-card p {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5a6785;
  margin: 0 0 14px;
}
.link-arrow {
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
  text-decoration: none;
}
.link-arrow::after {
  content: ' \2192';
  transition: transform 0.15s var(--ease);
  display: inline-block;
}
.link-arrow:hover::after {
  transform: translateX(3px);
}

.price-grid {
  align-items: start;
}
.price-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.03em;
}
.price-qual {
  font-size: 14px;
  color: var(--muted, #5a6785);
  margin-left: 6px;
}
.price-note {
  margin-top: 24px;
  font-size: 14.5px;
  color: var(--muted, #5a6785);
  max-width: 74ch;
}

.project-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 14px;
  display: block;
}

.empty-state {
  background: var(--white);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
}

/* -------------------------------------------------------------- related links */

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.related-list li {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 18px;
}
.related-list a {
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
.related-list a:hover {
  text-decoration: underline;
}
.related-list span {
  display: block;
  font-size: 13.5px;
  color: var(--muted, #5a6785);
  margin-top: 3px;
}

/* -------------------------------------------------------------------- CTA */

.cta-sec {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--blue-deep) 100%) !important;
  color: var(--white);
  text-align: center;
}
.cta-sec h2 {
  color: var(--white);
}
.cta-sec p {
  color: rgba(255, 255, 255, 0.85);
  margin-left: auto;
  margin-right: auto;
}
.cta-inner .hero-actions {
  justify-content: center;
}

/* ------------------------------------------------------------- stat strip */

.stat-sec {
  padding: 44px 0 !important;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
  text-align: center;
}
.stat .stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.stat .stat-label {
  display: block;
  font-size: 14px;
  color: var(--muted, #5a6785);
  margin-top: 4px;
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px !important;
}
.area-list span {
  background: var(--blue-soft);
  color: var(--blue-deep);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14.5px;
  font-weight: 600;
}

/* -------------------------------------------------------------- contact page */

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-side {
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding: 26px;
}
.contact-side h2 {
  font-size: 18px !important;
  margin-bottom: 10px !important;
}
.contact-side h2:not(:first-child) {
  margin-top: 26px !important;
}
.contact-big {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
}
.hint {
  font-size: 14px;
  color: var(--muted, #5a6785);
}

/* --------------------------------------------------------------------- form */

.quote-form {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.quote-form .field {
  margin-bottom: 16px;
}
.quote-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.req {
  font-weight: 400;
  color: var(--muted, #5a6785);
  font-size: 12.5px;
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  color: var(--navy);
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--white);
  min-height: 46px;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: 3px solid var(--blue-bright);
  outline-offset: -1px;
  border-color: var(--blue);
}
.quote-form textarea {
  resize: vertical;
}
.checks {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.checks legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  padding: 0 6px;
}
.checks .check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 8px;
  min-height: 32px;
  cursor: pointer;
}
.checks .check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  flex: none;
}
.form-hint {
  font-size: 13.5px;
  color: var(--muted, #5a6785);
  margin: 4px 0 16px;
}
.form-msg {
  margin-top: 12px;
  font-size: 15px;
  min-height: 22px;
}

/* -------------------------------------------------------------- footer bits */

.footer-h {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 12px;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer li {
  margin-bottom: 8px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
}
.footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
.footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ a11y */

/* Every interactive element needs a visible focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

@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;
  }
  .fade-up,
  .scale-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .sec {
    padding: 52px 0;
  }
  .page-hero {
    padding: 84px 0 44px;
  }
  .answer-block {
  background: var(--blue-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin: 40px 0 0;
}
  .answer-block p {
    font-size: 16.5px;
  }
}

@media (max-width: 620px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .crumbs {
    font-size: 12.5px;
  }
  .quote-form {
    padding: 20px;
  }
}

/* The homepage hero sits on a light background, unlike the interior
   .page-hero. Override the light-on-dark defaults so the supporting text and
   lead copy stay readable there. */
.hero .hero-meta {
  color: var(--muted, #5A6785);
}
.hero .hero-lead {
  color: #33405c;
}
.hero .hero-lead strong {
  color: var(--navy);
}

/* Link columns on the homepage, surfacing the service and guide pages in the
   site's existing visual language rather than a new component. */
.link-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.link-columns h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #5A6785);
  margin: 0 0 14px;
}
.plain-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.plain-links li {
  margin-bottom: 10px;
}
.plain-links a {
  color: var(--navy);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.plain-links a:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* Makes a whole card clickable without changing its markup. The card is
   already position:relative, so this anchor covers it. Used on the homepage
   service cards, whose structure must not be altered. */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Full width photo on a project page. */
.project-figure {
  margin: 0 0 8px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.project-figure img {
  width: 100%;
  height: auto;
  display: block;
}