/* ============================================================
   WACK Contracting - shared stylesheet
   Loaded on every page: <link rel="stylesheet" href="/assets/site.css">
   ============================================================ */

/* the shared chrome is injected by <site-nav>/<site-footer>; display:contents
   keeps the wrapper from generating a box, so the sticky header still works */
site-nav,
site-faq,
site-cta,
site-footer {
  display: contents;
}

/* ============ DESIGN SYSTEM (from Figma vars) ============ */
:root {
  --cream: #fbf9f5;
  --rust: #c46b35;
  --rust-dark: #a9572a;
  --ink: #1b1c1a;
  --ink-900: #010101;
  --dark: #1c1c1c;
  --gray: #444748;
  --gray-2: #6b7280;
  --white: #ffffff;
  --border: #ddd7cf;
  --chip: #efeeea;
  --green: #539167;
  --shadow-card: 0 20px 48px rgba(0, 0, 0, 0.06);
  --shadow-rust:
    0 8px 10px -6px rgba(196, 107, 53, 0.2),
    0 20px 25px -5px rgba(196, 107, 53, 0.2);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-soft:
    0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --sans: "Inter", sans-serif;
  --display: "Plus Jakarta Sans", sans-serif;
  --serif: "Source Serif 4", serif;
  --mono-label: "Manrope", sans-serif;
  --maxw: 1440px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  max-width: 100%;
  /* clip (not hidden) so the sticky header keeps working */
  overflow-x: clip;
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 50px;
}
section {
  scroll-margin-top: 90px;
}

/* eyebrow label */
.eyebrow {
  font-family: var(--mono-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 50px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: 0.2s;
}
.btn-primary {
  background: var(--rust);
  color: #fff;
  box-shadow: var(--shadow-rust);
}
.btn-primary:hover {
  background: var(--rust-dark);
}
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: transparent;
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.15;
}

/* ============ NAV ============ */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 245, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 90px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand .seal {
  width: 66px;
  height: 66px;

  display: flex;
  place-items: center;

  position: relative;
}

.brand .wordmark b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: block;
  line-height: 1.05;
}
.brand .wordmark small {
  display: block;
  font-family: var(--mono-label);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gray-2);
  text-transform: uppercase;
  font-weight: 600;
}
/* taken out of the flex row and pinned to the middle, so the links sit on the
   header's true centre instead of centring in whatever space the brand and
   call block leave over (those two are different widths) */
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a,
.nav-links .drop-toggle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray);
  text-transform: uppercase;
}
/* Services opens the dropdown but goes nowhere, so it is a button, not a link.
   Stripped back to match the anchors beside it. */
.nav-links .drop-toggle {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  cursor: pointer;
}
/* every top-level item gets the same box height, so the caret on Services
   cannot push its text off the baseline the other labels sit on */
