/* ==========================================================================
   Classic Wood Finishing Ltd.
   Palette and type carried over from the original Squarespace build.
   burgundy #721121  |  tan #C99D7B  |  ink #1B1614
   ========================================================================== */

/* Colour roles
   burgundy - authority. Primary CTAs, the contact block, the footer.
   tan      - the wood-finish accent. Rules, kickers, hairlines, hovers.
              Never a large flat fill: at slab scale it goes muddy.
   ink      - structural dark ground. Carries the portfolio so the
              refinished pieces read against something.
   paper    - the two light grounds the page alternates between. */
:root {
  --burgundy: #721121;
  --burgundy-deep: #5A0D1A;
  --burgundy-lift: #8C1A2B;
  --tan: #c99d7b;
  --tan-lift: #dcb797;
  --tan-ink: #93613a; /* darkened for text contrast on light grounds */
  --tan-wash: #f4e7dc;
  --ink: #1b1614;
  --ink-deep: #141110;
  --ink-soft: #4a423e;
  --paper: #ffffff;
  --paper-warm: #faf7f4;
  --line: rgba(27, 22, 20, 0.12);
  --line-light: rgba(255, 255, 255, 0.22);

  --font-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 1.5rem;
  --header-h: 74px;

  --r-sm: 4px;
  --r-md: 8px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4.4vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 2.1vw, 1.4rem); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.75rem, 8vw, 6.5rem); }
.section--warm { background: var(--paper-warm); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tan-ink);
  margin: 0 0 0.9rem;
  line-height: 1.4;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }
/* The kickers were removed: every one restated the heading under it. Headings
   now lead their own sections. */
.section-head h2 { margin-bottom: 0; }
.section-head h2 + p { margin-top: 0.9rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.03rem; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--burgundy);
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

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

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--burgundy); color: #fff; }
.btn--primary:hover { background: var(--burgundy-lift); }

/* glass, not a black slab: the scrim behind it is already dark */
.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.95); color: var(--burgundy); border-color: #fff; }

/* header phone CTA: outline reads cleanly on both the photo and the
   burgundy bar. A tan fill with burgundy text goes muddy on both. */
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--outline:hover { background: #fff; color: var(--burgundy); border-color: #fff; }
.btn--outline svg { width: 16px; height: 16px; flex: none; }

/* primary action on a burgundy ground: solid white beats any beige fill */
.btn--light { background: #fff; color: var(--burgundy); }
.btn--light:hover { background: var(--tan-wash); color: var(--burgundy-deep); }

/* on dark grounds tan carries the outline */
.btn--tan {
  background: transparent;
  color: var(--tan);
  border-color: rgba(201, 157, 123, 0.55);
}
.btn--tan:hover { background: var(--tan); color: var(--ink-deep); border-color: var(--tan); }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 6, 8, 0.55), rgba(12, 6, 8, 0));
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.header.is-stuck {
  background: var(--burgundy);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.2);
}
.header.is-stuck::before { opacity: 0; }

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  min-height: 44px; /* touch target */
}
.brand img { height: 40px; width: auto; }
.brand__text {
  display: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #fff;
}
@media (min-width: 40em) { .brand__text { display: block; } }
.brand__text span { display: block; font-weight: 400; font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.75; }

.nav { display: none; align-items: center; gap: 2rem; }
.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-block: 0.4rem;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--tan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

.header__cta { display: none; }

@media (min-width: 62em) {
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
}

