/* =========================================================
   Endless Touch Construction
   Editorial layout, blue + white brand palette on deep navy
   Serif display (Cormorant Garamond) + Inter UI

   NOTE: the --brass* variables are the BLUE accent. The names
   are kept from an earlier palette so every rule below still
   resolves; change the three values in :root to re-theme.
   ========================================================= */

:root {
  --bone:     #f7fafd;   /* page background */
  --cream:    #eaf2fa;   /* alternate section */
  --paper:    #ffffff;
  --espresso: #0f1926;   /* dark sections (deep navy) */
  --espresso-2:#162334;
  --espresso-3:#1f2f43;

  --brass:    #1577d6;   /* accent blue — AA on white */
  --brass-lt: #5cb8ff;   /* lighter blue for dark backgrounds */
  --brass-dk: #0f5fa8;

  --ink:      #14202e;   /* text on light */
  --ink-2:    #556375;   /* muted on light */
  --lt:       #dce6f2;   /* text on dark */
  --lt-2:     #93a3b8;   /* muted on dark */
  --rule:     #dbe4ee;   /* hairline on light */
  --rule-dk:  rgba(255,255,255,.13);

  --maxw: 1220px;
  --narrow: 880px;
  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bone);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }

/* ---------------- Type ---------------- */
h1,h2,h3,.display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.9rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.25; }
.italic { font-style: italic; }
em { font-style: italic; }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--brass); margin-bottom: 18px;
}
.section-dark .eyebrow, .page-hero .eyebrow, .hero .eyebrow { color: var(--brass-lt); }
.lead { font-size: 1.12rem; color: var(--ink-2); }
.section-dark .lead { color: var(--lt-2); }

/* thin brass rule */
.rule { width: 54px; height: 1px; background: var(--brass); margin: 22px 0; border: 0; }
.rule.center { margin-left: auto; margin-right: auto; }

/* ---------------- View Transitions ---------------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(14px); } }
::view-transition-old(root){ animation: vt-out .28s var(--ease) both; }
::view-transition-new(root){ animation: vt-in  .46s var(--ease) both; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation: none; }
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  padding: 17px 32px; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }

.btn-solid      { background: var(--espresso); color: var(--bone); border-color: var(--espresso); }
.btn-solid:hover{ background: var(--brass); border-color: var(--brass); color: #fff; }
.btn-brass      { background: var(--brass); color: #fff; border-color: var(--brass); }
.btn-brass:hover{ background: var(--brass-dk); border-color: var(--brass-dk); }
.btn-line-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(3px); }
.btn-line-light:hover { background: #fff; color: var(--espresso); border-color: #fff; }
.btn-line-dark  { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-line-dark:hover { background: var(--espresso); color: var(--bone); border-color: var(--espresso); }
.btn-sm { padding: 12px 22px; font-size: .68rem; }
.btn-block { width: 100%; }

/* text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em;
  color: var(--brass); padding-bottom: 4px; border-bottom: 1px solid rgba(21,119,214,.35);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.tlink:hover { color: var(--brass-dk); border-color: var(--brass-dk); }
.tlink .arw { transition: transform .3s var(--ease); }
.tlink:hover .arw { transform: translateX(5px); }
.on-dark .tlink, .section-dark .tlink { color: var(--brass-lt); border-color: rgba(92,184,255,.42); }
.on-dark .tlink:hover, .section-dark .tlink:hover { color: #fff; border-color: #fff; }

/* ---------------- Header ---------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.site-header.scrolled {
  background: rgba(15,25,38,.93); backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-dk);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand img { height: 44px; width: auto; }
.wordmark {
  font-family: 'Cormorant Garamond', serif; font-size: 1.42rem; font-weight: 500;
  color: #fff; line-height: 1; display: flex; flex-direction: column; letter-spacing: .01em;
}
.wordmark span {
  font-family: 'Inter', sans-serif; font-size: .53rem; font-weight: 400;
  letter-spacing: .34em; color: var(--brass-lt); margin-top: 5px; text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 34px; }
.nav a.link {
  font-size: .71rem; font-weight: 500; text-transform: uppercase; letter-spacing: .19em;
  color: rgba(255,255,255,.8); position: relative; padding: 6px 0; transition: color .3s var(--ease);
}
.nav a.link:hover { color: #fff; }
.nav a.link.active { color: #fff; }
.nav a.link.active::after {
  content:""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--brass-lt);
}
.nav-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: 0; cursor: pointer; padding: 6px; z-index: 110; }
.nav-toggle span { width: 25px; height: 1.5px; background: #fff; transition: .35s var(--ease); }

/* ---------------- Hero (home) ---------------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  text-align: center; color: #fff; overflow: hidden;
  padding: calc(var(--header-h) + 60px) 0 70px;
}
.hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
/* Looping background video. Sits over the static .bg, which stays as the
   fallback whenever the video is hidden or cannot play. */