.nav-links > a,
.has-drop > .drop-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.nav-links a:hover,
.nav-links .drop-toggle:hover {
  color: var(--rust);
}
/* current page — underline offset so it does not shift the row */
.nav-links a.active,
.nav-links .drop-toggle.active {
  color: var(--rust);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.nav-mobile a.active {
  color: var(--rust);
}
/* services dropdown (desktop) */
.has-drop {
  position: relative;
  display: flex;
  align-items: center;
}
.has-drop .caret {
  flex: none;
  transition: transform 0.2s;
}
.has-drop:hover .caret,
.has-drop:focus-within .caret {
  transform: rotate(180deg);
}
.drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 232px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s,
    transform 0.18s;
  z-index: 60;
}
/* invisible bridge so the pointer can cross the gap without closing */
.drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 15px;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.drop a {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}
.drop a:hover {
  background: var(--chip);
  color: var(--rust);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.callblock {
  text-align: right;
}
.callblock small {
  display: block;
  font-family: var(--mono-label);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gray-2);
  text-transform: uppercase;
  font-weight: 600;
}
.nav-phone {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  padding: 4px;
}
.nav-toggle .ic-close {
  display: none;
}
header.nav.open .nav-toggle .ic-open {
  display: none;
}
header.nav.open .nav-toggle .ic-close {
  display: block;
}
.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 8px 24px 24px;
  border-top: 1px solid var(--border);
  background: var(--cream);
}
.nav-mobile a {
  padding: 14px 4px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* services dropdown (mobile accordion) */
.nav-mobile-drop summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  list-style: none;
}
.nav-mobile-drop summary::-webkit-details-marker {
  display: none;
}
.nav-mobile-drop summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 2px solid var(--gray-2);
  border-bottom: 2px solid var(--gray-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.nav-mobile-drop[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.nav-mobile-drop a {
  display: block;
  padding-left: 18px;
  font-weight: 500;
  color: var(--gray);
}
.nav-mobile .nav-mobile-phone {
  color: var(--rust);
  font-weight: 700;
}
.nav-mobile .btn-primary {
  margin-top: 16px;
  justify-content: center;
  border-bottom: 0;
}
header.nav.open .nav-mobile {
  display: flex;
}
@media (max-width: 960px) {
  .nav-links,
  .nav-right {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}

/* ============ HERO ============ */
.hero {
  padding: 64px 0 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #c46b351a;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;

  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  color: #c46b35;
}
.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
}
.hero h1 {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 22px 0 20px;
}
.hero h1 .accent {
  color: var(--rust);
}
.hero p.lead {
  font-size: 20px;
  color: var(--gray);
  max-width: 520px;
  margin-bottom: 28px;
}
.hero-cta {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}
.hero-trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 400;
  color: var(--gray);
}
.hero-trust svg {
  color: var(--green);
}

/* hero collage */
.collage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 645/550;
  margin-left: auto;
}
.collage .big {
  position: absolute;
  top: 0;
  left: 0;
  width: 84%;
  height: 85%;
  border-radius: 0px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.collage .mid {
  position: absolute;
  bottom: 5%;
  left: 19%;
  width: 28%;
  height: 27%;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.collage .sm1 {
  position: absolute;
  bottom: -2%;
  left: -4%;
  width: 31%;
  height: 36%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  border: 5px solid var(--cream);
}
.collage .sm2 {
  position: absolute;
  bottom: -2%;
  right: 2%;
  width: 40%;
  height: 49%;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  border: 5px solid var(--cream);
}
.collage .stars-card {
  position: absolute;
  top: 14%;
  right: -6%;
  background: #000000b2;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid #ffffff80;
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 11px;
  z-index: 3;
}
.stars-card .starsq {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--rust);
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 auto;
}
.stars-card b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  display: block;
  color: white;
  line-height: 1.1;
}
.stars-card small {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: white;
  text-transform: uppercase;
  font-family: var(--mono-label);
  font-weight: 600;
}
.stars {
  color: #c46b35;
  letter-spacing: 1px;
  font-size: 13px;
}
@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero h1 {
    font-size: 42px;
  }
  /* collage is full-width here, so tuck the decorative
     overhang back inside instead of past the page gutter */
  .collage .sm1 {
    left: 0;
  }
  .collage .sm2 {
    right: 0;
  }
  .collage .stars-card {
    right: 0;
  }
}

