/* ==========================================================================
   Gulchuk Renovation LLC — landing page
   Design system: warm-white paper, deep sage accent, brass detail, editorial serif
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* ink */
  --ink: #12211c;
  --ink-2: #3e4f48;
  --ink-3: #6b7b74;

  /* sage */
  --sage-900: #14291f;
  --sage-800: #1c3a2d;
  --sage-700: #2f5646;
  --sage-500: #4e7d69;
  --sage-300: #9dbcac;
  --sage-200: #c6d8cd;
  --sage-50: #edf3ef;

  /* brass */
  --brass: #a9803c;
  --brass-light: #d8b074;
  --brass-50: #f6efe2;

  /* surfaces */
  --paper: #fbfaf6;
  --paper-2: #f3f1ea;
  --card: #ffffff;
  --line: #e3e0d6;
  --line-soft: #eeece4;

  /* type — minimum readable size, every screen. Every declaration that would
     otherwise fall below it resolves through this token. */
  --fs-min: 1rem;

  /* type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* rhythm */
  --shell: 1700px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 8vw, 10rem);
  --radius: 4px;
  --radius-lg: 10px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(18, 33, 28, 0.05), 0 4px 12px rgba(18, 33, 28, 0.04);
  --shadow-md: 0 2px 6px rgba(18, 33, 28, 0.06), 0 18px 40px -12px rgba(18, 33, 28, 0.16);
  --shadow-lg: 0 4px 10px rgba(18, 33, 28, 0.07), 0 40px 80px -24px rgba(18, 33, 28, 0.28);

  /* layers */
  --z-nav: 60;
  --z-bar: 55;
  --z-overlay: 90;
}

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clears the floating header pill on anchor jumps */
  scroll-padding-top: 8rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--fs-min);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--sage-700);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--sage-200);
  color: var(--sage-900);
}

.skip {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--sage-900);
  color: #fff;
  font-size: var(--fs-min);
  border-radius: 0 0 6px 6px;
  transform: translate(-50%, -110%);
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.band { padding-block: var(--section-y); }
.band--alt { background: var(--paper-2); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* hairline that carries the editorial grid feel */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------- type utils */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.5rem;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: var(--fs-min);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: attr(data-num);
  color: var(--brass);
  font-family: var(--serif);
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}

.display {
  font-size: clamp(2.35rem, 5vw, 5.25rem);
}
.h2 {
  font-size: clamp(1.95rem, 3.6vw, 3.75rem);
}
.h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: -0.012em;
}

/* italic + brass rule under a single accent word */
.accent {
  font-style: italic;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  color: var(--sage-700);
  position: relative;
  white-space: nowrap;
}
.accent::after {
  content: "";
  position: absolute;
  left: 0.05em;
  right: 0.05em;
  bottom: -0.02em;
  height: 2px;
  background: var(--brass);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left;
  animation: rule-in 1.1s 0.5s var(--ease-out) forwards;
}
@keyframes rule-in { to { transform: scaleX(1); } }

.lead {
  max-width: 56ch;
  font-size: 1.125rem;
  color: var(--ink-2);
}
/* a lead that directly follows a heading needs its own breathing room */
h1 + .lead,
h2 + .lead { margin-top: 1.375rem; }

.muted { color: var(--ink-3); }

.label {
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--sage-700);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-min);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { --btn-bg: var(--sage-800); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.0625rem; height: 1.0625rem; flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  --btn-bg: var(--card);
  --btn-fg: var(--ink);
  border-color: var(--sage-300);
}

.btn--brass { --btn-bg: var(--brass); }
.btn--brass:hover { --btn-bg: #97702f; }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--sage-900);
}
.btn--light:hover { --btn-bg: var(--brass-50); --btn-fg: var(--sage-900); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.btn--outline-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--block { width: 100%; }
.btn--lg { min-height: 3.375rem; padding-inline: 1.875rem; font-size: var(--fs-min); }

/* quiet text link with animated rule */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sage-700);
  font-size: var(--fs-min);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s var(--ease);
}
.link:hover { background-size: 100% 1px; }
.link svg { width: 1rem; height: 1rem; transition: transform 0.35s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  color: var(--ink-2);
  font-size: var(--fs-min);
  font-weight: 500;
  white-space: nowrap;
}
.chip svg { width: 0.9375rem; height: 0.9375rem; color: var(--sage-500); flex: none; }
.chip--bare { background: transparent; border-color: transparent; padding-inline: 0; }

/* ================================================================ HEADER */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  padding-block: clamp(0.75rem, 1.6vw, 1.25rem);
  transition: padding 0.4s var(--ease);
}
.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border: 1px solid transparent;
  border-radius: 100px;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* The frosted pill lives on a pseudo-element: backdrop-filter on the element
   itself would become the containing block for the fixed mobile menu panel. */