/* mobile menu button */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 62em) { .burger { display: none; } }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: var(--burgundy);
  padding: 1.25rem var(--gutter) 2rem;
  display: grid;
  gap: 0.25rem;
  /* the panel is offset var(--header-h) from the top, so a percentage-only
     translate leaves a burgundy sliver on screen whenever the menu is
     shorter than ~490px. Shift by its own height AND that offset. */
  transform: translateY(calc(-100% - var(--header-h)));
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
  z-index: 99;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.4s var(--ease), visibility 0s;
}
.mobile-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mobile-menu .btn { margin-top: 1.15rem; }
@media (min-width: 62em) { .mobile-menu { display: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
/* fills the fold at every viewport. The old min(92svh, 780px) capped the
   hero, so on a 1080px screen 300px of the next section sat above the fold. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(3.5rem, 8vh, 7rem);
  isolation: isolate;
  background: #2a2320;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture { display: block; width: 100%; height: 100%; }
/* The phone asset is built at the phone aspect with the gun and panel already
   placed in the upper half, so it sits flush from the top. Desktop keeps the
   landscape frame pulled right to follow the spray. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
@media (min-width: 48em) {
  .hero__media img { object-position: 62% 50%; }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* lighter over the top half so the craft stays visible, weighted at the
     bottom where the copy sits */
  background:
    linear-gradient(to top, rgba(12, 6, 8, 0.92) 0%, rgba(12, 6, 8, 0.72) 32%, rgba(12, 6, 8, 0.3) 62%, rgba(12, 6, 8, 0.12) 100%);
}
@media (min-width: 48em) {
  .hero::after {
    background:
      linear-gradient(to top, rgba(12, 6, 8, 0.9) 0%, rgba(12, 6, 8, 0.58) 42%, rgba(12, 6, 8, 0.18) 78%),
      linear-gradient(to right, rgba(12, 6, 8, 0.6), rgba(12, 6, 8, 0) 62%);
  }
}

.hero__inner { max-width: 40rem; color: #fff; }
.hero h1 { color: #fff; margin-bottom: 0.55rem; }
.hero__rule {
  width: 74px; height: 3px;
  background: var(--tan);
  margin: 1.4rem 0 1.5rem;
}
.hero p {
  font-size: clamp(1rem, 1.55vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 34rem;
}

/* On a phone the copy block filled 64% of the fold, and at 320px it filled
   104% and pushed the photograph off screen entirely. Trim it back so the
   image is part of the composition rather than a sliver behind text. */
@media (max-width: 47.99em) {
  /* the closing sentence stays in the DOM for search and desktop */
  .hero__more { display: none; }

  .hero p { font-size: 0.97rem; line-height: 1.62; }
  .hero__rule { margin: 1rem 0 1.05rem; }
  .hero__actions { margin-top: 1.4rem; }
  .hero__actions .btn { padding-block: 0.95rem; }
  .hero { padding-bottom: clamp(2.25rem, 5vh, 3.5rem); }
}
/* On phones both calls to action get the same width. Content-sized buttons
   made the secondary look like an afterthought next to the primary. */
.hero__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 2rem;
}
@media (min-width: 30em) {
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
  }
}
.hero__eyebrow {
  color: var(--tan);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
/* Holds one line on a phone. 0.75rem is the floor: below 12px it trips the
   small-text check. The trailing "Over 25 years" is hidden rather than shrunk,
   and the paragraph still carries it. */
@media (max-width: 47.99em) {
  .hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; margin-bottom: 0.8rem; }
}

/* ==========================================================================
   Trust / about
   ========================================================================== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
}
@media (min-width: 56em) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.75rem; }
}

.trust {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.trust img { width: 62px; height: 62px; object-fit: contain; }
.trust p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--burgundy);
  font-weight: 500;
  max-width: 15rem;
}
.trust a { color: inherit; text-underline-offset: 3px; }

/* modernize band */
.modernize {
  border-top: 1px solid var(--line);
  margin-top: clamp(2.75rem, 6vw, 4.25rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.modernize p {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 3vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-weight: 500;
}
.modernize strong { font-weight: 700; }
.modernize .c-burgundy { color: var(--burgundy); font-weight: 600; }
.modernize .c-tan { color: var(--tan-ink); font-weight: 600; }

/* ==========================================================================
   Before / after sliders
   Rebuilt natively from the Elfsight widget the Squarespace site embedded.
   The handle is a real <input type="range">, so keyboard and screen reader
   support come for free and touch drag works without any JS gesture code.
   ========================================================================== */
.ba-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 52em) {
  .ba-grid { grid-template-columns: 1fr 1fr; }
  .ba--feature { grid-column: 1 / -1; }
}

.ba figure { margin: 0; }

.ba__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--tan-wash);
  aspect-ratio: 3 / 4;
  isolation: isolate;
  touch-action: pan-y;
}
.ba--feature .ba__frame { aspect-ratio: 3 / 2; }

.ba__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* the "after" state is the base layer; "before" is wiped away from the left */
.ba__before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  z-index: 2;
}

.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  z-index: 3;
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  color: var(--burgundy);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: -0.06em;
}

.ba__label {
  position: absolute;
  top: 0.7rem;
  z-index: 4;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 17, 16, 0.62);
  padding: 0.32rem 0.6rem;
  border-radius: 3px;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ba__label--before { left: 0.7rem; }
.ba__label--after { right: 0.7rem; }

/* the range input is the whole interactive surface */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 5;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  /* The range input covers the whole frame, so on a phone it swallowed vertical
     drags and the page would not scroll past a slider. pan-y hands vertical
     gestures back to the browser and keeps horizontal ones for the handle. */
  touch-action: pan-y;
}
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}
.ba__range:focus-visible { outline: 3px solid var(--tan); outline-offset: 3px; }