/* ============ TRUST BAR ============ */
.trustbar {
  padding: 16px 0 20px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trust-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.trust-card .ic {
  width: 34px;
  height: 34px;
  color: var(--rust);
  margin-bottom: 12px;
}
.trust-card h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}
.trust-card p {
  font-size: 13px;
  color: var(--gray-2);
}
@media (max-width: 860px) {
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============ section heading row ============ */
.sec {
  padding: 72px 0;
}
.sec-head {
  margin-bottom: 40px;
}
.sec-head .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.sec-head h2 {
  font-size: 34px;
  font-weight: 700;
  margin-top: 10px;
}
.sec-head p.sub {
  color: var(--gray);
  font-size: 17px;
  margin-top: 8px;
}
.kicker-lg {
  font-family: var(--display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.01em;
  color: var(--rust);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.sec-head .kicker-lg {
  font-size: 36px;
}
.lead-sm {
  font-size: 17px;
  color: var(--ink);
  margin-top: 8px;
}
.link-arrow {
  font-weight: 400;
  color: #010101;
  font-size: 20px;
  white-space: nowrap;
}

/* ============ WHAT WE DO ============ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.svc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s;
}
.svc-card:hover {
  transform: translateY(-4px);
}
.svc-card .thumb {
  height: 214px;
  object-fit: cover;
  width: 100%;
}
.svc-card .body {
  padding: 22px;
}
.svc-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.svc-card p {
  font-size: 18px;
  color: var(--gray-2);
}
.svc-card.dark {
  background: #010101;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px;
}
.svc-card.dark .ic {
  width: 42px;
  height: 42px;
  color: #fff;
  margin: 0 auto 18px;
}
.svc-card.dark h3 {
  color: #fff;
  font-size: 16px;
}
.svc-card.dark p {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
  font-size: 14px;
  max-width: 280px;
}
.svc-card.dark a {
  font-family: var(--mono-label);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--rust);
}
@media (max-width: 860px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

/* PHILOSOPHY */
.philo-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
}
.philo-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.philo-media img {
  width: 100%;
  height: 660px;
  object-fit: cover;
}
.philo-quote {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 20px;
}
.philo-quote p {
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 16px;
}
.philo-quote cite {
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: #1b1c1a;
}
.philo-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 30px;
}
.philo-item {
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.philo-item .ic {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--rust);
  margin-top: 2px;
}
.philo-item h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
.philo-item p {
  font-size: 13px;
  color: var(--gray-2);
}
@media (max-width: 860px) {
  .philo-grid {
    grid-template-columns: 1fr;
  }
  .philo-list {
    grid-template-columns: 1fr;
  }
}

/* GALLERY (dark) */
.gallery {
  background: var(--dark);
  color: #fff;
  padding: 50px 0;
}
.gallery .sec-head {
  text-align: center;
}
.gallery h2 {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
}
.gallery .eyebrow {
  display: block;
  margin-bottom: 8px;
}
.gallery .sub {
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}
.gallery .kicker-lg {
  color: var(--rust);
}
.gallery .lead-sm {
  color: rgba(255, 255, 255, 0.6);
}
.filters {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 26px 0 36px;
}
.filters button {
  text-transform: uppercase;
  font-size: 20px;
  font-family: var(--sans);
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid #ffffff33;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.filters button.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ff9a60;
  border-color: #ff9a6033;
}
/* arrows ride the left and right edges of the scroller */
.gal-shell {
  position: relative;
}
.gal-arrow {
  position: absolute;
  top: 250px;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--rust);
  background: var(--rust);
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}
.gal-arrow:hover:not(:disabled) {
  background: var(--rust-dark);
  border-color: var(--rust-dark);
}
.gal-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}
.gal-prev {
  left: -20px;
}
.gal-next {
  right: -20px;
}
.gal-grid {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: none;
  cursor: grab;
}
.gal-grid::-webkit-scrollbar {
  display: none;
}
/* snapping fights a pointer drag, so it is suspended mid-drag */
.gal-grid.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}
.gal-grid.dragging img {
  pointer-events: none;
}
.gal-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 500px;
  scroll-snap-align: start;
  /* keeps the original 1fr / 0.65fr grid rhythm inside the scroller */
  flex: 0 0 calc((100% - 22px) * 0.6061);
}
.gal-card:nth-child(even),
/* opt-in for portrait-ish shots that land on an odd position */
.gal-card.narrow {
  flex-basis: calc((100% - 22px) * 0.3939);
}
.gal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-card .ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}
.gal-card .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.gal-card .tag {
  background: var(--rust);
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
}
.gal-card .loc {
  font-family: var(--mono-label);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.gal-card h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
.gal-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
}
/* gallery scroll indicator — visible at every breakpoint, dark-bg tuned */
.gal-ind {
  position: relative;
  width: 130px;
  height: 5px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  touch-action: none;
}
.gal-ind .scroll-ind-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: var(--rust);
}
/* spotlight */
.spotlight {
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.spotlight h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 14px;
}
.spotlight p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  margin-bottom: 20px;
}
.spotlight .checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spotlight .checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.spotlight .checks svg {
  color: var(--green);
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
/* before/after: static side-by-side pair */
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* definite row, so the images' height:100% resolves
     against the box instead of their intrinsic ratio */
  grid-template-rows: 100%;
  border-radius: 16px;
  overflow: hidden;
  height: 450px;
}
.ba img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 860px) {
  .spotlight {
    grid-template-columns: 1fr;
  }
  .gal-card,
  .gal-card:nth-child(even),
  .gal-card.narrow {
    flex: 0 0 80%;
  }
  /* the row is swipeable on touch and 80%-wide cards leave no room */
  .gal-arrow {
    display: none;
  }
  .gal-card h3 {
    font-size: 12px;
  }

  .gal-card .loc {
    font-size: 10px;
  }

  .gal-card .tag {
    font-size: 8px;
  }
  .ba {
    height: 360px;
  }
}

/* REVIEWS */
.reviews {
  text-align: center;
}
.reviews .stars {
  font-size: 20px;
  color: #c46b35;
  margin-bottom: 14px;
}
.reviews h2 {
  font-size: 34px;
  font-weight: 700;
}
.reviews .sub {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--gray);
  font-size: 16px;
}
.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
  text-align: left;
}
.rev-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.rev-card .stars {
  font-size: 14px;
  margin-bottom: 14px;
}
.rev-card p {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 20px;
}
.rev-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rev-person .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chip);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}
.rev-person b {
  font-family: var(--display);
  font-size: 14px;
  display: block;
}
.rev-person small {
  font-size: 11px;
  color: var(--gray-2);
  letter-spacing: 0.06em;
}
@media (max-width: 860px) {
  .rev-grid {
    grid-template-columns: 1fr;
  }
}