.header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(251, 250, 246, 0.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.header.is-stuck { padding-block: 0.625rem; }
.header.is-stuck .header__inner::before { opacity: 1; }
.header.is-stuck .header__inner {
  border-color: var(--line-soft);
  box-shadow: 0 1px 2px rgba(18, 33, 28, 0.04), 0 14px 34px -18px rgba(18, 33, 28, 0.22);
}

/* The client's stacked lockup, sized so the wordmark inside it stays readable. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand img {
  width: auto;
  height: 5rem;
  transition: height 0.4s var(--ease);
}
.header.is-stuck .brand img { height: 3.75rem; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.4vw, 1rem);
  margin-inline: auto;
}
/* the phone + CTA duplicate inside the nav is for the mobile panel only */
.nav__foot { display: none; }
/* direct children only: .nav__foot nests .btn links, and this rule outranks
   .btn on specificity — which stripped the buttons of their white text */
.nav > a {
  position: relative;
  padding: 0.5rem 0.125rem;
  color: var(--ink-2);
  font-size: var(--fs-min);
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.nav > a:hover { color: var(--ink); }
.nav > a:hover::after,
.nav > a[aria-current="true"]::after { transform: scaleX(1); }
.nav > a[aria-current="true"] { color: var(--ink); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
.tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: var(--fs-min);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.tel svg { width: 1rem; height: 1rem; color: var(--sage-500); }
.tel:hover { color: var(--sage-700); }

/* burger */
.burger {
  display: none;
  flex-direction: column;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 1.0625rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ================================================================ HERO */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 14vw, 10.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* soft sage light + faint blueprint grid */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(78, 125, 105, 0.13), transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(120% 90% at 20% 10%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 10%, #000 10%, transparent 70%);
  opacity: 0.75;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
  padding: 0.4375rem 0.9375rem 0.4375rem 0.75rem;
  border: 1px solid var(--sage-200);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--sage-700);
  font-size: var(--fs-min);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage-500);
  flex: none;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--sage-500);
  opacity: 0;
  animation: ping 2.6s var(--ease-out) infinite;
}
@keyframes ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 5.5rem);
  max-width: 15ch;
  margin-bottom: 1.5rem;
}
.hero .lead { margin-bottom: 2rem; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.proof {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: var(--fs-min);
  color: var(--ink-2);
}
.proof svg { width: 1.0625rem; height: 1.0625rem; color: var(--sage-500); flex: none; }

/* hero media stack */
.hero__media { position: relative; }
.hero__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__badge {
  position: absolute;
  left: clamp(-1rem, -1.5vw, -0.5rem);
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  max-width: 23rem;
}
.hero__badge svg { width: 1.375rem; height: 1.375rem; color: var(--brass); flex: none; }
.hero__badge strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-min);
  font-weight: 600;
  line-height: 1.35;
}
.hero__badge span {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-min);
  line-height: 1.4;
}

/* ---------------------------------------------------------------- before/after component */
.ba {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  isolation: isolate;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba__after {
  clip-path: inset(0 0 0 var(--pos));
  will-change: clip-path;
}
.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(18, 33, 28, 0.12);
  pointer-events: none;
  z-index: 2;
}
.ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: #fff;
  color: var(--sage-800);
  box-shadow: 0 2px 6px rgba(18, 33, 28, 0.2), 0 10px 24px -8px rgba(18, 33, 28, 0.4);
  transition: scale 0.25s var(--ease);
}
.ba__knob svg { width: 1.125rem; height: 1.125rem; }
.ba:hover .ba__knob { scale: 1.08; }

.ba__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  /* the native control jumps to the touch point and then stops following the
     drag, and it fires that jump even for a gesture that turns out to be a
     vertical scroll — so it takes no pointer input. main.js drives the value
     from pointer events; this input remains for keyboard and screen readers. */
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* the input sits after .ba__line in the DOM, so reflect focus via the parent */
.ba:has(.ba__range:focus-visible) .ba__knob {
  outline: 2px solid var(--sage-700);
  outline-offset: 3px;
  scale: 1.08;
}
.ba__range:focus { outline: none; }

.ba__tag {
  position: absolute;
  top: 0.875rem;
  z-index: 2;
  padding: 0.3125rem 0.6875rem;
  border-radius: 100px;
  background: rgba(18, 33, 28, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.ba__tag--before { left: 0.875rem; }
.ba__tag--after { right: 0.875rem; background: rgba(47, 86, 70, 0.82); }

/* ---------------------------------------------------------------- trade marquee */
.marquee {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.125rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: var(--fs-min);
  font-style: italic;
  font-variation-settings: "SOFT" 20;
  white-space: nowrap;
}
.marquee__track > span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  opacity: 0.5;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ================================================================ STATS */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.125rem, 2.5vw, 1.75rem);
  background: var(--card);
  transition: background-color 0.35s var(--ease);
}
.stat:hover { background: var(--sage-50); }
.stat__num {
  display: flex;
  align-items: baseline;
  gap: 0.0625rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3.5rem)!important;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__num i {
  font-style: normal;
  color: var(--brass);
  font-size: 0.55em;
}
.stat p {
  margin-top: 0.75rem;
  color: var(--ink-3);
  font-size: var(--fs-min);
  line-height: 1.5;
}

/* ================================================================ SERVICES */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* keep display lines tight instead of letting them run the full 1800px */
.sec-head h2 { max-width: 20ch; }
.sec-head--center h2 { max-width: 24ch; }
.sec-head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .eyebrow::after { display: none; }
.sec-head--center .eyebrow::before { margin-right: 0; }

