/* Sur Construction Inc. — site stylesheet
   Palette: charcoal ink + brass accent on warm porcelain ground
   Type: Fraunces (display) + Work Sans (body/UI)
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink: #1F2421;
  --ink-soft: #454C48;
  --muted: #6B716C;
  --line: #DCD7CC;
  --bg: #FAF7F1;
  --surface: #FFFFFF;
  --surface-2: #F1ECE1;
  --brass: #A9782E;
  --brass-dark: #8A5F22;
  --brass-soft: #F0E3CB;
  --ink-invert: #FAF7F1;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1, h2, h3{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p{ margin: 0 0 1em; }
.container{
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-primary{ background: var(--brass); color: #fff; }
.btn-primary:hover{ background: var(--brass-dark); }
.btn-outline{ background: transparent; border-color: rgba(250,247,241,0.5); color: var(--ink-invert); }
.btn-outline:hover{ border-color: #fff; }
.btn-outline-dark{ background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline-dark:hover{ border-color: var(--brass); }

/* Top strip */
.top-strip{
  background: var(--ink);
  color: var(--ink-invert);
  font-size: 0.82rem;
}
.top-strip .container{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.5rem; padding-bottom: 0.5rem; gap: 1rem; flex-wrap: wrap;
}
.top-strip a{ text-decoration: none; font-weight: 600; }

/* Header */
header.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
header.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.9rem; padding-bottom: 0.9rem; gap: 1.5rem;
}
.brand{ display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand-mark{
  width: 42px; height: 42px; flex-shrink: 0;
  border: 2px solid var(--brass); transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center;
}
.brand-mark span{
  transform: rotate(-45deg);
  font-family: 'Fraunces', serif; font-weight: 700; color: var(--brass-dark); font-size: 1.1rem;
}
.brand-name{ font-family: 'Fraunces', serif; font-weight: 600; line-height: 1.1; }
.brand-name small{ display: block; font-family: 'Work Sans', sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--muted); font-weight: 600; }