/* JOURNEY */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}
.step-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.step-card .num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rust);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  margin: 0 auto 18px;
}
.step-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.step-card p {
  font-size: 13px;
  color: var(--gray-2);
}
@media (max-width: 860px) {
  .step-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* FAQ */
.faq-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 20px 24px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-q .pm {
  color: var(--rust);
  display: flex;
  transition: transform 0.2s;
  flex: 0 0 auto;
}
.faq-item[open] .pm {
  transform: rotate(180deg);
}
.faq-a {
  padding: 0 24px 22px;
  font-size: 15px;
  color: var(--gray);
}
.journey .sec-head p.sub,
.faq-head p.sub {
  text-align: center;
}
.faq-head {
  text-align: center;
  margin-bottom: 34px;
}
.faq-head h2 {
  font-size: 34px;
  font-weight: 700;
}

/* SERVICE AREA */
.area-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.area h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--rust);
  margin-bottom: 16px;
}
.area p {
  color: var(--gray);
  font-size: 16px;
  margin-bottom: 20px;
}
.area-cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 20px;
}
.area-cities li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
}
.area-cities .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rust);
}
.area small {
  color: var(--gray-2);
  font-style: italic;
}
.area-map {
  position: relative;
}
.area-map img {
  width: 100%;
  height: auto;
  display: block;
}
.map-pin {
  position: absolute;
  top: 44%;
  left: 12%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.map-pin svg {
  color: var(--rust);
  flex: 0 0 auto;
}
@media (max-width: 860px) {
  .area-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA / CONTACT (dark card on cream) */
.cta {
  background: var(--cream);
  padding: 50px 0;
}
.cta-card {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--ink-900);
  border-radius: 20px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.cta-card h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
}
.cta-card p {
  max-width: 967px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #e4e2de;
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.cta-actions .btn {
  font-size: 20px;
  line-height: 1.2;
  border-radius: 50px;
}
.cta-quote {
  /* no border here, so it matches the bordered Call button's height */
  border: 0;
  padding: 21px 40px;
  background: var(--rust);
  color: #fff;
}
.cta-quote:hover {
  background: var(--rust-dark);
}
.cta-call {
  padding: 20px 40px;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.cta-call:hover {
  background: rgba(255, 255, 255, 0.3);
}
.cta-call svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* FOOTER */
footer.ft {
  background: #000000;
  color: rgba(255, 255, 255, 0.6);
  padding: 56px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ft-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
}
.ft-brand .ft-logo {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ft-brand .ft-seal {
  width: 42px;
  height: 42px;
  display: flex;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}

.ft-brand .ft-logo b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  display: block;
  line-height: 1.05;
}
.ft-brand .ft-logo small {
  display: block;
  font-family: var(--mono-label);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-weight: 600;
}
.ft-brand p {
  font-size: 13px;
  margin: 16px 0 18px;
  max-width: 280px;
}
.ft-social {
  display: flex;
  gap: 10px;
}
.ft-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  color: #fff;
}
.ft-social a:hover {
  background: var(--rust);
}
.ft-col h5 {
  font-family: var(--mono-label);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 700;
}
.ft-col li {
  margin-bottom: 10px;
  font-size: 14px;
}
.ft-col a:hover {
  color: var(--rust);
}
.ft-review {
  display: inline-block;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.ft-review:hover {
  background: var(--rust);
  color: #fff !important;
}
.ft-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.ft-bottom a {
  margin-left: 20px;
}
@media (max-width: 860px) {
  /* brand takes its own row; the three link columns sit under it */
  .ft-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 24px;
  }
  .ft-brand {
    grid-column: 1 / -1;
  }
}

/* scroll indicator for mobile carousels (shown only < 620px) */
.scroll-ind {
  display: none;
}

/* ============ GLOBAL RESPONSIVE ============ */
@media (max-width: 860px) {
  .wrap {
    padding: 0 24px;
    gap: 24px;
  }
  /* The gutter lives on the section, not the scroller, so it holds at every
     scroll position; the wrap's own left padding is zeroed so it doesn't add. */
  .trustbar {
    padding-left: 16px;
  }
  .trustbar .wrap {
    padding-left: 0;
    padding-right: 18px;
  }
  .sec {
    padding: 30px 0;
  }
  .hero {
    padding: 28px 0 8px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero p.lead {
    font-size: 17px;
  }
  .collage {
    margin: 24px auto 0;
    max-width: 100%;
  }
  .kicker-lg,
  .sec-head .kicker-lg,
  .gallery .kicker-lg {
    font-size: 28px;
  }
  .gallery {
    padding: 56px 0;
  }
  .reviews h2,
  .faq-head h2,
  .journey h2 {
    font-size: 28px;
  }
  .cta-card {
    padding: 36px 28px;
    gap: 18px;
  }
  .cta-card h2 {
    font-size: 30px;
  }
  .cta-card p {
    font-size: 17px;
    line-height: 1.35;
  }
  .cta-actions {
    gap: 14px;
  }
  .cta-actions .btn {
    font-size: 16px;
  }
  .cta-quote {
    padding: 15px 28px;
  }
  .cta-call {
    padding: 14px 28px;
  }
  .philo-media img {
    height: 400px;
  }
  .spotlight {
    padding: 24px;
  }
}
@media (max-width: 620px) {
  .wrap {
    padding: 0 18px;
  }
  /* ---- mobile hero (matches Figma mobile frame) ---- */
  .hero-badge {
    font-size: 10px;
    letter-spacing: 0.04em;
    gap: 6px;
    padding: 4px 10px;
  }
  .hero-badge svg {
    height: 11px;
    width: auto;
  }
  .hero h1 {
    font-size: 32px;
    line-height: 1.14;
    margin: 14px 0 14px;
  }
  .hero p.lead {
    font-size: 14px;
    margin-bottom: 22px;
  }
  .hero-cta {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }
  .hero-cta .btn {
    flex: 0 1 auto;
    justify-content: center;
    font-size: 13px;
    padding: 10px 18px;
  }
  .hero-trust {
    justify-content: center;
    gap: 12px 18px;
  }
  .hero-trust span {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    gap: 6px;
  }
  .hero-trust svg {
    height: 14px;
    width: auto;
  }
  /* collage: align the floating pieces to the main photo's edges */
  .collage .big {
    width: 89%;
  }
  .collage .sm1 {
    left: -10px;
  }
  .collage .sm2 {
    right: 11%;
  }
  .collage .stars-card {
    right: 8%;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 12px;
  }
  .stars-card .starsq {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }
  .stars-card b {
    font-size: 11px;
  }
  .stars-card small {
    font-size: 7px;
  }
  /* card rows become horizontal-scroll carousels with a peeked next card */
  .trust-grid,
  .rev-grid,
  .step-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .trust-grid::-webkit-scrollbar,
  .rev-grid::-webkit-scrollbar,
  .step-grid::-webkit-scrollbar {
    display: none;
  }
  .trust-grid > *,
  .rev-grid > *,
  .step-grid > * {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
  .scroll-ind {
    display: block;
    position: relative;
    width: 130px;
    height: 5px;
    margin: 6px auto 0;
    border-radius: 999px;
    background: var(--border);
    cursor: pointer;
    touch-action: none;
  }
  .scroll-ind-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    border-radius: 999px;
    background: var(--rust);
  }
  .ba {
    height: 260px;
  }
  .cta {
    padding: 28px 0;
  }
  .cta-card {
    padding: 28px 20px;
    border-radius: 16px;
  }
  .cta-card h2 {
    font-size: 24px;
  }
  .cta-card p {
    font-size: 14px;
  }
  .cta-actions {
    flex-wrap: wrap;
    gap: 10px;
  }
  .cta-actions .btn {
    font-size: 14px;
  }
  .cta-quote {
    padding: 12px 22px;
  }
  .cta-call {
    padding: 11px 22px;
  }
  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }
  /* Services | Company pair up, Connect runs full width beneath */
  .ft-col:last-of-type {
    grid-column: 1 / -1;
  }
  .ft-bottom {
    flex-direction: column;
    gap: 10px;
  }
  .ft-bottom a {
    margin-left: 0;
    margin-right: 16px;
  }
  .filters {
    flex-wrap: wrap;
    gap: 14px;
    margin: 24px 0 24px;
  }

  .filters button {
    font-size: 14px;
    padding: 8px 16px;
  }
  .area h2 {
    font-size: 26px;
  }
  .form {
    padding: 22px;
  }
  .gallery {
    padding: 30px 0;
  }
  .gal-card {
    height: 350px;
  }
  .gal-card .ov {
    padding: 16px;
  }
  .rev-grid {
    margin-top: 24px;
  }
  .sec-head {
    margin-bottom: 24px;
  }
  .btn {
    font-size: 13px;
    padding: 10px 18px;
  }
}