/* =====================================================
   Black Mahogany Construction — styles.css
   1.  Reset & tokens
   2.  Layout primitives
   3.  Header / nav
   4.  Hero
   5.  Stats + ticker
   6.  Zoom signature section
   7.  About
   8.  Services
   9.  Projects
   10. Testimonials
   11. CTA
   12. Footer
   13. Utilities & motion
   14. Responsive
===================================================== */


/* ---------- 1. Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6,p { margin: 0; }
em { font-style: italic; }

:root{
  /* Palette */
  --paper:    #fafaf6;
  --paper-2:  #f3f0e8;
  --line:     #e8e4d8;
  --line-2:   #efece3;
  --ink:      #0f1011;
  --ink-2:    #2a2a2a;
  --mute:     #6b6b6b;
  --mute-2:   #8a8a8a;
  --gold:     #f7b90e;
  --gold-2:   #c9970b;
  --gold-soft:#fff4d6;

  /* Type — Poppins everywhere */
  --f-sans: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-display: 'Poppins', system-ui, sans-serif;
  --f-mono: 'Poppins', ui-monospace, monospace;

  /* Spacing */
  --container: 1240px;
  --gutter: 24px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,.0,.2,1);
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body{
  font-family: var(--f-sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 110% -10%, rgba(247,185,14,0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(247,185,14,0.06), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.55;
}
::selection { background: var(--gold); color: var(--ink); }


/* ---------- 2. Layout primitives ---------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Captions (small uppercase mono labels) */
.caption{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mute);
}
.caption--ink { color: var(--ink-2); }

/* Chip (small pill with dot) */
.chip{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .9rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9999px;
}
.chip__dot{
  width: .42rem;
  height: .42rem;
  border-radius: 9999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(247,185,14,.18);
}
.chip__label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Badge (filled dark pill) */
.badge{
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* Section title */
.section-title{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
}
.section-title em{
  font-style: italic;
  position: relative;
  display: inline-block;
}
.section-title__em{ position: relative; display: inline-block; }
.section-title__underline{
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 12px;
  pointer-events: none;
}
.section-title__underline path{
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* Buttons */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.45rem;
  border-radius: 9999px;
  font-weight: 500;
  font-size: .94rem;
  font-family: var(--f-sans);
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid transparent;
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    background .35s var(--ease),
    color .35s var(--ease),
    border-color .35s var(--ease);
}
.btn--primary{
  background: var(--gold);
  color: var(--ink);
  box-shadow:
    0 14px 30px -14px rgba(247,185,14,.55),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px -14px rgba(247,185,14,.7),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after{ transform: translateX(120%); }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover{
  border-color: var(--ink);
  transform: translateY(-2px);
}
.btn--block{ display: flex; width: 100%; justify-content: center; }

.btn__arrow{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease);
}
.btn:hover .btn__arrow{ transform: translateX(4px); }


/* ---------- 3. Header / nav ---------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .4s var(--ease);
}
.site-header.is-scrolled{
  box-shadow: 0 6px 24px -18px rgba(0,0,0,0.18);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.brand{ display: inline-flex; align-items: center; }
.brand__logo{
  height: 42px;
  width: auto;
  transition: transform .5s var(--ease);
}
.brand:hover .brand__logo{ transform: scale(1.04); }

.nav__links{
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 14px;
  color: #000;
  font-weight: 500;
}
.nav__link{ position: relative; }
.nav__link::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after{ transform: scaleX(1); }

.nav__actions{ display: flex; align-items: center; gap: 12px; }
.nav__phone{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 13px;
  font-weight: 500;
  color: #000;
  transition: color .3s var(--ease);
}
.nav__phone:hover{ color: var(--ink); }
.nav__phone .dot{
  width: 6px; height: 6px; border-radius: 9999px; background: var(--gold);
}

.nav__menu-btn{
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9999px;
}
.nav__menu-btn svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.mobile-menu{
  position: absolute;
  top: 80px;
  left: 12px;
  right: 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 30px 60px -30px rgba(15,16,17,.18);
  transform: translateY(-12px) scale(.99);
  opacity: 0;
  pointer-events: none;
  transition: all .35s var(--ease);
  display: none;
}
.mobile-menu.is-open{
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__list li{ border-bottom: 1px solid var(--line); }
.mobile-menu__list li:last-child{ border-bottom: 0; }
.mobile-menu__list a{ display: block; padding: 14px 0; font-size: 16px; }
.mobile-menu .btn{ margin-top: 18px; }


/* ---------- 4. Hero ---------- */
.hero{
  position: relative;
  padding: 140px 0 110px;
  overflow: hidden;
}
.hero__floaters{ position: absolute; inset: 0; pointer-events: none; }
.floater{
  position: absolute;
  top: var(--top, 0); left: var(--left, auto); right: var(--right, auto);
  width: var(--size, 6px); height: var(--size, 6px);
  border-radius: 9999px;
  background: var(--c, var(--gold));
  opacity: var(--o, .55);
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }

.hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero__title{
  margin-top: 24px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.hero__title-line{
  display: block;
  position: relative;
}
.hero__title-line:last-child em{
  font-style: italic;
  position: relative;
  display: inline-block;
}
.hero__underline{
  position: absolute;
  left: 0; bottom: -14px;
  width: 100%;
  height: 14px;
  pointer-events: none;
}
.hero__underline path{
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
}

.hero__lede{
  margin-top: 28px;
  max-width: 600px;
  font-size: clamp(1rem, 1.05vw + .8rem, 1.25rem);
  line-height: 1.6;
  color: var(--mute);
}

.hero__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__trust{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  font-size: 13px;
  color: var(--mute-2);
}
.hero__avatars{ display: inline-flex; }
.hero__avatars span{
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 9999px;
  border: 2px solid var(--paper);
  margin-right: -8px;
  background: var(--gold);
}
.hero__avatars span:nth-child(2){ background: var(--ink); }
.hero__avatars span:nth-child(3){ background: rgba(247,185,14,.6); }

.hero__visual{ position: relative; }
.hero__media{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 50px 120px -50px rgba(15,16,17,.35);
}
.hero__media img{
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
}
.hero__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(250,250,246,0) 40%, rgba(250,250,246,.55) 100%),
    linear-gradient(110deg, rgba(247,185,14,.10), transparent 55%);
  pointer-events: none;
}
.hero__media-tag{
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.hero__progress-card{
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 270px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  z-index: 2;
}
.hero__progress-meta{ display: flex; align-items: center; justify-content: space-between; }
.hero__progress-title{ font-family: var(--f-display); font-size: 18px; line-height: 1.2; margin-top: 4px; }
.progress{
  margin-top: 12px;
  height: 6px;
  border-radius: 9999px;
  background: var(--line);
  overflow: hidden;
}
.progress__bar{
  height: 100%;
  width: var(--pct, 0%);
  background: var(--gold);
  border-radius: inherit;
}
.hero__progress-status{ margin-top: 6px; font-size: 11px; color: var(--mute); }

.hero__rotated-tag{
  position: absolute;
  top: 40px;
  left: -24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--mute-2);
  transform: rotate(-90deg);
  transform-origin: top left;
}
.hero__rotated-dash{ width: 32px; height: 1px; background: var(--mute-2); }


/* ---------- 5. Stats + ticker ---------- */
.hero__after{ margin-top: 96px; }
.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -50px rgba(15,16,17,.18);
}
.stats__cell{
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}
.stats__cell:last-child{ border-right: 0; }
.stats__num{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats__suffix{ color: var(--gold); }
.stats__label{
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
}

.ticker{
  margin-top: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display: inline-flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mute-2);
  animation: ticker 32s linear infinite;
}
.ticker__sep{ opacity: .4; }
@keyframes ticker { 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }


/* ---------- 6. Zoom signature section ---------- */
.zoom{
  position: relative;
  height: 320vh;
  background: #ffffff;
}
.zoom__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
  padding: 0 32px;
}
.zoom__grid{
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(15,16,17,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,16,17,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .15;
}
.zoom__glow{
  position: absolute;
  left: 50%; top: 50%;
  width: 90vw; height: 90vw;
  max-width: 1400px;
  max-height: 1400px;
  transform: translate(-50%,-50%) scale(.6);
  background: radial-gradient(closest-side, rgba(247,185,14,.18), transparent 70%);
  opacity: .25;
  pointer-events: none;
}
.zoom__eyebrow{
  position: absolute;
  top: 32px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
}
.zoom__text{
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9.5vw, 9.5rem);
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--ink);
  padding: 0 1rem;
  max-width: 96%;
  transform-origin: center center;
  will-change: transform, opacity;
}
.zoom__line-text{ display: block; margin-top: 18px; }
.zoom__line-text{ display: block; margin-top: 12px; }
.zoom__line-text:first-child{ margin-top: 0; }
.em{ position: relative; display: inline-block; }
.em::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .05em;
  height: .18em;
  background: var(--gold);
  opacity: .55;
  z-index: -1;
  border-radius: 4px;
}
.em--italic{ font-style: italic; }
.zoom__rule{
  display: block;
  height: 1px;
  width: 0;
  margin: 32px auto 0;
  background: var(--gold);
}

.zoom__caption{
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 720px;
  padding: 0 1rem;
  z-index: 2;
  opacity: 0;
}
.zoom__caption p{
  margin-top: 14px;
  color: var(--mute);
  line-height: 1.6;
}