.hero .bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; border: 0;
}
/* Don't autoplay motion for people who asked not to see it, and don't push
   a multi-MB background video down a phone connection. */
@media (prefers-reduced-motion: reduce) { .hero .bg-video { display: none; } }
@media (max-width: 768px)               { .hero .bg-video { display: none; } }
.hero::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,16,26,.82) 0%, rgba(9,16,26,.62) 45%, rgba(9,16,26,.88) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.hero h1 { margin-bottom: 8px; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero h1 .italic { display: block; font-style: italic; color: var(--brass-lt); }
.hero-lead { font-size: 1.1rem; color: rgba(255,255,255,.85); max-width: 620px; margin: 24px auto 0; font-weight: 300; }
.hero-points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px;
  margin: 34px auto 0; max-width: 780px;
}
.hero-points span { font-size: .82rem; color: rgba(255,255,255,.86); letter-spacing: .02em; font-weight: 300; }
.hero-points span::before { content:"\2713"; color: var(--brass-lt); margin-right: 9px; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }
.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .26em; color: rgba(255,255,255,.55);
}
.scroll-cue::after {
  content:""; display: block; width: 1px; height: 34px; margin: 12px auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
}

/* ---------------- Page hero (inner) ---------------- */
.page-hero {
  position: relative; color: #fff; text-align: center; overflow: hidden;
  padding: calc(var(--header-h) + 92px) 0 92px;
}
.page-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,16,26,.78), rgba(9,16,26,.88));
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero p.sub { color: rgba(255,255,255,.8); max-width: 600px; margin: 20px auto 0; font-weight: 300; }
.crumbs { color: rgba(255,255,255,.45); font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; margin-top: 26px; }
.crumbs a:hover { color: var(--brass-lt); }