.ba figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
}

/* ==========================================================================
   Services
   ========================================================================== */
.services {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48em) { .services { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }

.service { display: flex; flex-direction: column; }
.service__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--tan-wash);
  margin-bottom: 1.4rem;
}
.service__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.service:hover .service__media img { transform: scale(1.045); }
.service__num {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--burgundy);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.85rem;
  border-radius: 0 var(--r-sm) 0 0;
}
.service h3 { margin-bottom: 0.55rem; }
.service p { color: var(--ink-soft); font-size: 0.96rem; }

/* ==========================================================================
   Our Work
   ========================================================================== */
/* the portfolio sits on ink, not on a tan slab. Refinished wood needs a
   dark ground to read against; a saturated tan fill fought the photos. */
.work {
  background: var(--ink-deep);
  color: #fff;
  position: relative;
}
/* one hairline of tan to keep the wood tone threaded through */
.work::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(to right, var(--burgundy), var(--tan) 55%, var(--burgundy));
}
.work .eyebrow { color: var(--tan); }
.work h2 { color: #fff; }
.work .section-head p { color: rgba(255, 255, 255, 0.72); }

/* masonry via CSS columns keeps every photo at its native aspect ratio,
   so landscape shots (boardrooms, chambers) are not cropped to portrait */
.gallery {
  columns: 2;
  column-gap: 0.75rem;
}
@media (min-width: 40em) { .gallery { columns: 3; column-gap: 1rem; } }
@media (min-width: 64em) { .gallery { columns: 4; column-gap: 1.1rem; } }

.gallery__item {
  margin: 0 0 0.75rem;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  cursor: zoom-in;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
@media (min-width: 40em) { .gallery__item { margin-bottom: 1rem; } }
@media (min-width: 64em) { .gallery__item { margin-bottom: 1.1rem; } }

.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s var(--ease), filter 0.4s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 0.85rem 0.8rem;
  background: linear-gradient(to top, rgba(28, 6, 11, 0.88), rgba(28, 6, 11, 0));
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.gallery__item:hover figcaption,
.gallery__item:focus-visible figcaption { opacity: 1; transform: translateY(0); }

.gallery__item[hidden] { display: none; }

.work__more { margin-top: 2.25rem; text-align: center; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 5, 6, 0.985);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(100%, 1000px);
  max-height: 82svh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-md);
}
.lightbox__cap {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-align: center;
  margin-top: 1rem;
  min-height: 1.4em;
}
.lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  transition: background-color 0.25s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }

/* Phones: the viewport is barely wider than the image, so side arrows sat on
   top of it. Dock them under the caption instead, and let swipe do the work. */
.lightbox__prev { left: calc(50% - 68px); bottom: clamp(1rem, 4vh, 2.5rem); }
.lightbox__next { right: calc(50% - 68px); bottom: clamp(1rem, 4vh, 2.5rem); }
.lightbox img { max-height: 66svh; }
.lightbox__cap { margin-bottom: 4.5rem; }

@media (min-width: 48em) {
  .lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox img { max-height: 82svh; }
  .lightbox__cap { margin-bottom: 0; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background: var(--burgundy);
  color: #fff;
}
.contact h2 { color: #fff; }
.contact .eyebrow { color: var(--tan); }

.contact__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 56em) {
  .contact__grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; }
}

.contact__details { font-size: 0.98rem; }
.contact__details p { color: rgba(255, 255, 255, 0.88); }

/* The heading used to sit full width above the grid, which pushed the form
   down and left a dead band above it. It now leads the left column so the
   form's first line sits level with "Contact us". */
.contact__title { margin-bottom: 1.75rem; margin-top: 0; }
.contact__details .eyebrow { color: var(--tan); }

/* form column: the intro line optically aligns with the H2 cap height */
.contact__form-head {
  color: #fff;
  margin-bottom: 1.5rem;
  padding-top: 0.35rem;
  /* clears the fixed header when a step change scrolls to it */
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}

.contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.25s var(--ease);
}
.contact__phone:hover { color: var(--tan); }
.contact__phone svg { width: 22px; height: 22px; flex: none; }

.contact__block { margin-bottom: 1.75rem; }
.contact__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.5rem;
}
.contact__note {
  border-top: 1px solid var(--line-light);
  padding-top: 1.4rem;
  margin-top: 1.75rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
}
.contact__note p { margin-bottom: 0.4rem; }

/* ---------- stepped form ---------- */
/* One long form read as intimidating. Split in two, leading with the work
   rather than personal details. Everything degrades to a single plain form if
   JS never runs: the progress bar and nav buttons stay hidden and both steps
   remain visible. */