/* editorial index list */
.svc { border-top: 1px solid var(--line); }
.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.25fr) 2rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.375rem, 2.6vw, 2rem) 0.5rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  cursor: pointer;
  transition: padding-inline 0.4s var(--ease);
}
.svc__row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--sage-50), rgba(237, 243, 239, 0));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.svc__row > * { position: relative; }
.svc__row:hover { padding-inline: 1.25rem 0.5rem; }
.svc__row:hover::before { opacity: 1; }
.svc__num {
  color: var(--brass);
  font-family: var(--serif);
  font-size: var(--fs-min);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.svc__title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  transition: color 0.3s var(--ease);
}
.svc__row:hover .svc__title { color: var(--sage-700); }
.svc__desc {
  color: var(--ink-2);
  font-size: var(--fs-min);
  line-height: 1.6;
}
/* mobile-only thumbnail — desktop reveals the same photo via the cursor peek */
.svc__thumb { display: none; }

.svc__arrow {
  justify-self: end;
  align-self: center;
  color: var(--sage-500);
  opacity: 0;
  translate: -8px 0;
  transition: opacity 0.35s var(--ease), translate 0.35s var(--ease);
}
.svc__arrow svg { width: 1.25rem; height: 1.25rem; }
.svc__row:hover .svc__arrow { opacity: 1; translate: 0 0; }

/* cursor-following preview (desktop pointer only) */
.svc-peek {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 16rem;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  scale: 0.94;
  transition: opacity 0.3s var(--ease), scale 0.4s var(--ease-out);
}
.svc-peek.is-on { opacity: 1; scale: 1; }
.svc-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================ INSURANCE (dark panel) */
.insurance {
  position: relative;
  background: var(--sage-900);
  color: rgba(255, 255, 255, 0.76);
  overflow: hidden;
}
.insurance::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -5%;
  width: min(60vw, 720px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(169, 128, 60, 0.2), transparent 62%);
}
.insurance::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 84px 100%;
}
.insurance > * { position: relative; z-index: 1; }
.insurance h2 { color: #fff; }
.insurance .eyebrow { color: rgba(255, 255, 255, 0.5); }
.insurance .eyebrow::before { color: var(--brass-light); }
.insurance .eyebrow::after { background: linear-gradient(to right, rgba(255, 255, 255, 0.22), transparent); }
.insurance .lead { color: rgba(255, 255, 255, 0.74); }

.ins__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.steps { counter-reset: s; margin-top: 2.5rem; }
.steps li {
  position: relative;
  counter-increment: s;
  padding: 1.25rem 0 1.25rem 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.steps li::before {
  content: "0" counter(s);
  position: absolute;
  left: 0;
  top: 1.375rem;
  color: var(--brass-light);
  font-family: var(--serif);
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.steps strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.steps span {
  font-size: var(--fs-min);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

.ins__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* stacked restoration photos */
.ins__shots { position: relative; padding-bottom: 4.5rem; }
.ins__shot {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.65);
}
.ins__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ins__shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* right padding keeps the caption clear of the overlapping thumbnail */
  padding: 2.75rem 50% 0.9375rem 1.125rem;
  background: linear-gradient(to top, rgba(10, 20, 15, 0.88), transparent);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-min);
  line-height: 1.5;
}
.ins__shot--sm {
  position: absolute;
  right: -1.25rem;
  bottom: 0;
  width: 42%;
  border: 4px solid var(--sage-900);
  border-radius: 8px;
}
.ins__shot--sm img { aspect-ratio: 1; }

/* ================================================================ ABOUT */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  /* the photo is the taller column, so this vertically centres the copy against it */
  align-items: center;
}
.about__figure { position: relative; }
.about__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.about__stamp {
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  display: grid;
  place-items: center;
  gap: 0.125rem;
  width: 8.75rem;
  height: 8.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.about__stamp img { width: 3rem; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
/* deliberate exception to the 18px floor: this is a decorative seal, not copy —
   the wordmark it carries is repeated as real text elsewhere on the page */
.about__stamp span {
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.about__body p + p,
.prose p + p { margin-top: 1.125rem; }
.about__body .prose { margin-top: 1.125rem; }

/* progressive disclosure — desktop shows everything, no control */
.prose-toggle { display: none; }
.about__quote {
  margin: 2rem 0 0;
  padding: 1.5rem 0 0 1.5rem;
  border-left: 2px solid var(--brass);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  font-style: italic;
  font-variation-settings: "SOFT" 24, "WONK" 1;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

/* why-choose grid — flex, not grid: with an odd item count the last row of a
   grid leaves visible dead cells, whereas flex items stretch to fill it */
.why {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.why__item {
  position: relative;
  flex: 1 1 13rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--card);
  transition: background-color 0.35s var(--ease);
}
.why__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.why__item:hover { background: var(--sage-50); }
.why__item:hover::after { transform: scaleY(1); }
.why__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.125rem;
  border-radius: 8px;
  background: var(--sage-50);
  color: var(--sage-700);
}
.why__item:hover .why__icon { background: #fff; }
.why__icon svg { width: 1.25rem; height: 1.25rem; }
.why__item h3 {
  margin-bottom: 0.625rem;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.why__item p { font-size: var(--fs-min); line-height: 1.65; color: var(--ink-2); }

/* ================================================================ BEFORE & AFTER slider */
.ba-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ba-stage .ba {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ba-meta__index {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: var(--fs-min);
  font-variant-numeric: tabular-nums;
}
.ba-meta__index b { color: var(--ink); font-size: 1.75rem; font-weight: 500; }
.ba-meta h3 { margin-bottom: 0.875rem; font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
.ba-meta p { color: var(--ink-2); }
.ba-meta__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.ba-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.icon-btn:hover { background: var(--sage-700); border-color: var(--sage-700); color: #fff; }
.icon-btn svg { width: 1.125rem; height: 1.125rem; }
.ba-dots { display: flex; gap: 0.375rem; margin-left: auto; }
.ba-dots button {
  width: 1.75rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--line);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), width 0.3s var(--ease);
}
.ba-dots button[aria-current="true"] { background: var(--sage-700); width: 2.5rem; }
.ba-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--ink-3);
  font-size: var(--fs-min);
}
/* flex:none stops the icon collapsing; start-alignment keeps it on the first
   line if the hint ever wraps */
.ba-hint { align-items: flex-start; }
.ba-hint svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2em; }

/* ================================================================ GALLERY */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.filters button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-min);
  font-weight: 450;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.filters button:hover { border-color: var(--sage-300); background: var(--card); }
.filters button[aria-pressed="true"] {
  background: var(--sage-900);
  border-color: var(--sage-900);
  color: #fff;
}

/* Control for the capped gallery. The grid opens two rows deep on every
   breakpoint, so this is no longer phone-only. The [hidden] rule keeps the
   attribute authoritative — the script hides the button whenever the active
   filter matched few enough photos to fit without capping. */
.work-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.work-more[hidden] { display: none; }
.work-more svg { transition: rotate 0.3s var(--ease); }
.work-more .btn[aria-expanded="true"] svg { rotate: 180deg; }

.grid-work {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* dense back-fills the holes a wide tile would otherwise leave behind */
  grid-auto-flow: row dense;
  gap: clamp(0.625rem, 1.4vw, 1rem);
}
.work {
  position: relative;
  grid-column: span 1;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--paper-2);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
/* Editorial rhythm: two double-width tiles. 1.64 is the aspect that keeps a
   two-column tile the same height as a 4/5 one-column tile, so rows stay level. */
.work--wide { grid-column: span 2; aspect-ratio: 1.64; }
.work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease);
}
.work:hover img { transform: scale(1.045); }
.work__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: linear-gradient(to top, rgba(12, 26, 20, 0.72), rgba(12, 26, 20, 0.05) 55%, transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.work:hover .work__veil,
.work:focus-visible .work__veil { opacity: 1; }
.work__veil span {
  color: #fff;
  font-size: var(--fs-min);
  font-weight: 500;
  text-align: left;
  translate: 0 8px;
  transition: translate 0.4s var(--ease);
}
.work:hover .work__veil span { translate: 0 0; }
.work[hidden] { display: none; }
.work.is-out { opacity: 0; transform: scale(0.97); }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: rgba(10, 20, 15, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox[hidden] { display: none; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-min);
}
.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding-block: clamp(0.75rem, 2vw, 1.25rem);
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
}
.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.lightbox .icon-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.lightbox .icon-btn:hover { background: #fff; color: var(--sage-900); border-color: #fff; }
.lightbox__cap {
  min-width: 12rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-min);
}