/* ---------------- Sections ---------------- */
.section { padding: clamp(78px, 10vw, 132px) 0; }
.section-cream { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-dark { background: var(--espresso); color: var(--lt); }
.section-dark h2, .section-dark h3 { color: #fff; }

/* Logo watermark on the dark sections, with the saw blade turning inside it.
   Two layers sharing an identical box: blade.svg's viewBox matches the logo
   artwork 1:1, so they line up by construction with no offset maths.
   The rotation lives inside the SVG (around the blade's centre) rather than on
   the element, so the clip that hides the blade's lower half stays put.
   Decorative only: behind the content, ignores clicks, honours reduced-motion. */
.section-dark { position: relative; overflow: hidden; }
.section-dark > .container { position: relative; z-index: 1; }
.section-dark::before,
.section-dark::after {
  content: "";
  position: absolute;
  top: 50%; right: -129px;
  width: 898px; height: 760px; margin-top: -337px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}
.section-dark::before { background-image: url("images/blade.svg");          opacity: .07; }
.section-dark::after  { background-image: url("images/logo-watermark.png"); opacity: .07; }

@media (max-width: 900px) {
  .section-dark::before,
  .section-dark::after {
    width: 571px; height: 484px; margin-top: -214px; right: -106px;
  }
  .section-dark::before, .section-dark::after { opacity: .055; }
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(48px,6vw,74px); }
.section-head p { color: var(--ink-2); margin-top: 18px; font-weight: 300; }
.section-dark .section-head p { color: var(--lt-2); }

/* ---------------- Stats ---------------- */
.stats { background: var(--cream); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { padding: 46px 16px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat-num { display: block; font-family: 'Cormorant Garamond', serif; font-size: clamp(2.6rem,4.4vw,3.6rem); color: var(--espresso); line-height: 1; }
.stat-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-2); margin-top: 12px; }

/* ---------------- Service cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.svc-card { background: var(--paper); border: 1px solid var(--rule); transition: border-color .4s var(--ease), transform .4s var(--ease); display: block; }
.svc-card:hover { border-color: var(--brass); transform: translateY(-4px); }
.svc-card .thumb { aspect-ratio: 3/2; overflow: hidden; }
.svc-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-card:hover .thumb img { transform: scale(1.06); }
.svc-card .body { padding: 30px 30px 34px; }
.svc-card h3 { margin-bottom: 12px; }
.svc-card p { color: var(--ink-2); font-size: .96rem; font-weight: 300; }
.svc-card .tlink { margin-top: 20px; }

/* ---------------- Tiles / gallery ---------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tile { position: relative; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; background: var(--espresso-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.07); }
.tile::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(7,14,24,.74)); opacity: 0; transition: opacity .45s var(--ease); }
.tile:hover::after { opacity: 1; }
.tile .cap {
  position: absolute; left: 20px; bottom: 16px; z-index: 2; color: #fff;
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-style: italic;
  opacity: 0; transform: translateY(8px); transition: .45s var(--ease);
}
.tile:hover .cap { opacity: 1; transform: none; }
.center-cta { text-align: center; margin-top: 56px; }

/* ---------------- Split ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split.reverse .media { order: 2; }
.split .media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split .copy p { color: var(--ink-2); margin-bottom: 16px; font-weight: 300; }
.section-dark .split .copy p { color: var(--lt-2); }
.check-list { list-style: none; margin: 26px 0 32px; display: grid; gap: 13px; }
.check-list li { padding-left: 28px; position: relative; font-size: .95rem; font-weight: 300; color: var(--ink-2); }
.check-list li::before { content:"\2713"; position: absolute; left: 0; color: var(--brass); }
.section-dark .check-list li { color: var(--lt-2); }

/* ---------------- Service blocks ---------------- */
.svc-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: clamp(48px,6vw,72px) 0; border-bottom: 1px solid var(--rule); }
.svc-block:last-child { border-bottom: 0; }
.svc-block.alt .media { order: 2; }
.svc-block .media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-block .media img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; }
.svc-block .copy p { color: var(--ink-2); margin: 18px 0; font-weight: 300; }