/* ---------- 7. About ---------- */
.about{
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 110px 0;
}
.about__grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 60px;
  align-items: start;
}

.about__image-wrap{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
}
.about__image-wrap img{
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
}
.about__image-wrap--xl img{ height: 680px; }
@media (max-width: 1100px){ .about__image-wrap--xl img{ height: 480px; } }
@media (max-width: 720px){ .about__image-wrap--xl img{ height: 380px; } }
.about__pills--two{ grid-template-columns: repeat(2, 1fr) !important; }
.about__overlay-card{
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  background: rgba(250,250,246,.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
}
.about__overlay-meta{ display: flex; align-items: center; justify-content: space-between; }
.about__overlay-title{ font-family: var(--f-display); font-size: 18px; line-height: 1.25; margin-top: 4px; }

.about__pills{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pill{
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 16px;
  padding: 16px;
}
.pill__num{ font-family: var(--f-display); font-size: 22px; line-height: 1.1; }
.pill .caption{ margin-top: 6px; }

.about__copy{ }
.about__copy .chip{ margin-bottom: 18px; }
.about__copy .section-title{ margin-bottom: 32px; }
.about__paragraphs > * + * { margin-top: 24px; }
.about__paragraphs p{ font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 620px; }
.about__paragraph--strong{ color: var(--ink); }
.word{
  display: inline-block;
  margin-right: .25rem;
  opacity: 0;
  transform: translateY(28px) scale(.92);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
.about__ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }


/* ---------- 8. Services ---------- */
.services{ padding: 110px 0; }
.services__header{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.services__intro .chip{ margin-bottom: 18px; }
.services__lede{ color: var(--mute); line-height: 1.7; max-width: 460px; }

.services__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  overflow: hidden;
  transition:
    transform .55s var(--ease),
    box-shadow .55s var(--ease),
    border-color .55s var(--ease);
}
.service-card::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transition: width .6s var(--ease);
  border-radius: 22px 22px 0 0;
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow:
    0 30px 60px -30px rgba(15,16,17,.18),
    0 8px 24px -16px rgba(247,185,14,.4);
  border-color: rgba(247,185,14,.45);
}
.service-card:hover::before{ width: 100%; }

.service-card__image{
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
}
.service-card__image img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.service-card:hover .service-card__image img{ transform: scale(1.06); }

.service-card__head{ display: flex; align-items: center; justify-content: space-between; }
.service-card__title{ font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.2; }
.service-card__num{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--mute);
  transition: color .5s var(--ease), transform .5s var(--ease);
}
.service-card:hover .service-card__num{ color: var(--gold-2); transform: translateY(-2px); }

.service-card__desc{ margin-top: 8px; font-size: 13.5px; color: var(--mute); }
.service-card__list{ margin-top: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.service-card__list li{ position: relative; padding-left: 16px; }
.service-card__list li::before{
  content: "›";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

.service-card__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 500;
}
.service-card__link svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease);
}
.service-card:hover .service-card__link svg{ transform: translateX(4px); }


/* ---------- 9. Projects ---------- */
.projects{
  padding: 110px 0;
  background: #fff;
  border-top: 1px solid var(--line);
}
.projects__header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 48px;
}
.projects__intro .chip{ margin-bottom: 18px; }
.projects__lede{ max-width: 380px; color: var(--mute); line-height: 1.7; }

.project-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-card--featured{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
}
.project-card--featured .project-card__media{ height: auto; }
.project-card--featured .project-card__media img{ height: 100%; min-height: 360px; }
.project-card--featured .project-card__body{ padding: 36px; display: flex; flex-direction: column; justify-content: space-between; }
.project-card--wide{ grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
.project-card--wide .project-card__media{ height: auto; }
.project-card--wide .project-card__media img{ height: 100%; min-height: 240px; }

.project-card__media{
  height: 224px;
  overflow: hidden;
  position: relative;
}
.project-card__img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
  will-change: transform;
}
.project-card:hover .project-card__img{ transform: scale(1.06); }