/* ================================================================ REVIEWS */
.rev-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.gcard {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.gcard:hover { box-shadow: var(--shadow-md); }
.gcard__g { width: 2rem; height: 2rem; flex: none; }
.gcard strong { display: block; color: var(--ink); font-size: var(--fs-min); font-weight: 600; }
.gcard span { display: block; color: var(--ink-3); font-size: var(--fs-min); }

.stars { display: inline-flex; gap: 2px; color: var(--brass); }
.stars svg { width: 0.9375rem; height: 0.9375rem; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(19rem, 22rem);
  gap: 1rem;
  /* bleed to the right edge so the cut-off card reads as "scroll me" */
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
.rev {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.375rem, 2.4vw, 1.875rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rev:hover { box-shadow: var(--shadow-md); border-color: var(--sage-200); }
.rev__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rev blockquote {
  margin: 0;
  flex: 1;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.rev footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: var(--fs-min);
}
.rev__who { color: var(--ink); font-weight: 550; }
.tag-sample {
  padding: 0.1875rem 0.5rem;
  border: 1px dashed var(--brass);
  border-radius: 100px;
  background: var(--brass-50);
  color: #8a6528;
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ================================================================ SERVICE AREA */
.area {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* stretch so the map matches the height of the city list beside it */
  align-items: stretch;
}
/* if the map's min-height ever makes it the taller column, keep the copy centred */
.area > :first-child { align-self: center; }
.cities { margin-top: 2rem; border-top: 1px solid var(--line); }
.cities li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  letter-spacing: -0.015em;
  transition: padding-left 0.35s var(--ease), color 0.35s var(--ease);
}
.cities li:hover { padding-left: 0.875rem; color: var(--sage-700); }
.cities li svg { width: 1rem; height: 1rem; color: var(--brass); flex: none; }
.cities li em {
  margin-left: auto;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: var(--fs-min);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map iframe {
  width: 100%;
  /* fills the stretched grid row; min-height covers the stacked layout, where
     the row height would otherwise depend on the iframe itself */
  height: 100%;
  min-height: clamp(20rem, 46vw, 26rem);
  border: 0;
  filter: saturate(0.82) contrast(1.02);
}
.map__pin {
  /* top-right: Google's own place card occupies the top-left of the embed */
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: var(--fs-min);
  font-weight: 550;
  pointer-events: none;
}
.map__pin svg { width: 0.9375rem; height: 0.9375rem; color: var(--brass); }

/* ================================================================ CONTACT */
.contact { position: relative; background: var(--paper-2); overflow: hidden; }
.contact::before {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -30%;
  width: min(55vw, 640px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(78, 125, 105, 0.14), transparent 62%);
  pointer-events: none;
}
.contact > * { position: relative; }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}

.cinfo { margin-top: 2.25rem; }
.cinfo li + li { margin-top: 1.5rem; }
.cinfo a,
.cinfo div {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
}
/* scoped past `.cinfo span` below, which would otherwise win on specificity
   and flatten this to display:block, knocking the icon off centre */
.cinfo .cinfo__ic {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--sage-700);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cinfo a:hover .cinfo__ic { background: var(--sage-700); border-color: var(--sage-700); color: #fff; }
.cinfo__ic svg { width: 1.125rem; height: 1.125rem; }
.cinfo b {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.cinfo span {
  display: block;
  color: var(--ink);
  font-size: var(--fs-min);
  font-weight: 500;
  line-height: 1.4;
}

/* form */
.form-card {
  position: relative;
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem;
}
.field { display: flex; flex-direction: column; gap: 0.4375rem; }
.field--wide { grid-column: 1 / -1; }
.field label {
  color: var(--ink-2);
  font-size: var(--fs-min);
  font-weight: 550;
  letter-spacing: 0.01em;
}
.field label i { color: var(--brass); font-style: normal; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9375rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-min);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7b74' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
  cursor: pointer;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--sage-300); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  background: var(--card);
  border-color: var(--sage-700);
  box-shadow: 0 0 0 3px rgba(47, 86, 70, 0.12);
}
.field .err {
  color: #a3322b;
  font-size: var(--fs-min);
  min-height: 0;
}
.field.is-bad input,
.field.is-bad select { border-color: #c0564e; }
.field.is-bad input:focus { box-shadow: 0 0 0 3px rgba(192, 86, 78, 0.14); }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.form-foot p { flex: 1; min-width: 14rem; color: var(--ink-3); font-size: var(--fs-min); line-height: 1.55; }

.btn.is-busy { pointer-events: none; opacity: 0.72; }
.btn__spin {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-done {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
  text-align: center;
}
.form-done.is-on { display: flex; }
.form-done__ic {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--sage-50);
  color: var(--sage-700);
}
.form-done__ic svg { width: 1.625rem; height: 1.625rem; }
.form-card.is-done .form-live { display: none; }

/* ================================================================ FOOTER */
.footer {
  background: var(--sage-900);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-min);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* the stacked lockup needs real height before the wordmark becomes readable */
.footer img.footer__logo { height: 6.25rem; width: auto; margin-bottom: 1.5rem; }
/* scoped to the columns — the bottom bar needs its lines full width */
.footer__top p { max-width: 34ch; line-height: 1.65; }
.footer h4 {
  margin-bottom: 1.125rem;
  color: #fff;
  font-family: var(--sans);
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer li + li { margin-top: 0.6875rem; }
.footer a { text-decoration: none; transition: color 0.2s var(--ease); }
.footer__top a:hover { color: #fff; }
.footer__social {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.75rem;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.footer__social a:hover { background: #fff; border-color: #fff; color: var(--sage-900); }
.footer__social svg { width: 1.0625rem; height: 1.0625rem; }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-min);
}

/* ================================================================ call FAB */
/* The rings live on the outer anchor and the coloured face on an inner span:
   a position:fixed element forms its own stacking context, so pseudo-elements
   cannot be pushed behind its own background with a negative z-index. */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-bar);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  text-decoration: none;
}
.fab::before,
.fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sage-500);
  animation: fab-ping 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
.fab::after { animation-delay: 1.3s; }
@keyframes fab-ping {
  0% { transform: scale(1); opacity: 0.65; }
  70%, 100% { transform: scale(1.8); opacity: 0; }
}

.fab__face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sage-700);
  color: #fff;
  box-shadow: 0 2px 6px rgba(18, 33, 28, 0.2), 0 14px 30px -10px rgba(18, 33, 28, 0.5);
  transition: background-color 0.25s var(--ease), scale 0.25s var(--ease);
}
.fab:hover .fab__face { background: var(--sage-800); scale: 1.07; }
.fab:active .fab__face { scale: 0.97; }
.fab svg { width: 1.375rem; height: 1.375rem; }

/* ================================================================ reveal */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.rv.is-in { opacity: 1; transform: none; }

/* ================================================================ WIDE
   The container is 1800px, but the client photography is portrait 4:5 — left
   uncapped, a media column would render ~950px tall and swamp the viewport.
   Each portrait column therefore gets a ceiling and hugs its outer edge. */
@media (min-width: 1081px) {
  /* width:100% is load-bearing — justify-self/auto-margins make a grid item
     shrink-to-fit, and .ba collapses to zero (its images are absolute). */
  .hero__media,
  .about__figure,
  .ins__shots,
  .ba-stage__media,
  .form-card { width: 100%; }
  .hero__media { max-width: 36rem; justify-self: end; }
  .about__figure { max-width: 36rem; }
  .ins__shots { max-width: 40rem; justify-self: end; }
  /* 4:5 portrait at 40rem ran 800px tall and pushed the block past one screen —
     narrowing beats re-cropping, which would cut the shower heads off the top */
  .ba-stage__media { max-width: 33rem; }
  .form-card { max-width: 44rem; margin-left: auto; }
  .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* Five columns keeps each tile near the 960px native width of the source
   photos; at four columns a 1800px grid would upscale them. 13 tiles + 2
   double-width ones = 15 units = exactly three rows. */
@media (min-width: 1500px) {
  .grid-work { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The full horizontal nav measures ~1256px of intrinsic content, so it stops
   fitting before the layout breakpoints do: the header phone number drops out
   first, then the burger takes over. Both thresholds carry ~50px of slack over
   the measured minimums (1380px with the phone, 1195px without). */
@media (max-width: 1439px) {
  .header__actions .tel { display: none; }
}

@media (max-width: 1239px) {
  .nav,
  .header__actions .tel,
  .header__actions .btn { display: none; }
  .burger { display: flex; }
  /* keep the logo and the close button above the full-screen menu panel */
  .brand,
  .header__actions { position: relative; z-index: 80; }
  .header__actions { margin-left: auto; }
  /* the pill is always frosted on mobile — keep the filter on the pseudo-element
     so it never becomes the containing block for the fixed menu panel */
  .header__inner {
    border-color: var(--line-soft);
    box-shadow: var(--shadow-sm);
  }
  .header__inner::before { opacity: 1; }

  /* slide-out panel */
  .nav.is-open {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* flex-start, not center: centered content taller than the panel overflows
       upward and slides under the logo */
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 5.75rem var(--gutter) 2.5rem;
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* direct children only — .nav__foot holds .btn links one level deeper, and
     this rule outranks .btn on specificity, which repainted them ink-on-green */
  .nav.is-open > a {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .nav.is-open > a[aria-current="true"] { color: var(--sage-700); }
  .nav.is-open > a::after { display: none; }
  .nav__foot { display: none; }
  .nav.is-open .nav__foot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
  }

}

/* ================================================================ RESPONSIVE */
@media (max-width: 1080px) {
  /* minmax(0,1fr) — a bare 1fr keeps its min-content floor, which lets long
     headings push the track wider than the viewport. */
  .hero__grid,
  .ins__grid,
  .about,
  .ba-stage,
  .area,
  .contact__grid,
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { gap: 2.75rem; }
  /* Stacked columns: centre the media so it doesn't leave a lopsided void.
     width:100% is required — auto margins make a grid item shrink-to-fit, and
     .ba has no intrinsic width (both its images are absolutely positioned). */
  .hero__media,
  .about__figure,
  .ins__shots,
  .ba-stage__media { width: 100%; margin-inline: auto; }
  .hero__media { max-width: 30rem; }
  .about__figure { max-width: 26rem; }
  .ins__shots { max-width: 28rem; }
  /* stacked, this column would otherwise run the full width and the 4:5 crop
     would push the slider past 1200px tall */
  .ba-stage__media { max-width: 30rem; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head { align-items: start; row-gap: 1.5rem; }
  .grid-work { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  /* Without hover there is no way to reach the per-service photo, so the row
     becomes a picture row: thumbnail spanning all three text rows on the left. */
  .svc__row {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    column-gap: 1.125rem;
    row-gap: 0.3125rem;
    align-items: start;
    padding-block: 1.125rem;
  }
  .svc__row:hover { padding-inline: 0.5rem; }
  .svc__thumb {
    display: block;
    grid-area: 1 / 1 / 4 / 2;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
  }
  .svc__num { grid-area: 1 / 2 / 2 / 3; }
  .svc__title { grid-area: 2 / 2 / 3 / 3; }
  .svc__desc { grid-area: 3 / 2 / 4 / 3; }
  .svc__arrow { display: none; }

  /* The desktop composition overlaps a thumbnail onto the main shot; at this
     width it collided with the caption, so the two photos sit side by side. */
  .ins__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; align-items: start; padding-bottom: 0; }
  .ins__shot--sm { position: static; width: auto; right: auto; bottom: auto; border: 0; }
  .ins__shot--sm img { aspect-ratio: 4 / 5; }
  .ins__shot figcaption {
    position: static;
    padding: 0.625rem 0 0;
    background: none;
    color: rgba(255, 255, 255, 0.62);
  }

  .rev-head { grid-template-columns: minmax(0, 1fr); }
  /* Once the head stacks, the Google card sits directly above the "Leave Us a
     Review" card and points at the same profile, so it is dropped rather than
     shown twice. */
  .gcard { display: none; }
  .footer__logo { height: 5.5rem !important; }
  .about__stamp { width: 7rem; height: 7rem; right: -0.5rem; bottom: -0.75rem; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 7rem; }
  body { font-size: var(--fs-min); }
  /* 72px of padding per side across ten sections added ~640px of dead scroll */
  :root { --section-y: 3.5rem; }

  /* mobile type pass: nothing in running copy sits above the 16px floor */
  .lead { font-size: var(--fs-min); }
  .about__quote { font-size: var(--fs-min); }

  /* icon beside the copy instead of stacked above it — these five cards ran
     ~380px each when the icon owned its own row */
  .why__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.375rem 1.25rem;
  }
  .why__icon { grid-area: 1 / 1 / 3 / 2; margin-bottom: 0; }
  .why__item h3 { grid-area: 1 / 2 / 2 / 3; margin-bottom: 0.375rem; }
  .why__item p { grid-area: 2 / 2 / 3 / 3; }

  .svc__row { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 1rem; }

  /* stacked full width — at this width the two pills wrapped to different
     lengths and read as ragged */
  .ins__cta .btn { width: 100%; }

  /* the restoration pair sat below the CTAs and read as an orphan; the same
     in-progress work is covered by the Before & After sliders. Both images are
     loading="lazy", so hiding them here also means they are never fetched. */
  .ins__shots { display: none; }

  /* ~120 words of unbroken prose was the longest text wall on the page */
  .prose {
    max-height: 12rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent);
    mask-image: linear-gradient(to bottom, #000 68%, transparent);
  }
  .prose.is-open {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .prose-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-top: 0.875rem;
    padding: 0.5rem 0;
    min-height: 2.75rem;
    border: 0;
    background: none;
    color: var(--sage-700);
    font-family: var(--sans);
    font-size: var(--fs-min);
    font-weight: 550;
    cursor: pointer;
  }
  .prose-toggle svg { width: 1.0625rem; height: 1.0625rem; transition: rotate 0.3s var(--ease); }
  .prose-toggle[aria-expanded="true"] svg { rotate: 180deg; }
  .brand img { height: 2.75rem; }
  /* must stay below the resting height — the scrolled state shrinks, never grows */
  .header.is-stuck .brand img { height: 2.5rem; }
  .hero h1 { font-size: clamp(2.05rem, 8.4vw, 2.9rem); }
  /* the eyebrow repeats what the headline and the proof list already say —
     dropped here to get the h1 above the fold */
  .hero__tag { display: none; }

  /* ── mobile hero: the slider gives way to a photographic background.
     No content is lost — the full 8-project slider lives in #transformations.
     The scrim is near-black, and hero-bg.webp is a colour-corrected copy of
     ba3-after: the glass panels in the original carry the green tint that
     architectural glass always has, so its channel means were equalised and the
     saturation pulled to 45%. Regenerate it from prep_assets.py, not by hand.
     Measured over the photo's brightest region the scrim holds white body text
     at ~5.3:1 and the headline far above that. */
  .hero__media { display: none; }
  .hero {
    background-image:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.62) 100%),
      url("../images/hero-bg.webp");
    background-size: cover;
    background-position: 50% 30%;
    background-repeat: no-repeat;
  }
  /* the sage glow and blueprint grid are tuned for paper, not for a photo */
  .hero::before,
  .hero::after { display: none; }

  .hero h1 { color: #fff; }
  .hero .accent { color: var(--brass-light); }
  .hero .accent::after { background: var(--brass-light); opacity: 0.7; }
  .hero .lead { color: rgba(255, 255, 255, 0.82); }
  .hero__proof { border-top-color: rgba(255, 255, 255, 0.22); }
  .proof { color: rgba(255, 255, 255, 0.87); }
  .proof svg { color: var(--brass-light); }
  /* stacked full width — side by side they wrapped to uneven lengths */
  .hero__cta .btn { width: 100%; }
  .hero__cta .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: #fff;
    border-color: rgba(255, 255, 255, 0.34);
  }
  .hero__cta .btn--ghost:hover {
    --btn-bg: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
  }
  /* the marquee sits inside .hero, so it inherits the dark band */
  .marquee { border-color: rgba(255, 255, 255, 0.18); }
  .marquee__track > span { color: rgba(255, 255, 255, 0.72); }
  /* three wrapped rows of chips read as clutter — one row that scrolls to the
     screen edge instead, with the overflow faded rather than cut */
  .filters {
    flex-wrap: nowrap;
    gap: 0.4375rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }

  .work-more { margin-top: 0.875rem; }
  .work-more .btn { width: 100%; }

  .grid-work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .work--wide { aspect-ratio: 16 / 11; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  /* brand full width, then the three link groups two-up — one column each
     stacked into ~860px of footer */
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer__top > :first-child { grid-column: 1 / -1; }

  /* six full-width serif rows became chips: ~430px down to ~130px */
  .cities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    border-top: 0;
  }
  .cities li {
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 100px;
    background: var(--card);
    font-size: var(--fs-min);
  }
  .cities li:hover { padding-left: 0.875rem; }
  /* stays on the 16px floor — set apart by colour, not by shrinking.
     margin-left:auto from the base rule would strand it across the chip. */
  .cities li em {
    margin-left: 0;
    font-size: var(--fs-min);
    letter-spacing: 0;
    text-transform: none;
    color: var(--brass);
  }
  .hero__badge { position: static; margin-top: 0.75rem; max-width: none; left: auto; bottom: auto; }
  .hero__frame { border-radius: 8px; }
  .stat__num { font-size: 2.5rem; }
  .about__stamp { width: 5.5rem; height: 5.5rem; right: 0.5rem; bottom: 0.5rem; padding: 0.625rem; }
  .about__stamp img { width: 2rem; }
  .about__stamp span { font-size: 0.5rem; }
  .marquee__track { gap: 1.75rem; }
  .marquee__track > span { gap: 1.75rem; font-size: var(--fs-min); }
  /* the hint points at drag + arrow keys; touch has no keyboard, and the knob
     already reads as draggable */
  .ba-hint { display: none; }
  /* the spec chips wrapped to two or three rows here — the description already
     names the materials */
  .ba-meta__tags { display: none; }

  /* prev/next centred, dots centred on their own row below */
  .ba-nav { flex-wrap: wrap; justify-content: center; }
  .ba-dots { margin-left: 0; width: 100%; order: 3; justify-content: center; }
}


/* ================================================================ a11y motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .accent::after { transform: scaleX(1); }
  .marquee__track { animation: none; }
  .fab::before,
  .fab::after { display: none; }
}

@media print {
  .header, .lightbox, .map, .svc-peek, .fab { display: none !important; }
  body { padding: 0; }
}

/* ==========================================================================
   WORDPRESS — additive only, nothing above this line is modified.
   The admin bar is fixed at the top of the viewport for logged-in users and
   would otherwise sit on top of the fixed header pill. Below 601px the admin
   bar is position:absolute and scrolls away, so no offset is needed there.
   ========================================================================== */
@media screen and (min-width: 601px) {
  .admin-bar .header { top: 46px; }
}
@media screen and (min-width: 783px) {
  .admin-bar .header { top: 32px; }
}

/* The generic WordPress templates (page.php, 404.php, index.php) share this
   header and footer, so they need to clear the fixed header pill and get a
   readable measure. The landing layout above is untouched by these rules. */
.default-page,
.page-404,
.hero-blog,
.entry-page {
  padding-block: clamp(8rem, 14vw, 11rem) clamp(3.5rem, 7vw, 5.5rem);
}
.entry-page,
.page-404 { padding-top: 0; }
.default-page .container,
.page-404 .container,
.hero-blog .container,
.entry-page .container {
  width: min(100% - 2 * var(--gutter), var(--shell));
  margin-inline: auto;
}
.default-page__box > * + * { margin-top: 1.25rem; }

/* Contact Form 7 renders the estimate form inside .form-card. CF7 wraps every
   control in a span and appends its own status output; these rules fold that
   into the design without touching the field styles above. */
.form-card .wpcf7-form-control-wrap { display: block; }
.form-card .wpcf7-not-valid-tip {
  margin-top: 0.4375rem;
  color: #a3322b;
  font-size: var(--fs-min);
}
.form-card .wpcf7-not-valid { border-color: #c0564e; }
.form-card .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-2);
  font-size: var(--fs-min);
  line-height: 1.55;
}
.form-card .wpcf7-spinner { margin-inline: 0.75rem; }

/* ==========================================================================
   REVIEWS WIDGET (Widgets for Google Reviews / Trustindex)

   The plugin builds its markup with JavaScript after the page has loaded and
   pulls its stylesheet from its own CDN, so its CSS lands after this file and
   leans on !important 232 times. It also sets the widget width as an inline
   style. Overriding either needs !important — that is why it is used here, and
   only here. Everything is scoped to #reviews and only ever narrows the widget;
   the plugin keeps control of its own internals.
   ========================================================================== */

/* The inline width is measured once at load and never recalculated, so a window
   resize leaves the widget at a stale pixel width — wider than its column, which
   puts the whole page into horizontal scroll and throws every gutter out. */
#reviews .ti-widget {
  width: auto !important;
  max-width: 100% !important;
}
#reviews .ti-widget img { max-width: 100%; height: auto; }

/* Surface: the plugin's default is a flat grey slab, which reads as a hole next
   to the paper-and-hairline cards the rest of the page uses. */
#reviews .ti-review-item .ti-inner {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
}