nav.main-nav{ display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
nav.main-nav a{ text-decoration: none; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
nav.main-nav a[aria-current="page"]{ color: var(--brass-dark); }
nav.main-nav a:hover{ color: var(--brass-dark); }
.nav-cities{ display: flex; gap: 0.9rem; font-size: 0.82rem; color: var(--muted); }
.nav-cities a{ font-weight: 500; }
.header-actions{ display: flex; align-items: center; gap: 0.9rem; }

/* Hero */
.hero{
  background: linear-gradient(160deg, var(--ink) 0%, #2B322D 100%);
  color: var(--ink-invert);
  padding: 4.5rem 0 4rem;
}
.hero .eyebrow{ color: var(--brass-soft); }
.hero h1{ font-size: clamp(2.2rem, 4.8vw, 3.8rem); max-width: 20ch; }
.hero p.lede{ font-size: 1.15rem; max-width: 58ch; color: #D8D6CE; }
.hero-actions{ display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }

.hero-trust-row{ display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-trust-row .rating-badge{ margin-top: 0; }

.rating-badge{ display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; font-size: 0.92rem; }
.rating-badge .stars{ color: var(--brass); letter-spacing: 0.08em; font-size: 0.95rem; }
.rating-badge-text{ color: #D8D6CE; }
.rating-badge-text strong{ color: var(--ink-invert); }
.rating-badge-link{ color: var(--brass-soft); font-weight: 700; text-decoration: none; }
.rating-badge-link:hover{ text-decoration: underline; }

.bbb-seal{ line-height: 0; }
.bbb-seal img{ display: block; width: 128px; height: auto; aspect-ratio: 200 / 42; }
.bbb-seal--footer{ margin-top: 1.1rem; }
.bbb-seal--hero{ opacity: 0.95; }

/* Single-column hero pages (every page except the homepage's split/blended
   hero) just put hero-copy straight in .container. .container itself is
   wide (1320px) so the rest of the site's sections — cards, footer columns,
   etc. — have room to breathe on a big monitor, but plain hero text can't
   just stretch to fill that on its own without turning into unreadably
   long lines. A middle-width cap here — wider than a pure reading column,
   narrower than the full container — lets the headline/lede grow into more
   of the hero on large screens (helped by the bigger clamp() above) without
   stranding a tiny text block in a huge empty box the way the full 1320px
   container did. */
.hero:not(.hero--split) .container{ max-width: 960px; }

/* Hero two-column layout: copy on the left, reviews blended in on the right.
   .hero-reviews carries no background/border-box of its own — just a thin
   divider line — so it reads as part of the same hero surface, not a card
   floating on top of it. */
.hero-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-copy{ min-width: 0; }
.hero-reviews{
  border-left: 1px solid rgba(250,247,241,0.16);
  padding-left: 2.4rem;
}
.hero-reviews-score{
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.hero-reviews-score .score{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  color: #fff;
}
.hero-reviews-score .stars{
  color: var(--brass-soft);
  letter-spacing: 0.12em;
  font-size: 1.05rem;
}
.hero-reviews-count{
  font-size: 0.92rem;
  color: #D8D6CE;
  max-width: 26ch;
  margin: 0.7rem 0 1rem;
}
.hero-reviews-link{
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brass-soft);
  text-decoration: none;
}
.hero-reviews-link:hover{ text-decoration: underline; }

/* Split hero variants (homepage only) — a solid white panel on the right
   holds the reviews, instead of blending into the dark background. Panel
   is absolutely positioned against .hero itself (not the grid column) so
   its shape can extend past the column's own box. .white-reviews-slot is
   anchored to that same box (not the grid column, which is capped by
   .container's max-width and stops well short of the hero's real right
   edge) and centers its contents — horizontally and vertically — in the
   middle of the true white area, clearing the arrow/curve seam with the
   left padding below rather than hugging it. */
.hero.hero--split{ position: relative; overflow: hidden; }
.hero--split .hero-grid{ gap: 0; }
.hero--split .hero-copy{ padding-right: 2rem; }

.hero-shape{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 38%;
  background: #fff;
  z-index: 1;
}
.hero--curve .hero-shape{ border-radius: 50% 0 0 50% / 60% 0 0 60%; }

.hero-arrow-marker{
  position: absolute; top: 50%; left: 62%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; z-index: 2;
  background: var(--brass);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.hero--split .white-reviews-slot{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 38%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}

/* Live Trustindex embed. Two different embed methods are supported here:
   (a) the iframe version (hero_trustindex_slot / .trustindex-embed below) —
   the iframe's own box can be sized directly; or (b) the script/loader.js
   version actually used on index.html right now, which injects Trustindex's
   own widget markup straight into .white-reviews-slot--trustindex with no
   class hook of ours to target — it renders at whatever width its rating
   summary + review-card carousel naturally need, which is wider than this
   panel. Rather than let that push past the white panel and spill into the
   next section (confirmed in the live browser: the carousel overflowed),
   the slot below clips to the panel's width and turns any overflow into a
   horizontal scroll strip, so every review card stays reachable instead of
   being permanently hidden. */
.white-reviews-slot--trustindex{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.white-reviews-slot--trustindex > *{ max-width: 100%; }
.trustindex-embed{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* Reviews page: the same live widget as the homepage hero, but given a
   full section instead of a cramped panel. Centered with a generous but
   bounded max-width so it doesn't look lost in the (now quite wide) page
   container, with the same overflow-x safety net as the hero embed in
   case it still wants more room than that on some screens. */
.reviews-widget-wrap{
  max-width: 1100px;
  margin: 2rem auto 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.reviews-fallback-link{
  text-align: center;
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
}
.reviews-fallback-link a{ color: var(--brass-dark); font-weight: 600; text-decoration: none; }
.reviews-fallback-link a:hover{ text-decoration: underline; }

.hero-reviews-white{ color: var(--ink); }
.hero-reviews-white .score{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
}
.hero-reviews-white .stars{ color: var(--brass); letter-spacing: 0.1em; font-size: 1rem; }
.hero-reviews-white .hero-reviews-count{ font-size: 0.88rem; color: var(--ink-soft); max-width: 24ch; margin: 0.6rem 0 0.9rem; }
.hero-reviews-white .hero-reviews-link{ font-size: 0.88rem; font-weight: 700; color: var(--brass-dark); text-decoration: none; }
.hero-reviews-white .hero-reviews-link:hover{ text-decoration: underline; }

/* Sections */
section{ padding: 4rem 0; }
section.alt{ background: var(--surface-2); }
.section-head{ max-width: 60ch; margin-bottom: 2.4rem; }

.pillars{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.pillar{ background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem; }
.pillar h3{ font-size: 1.02rem; font-family: 'Work Sans', sans-serif; font-weight: 700; margin-bottom: 0.4rem; }
.pillar p{ font-size: 0.92rem; color: var(--muted); margin: 0; }

.steps{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; counter-reset: step; }
.step{ position: relative; padding-top: 0.5rem; }
.step .num{
  font-family: 'Fraunces', serif; font-size: 2.4rem; color: var(--brass-soft);
  -webkit-text-stroke: 1.5px var(--brass);
  line-height: 1; margin-bottom: 0.4rem;
}
.step h3{ font-size: 1.05rem; margin-bottom: 0.35rem; }
.step p{ font-size: 0.92rem; color: var(--muted); margin: 0; }

.checklist{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.checklist li{ display: flex; gap: 0.6rem; font-size: 0.95rem; }
.checklist li::before{ content: "✓"; color: var(--brass-dark); font-weight: 700; }

.photo-note{
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.82rem;
}
.gallery{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); gap: 0.9rem; justify-content: center; }
.gallery-photo{ width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; display: block; background: var(--surface); }

.faq details{
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.faq summary{
  cursor: pointer; font-weight: 600; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; font-size: 1.4rem; color: var(--brass); flex-shrink: 0; }
.faq details[open] summary::after{ content: "–"; }
.faq .answer{ margin-top: 0.7rem; color: var(--ink-soft); max-width: 68ch; }
.faq .answer .placeholder{ background: var(--brass-soft); padding: 0.05em 0.4em; border-radius: 3px; font-weight: 600; }

.cta-band{ background: var(--ink); color: var(--ink-invert); text-align: center; padding: 3.5rem 0; }
.cta-band h2{ color: #fff; }
.cta-band p{ color: #D8D6CE; max-width: 52ch; margin-left: auto; margin-right: auto; }

.areas-strip{ background: var(--surface-2); padding: 2.2rem 0; }
.areas-strip .container{ display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.areas-strip .label{ font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.areas-strip a{ text-decoration: none; font-weight: 600; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.88rem; }
.areas-strip a[aria-current="page"]{ border-color: var(--brass); color: var(--brass-dark); background: var(--brass-soft); }

form.estimate-form{ display: grid; gap: 1rem; max-width: 640px; }
form.estimate-form .row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form.estimate-form label{ display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
form.estimate-form input, form.estimate-form select, form.estimate-form textarea{
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 5px;
  font-family: inherit; font-size: 0.95rem; background: #fff;
}
form.estimate-form textarea{ min-height: 100px; resize: vertical; }
.form-note{ font-size: 0.78rem; color: var(--muted); }

footer.site-footer{ background: var(--ink); color: #C9C6BC; padding: 3rem 0 2rem; font-size: 0.9rem; }
footer.site-footer .footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
footer.site-footer h4{ color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
footer.site-footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
footer.site-footer a{ text-decoration: none; color: #C9C6BC; }
footer.site-footer a:hover{ color: #fff; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.4rem; font-size: 0.8rem; color: #9B9890; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

.skip-link{ position: absolute; left: -999px; top: 0; background: var(--brass); color: #fff; padding: 0.6rem 1rem; z-index: 100; }
.skip-link:focus{ left: 1rem; top: 1rem; }

@media (max-width: 860px){
  nav.main-nav{ display: none; }
  .nav-cities{ display: none; }
  /* Pre-existing overflow, fixed while working on the hero: brand + button
     didn't fit on one line on narrow phones. Drop the subtitle, shrink the
     button, and allow a wrap as a safety net. */
  .brand-name small{ display: none; }
  header.site-header .container{ flex-wrap: wrap; row-gap: 0.6rem; }
  .header-actions .btn{ padding: 0.6rem 1rem; font-size: 0.85rem; }
  footer.site-footer .footer-grid{ grid-template-columns: 1fr; }
  form.estimate-form .row{ grid-template-columns: 1fr; }
  .hero-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .hero-reviews{
    border-left: none;
    border-top: 1px solid rgba(250,247,241,0.16);
    padding-left: 0;
    padding-top: 1.6rem;
  }

  /* Split hero variants: drop the white panel/arrow on narrow screens and
     fall back to the plain blended treatment (light text, thin top rule)
     so nothing sits on the dark background unreadably. */
  .hero-shape, .hero-arrow-marker{ display: none; }
  .hero--split .hero-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .hero--split .white-reviews-slot{
    position: static;
    width: auto;
    display: block;
    text-align: left;
    padding: 1.6rem 0 0;
    border-top: 1px solid rgba(250,247,241,0.16);
  }
  .hero-reviews-white{ color: var(--ink-invert); }
  .hero-reviews-white .score{ color: #fff; }
  .hero-reviews-white .stars{ color: var(--brass-soft); }
  .hero-reviews-white .hero-reviews-count{ color: #D8D6CE; }
  .hero-reviews-white .hero-reviews-link{ color: var(--brass-soft); }
  .white-reviews-slot--trustindex{ padding-right: 0; }
  .trustindex-embed{ height: 360px; }
}