.project-card__body{ padding: 24px; }
.project-card__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--mute);
}
.dot-sep{ width: 4px; height: 4px; border-radius: 9999px; background: var(--mute); }
.project-card__title{ margin-top: 14px; font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.25; }
.project-card--featured .project-card__title{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.project-card__desc{ margin-top: 14px; font-size: 14px; color: var(--mute); line-height: 1.65; }
.project-card__stats{
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 400px;
}
.project-card__stat-num{ font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.project-card__stat-num span{ color: var(--gold); }
.project-card__tags{ margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.project-card__tags span{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9999px;
  color: var(--ink-2);
}

.projects__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}


/* ---------- 10. Testimonials ---------- */
.testimonials{
  padding: 110px 0;
  border-top: 1px solid var(--line);
}
.testimonials__header{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.testimonials__header .chip{ margin-bottom: 18px; }
.testimonials__lede{ margin-top: 18px; color: var(--mute); line-height: 1.7; }

.testimonials__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-height: 660px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.t-col{ overflow: hidden; }
.t-col__inner{
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: scroll-y linear infinite;
  will-change: transform;
}
.t-col__inner:hover{ animation-play-state: paused; }
@keyframes scroll-y { 0%{ transform: translateY(0) } 100%{ transform: translateY(-50%) } }

.t-card{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  width: 100%;
  max-width: 360px;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.t-card:hover{
  transform: translateY(-4px);
  border-color: rgba(247,185,14,.5);
  box-shadow: 0 16px 40px -24px rgba(15,16,17,.18);
}
.t-card__stars{ display: flex; gap: 2px; color: var(--gold); margin-bottom: 14px; }
.t-card__stars svg{ width: 16px; height: 16px; }
.t-card__text{ color: var(--ink-2); line-height: 1.65; font-size: 15px; }
.t-card__author{ display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.t-card__avatar{ width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; border: 1px solid var(--line); }
.t-card__name{ font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.t-card__role{ font-size: 12px; color: var(--mute); margin-top: 2px; }


/* ---------- 11. CTA ---------- */
.cta{
  position: relative;
  padding: 130px 0;
  overflow: hidden;
}
.cta__bg{ position: absolute; inset: 0; z-index: -1; }
.cta__bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  opacity: .35;
}
.cta__bg-veil{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,250,246,.94), rgba(250,250,246,.85) 50%, rgba(250,250,246,1));
}
.cta__inner{ text-align: center; max-width: 920px; margin: 0 auto; }
.cta__chip{ margin-bottom: 22px; }
.cta__title{ font-size: clamp(2.4rem, 6vw, 5rem); }
.cta__lede{ margin: 24px auto 0; max-width: 660px; font-size: 18px; color: var(--mute); line-height: 1.7; }
.cta__ctas{ margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta__contact-grid{
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.contact-tile{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  text-align: left;
}
.contact-tile__value{ margin-top: 8px; font-size: 15px; }


/* ---------- 12. Footer ---------- */
.site-footer{
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 72px 0 36px;
  overflow: hidden;
}
.site-footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 56px;
}
.site-footer__brand p{ margin-top: 18px; font-size: 14px; color: var(--mute); line-height: 1.7; }
.site-footer__logo{ height: 48px; width: auto; }
.site-footer h4{ font-size: 15px; font-weight: 500; margin-bottom: 18px; }
.site-footer ul{ display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--mute); }
.site-footer ul a{ transition: color .25s var(--ease); }
.site-footer ul a:hover{ color: var(--ink); }
.site-footer__contact li{ display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.site-footer__icon{ color: var(--gold); }
.site-footer__socials{
  display: flex; gap: 10px; margin-top: 22px;
}
.site-footer__socials a{
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.site-footer__socials a:hover{ border-color: var(--ink); transform: translateY(-2px); }
.site-footer__socials svg{ width: 16px; height: 16px; fill: currentColor; }

.site-footer__wordmark{
  margin: 60px 0 0;
  display: block;
}
.site-footer__wordmark svg{ width: 100%; height: 230px; }
.site-footer__wordmark text{
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 54px;
  letter-spacing: .1em;
}
.site-footer__wordmark-outline{ fill: transparent; stroke: rgba(15,16,17,.12); stroke-width: .35; }
.site-footer__wordmark-stroke{
  fill: transparent;
  stroke: var(--gold);
  stroke-width: .4;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.site-footer__wordmark.is-in .site-footer__wordmark-stroke{
  animation: draw-stroke 4s var(--ease) forwards;
}
.site-footer__wordmark-fill{
  fill: rgba(15,16,17,.95);
  opacity: 0;
  transition: opacity 1s var(--ease) 1.6s;
}
.site-footer__wordmark.is-in .site-footer__wordmark-fill{ opacity: 1; }
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }

.site-footer__base{
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--mute);
}
.site-footer__legal{ display: flex; gap: 22px; }
.site-footer__legal a{ transition: color .25s var(--ease); }
.site-footer__legal a:hover{ color: var(--ink); }


/* ---------- 13. Utilities & motion ---------- */
.parallax{ will-change: transform; }
[data-anim]{ opacity: 0; }


/* ---------- 14. Responsive ---------- */
@media (max-width: 1100px){
  .hero__grid{ grid-template-columns: 1fr; gap: 48px; }
  .hero__visual{ order: -1; }
  .hero__media img{ height: 460px; }

  .about__grid{ grid-template-columns: 1fr; gap: 48px; }
  .about__image-wrap img{ height: 380px; }

  .services__header{ grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .services__grid{ grid-template-columns: repeat(2, 1fr); }

  .project-card--featured{ grid-template-columns: 1fr; }
  .project-card--featured .project-card__media img{ height: 280px; min-height: 0; }
  .project-card--wide{ grid-column: span 2; grid-template-columns: 1fr; }
  .project-card--wide .project-card__media img{ height: 280px; min-height: 0; }
  .projects__grid{ grid-template-columns: repeat(2, 1fr); }

  .testimonials__grid{ grid-template-columns: repeat(2, 1fr); }
  .t-col:nth-child(3){ display: none; }
}

@media (max-width: 900px){
  .nav__links, .nav__actions{ display: none; }
  .nav__menu-btn{ display: flex; }
  .mobile-menu{ display: block; }
}

@media (max-width: 720px){
  :root{ --gutter: 18px; }
  .hero{ padding: 120px 0 80px; }
  .hero__media img{ height: 380px; }
  .hero__progress-card{ width: 220px; padding: 12px; }
  .hero__after{ margin-top: 64px; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .stats__cell{ border-right: 0; border-bottom: 1px solid var(--line); }
  .stats__cell:nth-child(odd){ border-right: 1px solid var(--line); }
  .stats__cell:nth-last-child(-n+2){ border-bottom: 0; }
  .stats__cell:nth-last-child(2){ border-bottom: 1px solid var(--line); }

  .zoom{ height: 220vh; }

  .about{ padding: 80px 0; }
  .services{ padding: 80px 0; }
  .services__grid{ grid-template-columns: 1fr; }
  .projects{ padding: 80px 0; }
  .projects__grid{ grid-template-columns: 1fr; }
  .project-card--wide{ grid-column: span 1; }

  .testimonials{ padding: 80px 0; }
  .testimonials__grid{ grid-template-columns: 1fr; }
  .t-col:nth-child(2), .t-col:nth-child(3){ display: none; }

  .cta{ padding: 90px 0; }
  .cta__contact-grid{ grid-template-columns: 1fr; }

  .site-footer{ padding: 56px 0 28px; }
  .site-footer__grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .site-footer__brand{ grid-column: span 2; }
  .site-footer__wordmark svg{ height: 140px; }
  .site-footer__wordmark text{ font-size: 56px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker__track, .t-col__inner{ animation: none !important; transform: none !important; }
  .zoom{ height: auto; }
  .zoom__sticky{ position: relative; height: auto; padding: 100px 16px; }
  [data-anim]{ opacity: 1 !important; }
  .word{ opacity: 1; transform: none; filter: none; }
}


/* =====================================================
   15. HERO SLIDER OVERHAUL (overrides Section 4)
   ===================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  padding: 140px 0 110px;
  overflow: hidden;
  isolation: isolate;
}

/* Slide layer */
.hero-slider{
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--ease);
}
.hero-slide.is-active{ opacity: 1; }
.hero-slide img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  will-change: transform;
}
.hero-slider__veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(250,250,246,.12) 0%, rgba(250,250,246,.6) 50%, rgba(250,250,246,.92) 100%),
    linear-gradient(110deg, rgba(247,185,14,.10), transparent 55%);
  pointer-events: none;
}
.hero-slider__grain{
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(15,16,17,0.08) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .25;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Override old grid */
.hero__inner{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  min-height: calc(100vh - 250px);
  align-items: center;
}

.hero__content{
  position: relative;
  max-width: 880px;
  z-index: 2;
}

/* Eyebrow tag (replaces old chip styling for hero) */
.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border: 1px solid var(--line);
  border-radius: 9999px;
  margin-bottom: 28px;
}
.hero__eyebrow-dot{
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(247,185,14,.18);
  animation: pulseDot 2.4s var(--ease) infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 5px rgba(247,185,14,.18); }
  50%     { box-shadow: 0 0 0 10px rgba(247,185,14,0);  }
}
.hero__eyebrow-text{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  display: inline-block;
}

/* Title */
.hero__title{
  margin: 0 0 28px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--ink);
}
.hero__title-row{
  display: block;
  overflow: hidden;
  /* important so child y-translate clip-reveals from below */
}
.hero__title-line{
  display: block;
  will-change: transform, opacity;
}
.hero__title-line .num{ color: var(--gold); }

.hero__lede{
  max-width: 620px;
  margin: 0 0 36px;
  font-size: clamp(1rem, 1.05vw + .8rem, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 400;
}

/* Slider controls */
.hero-controls{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  z-index: 2;
}
.hero-controls__counter{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hero-controls__counter span:first-child{ font-size: 22px; font-weight: 700; }
.hero-controls__counter span:last-child{ color: var(--mute); }
.hero-controls__sep{
  width: 32px; height: 1px; background: var(--ink); display: inline-block;
}
.hero-controls__progress{
  height: 2px;
  background: rgba(15,16,17,.1);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.hero-controls__progress-bar{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
}

.hero-controls__pager{
  display: inline-flex;
  gap: 6px;
}
.hero-controls__dot{
  width: 24px; height: 4px;
  background: rgba(15,16,17,.18);
  border-radius: 9999px;
  transition: background .35s var(--ease), width .35s var(--ease);
}
.hero-controls__dot:hover{ background: rgba(15,16,17,.4); }
.hero-controls__dot.is-active{
  background: var(--gold);
  width: 36px;
}

.hero-controls__nav{ display: inline-flex; gap: 8px; }
.hero-controls__btn{
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.hero-controls__btn:hover{
  transform: translateY(-2px);
  border-color: var(--ink);
  background: #fff;
}
.hero-controls__btn svg{
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Caption corner card */
.hero-caption{
  position: absolute;
  right: 24px;
  bottom: 240px;
  width: 280px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  z-index: 2;
  box-shadow: 0 30px 60px -36px rgba(15,16,17,.25);
}
.hero-caption__head{ display: flex; justify-content: space-between; }
.hero-caption__title{
  margin-top: 6px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

@media (max-width: 1100px){
  .hero-caption{ bottom: 200px; right: 18px; width: 240px; padding: 14px 16px; }
}
@media (max-width: 720px){
  .hero-caption{ display: none; }
  .hero-controls{ grid-template-columns: auto 1fr auto; gap: 16px; padding-top: 24px; margin-top: 24px; }
  .hero-controls__pager{ display: none; }
  .hero-controls__btn{ width: 40px; height: 40px; }
  .hero__title{ margin-bottom: 20px; }
  .hero__lede{ margin-bottom: 24px; }
}

/* Override old hero__trust margin since we're tighter now */
.hero__trust{ margin-top: 28px; }


/* =====================================================
   16. Split-text helpers (used by JS section 14)
   ===================================================== */
.char-wrap{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
.char{
  display: inline-block;
  will-change: transform;
}


/* =====================================================
   17. Refinement pass overrides — typography, hover,
       removed elements, alignment fixes, responsive
   ===================================================== */

/* —— Smooth typography (no descender clipping) —— */
html { text-rendering: optimizeLegibility; }
body, .hero__title, .section-title, .zoom__text, .hero__lede,
.about__paragraphs p, .service-card__title, .project-card__title,
.t-card__text, .cta__title, .nav__link, .btn{
  font-family: 'Poppins', system-ui, sans-serif;
}
.hero__title{
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  padding-bottom: 6px;
}
.section-title{
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  padding-bottom: 8px;
}
.section-title em, .hero__title em {
  font-style: italic;
  font-weight: 700;
}
.zoom__text{
  font-weight: 700;
  line-height: 1.06;
  padding: 0 1rem 12px;
}

/* —— Header (white, black-on-white) —— */
.site-header { background: #fff !important; }
.brand__logo{ height: 38px; }
.nav__link{ color: #000; transition: opacity .3s var(--ease); }
.nav__link:hover{ opacity: .65; }
.nav__link::after{ background: #000; }
.nav__link.is-active::after{ background: var(--gold); }
.nav__phone{ color: #000; }
.nav__phone .dot{ background: var(--gold); }
.btn--primary{ color: #000; background: var(--gold); }
.btn--ghost{ color: #000; border-color: #000; }
.btn--ghost:hover{ background: #000; color: #fff; }

/* —— Hero — remove right-side caption layout, center copy at left —— */
.hero{
  padding: 130px 0 90px;
  min-height: auto;
}
.hero__inner{
  min-height: calc(100vh - 220px);
  align-items: center;
}
.hero__content{ max-width: 920px; }
.hero-caption{ display: none !important; }

/* —— Image hover lift/shift effect (used everywhere) —— */
.about__image-wrap{ transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.about__image-wrap:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(15,16,17,.18);
}
.about__image-wrap img{ transition: transform 1.4s var(--ease); }
.about__image-wrap:hover img{ transform: scale(1.04); }

/* Project card: shift + subtle scale on hover */
.project-card{ transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.project-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(15,16,17,.2);
  border-color: rgba(247,185,14,.4);
}
.project-card__img{ transition: transform 1.2s var(--ease); }
.project-card:hover .project-card__img{ transform: scale(1.05) translateX(-6px); }

/* —— Service cards — stronger hover (lift + shift + glow) —— */
.service-card{
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
}
.service-card:hover{
  transform: translateY(-10px) scale(1.01);
  box-shadow:
    0 36px 70px -32px rgba(15,16,17,.22),
    0 10px 28px -16px rgba(247,185,14,.45);
  border-color: rgba(247,185,14,.55);
  background: linear-gradient(180deg, #fff, #fffaee);
}
.service-card:hover .service-card__image img{
  transform: scale(1.08) translateX(-4px);
}
.service-card__link{ transition: gap .35s var(--ease); }
.service-card:hover .service-card__link{ gap: 10px; }

/* —— About / National Footprint balance —— */
.about{ padding: 130px 0; }
.about__grid{ align-items: center; gap: 72px; }
.about__image-wrap--xl img{ height: 720px; }
@media (max-width: 1100px){
  .about__image-wrap--xl img{ height: 520px; }
  .about__grid{ gap: 56px; }
}
@media (max-width: 720px){
  .about__image-wrap--xl img{ height: 400px; }
  .about{ padding: 90px 0; }
}
.about__pills--two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 460px;
}
.about__overlay-card{ left: 22px; right: 22px; bottom: 22px; }

/* —— Zoom: keep clean white, more spacing, smooth fonts —— */
.zoom{ background: #ffffff; }
.zoom__sticky{ background: #ffffff; }
.zoom__line-text{ margin-top: 16px; }

/* —— Footer: Poppins, bigger spacing —— */
.site-footer{ font-family: 'Poppins', sans-serif; }
.site-footer h4{ font-weight: 600; letter-spacing: .01em; }
.site-footer ul a{ font-weight: 400; }
.site-footer__base{ font-weight: 400; }

/* —— Responsive header polish —— */
@media (max-width: 1100px){
  .nav__links{ gap: 1.5rem; }
  .nav__phone{ display: none; }
}
@media (max-width: 900px){
  .nav__links, .nav__actions{ display: none !important; }
  .nav__menu-btn{ display: flex !important; }
  .mobile-menu{ display: block; }
  .nav{ height: 70px; }
  .brand__logo{ height: 34px; }
  .mobile-menu{ top: 70px; }
}
@media (max-width: 720px){
  .nav{ height: 64px; padding: 0; }
  .brand__logo{ height: 30px; }
  .mobile-menu{ top: 64px; }
  .hero{ padding: 100px 0 70px; }
  .hero__title{ font-size: clamp(2rem, 9vw, 2.8rem); }
}


/* =====================================================
   18. v3 — Multi-page restructure: dark footer, hero
        overlay, mobile menu rebuild, page-hero, service
        rows, gallery, values, page nav fixes
   ===================================================== */

/* —— Reset for fixed-header pages —— */
body{ padding-top: 0; }

/* —— Compact hero with black overlay —— */
.hero--compact{ padding: 110px 0 70px; min-height: 86vh; }
.hero--compact .hero__inner{ min-height: calc(86vh - 200px); }
.hero-slider__overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.7) 100%),
    linear-gradient(110deg, rgba(0,0,0,.35), transparent 60%);
  pointer-events: none;
}
.hero-slider__veil{ display: none; } /* replaced by overlay */

.hero__inner--dark .hero__title{ color: #fff; }
.hero__inner--dark .hero__lede{ color: rgba(255,255,255,.85); }
.hero__title--dark{ color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero__lede--dark{ color: rgba(255,255,255,.88) !important; max-width: 640px; }

.hero__eyebrow--dark{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero__eyebrow--dark .hero__eyebrow-text{ color: #fff; }

/* Light ghost variant for dark hero */
.btn--ghost-light{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
}
.btn--ghost-light:hover{
  background: #fff;
  color: #000;
  border-color: #fff;
  transform: translateY(-2px);
}

/* Small button variant */
.btn--sm{ padding: .65rem 1.15rem; font-size: .85rem; }

/* Hero controls — light text on dark */
.hero--compact .hero-controls{ border-top-color: rgba(255,255,255,.18); }
.hero--compact .hero-controls__counter{ color: #fff; }
.hero--compact .hero-controls__counter span:last-child{ color: rgba(255,255,255,.6); }
.hero--compact .hero-controls__sep{ background: #fff; }
.hero--compact .hero-controls__progress{ background: rgba(255,255,255,.2); }
.hero--compact .hero-controls__dot{ background: rgba(255,255,255,.3); }
.hero--compact .hero-controls__dot:hover{ background: rgba(255,255,255,.6); }
.hero--compact .hero-controls__dot.is-active{ background: var(--gold); }
.hero--compact .hero-controls__btn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.hero--compact .hero-controls__btn:hover{
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* —— Page hero (subpages) —— */
.page-hero{
  position: relative;
  padding: 160px 0 90px;
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.page-hero__bg{ position: absolute; inset: 0; z-index: -1; }
.page-hero__bg img{ width: 100%; height: 100%; object-fit: cover; }
.page-hero__veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.78) 100%);
}
.page-hero__inner{ color: #fff; max-width: 920px; }
.page-hero__crumb{ color: rgba(255,255,255,.7); margin-bottom: 24px; }
.page-hero__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.page-hero__title em{ font-style: italic; font-weight: 700; }
.page-hero__lede{
  margin-top: 20px;
  max-width: 640px;
  font-size: clamp(1rem, 1vw + .85rem, 1.25rem);
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

/* —— About teaser on home —— */
.about-teaser{ padding: 110px 0; background: #fff; }
.about-teaser__grid{
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
}
.about-teaser__visual{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.about-teaser__visual:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.18); }
.about-teaser__visual img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.about-teaser__visual:hover img{ transform: scale(1.06); }
.about-teaser__copy .chip{ margin-bottom: 18px; }
.section-lede{ margin-top: 24px; color: var(--mute); font-size: 17px; line-height: 1.7; max-width: 540px; }
.about-teaser__ctas{ margin-top: 28px; }
@media (max-width: 1100px){
  .about-teaser__grid{ grid-template-columns: 1fr; gap: 36px; }
  .about-teaser__visual{ aspect-ratio: 16 / 10; }
}

/* —— Services teaser 3-col —— */
.services__grid--three{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px){ .services__grid--three{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .services__grid--three{ grid-template-columns: 1fr; } }

.section-cta{ display: flex; justify-content: center; margin-top: 48px; }

/* —— Service rows (services pages) —— */
.services-tabs{
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 80px;
  z-index: 30;
}
.services-tabs__inner{ display: flex; gap: 6px; overflow-x: auto; }
.services-tabs__tab{
  padding: 18px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
  border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.services-tabs__tab:hover{ color: var(--ink); }
.services-tabs__tab.is-active{ color: var(--ink); border-bottom-color: var(--gold); }

.service-detail{ padding: 90px 0 70px; }
.service-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.service-row:last-child{ border-bottom: 0; }
.service-row--reverse{ direction: rtl; }
.service-row--reverse > *{ direction: ltr; }

.service-row__media{
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
}
.service-row__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.service-row:hover .service-row__media img{ transform: scale(1.05); }

.service-row__num{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--mute);
  font-weight: 500;
  margin-bottom: 16px;
}
.service-row__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.service-row__desc{ color: var(--mute); font-size: 16px; line-height: 1.7; margin-bottom: 22px; }
.service-row__list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.service-row__list li{ position: relative; padding-left: 18px; }
.service-row__list li::before{
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 9999px;
}

@media (max-width: 900px){
  .service-row, .service-row--reverse{
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr;
    padding: 40px 0;
  }
}

/* —— Services next callout —— */
.services-next{ padding: 0 0 110px; }
.services-next__card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.services-next__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.15);
}
.services-next__card h3{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin: 6px 0 4px;
}
.services-next__card p{ color: var(--mute); max-width: 460px; }
@media (max-width: 720px){
  .services-next__card{ flex-direction: column; align-items: flex-start; padding: 28px; }
}

/* —— About story page —— */
.story{ padding: 110px 0; background: #fff; }
.story__grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.story__image{
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.story__image img{ width: 100%; height: 560px; object-fit: cover; transition: transform 1.4s var(--ease); }
.story__image:hover img{ transform: scale(1.04); }
.story__pills{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.story__copy .chip{ margin-bottom: 18px; }
.story__copy .section-title{ margin-bottom: 32px; }
.story__paragraphs > * + * { margin-top: 22px; }
.story__paragraphs p{ color: var(--ink-2); font-size: 17px; line-height: 1.7; max-width: 600px; }
.story__paragraph--strong{ color: var(--ink); font-weight: 500; }
@media (max-width: 1100px){
  .story__grid{ grid-template-columns: 1fr; gap: 48px; }
  .story__image img{ height: 420px; }
}

/* —— Values strip —— */
.values{ padding: 90px 0; background: var(--paper); border-top: 1px solid var(--line); }
.values__head{ max-width: 720px; margin-bottom: 56px; }
.values__head .chip{ margin-bottom: 18px; }
.values__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .values__grid{ grid-template-columns: 1fr; } }
.value-card{
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.value-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.15);
  border-color: rgba(247,185,14,.4);
}
.value-card__num{
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--gold-2);
  font-weight: 600;
  margin-bottom: 18px;
}
.value-card h3{ font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 24px; margin-bottom: 12px; }
.value-card p{ color: var(--mute); font-size: 15px; line-height: 1.7; }

/* —— Gallery —— */
.gallery{ padding: 90px 0; background: #fff; }
.gallery__head{ max-width: 720px; margin-bottom: 48px; }
.gallery__head .chip{ margin-bottom: 18px; }
.gallery__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 14px;
}
.gallery__item{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}
.gallery__item img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.gallery__item:hover img{ transform: scale(1.08); }
.gallery__item--tall{ grid-row: span 2; }
.gallery__item--wide{ grid-column: span 2; }
@media (max-width: 900px){
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .gallery__item--wide{ grid-column: span 2; }
  .gallery__item--tall{ grid-row: span 1; }
}
@media (max-width: 540px){
  .gallery__grid{ grid-template-columns: 1fr; }
  .gallery__item--wide{ grid-column: span 1; }
}

/* —— Testimonials full grid (page) —— */
.testimonials--full{ padding: 90px 0 110px; }
.testimonials__grid-static{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1100px){ .testimonials__grid-static{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .testimonials__grid-static{ grid-template-columns: 1fr; } }

/* —— Projects full page —— */
.projects--full{ padding: 90px 0 110px; }

/* —— DARK FOOTER —— */
.site-footer--dark{
  background: #0a0a0a;
  color: rgba(255,255,255,.72);
  border-top: 0;
  padding: 80px 0 32px;
}
.site-footer--dark .site-footer__title{
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.site-footer--dark .site-footer__title span{
  font-weight: 300;
  color: var(--gold);
  font-size: 18px;
  letter-spacing: .05em;
}
.site-footer--dark .site-footer__brand p{ color: rgba(255,255,255,.6); margin-top: 18px; }
.site-footer--dark h4{
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.site-footer--dark ul{ color: rgba(255,255,255,.6); }
.site-footer--dark ul a{ color: rgba(255,255,255,.6); transition: color .25s var(--ease); }
.site-footer--dark ul a:hover{ color: var(--gold); }
.site-footer--dark .site-footer__contact a:hover{ color: var(--gold); }
.site-footer--dark .site-footer__socials a{
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
}
.site-footer--dark .site-footer__socials a:hover{
  border-color: var(--gold);
  color: var(--gold);
}
.site-footer--dark .site-footer__base{
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
}
.site-footer--dark .site-footer__legal a{ color: rgba(255,255,255,.5); }
.site-footer--dark .site-footer__legal a:hover{ color: #fff; }
@media (max-width: 720px){
  .site-footer--dark{ padding: 60px 0 28px; }
  .site-footer__grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__brand{ grid-column: span 2; }
}
@media (max-width: 540px){
  .site-footer__grid{ grid-template-columns: 1fr; }
  .site-footer__brand{ grid-column: span 1; }
}

/* —— HAMBURGER (replaces SVG) —— */
.nav__menu-btn{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
}
.nav__menu-btn span{
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease), bottom .35s var(--ease);
}
.nav__menu-btn span:nth-child(1){ top: 14px; }
.nav__menu-btn span:nth-child(2){ top: 21px; }
.nav__menu-btn span:nth-child(3){ top: 28px; }
.nav__menu-btn[aria-expanded="true"] span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.nav__menu-btn[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__menu-btn[aria-expanded="true"] span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

/* —— Mobile menu polish —— */
.mobile-menu{
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 24px 32px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.18);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  display: block;
  z-index: 49;
  visibility: hidden;
}
.mobile-menu.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu__list{ display: flex; flex-direction: column; }
.mobile-menu__list li{ border-bottom: 1px solid var(--line); }
.mobile-menu__list li:last-child{ border-bottom: 0; }
.mobile-menu__list a{
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}

/* —— Logo size on mobile (bigger) —— */
@media (max-width: 900px){
  .nav{ height: 80px; }
  .brand__logo{ height: 44px; }
  .nav__menu-btn{ display: block; }
  .nav__links, .nav__actions{ display: none !important; }
  .mobile-menu{ top: 80px; }
}
@media (max-width: 540px){
  .nav{ height: 72px; padding: 0; }
  .brand__logo{ height: 40px; }
  .mobile-menu{ top: 72px; }
}

/* —— Active page link —— */
body[data-page="home"]        .nav__link[href="index.html"],
body[data-page="about"]       .nav__link[href="about.html"],
body[data-page="services"]    .nav__link[href="services.html"],
body[data-page="projects"]    .nav__link[href="projects.html"],
body[data-page="testimonials"] .nav__link[href="testimonials.html"]{
  color: var(--gold-2);
}
body[data-page="home"]        .nav__link[href="index.html"]::after,
body[data-page="about"]       .nav__link[href="about.html"]::after,
body[data-page="services"]    .nav__link[href="services.html"]::after,
body[data-page="projects"]    .nav__link[href="projects.html"]::after,
body[data-page="testimonials"] .nav__link[href="testimonials.html"]::after{
  transform: scaleX(1);
  background: var(--gold);
}

/* —— Lock body scroll when mobile menu open —— */
body.menu-open{ overflow: hidden; }


/* =====================================================
   19. v4 STABILITY PASS — Content visible by default,
        reveals only when JS confirms ready, simpler
        animations, project-card CTAs.
   ===================================================== */

/* —— Override prior opacity:0 defaults — content visible if JS fails —— */
[data-anim], [data-stagger] > *, .word {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* —— Only hide & animate when JS has marked the page ready —— */
.js-ready [data-anim] {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.js-ready [data-anim].in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.js-ready [data-anim="fade-up"]      { transform: translateY(28px) !important; }
.js-ready [data-anim="fade-left"]    { transform: translateX(-30px) !important; }
.js-ready [data-anim="fade-right"]   { transform: translateX(30px) !important; }
.js-ready [data-anim="fade"]         { transform: none !important; }
.js-ready [data-anim="rise"]         { transform: translateY(40px) !important; }
.js-ready [data-anim="zoom"]         { transform: scale(.94) !important; }
.js-ready [data-anim].in-view        { transform: none !important; }

.js-ready [data-stagger] > * {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.js-ready [data-stagger].in-view > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.js-ready [data-stagger].in-view > *:nth-child(1){ transition-delay:.05s }
.js-ready [data-stagger].in-view > *:nth-child(2){ transition-delay:.12s }
.js-ready [data-stagger].in-view > *:nth-child(3){ transition-delay:.20s }
.js-ready [data-stagger].in-view > *:nth-child(4){ transition-delay:.28s }
.js-ready [data-stagger].in-view > *:nth-child(5){ transition-delay:.36s }
.js-ready [data-stagger].in-view > *:nth-child(6){ transition-delay:.44s }

/* —— Drop Lenis overrides (we removed Lenis) — restore native scroll —— */
html, html.lenis, html.lenis body { height: auto !important; }
.lenis.lenis-smooth { scroll-behavior: smooth !important; }
.lenis.lenis-stopped { overflow: visible !important; }
html { scroll-behavior: smooth; }

/* —— Body offset for fixed header (so anchor jumps work) —— */
body { scroll-padding-top: 100px; }

/* —— Disable parallax overhead — keep DOM but don't transform —— */
.parallax { transform: none !important; will-change: auto !important; }

/* —— Project card "View Project" CTA —— */
.project-card{ display: flex; flex-direction: column; }
.project-card__body{ display: flex; flex-direction: column; flex: 1; }
.project-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  align-self: flex-start;
}
.project-card__cta svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.project-card:hover .project-card__cta svg{ transform: translateX(5px); }
.project-card__cta::after{
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: currentColor;
  margin-left: -2px;
  transition: width .45s cubic-bezier(.22,1,.36,1);
  align-self: center;
}
.project-card:hover .project-card__cta::after{ width: 14px; }

/* Featured card CTA — slightly bigger */
.project-card--featured .project-card__cta{
  margin-top: 24px;
  padding-top: 0;
  font-size: 15px;
  font-weight: 600;
}

/* —— Hero crossfade timing tightened —— */
.hero-slide{ transition: opacity 1.4s cubic-bezier(.4,0,.2,1); }

/* —— Page hero: ensure content is always visible (override .js-ready hidden) —— */
.page-hero__inner > *,
.hero__content > *,
.hero__title-line {
  /* These come into view immediately on first paint — keep visible always */
}
/* The page-hero title may still use data-anim; once JS adds js-ready it'll animate normally,
   but the safety timer adds .in-view after 2s if anything stalls. */

/* —— Smoother card hover on lower-end devices —— */
.service-card, .project-card, .value-card, .gallery__item, .about-teaser__visual {
  will-change: auto;
}

/* —— Reduce motion overrides for the v4 scheme —— */
@media (prefers-reduced-motion: reduce) {
  .js-ready [data-anim],
  .js-ready [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-slide{ transition: none; }
}


/* =====================================================
   20. v5 — Yellow top bar, bigger logo, 2x3 projects,
        Inquire CTAs, footer locations, Get-a-Quote form,
        Thank-You page, services typography boost.
   ===================================================== */

/* —— Top yellow bar with contact info —— */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 52;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.topbar__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  gap: 24px;
}
.topbar__contact{
  display: flex;
  gap: 24px;
  align-items: center;
}
.topbar__contact a, .topbar__contact span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  transition: opacity .25s ease;
}
.topbar__contact a:hover{ opacity: .7; }
.topbar__contact svg{
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.topbar__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.topbar__cta a{ color: var(--ink); transition: opacity .25s ease; display: inline-flex; align-items: center; gap: 6px; }
.topbar__cta a:hover{ opacity: .7; }

/* —— Header sits below top bar —— */
.site-header{ top: 40px !important; }

@media (max-width: 900px){
  .topbar__contact span:nth-child(3),
  .topbar__contact a:nth-child(3),
  .topbar__cta{ display: none; }
  .topbar__inner{ justify-content: center; gap: 16px; }
  .topbar__contact{ gap: 16px; }
}
@media (max-width: 540px){
  .topbar{ font-size: 11.5px; }
  .topbar__inner{ height: 36px; gap: 12px; }
  .topbar__contact{ gap: 12px; }
  .topbar__contact svg{ width: 12px; height: 12px; }
}

/* —— Bigger logo —— */
.brand__logo{ height: 54px !important; }
@media (max-width: 900px){ .brand__logo{ height: 48px !important; } }
@media (max-width: 540px){ .brand__logo{ height: 44px !important; } }

/* —— Header stays solid when topbar is present —— */
.site-header{
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  height: 88px;
}
.nav{ height: 88px; }
@media (max-width: 900px){
  .nav{ height: 76px; }
  .site-header{ height: 76px; }
}

/* —— Page top spacing accounts for topbar+header —— */
.hero, .hero--compact{ padding-top: 160px; }
.page-hero{ padding-top: 200px; }
.mobile-menu{ top: 128px; }
@media (max-width: 900px){
  .hero, .hero--compact{ padding-top: 130px; }
  .page-hero{ padding-top: 160px; }
  .mobile-menu{ top: 116px; }
}
@media (max-width: 540px){
  .hero, .hero--compact{ padding-top: 120px; }
  .page-hero{ padding-top: 140px; }
  .mobile-menu{ top: 112px; }
}

/* —— CTA: remove contact tiles styles overrides; tighten layout —— */
.cta__contact-grid{ display: none !important; }
.cta{ padding: 110px 0 130px; }
.cta__inner{ max-width: 920px; }
.cta__lede{ max-width: 640px; }

/* —— CTA hero background: lighter overlay for "subtle visibility" —— */
.cta__bg img{ opacity: .55 !important; }
.cta__bg-veil{
  background:
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.92) 100%) !important;
}

/* —— Projects 2x3 grid for the dedicated page —— */
.projects--full .projects__grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1100px){
  .projects--full .projects__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .projects--full .projects__grid{ grid-template-columns: 1fr; }
}

/* —— "Inquire" CTA inside project cards —— */
.project-card__cta--inquire{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  align-self: flex-start;
  transition: background .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.project-card__cta--inquire:hover{
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}
.project-card__cta--inquire svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease);
}
.project-card__cta--inquire:hover svg{ transform: translateX(4px); }

/* —— Services pages: bigger fonts, clearer hierarchy —— */
.service-row__title{ font-size: clamp(2rem, 4vw, 3.4rem) !important; }
.service-row__desc{ font-size: 18px !important; }
.service-row__list{ font-size: 16px !important; gap: 10px 18px !important; }
.service-row__list li{ padding-left: 22px !important; }
.service-row__list li::before{ top: 11px !important; width: 9px; height: 9px; }
.service-row__num{ font-size: 12px !important; padding: 7px 14px !important; }

/* —— Footer locations highlighting —— */
.site-footer__locations{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.site-footer__location{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.04);
  transition: border-color .3s ease, color .3s ease;
}
.site-footer__location::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 9999px;
  background: var(--gold);
}
.site-footer__location:hover{
  border-color: var(--gold);
  color: #fff;
}

/* —— Get-a-Quote form styles —— */
.quote{ padding: 90px 0 110px; background: #fff; }
.quote__grid{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1000px){ .quote__grid{ grid-template-columns: 1fr; gap: 36px; } }

.quote__sidebar h3{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 18px;
}
.quote__contact-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}
.quote__contact-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.quote__contact-icon{
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--gold);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.quote__contact-icon svg{
  width: 18px; height: 18px;
  fill: none; stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.quote__contact-label{ font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); }
.quote__contact-value{ font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 2px; word-break: break-word; }

.quote__hours{
  margin-top: 8px;
  padding: 16px;
  background: var(--paper);
  border-radius: 14px;
  border: 1px solid var(--line);
}
.quote__hours h4{
  font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 10px;
}
.quote__hours p{ font-size: 14px; color: var(--ink-2); line-height: 1.7; }

.quote__form{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px;
}
@media (max-width: 540px){ .quote__form{ padding: 28px 22px; } }

.quote__form-head{ margin-bottom: 24px; }
.quote__form-head h2{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -.02em;
}
.quote__form-head p{ color: var(--mute); margin-top: 8px; font-size: 15px; }

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row--single{ grid-template-columns: 1fr; }
@media (max-width: 540px){ .form-row{ grid-template-columns: 1fr; } }

.field{ position: relative; }
.field label{
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.field label .req{ color: var(--gold-2); }
.field input, .field select, .field textarea{
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(247,185,14,.18);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field select{ cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.field--error input, .field--error select, .field--error textarea{
  border-color: #d23636;
  box-shadow: 0 0 0 4px rgba(210,54,54,.12);
}
.field__error{
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #d23636;
}
.field--error .field__error{ display: block; }

.form-submit{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.form-submit__note{ font-size: 12.5px; color: var(--mute); max-width: 360px; }

/* —— Thank You page —— */
.thanks{
  min-height: 90vh;
  padding: 200px 0 120px;
  display: flex;
  align-items: center;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.thanks::before{
  content: "";
  position: absolute;
  top: -10%; right: -10%;
  width: 500px; height: 500px;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(247,185,14,.18), transparent 70%);
}
.thanks__inner{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.thanks__icon{
  width: 88px; height: 88px;
  margin: 0 auto 32px;
  border-radius: 9999px;
  background: var(--gold);
  display: grid;
  place-items: center;
  box-shadow: 0 24px 40px -16px rgba(247,185,14,.55);
}
.thanks__icon svg{
  width: 40px; height: 40px;
  fill: none; stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.thanks__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.thanks__title em{ font-style: italic; color: var(--gold-2); font-weight: 700; }
.thanks__lede{
  margin-top: 22px;
  font-size: 18px;
  color: var(--mute);
  line-height: 1.7;
}
.thanks__steps{
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: left;
}
@media (max-width: 720px){ .thanks__steps{ grid-template-columns: 1fr; } }
.thanks__step{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}
.thanks__step-num{
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.thanks__step h3{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}
.thanks__step p{ font-size: 14px; color: var(--mute); line-height: 1.6; }
.thanks__ctas{ margin-top: 40px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* —— Adjust .menu-open + topbar interaction —— */
body.menu-open .topbar{ display: block; }


/* =====================================================
   21. v6 — Bigger logo, FAQ, expanded testimonials,
        new address styling
   ===================================================== */

/* —— Logo larger again —— */
.brand__logo{ height: 64px !important; }
.nav, .site-header { height: 96px !important; }
@media (max-width: 900px){
  .brand__logo{ height: 56px !important; }
  .nav, .site-header { height: 84px !important; }
}
@media (max-width: 540px){
  .brand__logo{ height: 50px !important; }
  .nav, .site-header { height: 76px !important; }
}
.hero, .hero--compact{ padding-top: 170px; }
.page-hero{ padding-top: 210px; }
.mobile-menu{ top: 136px; }
@media (max-width: 900px){
  .hero, .hero--compact{ padding-top: 138px; }
  .page-hero{ padding-top: 168px; }
  .mobile-menu{ top: 124px; }
}
@media (max-width: 540px){
  .hero, .hero--compact{ padding-top: 124px; }
  .page-hero{ padding-top: 144px; }
  .mobile-menu{ top: 112px; }
}

/* —— Footer address styling —— */
.site-footer__address{
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
  color: rgba(255,255,255,.55) !important;
}

/* —— Testimonials text-only (no avatars) + larger —— */
.t-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 28px;
  width: 100%;
  max-width: 100%;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.t-card:hover{
  transform: translateY(-6px);
  border-color: rgba(247,185,14,.5);
  box-shadow: 0 24px 50px -28px rgba(15,16,17,.18);
}
.t-card__stars{
  display: flex; gap: 2px;
  color: var(--gold);
  margin-bottom: 16px;
}
.t-card__stars::before{
  content: "★ ★ ★ ★ ★";
  letter-spacing: 4px;
  font-size: 16px;
}
.t-card__stars svg{ display: none; }
.t-card__text{
  color: var(--ink-2);
  line-height: 1.7;
  font-size: 16px;
  font-weight: 400;
}
.t-card__author{
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.t-card__avatar{ display: none !important; }
.t-card__name{ font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.t-card__role{ font-size: 13px; color: var(--mute); margin-top: 2px; }

/* —— FAQ page styles —— */
.faq{ padding: 90px 0 110px; }
.faq__search{
  position: sticky;
  top: 136px;
  z-index: 20;
  background: var(--paper);
  margin-bottom: 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.faq__search-input{
  width: 100%;
  padding: 16px 20px 16px 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--ink);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq__search-wrap{ position: relative; }
.faq__search-icon{
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--mute);
  pointer-events: none;
}
.faq__search-input:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(247,185,14,.18);
}
.faq__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.faq__chip{
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.faq__chip:hover{ border-color: var(--ink); }
.faq__chip.is-active{
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.faq__category{ margin-top: 48px; }
.faq__category h2{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -.01em;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq__category h2::before{
  content: "";
  width: 6px; height: 28px;
  background: var(--gold);
  border-radius: 9999px;
}
.faq__list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item.is-open{
  border-color: rgba(247,185,14,.5);
  box-shadow: 0 12px 30px -20px rgba(0,0,0,.18);
}
.faq-item__q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  cursor: pointer;
  transition: background .25s ease;
}
.faq-item__q:hover{ background: var(--paper); }
.faq-item__icon{
  width: 28px; height: 28px;
  flex-shrink: 0;
  position: relative;
  margin-left: 16px;
}
.faq-item__icon::before, .faq-item__icon::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease);
}
.faq-item__icon::before{ width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq-item__icon::after{ width: 2px; height: 14px; transform: translate(-50%,-50%); }
.faq-item.is-open .faq-item__icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq-item__a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), padding .3s ease;
  padding: 0 24px;
  color: var(--ink-2);
  line-height: 1.7;
  font-size: 14.5px;
}
.faq-item.is-open .faq-item__a{
  max-height: 800px;
  padding: 0 24px 22px;
}

.faq__no-results{
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--mute);
  font-size: 16px;
}
.faq__no-results.is-visible{ display: block; }

@media (max-width: 720px){
  .faq__search{ top: 124px; padding: 14px 0; }
  .faq-item__q{ font-size: 14.5px; padding: 16px 20px; }
}


/* =====================================================
   22. v7 — QA polish: bigger logo, footer credit,
        improved CTA address tile, get-a-quote refresh
   ===================================================== */

/* —— Logo bigger —— */
.brand__logo{ height: 72px !important; }
.nav, .site-header { height: 104px !important; }
@media (max-width: 900px){
  .brand__logo{ height: 60px !important; }
  .nav, .site-header { height: 88px !important; }
}
@media (max-width: 540px){
  .brand__logo{ height: 52px !important; }
  .nav, .site-header { height: 78px !important; }
}
.hero, .hero--compact{ padding-top: 180px; }
.page-hero{ padding-top: 220px; }
.mobile-menu{ top: 144px; }
@media (max-width: 900px){
  .hero, .hero--compact{ padding-top: 142px; }
  .page-hero{ padding-top: 172px; }
  .mobile-menu{ top: 128px; }
}
@media (max-width: 540px){
  .hero, .hero--compact{ padding-top: 126px; }
  .page-hero{ padding-top: 146px; }
  .mobile-menu{ top: 114px; }
}

/* —— Footer credit —— */
.site-footer__credit{
  font-size: 12px;
  color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}
.site-footer__credit a{
  color: var(--gold);
  text-decoration: none;
  transition: color .25s ease;
}
.site-footer__credit a:hover{ color: #fff; }
.site-footer__base .site-footer__legal{
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

/* —— Inquire CTA — wider for new label —— */
.project-card__cta--inquire{ padding: 11px 22px; font-size: 13.5px; }

/* —— Get-a-Quote: more dynamic feel —— */
.quote{
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}
.quote__sidebar h3{
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -.01em;
}
.quote__sidebar h3::before{
  content: "";
  display: inline-block;
  width: 32px; height: 4px;
  background: var(--gold);
  margin-right: 12px;
  vertical-align: middle;
  border-radius: 9999px;
}
.quote__contact-item{
  background: #fff;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.quote__contact-item:hover{
  transform: translateY(-3px);
  border-color: rgba(247,185,14,.5);
  box-shadow: 0 14px 30px -20px rgba(15,16,17,.18);
}
.quote__form{
  background: #fff;
  box-shadow: 0 30px 60px -40px rgba(15,16,17,.18);
}
.quote__form-head h2{ font-size: clamp(2rem, 3.4vw, 2.6rem); }
.quote__form-head h2::after{
  content: "";
  display: block;
  width: 56px; height: 4px;
  background: var(--gold);
  margin-top: 14px;
  border-radius: 9999px;
}
.quote__hours{ background: #fff; border: 1px solid var(--line); }
.quote__hours h4{ color: var(--gold-2); }

/* —— CTA section — extra address tile (visible & well formatted) —— */
.cta__address-tile{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 14px 22px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  max-width: 100%;
  flex-wrap: wrap;
}
.cta__address-tile svg{
  width: 20px; height: 20px;
  flex-shrink: 0;
  fill: none; stroke: var(--gold-2);
  stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cta__address-tile-text{ line-height: 1.5; }
.cta__address-tile strong{ font-weight: 600; display: block; margin-bottom: 2px; }

/* —— Animation: fade-in on load (homepage hero polish) —— */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
body[data-page="home"] .hero__content > * { animation: fadeUpIn 1.1s var(--ease) both; }
body[data-page="home"] .hero__content > *:nth-child(1){ animation-delay: .15s; }
body[data-page="home"] .hero__content > *:nth-child(2){ animation-delay: .35s; }
body[data-page="home"] .hero__content > *:nth-child(3){ animation-delay: .55s; }
body[data-page="home"] .hero__content > *:nth-child(4){ animation-delay: .75s; }
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero__content > * { animation: none; }
}


/* =====================================================
   23. v8 — QA tweaks: smaller typography, FAQ no sticky,
        About visibility safety, improved alignment
   ===================================================== */

/* —— Typography: smaller, more balanced —— */
.hero__title{
  font-size: clamp(2rem, 5.5vw, 4.6rem) !important;
  line-height: 1.08 !important;
}
.hero__lede{ font-size: clamp(.95rem, .8vw + .8rem, 1.15rem) !important; }

.section-title{
  font-size: clamp(1.7rem, 3.6vw, 3rem) !important;
  line-height: 1.15 !important;
}

.page-hero__title{
  font-size: clamp(1.9rem, 4.4vw, 3.6rem) !important;
  line-height: 1.1 !important;
}

.zoom__text{
  font-size: clamp(1.8rem, 6.5vw, 6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
}
.zoom__line-text{ margin-top: 10px !important; }

.service-row__title{ font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important; }
.service-row__desc{ font-size: 16px !important; }
.service-row__list{ font-size: 15px !important; }
.service-row__num{ font-size: 11px !important; padding: 6px 12px !important; }

.cta__title{ font-size: clamp(1.9rem, 4.4vw, 3.6rem) !important; }
.thanks__title{ font-size: clamp(1.9rem, 4vw, 3.4rem) !important; }
.about-teaser__copy .section-title,
.story__copy .section-title,
.values__head .section-title{ font-size: clamp(1.7rem, 3.4vw, 2.8rem) !important; }

.t-card__text{ font-size: 15px !important; line-height: 1.65 !important; }
.faq-item__q{ font-size: 14.5px !important; }
.faq-item__a{ font-size: 14px !important; }
.faq__category h2{ font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important; }
.faq__category h2::before{ height: 22px !important; }

/* —— FAQ — remove sticky from chips/categories —— */
.faq__search{
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 0 0 24px !important;
  margin-bottom: 24px;
}
.faq__search-wrap{
  position: sticky;
  top: 116px;
  z-index: 5;
  background: var(--paper);
  padding: 14px 0;
  border-radius: 16px;
}
.faq__chips{
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  margin-top: 16px;
  z-index: auto !important;
}
@media (max-width: 720px){
  .faq__search-wrap{ top: 90px; }
  .faq__chips{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .faq__chip{ flex-shrink: 0; }
  .faq__category h2{ font-size: 1.4rem !important; }
  .faq-item__q{ padding: 14px 16px !important; }
  .faq-item.is-open .faq-item__a{ padding: 0 16px 18px !important; }
}

/* —— About: bullet-proof visibility (safety net) —— */
body[data-page="about"] .story,
body[data-page="about"] .story__grid,
body[data-page="about"] .story__copy,
body[data-page="about"] .story__visual,
body[data-page="about"] .values,
body[data-page="about"] .values__grid {
  opacity: 1 !important;
  visibility: visible !important;
}
body[data-page="about"] .story__paragraphs p,
body[data-page="about"] .values__grid > * {
  opacity: 1 !important;
  transform: none !important;
}
/* (Animations still play via .in-view; this just guarantees nothing stays hidden) */

/* —— Content/spacing refinement (services + about pages) —— */
.story__paragraphs p{ font-size: 16px !important; line-height: 1.75 !important; }
.value-card h3{ font-size: 18px !important; }
.value-card p{ font-size: 14.5px !important; line-height: 1.65 !important; }

.service-detail{ padding: 70px 0 50px !important; }
.service-row{ padding: 50px 0 !important; gap: 48px !important; }
@media (max-width: 900px){ .service-row{ padding: 36px 0 !important; gap: 28px !important; } }

/* —— Better mobile responsiveness across the site —— */
@media (max-width: 720px){
  .container{ padding-left: 18px !important; padding-right: 18px !important; }
  .hero__title{ font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  .page-hero__title{ font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .zoom__text{ font-size: clamp(1.5rem, 7vw, 2.6rem) !important; line-height: 1.15 !important; }
  .section-title{ font-size: clamp(1.5rem, 5vw, 2.1rem) !important; }
  .service-row__title{ font-size: 1.5rem !important; }
  .cta__title{ font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .thanks__title{ font-size: clamp(1.7rem, 5.5vw, 2.4rem) !important; }
  .btn{ padding: .75rem 1.2rem; font-size: .9rem; }
  .topbar__contact a{ font-size: 11px; }
  .topbar__contact svg{ width: 11px; height: 11px; }
}


/* =====================================================
   24. v9 — Final touches: uppercase nav, bigger topbar,
        bigger hero, larger footer text, polished credit
   ===================================================== */

/* —— Uppercase nav menu —— */
.nav__link, .mobile-menu__list a {
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.nav__actions .btn { text-transform: uppercase !important; letter-spacing: .06em !important; }
.nav__actions .btn--sm { font-size: 12px !important; }

/* —— Bigger top bar —— */
.topbar { font-size: 14px !important; }
.topbar__inner { height: 48px !important; }
.topbar__contact a, .topbar__contact span {
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.topbar__contact svg { width: 15px !important; height: 15px !important; }
.site-header { top: 48px !important; }

@media (max-width: 900px){
  .topbar__inner { height: 42px !important; }
  .topbar__contact a, .topbar__contact span { font-size: 12.5px !important; }
  .site-header { top: 42px !important; }
}
@media (max-width: 540px){
  .topbar__inner { height: 38px !important; }
  .topbar__contact a, .topbar__contact span { font-size: 11px !important; }
  .topbar__contact svg { width: 12px !important; height: 12px !important; }
  .topbar__contact { gap: 12px !important; }
  .site-header { top: 38px !important; }
}

/* —— Bigger hero —— */
.hero, .hero--compact {
  padding-top: 200px !important;
  padding-bottom: 110px !important;
  min-height: 92vh !important;
}
.hero__inner, .hero__inner--dark {
  min-height: calc(92vh - 240px) !important;
}
.hero__title { font-size: clamp(2.4rem, 6.5vw, 5.4rem) !important; }
.hero__lede {
  font-size: clamp(1.05rem, .9vw + .85rem, 1.3rem) !important;
  max-width: 680px;
}
.hero__ctas { margin-top: 40px !important; }

@media (max-width: 900px){
  .hero, .hero--compact { padding-top: 160px !important; min-height: 78vh !important; }
  .hero__title { font-size: clamp(2rem, 5.5vw, 3.4rem) !important; }
}
@media (max-width: 540px){
  .hero, .hero--compact { padding-top: 138px !important; min-height: 70vh !important; }
  .hero__title { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
}

/* —— Page hero spacing matches —— */
.page-hero {
  padding-top: 240px !important;
  padding-bottom: 100px !important;
}
@media (max-width: 900px){ .page-hero { padding-top: 184px !important; padding-bottom: 80px !important; } }
@media (max-width: 540px){ .page-hero { padding-top: 152px !important; padding-bottom: 64px !important; } }

.mobile-menu { top: 152px !important; }
@media (max-width: 900px){ .mobile-menu { top: 130px !important; } }
@media (max-width: 540px){ .mobile-menu { top: 118px !important; } }

/* —— Footer: bigger contact text —— */
.site-footer__contact li,
.site-footer__contact a {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}
.site-footer__address {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  margin-top: 10px !important;
  color: rgba(255,255,255,.65) !important;
}
.site-footer h4 {
  font-size: 15px !important;
  letter-spacing: .04em !important;
}
.site-footer ul a { font-size: 14.5px !important; }
.site-footer__brand p { font-size: 14.5px !important; line-height: 1.7 !important; }

/* —— Lamus credit — clean styling —— */
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.site-footer__credit {
  font-size: 13px !important;
  color: rgba(255,255,255,.55);
  letter-spacing: .015em;
}
.site-footer__credit a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  transition: color .25s ease, opacity .25s ease;
  margin-left: 4px;
}
.site-footer__credit a:hover { color: #fff; opacity: .9; }

/* —— FAQ — make sure content is always visible —— */
body[data-page="faq"] .faq__category,
body[data-page="faq"] .faq__list,
body[data-page="faq"] .faq-item {
  opacity: 1 !important;
  visibility: visible !important;
}
body[data-page="faq"] .faq-item__a {
  /* Closed state still hidden via max-height; just ensure it's not opacity-hidden */
  opacity: 1 !important;
}
body[data-page="faq"] .faq-item__a p {
  opacity: 1 !important;
  transform: none !important;
}

/* FAQ search — no longer sticky on small screens; fully responsive */
.faq__search-wrap {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  padding: 0 !important;
}
.faq { padding: 60px 0 90px !important; }
.faq__category { margin-top: 40px !important; }
.faq__chips { padding: 4px 0 !important; }


/* =====================================================
   25. v10 — Final centering + value cards with images
   ===================================================== */

/* —— Center "Capital projects" + "What we do" headers —— */
.projects__header,
.services__header,
.testimonials__header {
  flex-direction: column !important;
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.projects__intro,
.services__intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.projects__lede,
.services__lede {
  text-align: center !important;
  max-width: 600px !important;
  margin: 18px auto 0 !important;
}
.projects__header .chip,
.services__header .chip {
  margin-bottom: 18px !important;
}
.services__header { display: flex !important; grid-template-columns: none !important; }

/* —— Hero title — allow the line break, tighten line height —— */
.hero__title { line-height: 1.05 !important; }
.hero__title-line br { display: block; }

/* —— Value cards with images (About page principles) —— */
.value-card--with-image {
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
}
.value-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper);
}
.value-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.value-card--with-image:hover .value-card__image img { transform: scale(1.08); }
.value-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,16,17,.18) 100%);
  pointer-events: none;
}
.value-card--with-image h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  margin: 24px 28px 10px !important;
}
.value-card--with-image p {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--mute) !important;
  margin: 0 28px 20px !important;
  flex: 1;
}
.value-card__tag {
  margin: 0 28px 24px;
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* —— Tighten responsive for value cards —— */
@media (max-width: 720px){
  .value-card--with-image h3 { margin: 20px 22px 8px !important; font-size: 19px !important; }
  .value-card--with-image p { margin: 0 22px 18px !important; }
  .value-card__tag { margin: 0 22px 22px; }
  .projects__header,
  .services__header { padding: 0 12px; }
}


/* =====================================================
   26. v11 — Spacing tightening + soft cream divider
   ===================================================== */

/* —— Soft cream background for "About Us" teaser (creates divider) —— */
.about-teaser{
  background: #f5edc0 !important;
  padding: 80px 0 !important;
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* —— "What We Do" / Services section — tighter spacing —— */
.services{
  padding: 70px 0 90px !important;
}
.services__header{
  margin-bottom: 36px !important;
  gap: 12px !important;
}
.services__header .chip{ margin-bottom: 10px !important; }
.services__header .section-title{
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}
.services__lede{
  margin: 6px auto 0 !important;
  line-height: 1.5 !important;
  max-width: 540px !important;
}
.services__intro{ gap: 8px !important; margin-bottom: 0 !important; }

/* —— "Our Portfolio" / Capital Projects — clearer title/description separation —— */
.projects{
  padding: 70px 0 100px !important;
}
.projects__header{
  margin-bottom: 40px !important;
  gap: 14px !important;
}
.projects__header .chip{ margin-bottom: 10px !important; }
.projects__header .section-title{
  margin: 0 0 14px !important;
  line-height: 1.1 !important;
}
.projects__lede{
  margin: 8px auto 0 !important;
  line-height: 1.55 !important;
  max-width: 580px !important;
}

/* Project cards — better internal hierarchy */
.project-card__body{
  padding: 26px 26px 22px !important;
}
.project-card__meta{
  margin-bottom: 14px !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  color: var(--mute-2) !important;
}
.project-card__title{
  margin: 0 0 18px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}
.project-card__desc{
  margin: 0 0 22px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: var(--mute) !important;
}
.project-card__cta{
  margin-top: auto !important;
}

/* Featured project card padding stays slightly bigger */
.project-card--featured .project-card__body{ padding: 32px 32px 28px !important; }
.project-card--featured .project-card__title{ font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }

/* —— Tighten about-teaser internal spacing too —— */
.about-teaser__copy .chip{ margin-bottom: 14px !important; }
.about-teaser__copy .section-title{ margin-bottom: 18px !important; }
.section-lede{ margin-top: 16px !important; }
.about-teaser__ctas{ margin-top: 24px !important; }

/* —— Services teaser cards — tighter —— */
.service-card{ padding: 22px !important; }
.service-card__head{ margin-bottom: 6px !important; }
.service-card__title{ font-size: 20px !important; line-height: 1.25 !important; margin-bottom: 4px !important; }
.service-card__desc{ margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.55 !important; }
.service-card__list{ margin: 0 0 18px !important; gap: 6px !important; }
.service-card__link{ margin-top: 6px !important; }

/* —— Mobile spacing tightening —— */
@media (max-width: 720px){
  .about-teaser{ padding: 60px 0 !important; }
  .services{ padding: 56px 0 70px !important; }
  .projects{ padding: 56px 0 80px !important; }
  .services__header,
  .projects__header{ margin-bottom: 28px !important; }
  .project-card__body{ padding: 22px !important; }
  .project-card__title{ margin-bottom: 14px !important; font-size: 19px !important; }
  .project-card__desc{ margin-bottom: 18px !important; }
}


/* =====================================================
   27. v12 — Move divider color to a different section
   ===================================================== */

/* —— Revert About Teaser to default (no cream bg) —— */
.about-teaser{
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* —— Apply soft gray #dfdfdd as the section divider on Capital Projects —— */
.projects{
  background: #dfdfdd !important;
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Project cards stay white against the gray section */
.projects .project-card{
  background: #ffffff !important;
  border-color: rgba(0,0,0,.06) !important;
}


/* =====================================================
   28. v13 — Move #dfdfdd to "What We Do" (Services)
   ===================================================== */

/* Revert Projects to white */
.projects{
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Apply soft gray to "What We Do" / Services section */
.services{
  background: #dfdfdd !important;
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Service teaser cards stay white against the gray section */
.services .service-card{
  background: #ffffff !important;
}

/* Project cards revert to default surface */
.projects .project-card{
  background: var(--paper) !important;
  border-color: var(--line) !important;
}


/* =====================================================
   29. v14 — Update divider color to #f4f3f0
   ===================================================== */
.services{
  background: #f4f3f0 !important;
}