/* ---------------- Filters ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-bottom: 44px; border-bottom: 1px solid var(--rule); }
.filter-btn {
  border: 0; background: none; font-family: 'Inter', sans-serif; cursor: pointer;
  font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-2); padding: 14px 22px; position: relative; transition: color .3s var(--ease);
}
.filter-btn::after { content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brass); transform: scaleX(0); transition: transform .35s var(--ease); }
.filter-btn:hover { color: var(--ink); }
.filter-btn.active { color: var(--brass); }
.filter-btn.active::after { transform: scaleX(1); }
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.gallery .tile { aspect-ratio: 1; }
.gallery .tile.hide { display: none; }

/* ---------------- Lightbox ---------------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(7,13,21,.96); display: none; align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; }
.lb-close,.lb-nav {
  position: absolute; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28);
  width: 52px; height: 52px; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lb-close:hover,.lb-nav:hover { background: var(--brass); border-color: var(--brass); }
.lb-close { top: 26px; right: 26px; }
.lb-nav.prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-nav.next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------------- Video ---------------- */
.video-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.vcard {
  position: relative; aspect-ratio: 9/16; overflow: hidden; cursor: pointer;
  background: var(--espresso-2); border: 1px solid var(--rule-dk);
}
.vcard video, .vcard img.poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard img.poster { transition: transform .8s var(--ease), opacity .35s var(--ease); }
.vcard:hover img.poster { transform: scale(1.05); }
.vcard video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease); }
.vcard.playing video { opacity: 1; }
.vcard.playing img.poster { opacity: 0; }
.vcard::after {
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(7,14,24,.78));
  transition: opacity .4s var(--ease);
}
.vcard.playing::after { opacity: 0; }
.vplay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.vplay svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.vcard:hover .vplay { background: var(--brass); border-color: var(--brass); transform: translate(-50%,-50%) scale(1.08); }
.vcard.playing .vplay { opacity: 0; }
.vcap {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; color: #fff;
  font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; font-style: italic;
  pointer-events: none; transition: opacity .3s var(--ease);
}
.vcard.playing .vcap { opacity: 0; }
.vcard.hide { display: none; }
.vsound {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(7,14,24,.6); border: 1px solid rgba(255,255,255,.32);
  display: none; place-items: center; padding: 0;
}
.vcard.playing .vsound { display: grid; }
.vsound svg { width: 15px; height: 15px; stroke: #fff; fill: none; }
.vsound:hover { background: var(--brass); border-color: var(--brass); }

/* ---------------- Reviews ---------------- */
.reviews { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.review { padding: 40px 34px; background: var(--paper); border: 1px solid var(--rule); }
.section-dark .review { background: var(--espresso-2); border-color: var(--rule-dk); }
.section-cream .review { background: var(--paper); }
.stars { color: var(--brass); letter-spacing: 4px; font-size: .82rem; margin-bottom: 20px; }
.review p { font-family: 'Cormorant Garamond', serif; font-size: 1.28rem; font-style: italic; line-height: 1.55; color: var(--ink); margin-bottom: 22px; }
.section-dark .review p { color: var(--lt); }
.review { display: flex; flex-direction: column; }
.review p { flex: 1; }
.review cite { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-2); }
.section-dark .review cite { color: var(--lt-2); }
/* platform attribution under each quote */
.review .src { display: block; margin-top: 6px; font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2); opacity: .75; }
.review .src a { color: var(--brass); border-bottom: 1px solid rgba(21,119,214,.3); }
.review .src a:hover { color: var(--brass-dk); border-color: var(--brass-dk); }
.reviews-cta { text-align: center; margin-top: 44px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------- Features ---------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.feature { background: var(--bone); padding: 44px 34px; }
.section-cream .feature { background: var(--cream); }
.feature .ic { width: 34px; height: 34px; color: var(--brass); margin-bottom: 20px; }
.feature .ic svg { width: 100%; height: 100%; }
.feature h3 { margin-bottom: 10px; font-size: 1.28rem; }
.feature p { color: var(--ink-2); font-size: .94rem; font-weight: 300; }

/* ---------------- Process steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; counter-reset: step; }
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--rule-dk); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; color: var(--brass-lt); line-height: 1; display: block; margin-bottom: 14px;
}
.step h3 { font-size: 1.3rem; margin-bottom: 10px; }
.step p { color: var(--lt-2); font-size: .93rem; font-weight: 300; }

/* ---------------- CTA band ---------------- */
.cta-band { position: relative; text-align: center; color: #fff; overflow: hidden; padding: clamp(84px,10vw,130px) 0; }
.cta-band .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta-band::after { content:""; position: absolute; inset: 0; background: rgba(9,16,26,.8); }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 540px; margin: 20px auto 34px; color: rgba(255,255,255,.82); font-weight: 300; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------------- Contact ---------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: start; }
.contact-list { list-style: none; display: grid; gap: 24px; margin-top: 34px; }
.contact-list li { display: flex; align-items: flex-start; gap: 18px; }
.ci { width: 22px; height: 22px; color: var(--brass); flex: none; margin-top: 3px; }
.ci svg { width: 100%; height: 100%; }
.contact-list .lbl { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-2); margin-bottom: 3px; }
.contact-list .val { font-size: 1.05rem; color: var(--ink); }
.contact-list a.val:hover { color: var(--brass); }
.contact-form { background: var(--paper); border: 1px solid var(--rule); padding: 44px 40px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-2); margin-bottom: 9px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  font-family: inherit; font-size: 1rem; font-weight: 300; background: transparent; color: var(--ink);
  transition: border-color .35s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--brass); }