/* Type: Poppins ships with the widget and is the one thing on the page that is
   neither Inter nor Fraunces. */
#reviews .ti-widget,
#reviews .ti-widget .ti-name,
#reviews .ti-widget .ti-date,
#reviews .ti-widget .ti-review-text-container { font-family: var(--sans) !important; }
#reviews .ti-widget .ti-review-text-container { color: var(--ink-2) !important; }
#reviews .ti-widget .ti-name { color: var(--ink) !important; }
#reviews .ti-widget .ti-date { color: var(--ink-3) !important; }
#reviews .ti-widget .ti-read-more { font-family: var(--sans) !important; color: var(--sage-700) !important; }

/* The approved layout puts the reviews and the call-to-action card in one row.
   The widget replaces the three review cards that used to fill it, so it is
   sized like them and the card sits alongside instead of underneath — two
   narrow cards stacked down the left edge left the section looking unfinished.
   Below the mobile breakpoint everything stacks, which is what it did anyway. */
@media (min-width: 881px) {
  #reviews .shell {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #reviews .rev-head { flex: 1 1 100%; }
  /* The gap rides on the widget rather than on the container: the plugin leaves
     an empty placeholder div behind when its script cannot reach its CDN, and a
     column-gap would still be spent on it, knocking the card out of alignment. */
  #reviews .ti-widget {
    /* takes everything the card leaves; min-width lets it shrink below the
       intrinsic width of its own slider track instead of forcing a wrap */
    flex: 1 1 0;
    min-width: 0;
    margin-right: 1rem;
  }
  #reviews .rail {
    flex: 0 0 22rem;
    margin-top: 0;
    /* the bleed and the snap scrolling exist for a row of cards; there is one */
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }
}

/* Stacked layout keeps the gap the removed review cards used to provide. */
@media (max-width: 880px) {
  #reviews .rail { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
}

.wpcf7-spinner{
	display:none !important;
}