.steps { margin-bottom: 1.9rem; }

.steps__list {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  font-size: 0.83rem;
  font-weight: 500;
  /* 0.55 measured 4.36:1 on burgundy and failed AA. 0.72 gives 6.55:1. */
  color: rgba(255, 255, 255, 0.72);
}
.steps__item { display: flex; align-items: center; gap: 0.5rem; transition: color 0.3s var(--ease); }
.steps__item span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  flex: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.steps__item.is-current { color: #fff; }
.steps__item.is-current span { background: var(--tan); border-color: var(--tan); color: var(--burgundy-deep); }
.steps__item.is-done { color: rgba(255, 255, 255, 0.8); }
.steps__item.is-done span { background: rgba(255, 255, 255, 0.9); border-color: transparent; color: var(--burgundy); }

.steps__track { height: 3px; background: rgba(255, 255, 255, 0.18); border-radius: 2px; overflow: hidden; }
.steps__fill {
  height: 100%;
  width: 50%;
  background: var(--tan);
  border-radius: 2px;
  transition: width 0.4s var(--ease);
}

.step { display: grid; gap: 1.15rem; }
.step[hidden] { display: none; }

.step__nav { display: flex; gap: 0.75rem; margin-top: 0.35rem; }
.step__nav .btn { flex: 1; }
@media (min-width: 30em) {
  .step__nav .btn { flex: 0 1 auto; min-width: 9.5rem; }
}

/* secondary action on the burgundy ground */
.btn--ghost-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* form */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 30em) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.field .req { color: var(--tan); }

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--tan);
  box-shadow: 0 0 0 3px rgba(201, 157, 123, 0.35);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #ffb4b4; }

/* ---------- photo upload ---------- */
.field .opt {
  font-weight: 400;
  opacity: 0.72;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.15rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px dashed rgba(255, 255, 255, 0.42);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
  min-height: 68px;
}
.drop:hover,
.drop.is-over { background: rgba(255, 255, 255, 0.14); border-color: var(--tan); }

.drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop input[type="file"]:focus-visible + .drop__icon { outline: 3px solid var(--tan); outline-offset: 4px; }

.drop__icon { color: var(--tan); flex: none; }
.drop__icon svg { width: 26px; height: 26px; display: block; }
.drop__text { color: #fff; font-size: 0.92rem; line-height: 1.35; }
.drop__text strong { font-weight: 600; }

.drop__hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}
.drop__hint.is-warn { color: #ffd9d9; }

.thumbs {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 0.6rem;
}
.thumbs:empty { margin: 0; }

.thumbs li {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.thumb__x {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 6, 8, 0.82);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.thumb__x:hover { background: var(--burgundy); }

.thumb__size {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem 0.3rem 0.2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  color: #fff;
  font-size: 0.62rem;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---------- turnstile ---------- */
#turnstile-slot, .cf-turnstile { margin-top: 0.25rem; min-height: 65px; }
#turnstile-slot:empty { min-height: 0; }

/* The widget iframe has a hard 300px minimum. On a 320px viewport the column
   is only ~272px wide, so it pushed the whole page to 324px and broke the
   layout. Scale it down on the narrowest phones rather than let it overflow. */
@media (max-width: 23.5em) {
  #turnstile-slot {
    transform: scale(0.86);
    transform-origin: left top;
    height: 60px;
    overflow: hidden;
  }
}

/* spam trap. Off-screen rather than display:none, which bots detect. */
.f-alt { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__submit { justify-self: start; margin-top: 0.35rem; }
.form__submit[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.form__status {
  font-size: 0.92rem;
  line-height: 1.6;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status.is-ok { background: rgba(255, 255, 255, 0.14); border-left: 3px solid var(--tan); color: #fff; }
.form__status.is-err { background: rgba(0, 0, 0, 0.22); border-left: 3px solid #ffb4b4; color: #ffe2e2; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--burgundy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 2.75rem;
  font-size: 0.85rem;
  text-align: center;
}
.footer__inner { display: grid; gap: 1rem; justify-items: center; }
.footer img { height: 38px; width: auto; opacity: 0.85; }
.footer a { color: var(--tan); text-underline-offset: 3px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; justify-content: center; }
/* inline links need a real touch area; padding-block keeps the line box intact */
.footer a,
.trust a,
.contact__details a:not(.contact__phone) {
  display: inline-block;
  padding-block: 0.68rem;
  margin-block: -0.68rem;
}
.footer p { margin: 0; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

body.is-locked { overflow: hidden; }