.field textarea { resize: vertical; }
.field select { cursor: pointer; }
.form-note { text-align: center; color: var(--ink-2); font-size: .76rem; margin-top: 18px; font-weight: 300; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--espresso); color: var(--lt-2); padding-top: 78px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 56px; padding-bottom: 56px; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.footer-brand img { height: 52px; width: auto; }
.footer-brand strong { font-family: 'Cormorant Garamond', serif; font-size: 1.28rem; font-weight: 500; color: #fff; line-height: 1.2; }
.footer-about p { font-size: .92rem; font-weight: 300; max-width: 330px; line-height: 1.85; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.socials a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border: 1px solid var(--rule-dk); color: var(--lt-2);
  font-size: .66rem; font-weight: 500; text-transform: uppercase; letter-spacing: .16em;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.socials a:hover { border-color: var(--brass); color: var(--brass-lt); }
.socials svg { width: 15px; height: 15px; flex: none; }
.footer-col h4 { font-size: .66rem; text-transform: uppercase; letter-spacing: .22em; color: #fff; margin-bottom: 22px; font-family: 'Inter',sans-serif; font-weight: 500; }
.footer-col ul { list-style: none; display: grid; gap: 13px; }
.footer-col li, .footer-col a { font-size: .92rem; font-weight: 300; transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--brass-lt); }
.footer-bottom { border-top: 1px solid var(--rule-dk); padding: 26px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { font-size: .76rem; font-weight: 300; }

/* ---------------- Floating call ---------------- */
.fab-call {
  position: fixed; bottom: 24px; right: 24px; z-index: 120; width: 56px; height: 56px;
  background: var(--brass); color: #fff; display: none; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: background .3s var(--ease);
}
.fab-call svg { width: 22px; height: 22px; }
.fab-call:hover { background: var(--brass-dk); }

/* ---------------- Reveal ---------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .cards, .grid-3, .gallery, .reviews, .feature-grid, .video-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); gap: 34px; }
  .split, .svc-block, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .media, .svc-block.alt .media { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .site-header { background: rgba(15,25,38,.95); backdrop-filter: blur(14px); }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; background: var(--espresso);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 26px 30px;
    border-bottom: 1px solid var(--rule-dk);
    transform: translateY(-160%); transition: transform .45s var(--ease);
  }
  .nav.open { transform: translateY(0); }
  .nav a.link { padding: 17px 2px; border-bottom: 1px solid var(--rule-dk); }
  .nav a.link.active::after { display: none; }
  .nav .btn { margin-top: 18px; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity: 0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }
  .fab-call { display: grid; }
  .hero { min-height: 92vh; }
}
@media (max-width: 620px) {
  .cards, .grid-3, .gallery, .reviews, .feature-grid, .steps, .footer-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(odd){ border-left: 0; }
  .stat:nth-child(3),.stat:nth-child(4){ border-top: 1px solid var(--rule); }
  .svc-block .media { grid-template-columns: 1fr 1fr; }
  .hero-points { gap: 10px 20px; }
  .contact-form { padding: 32px 24px; }
  .filters { gap: 0; }
  .filter-btn { padding: 12px 14px; font-size: .64rem; }
}

/* honeypot: off-screen, not display:none, so bots still fill it */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Service-area chips. Real visible text, not just schema, so Google and
   visitors both see which towns he covers. */
.area-list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; max-width: 820px; margin: 0 auto;
}
.area-list li {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 9px 18px; font-size: .82rem; color: var(--ink-2);
}