/* ==========================================================================
   VOLZ Construction Services

   Mobile-first. Brand colors arrive as custom properties injected from the
   config file, so a client site is recolored without touching this stylesheet.

   Layout DNA: full-bleed imagery, generous whitespace, a strong type scale,
   alternating split blocks, and heavy charcoal bands to break up the scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   ----------------------------------------------------------------------- */

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

:root {
  /* Overridden per client by the inline block in the page head. */
  --accent: #e2571f;
  --accent-dark: #b8410f;
  --charcoal: #16181a;
  --ink: #22262a;
  --slate: #5b6167;
  --line: #dfdcd7;
  --mist: #f4f2ef;
  --white: #ffffff;

  --sans: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1240px;
  --gutter: 20px;
  --radius: 3px;

  /* Vertical rhythm. Sections breathe more as the viewport grows. */
  --band: 64px;
}

@media (min-width: 700px)  { :root { --gutter: 32px; --band: 88px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; --band: 120px; } }

/* --------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* sticky header clearance for anchor links */
}

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

/* Base size is deliberately large. The audience skews older, and 19px with a
   generous line height is far easier to read than the 16-17px most sites use.
   Everything else is sized in rem so it scales from here. */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 700px) { body { font-size: 20px; } }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--charcoal);
}

h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -.015em; }
h4 { font-size: 1.05rem; }

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

a { color: var(--accent-dark); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   Layout utilities
   ----------------------------------------------------------------------- */

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

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * .68); }

.band--mist { background: var(--mist); }
.band--dark { background: var(--charcoal); color: rgba(255,255,255,.78); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: #fff; padding: 14px 22px; font-weight: 700;
}
.skip-link:focus { left: 0; }

.is-hidden { display: none !important; }

/* Small uppercase label that sits above a heading. */
.kicker {
  display: block;
  margin: 0 0 1.1em;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker--rule {
  display: flex; align-items: center; gap: 14px;
}
.kicker--rule::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3;
}

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: var(--slate);
  max-width: 62ch;
}
.band--dark .lede { color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */

/* Minimum 56px tall so they are easy to hit with an unsteady finger. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 56px;
  padding: 18px 34px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn--dark { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.btn--dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--outline { background: transparent; border-color: var(--charcoal); color: var(--charcoal); }
.btn--outline:hover { background: var(--charcoal); color: #fff; }

.btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--charcoal); }

/* Solid white — for a secondary action sitting on a dark photograph, where an
   outline button reads as faint against a busy background. */
.btn--white { background: #fff; border-color: #fff; color: var(--charcoal); }
.btn--white:hover { background: var(--mist); border-color: var(--mist); color: var(--charcoal); }

.btn--sm { min-height: 46px; padding: 12px 20px; font-size: .78rem; }
.btn--xl { min-height: 66px; padding: 20px 40px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* A text link with an arrow, used inside cards. */
.arrow-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--charcoal);
}
.arrow-link::after { content: "→"; transition: transform .18s ease; }
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover::after { transform: translateX(4px); }
.band--dark .arrow-link { color: #fff; }

/* --------------------------------------------------------------------------
   Phone-first elements

   The audience calls rather than filling in forms, so the number is treated
   as the primary action everywhere — large, high contrast, and on phones
   permanently pinned to the bottom of the screen.
   ----------------------------------------------------------------------- */

.phone-big {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 900; letter-spacing: -.02em;
  text-decoration: none; color: var(--charcoal);
  white-space: nowrap;
}
.phone-big svg { width: .8em; height: .8em; fill: currentColor; flex: none; }
.phone-big:hover { color: var(--accent); }
.hero .phone-big, .band--dark .phone-big, .cta .phone-big { color: #fff; }
.hero .phone-big:hover { color: var(--accent); }

/* Fixed call bar, phones only. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none;
  background: var(--accent);
  box-shadow: 0 -4px 20px rgba(0,0,0,.22);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 68px; padding: 12px 20px;
  color: #fff; text-decoration: none;
  font-size: 1.15rem; font-weight: 800; letter-spacing: .02em;
}
.callbar svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 860px) {
  .callbar { display: block; }
  /* Clear the bar so it never covers the footer or a submit button. */
  body { padding-bottom: 68px; }
}

/* --------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------- */

.topstrip {
  background: var(--charcoal);
  color: rgba(255,255,255,.62);
  font-size: .76rem;
  letter-spacing: .04em;
}
.topstrip__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; min-height: 38px; text-align: center;
}
.topstrip__meta { display: none; }
.topstrip a { color: #fff; text-decoration: none; font-weight: 700; }
.topstrip a:hover { color: var(--accent); }

@media (min-width: 800px) {
  .topstrip__inner { justify-content: space-between; text-align: left; }
  .topstrip__meta { display: block; }
}

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px;
}
@media (min-width: 1100px) { .masthead__inner { min-height: 86px; } }

.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }

/* The real logo. It has a solid orange ground rather than transparency, so it
   sits as a brand block — which is how it appears on his van and yard sign.
   align-self and flex:none are load-bearing: .logo is a flex column, so
   without them the image is stretched to the container width and squashed. */
.logo__img {
  display: block;
  height: 44px;
  width: auto;
  align-self: flex-start;
  flex: none;
  max-width: 100%;
  border-radius: 2px;
}
@media (min-width: 700px)  { .logo__img { height: 54px; } }
@media (min-width: 1100px) { .logo__img { height: 62px; } }
.foot .logo__img { height: 52px; }
.logo__mark {
  font-size: 1.55rem; font-weight: 900; letter-spacing: .06em;
  color: var(--charcoal);
}
.logo__mark span { color: var(--accent); }
.logo__sub {
  margin-top: 5px;
  font-size: .58rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--slate);
}
@media (min-width: 700px) { .logo__mark { font-size: 1.85rem; } .logo__sub { font-size: .62rem; } }

.navtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
  display: block; width: 20px; height: 2px; background: var(--charcoal);
  transition: transform .2s ease, opacity .2s ease;
}
.navtoggle__bars { position: relative; }
.navtoggle__bars::before, .navtoggle__bars::after { content: ""; position: absolute; left: 0; }
.navtoggle__bars::before { top: -6px; }
.navtoggle__bars::after  { top: 6px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav { display: none; }
.nav a {
  text-decoration: none; color: var(--charcoal);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); }

@media (min-width: 1000px) {
  .navtoggle { display: none; }
  .nav { display: flex; align-items: center; gap: 34px; }
  .nav .btn { color: #fff; }
}

/* Mobile drawer */
@media (max-width: 999px) {
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 26px;
    box-shadow: 0 20px 40px rgba(0,0,0,.09);
  }
  .nav.is-open a { padding: 17px 0; border-bottom: 1px solid var(--line); }
  .nav.is-open .btn {
    margin-top: 20px; border-bottom: none; justify-content: center; color: #fff;
  }
}

/* --------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */

.hero { position: relative; background: var(--charcoal); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: heavy enough on the left for white text, light on the right so the
   photograph is actually visible. Paired with a soft text-shadow below, which
   buys legibility far more cheaply than more darkness would. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(103deg,
    rgba(9,11,13,.84) 0%,
    rgba(9,11,13,.66) 30%,
    rgba(9,11,13,.32) 58%,
    rgba(9,11,13,.12) 80%,
    rgba(9,11,13,.06) 100%);
}

/* Below the desktop breakpoint the text runs full width, so the gradient has
   to work vertically instead of left-to-right. */
@media (max-width: 900px) {
  .hero__bg::after {
    background: linear-gradient(to bottom,
      rgba(9,11,13,.70) 0%,
      rgba(9,11,13,.58) 45%,
      rgba(9,11,13,.74) 100%);
  }
}

.hero__inner {
  position: relative;
  padding-block: clamp(56px, 15vw, 190px);
  max-width: 900px;
}
/* Sized down from the global h1 clamp specifically so "Quality construction."
   holds one line on a 375px phone — at the inherited 2.4rem floor it broke
   after "Quality" and pushed the hero to three lines. */
.hero h1 {
  font-size: clamp(1.85rem, 6.5vw, 4.6rem);
  color: #fff; margin-bottom: .4em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.hero__sub {
  font-size: clamp(1.05rem, 2.1vw, 1.32rem);
  color: rgba(255,255,255,.92);
  max-width: 54ch;
  margin-bottom: 2.4em;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.hero .kicker { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.hero .kicker { color: var(--accent); }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 2.8em 0 0; padding: 0;
}
/* These sit low in the hero where the scrim is lightest, so they carry their
   own backdrop rather than relying on the gradient. */
.hero__trust li {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid rgba(255,255,255,.34); border-radius: 100px;
  color: #fff;
  background: rgba(9,11,13,.42);
  backdrop-filter: blur(3px);
}

/* Slim service ribbon directly under the hero. Says what he does before the
   visitor has to scroll or read anything else. Wraps to two lines on a phone
   rather than shrinking the type. */
.ribbon {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.ribbon__inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .5em 1.1em;
  padding-block: 20px;
  text-align: center;
}
.ribbon__item {
  font-size: clamp(.86rem, 2vw, 1.05rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
  white-space: nowrap;
}
.ribbon__dot { color: var(--accent); font-weight: 800; }
@media (min-width: 700px) { .ribbon__inner { padding-block: 26px; gap: .5em 1.6em; } }

/* Compact hero for interior pages */
.pagehero { position: relative; background: var(--charcoal); color: #fff; overflow: hidden; }
.pagehero__bg { position: absolute; inset: 0; }
.pagehero__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,13,15,.80) 0%, rgba(11,13,15,.62) 50%, rgba(11,13,15,.38) 100%);
}
.pagehero__inner { position: relative; padding-block: clamp(56px, 9vw, 112px); max-width: 800px; }
.pagehero h1 { color: #fff; margin-bottom: .3em; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.pagehero p {
  color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.8vw, 1.15rem); max-width: 58ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

.crumbs {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 1.4em;
}
.crumbs a { color: rgba(255,255,255,.8); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin-inline: 8px; opacity: .5; }

/* --------------------------------------------------------------------------
   Split blocks — image beside text, alternating sides
   ----------------------------------------------------------------------- */

.split { display: grid; gap: 36px; align-items: center; }
.split__media { position: relative; }
.split__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
}
/* Single column on phones, so the photograph can afford to be taller. */
@media (max-width: 899px) { .split__media img { aspect-ratio: 1 / 1; } }

/* For an upright photograph. The About portrait is 4:5, and the landscape crop
   above was taking the top of his head off. Declared after the phone override
   above so it holds at every width. The homepage intro photo is landscape and
   deliberately does not use this. */
.split__media--portrait img { aspect-ratio: 4 / 5; }
.split__body h2 { margin-bottom: .5em; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split--flip .split__media { order: 2; }
}
@media (min-width: 1200px) { .split { gap: 84px; } }

/* A thin accent rule that anchors the text column */
.split__body .kicker { color: var(--accent); }

.ticklist { list-style: none; margin: 1.6em 0 1.8em; padding: 0; }
.ticklist li {
  position: relative; padding-left: 32px; margin-bottom: .7em;
  color: var(--ink);
}
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.band--dark .ticklist li { color: rgba(255,255,255,.82); }

/* --------------------------------------------------------------------------
   Category cards — the featured services strip
   ----------------------------------------------------------------------- */

.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 620px)  { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .cats { grid-template-columns: repeat(4, 1fr); gap: 26px; } }

.cat {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--charcoal); color: #fff;
  min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none;
}
.cat__img { position: absolute; inset: 0; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,12,14,.94) 12%, rgba(10,12,14,.55) 52%, rgba(10,12,14,.2) 100%);
}
.cat:hover .cat__img img { transform: scale(1.05); }

.cat__body { position: relative; padding: 28px 26px; }
.cat__body h3 { color: #fff; margin-bottom: .45em; }
.cat__body p {
  font-size: .93rem; color: rgba(255,255,255,.75); margin-bottom: 1.2em;
}
.cat .arrow-link { color: #fff; }
.cat:hover .arrow-link { color: var(--accent); }

/* --------------------------------------------------------------------------
   Before & after

   Two photographs of the same job, side by side. On narrow screens they stay
   side by side rather than stacking — a comparison only works when both halves
   are visible at once.
   ----------------------------------------------------------------------- */

.ba { list-style: none; margin: 0; padding: 0; display: grid; gap: 46px; }
@media (min-width: 1080px) { .ba { gap: 60px; } }

.ba__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.ba__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
}

.ba__side { position: relative; margin: 0; background: var(--mist); }
.ba__side .shot { border-radius: 0; cursor: zoom-in; }

/* Before and after must share a frame so the comparison reads, which is the one
   place a fixed ratio is worth the crop. 3:4 matches the portrait phone photos
   these nearly always are. object-fit is restated because the base .shot rule
   no longer sets it. */
.ba__side .shot img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

.ba__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 6px 13px; border-radius: 100px;
  font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  pointer-events: none;
}
.ba__tag--before { background: rgba(22,24,26,.86); color: #fff; }
.ba__tag--after  { background: var(--accent); color: #fff; }

@media (min-width: 700px) {
  .ba__tag { top: 16px; left: 16px; font-size: .7rem; padding: 7px 15px; }
}

/* Title and button share a row, so the card foot stays compact. Stacks on
   phones, where a side-by-side button would be too narrow to hit comfortably. */
.ba__meta {
  padding: 24px 24px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 640px) {
  .ba__meta {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 24px; padding: 26px 30px 28px;
  }
  .ba__meta .btn { flex: none; }
}

.ba__text { min-width: 0; }
.ba__text h3 { margin-bottom: .2em; }
.ba__text h3 a { color: inherit; text-decoration: none; }
.ba__text h3 a:hover { color: var(--accent); }
.ba__summary { color: var(--slate); font-size: .95rem; margin-bottom: 0; }

/* Full width only while stacked. */
.ba__meta .btn { width: 100%; }
@media (min-width: 640px) { .ba__meta .btn { width: auto; } }

/* Two pairs abreast once there is room, three on a wide screen. */
@media (min-width: 1180px) {
  .ba { grid-template-columns: repeat(2, 1fr); }
  /* A lone pair spans the full width, so it can afford a wider frame. */
  .ba__item:only-child { grid-column: 1 / -1; }
  .ba__item:only-child .ba__side .shot img { aspect-ratio: 4 / 3; }
}
@media (min-width: 1500px) { .ba { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Services list

   A plain stacked list rather than a card grid. Each row is one service with
   its photograph beside it — scannable, and every title is a real heading so
   the local search terms survive.
   ----------------------------------------------------------------------- */

.svclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 900px)  {
  .svclist { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  /* An odd number of services leaves the last card stranded in the left
     column. Let it span both, then hold it to one column's width so it sits
     centred at the same size as the others rather than looking abandoned.
     There are five services today, so this is the Custom Projects card. */
  .svclist > .svc:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    /* Width is explicit, not just a max: `margin-inline: auto` stops a grid
       item stretching, so it would otherwise shrink to its content. */
    width: calc((100% - 30px) / 2);
    margin-inline: auto;
  }
}

.svc {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Portrait, because the photographs are. These are phone shots taken upright —
   roughly 3:4 — and a landscape crop threw away half of each one: the inside
   of the outdoor shower came out as a blank stretch of wall with the bench and
   hooks cropped off. 3:4 keeps almost their full height. */
.svc__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Carousel inside a service card. Same scroll-snap mechanism as the job cards,
   so the arrows, counter and swiping all behave identically. */
.svc__slider { position: relative; background: var(--mist); }
.svc__track {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.svc__track::-webkit-scrollbar { display: none; }
.svc__slide { flex: 0 0 100%; scroll-snap-align: center; }
/* Flex column so the Get Quote link can be pinned to the bottom — cards carry
   different numbers of bullets, and the links should still line up across a row. */
.svc__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-bottom: .35em; }
.svc__body > p { color: var(--slate); margin-bottom: .9em; }
/* Small top margin because the summary paragraph that used to separate the
   heading from this list has been removed. */
.svc .ticklist { margin: .9em 0 0; }
/* margin-top:auto pushes it to the bottom of the card; align-self stops it
   stretching the full width, which a flex child otherwise would. */
.svc__quote { margin-top: auto; padding-top: 1.4em; align-self: flex-start; }
.svc .ticklist li { margin-bottom: .45em; font-size: .95rem; }

/* --------------------------------------------------------------------------
   Project grid
   ----------------------------------------------------------------------- */

.projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
@media (min-width: 660px)  { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .projects { grid-template-columns: repeat(3, 1fr); gap: 36px; } }

.pcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pcard:hover {
  border-color: var(--charcoal);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.09);
}
.band--dark .pcard { background: #1e2225; border-color: rgba(255,255,255,.14); }
.band--dark .pcard:hover { border-color: var(--accent); }

.pcard__img { display: block; overflow: hidden; background: var(--mist); }
/* Taller on phones, where a single column means there is room for it and the
   portrait photographs otherwise lose their top and bottom. */
.pcard__img img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease;
}
@media (max-width: 659px) { .pcard__img img { aspect-ratio: 1 / 1; } }
.pcard:hover .pcard__img img { transform: scale(1.045); }

.pcard__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.pcard__cat {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9em;
}
.pcard__body h3 { margin-bottom: .45em; }
.pcard__body h3 a { color: inherit; text-decoration: none; }
.pcard__body h3 a:hover { color: var(--accent); }
.band--dark .pcard__body h3 a { color: #fff; }
.pcard__desc { font-size: .95rem; color: var(--slate); margin-bottom: 1.5em; }
.band--dark .pcard__desc { color: rgba(255,255,255,.68); }
.pcard__meta {
  font-size: .8rem; color: var(--slate); margin-bottom: 1.4em;
}
.pcard .arrow-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   Jobs on a category page

   Each job is a heading, a short description, and its photographs. Stacked
   down one page so any photo on the site is two clicks from the homepage.
   ----------------------------------------------------------------------- */

/* Job cards with a photo carousel. Scroll-snap does the work, so it swipes
   natively on a phone and the arrows are just a convenience on desktop. */

.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
@media (min-width: 700px)  { .jobs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .jobs { grid-template-columns: repeat(3, 1fr); gap: 36px; } }

.jcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 100px;
}

.jcard__slider { position: relative; background: var(--mist); }

.jcard__track {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.jcard__track::-webkit-scrollbar { display: none; }

.jcard__slide { flex: 0 0 100%; scroll-snap-align: center; }
.jcard__slide .shot { border-radius: 0; }
.jcard__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.jcard__nav, .svc__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--charcoal);
  font-size: 1.7rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.jcard__nav:hover, .svc__nav:hover { background: #fff; }
.jcard__nav--prev, .svc__nav--prev { left: 10px; }
.jcard__nav--next, .svc__nav--next { right: 10px; }
.jcard__nav[hidden], .svc__nav[hidden] { display: none; }

.jcard__count, .svc__count {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(9,11,13,.72); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 100px;
}

.jcard__body { padding: 22px 22px 26px; }
.jcard__body h2 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); margin-bottom: .25em; }
.jcard__meta { font-size: .88rem; color: var(--slate); font-weight: 700; margin-bottom: .5em; }
.jcard__desc { font-size: .95rem; color: var(--slate); margin-bottom: .5em; }
.jcard__hint { font-size: .82rem; color: var(--slate); margin: 0; }

.job { scroll-margin-top: 100px; }
.job__head { max-width: 70ch; margin-bottom: 1.8em; }
.job__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .3em; }
.job__meta {
  font-size: .95rem; color: var(--slate); margin-bottom: 1em;
  font-weight: 700; letter-spacing: .02em;
}
.job__body { color: var(--slate); }
.job__head .ticklist { margin-bottom: 0; }

.job__rule {
  border: 0; border-top: 1px solid var(--line);
  margin: calc(var(--band) * .8) 0;
}

/* --------------------------------------------------------------------------
   Project detail
   ----------------------------------------------------------------------- */

.projmeta {
  list-style: none; margin: 0 0 2.4em; padding: 0;
  display: grid; gap: 20px 32px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 26px;
}
.projmeta dt {
  font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--slate); margin-bottom: .5em;
}
.projmeta dd { margin: 0; font-weight: 700; font-size: 1.02rem; }

/* Masonry columns rather than a grid, so every photograph keeps its own shape.
   Nothing here is cropped at all — portrait and landscape shots simply sit at
   whatever height they naturally are. */
.gallery {
  list-style: none; margin: 0; padding: 0;
  columns: 1; column-gap: 14px;
}
.gallery li { break-inside: avoid; margin-bottom: 14px; }
@media (min-width: 560px)  { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; column-gap: 18px; } .gallery li { margin-bottom: 18px; } }

.shot {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--mist); border-radius: var(--radius); overflow: hidden;
}
/* No aspect-ratio and no cover: the natural proportions are kept. */
.shot img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.shot:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   Full-width call to action
   ----------------------------------------------------------------------- */

.cta { position: relative; overflow: hidden; background: var(--charcoal); color: #fff; }
.cta__bg { position: absolute; inset: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Centred text here, so the scrim has to be even rather than directional —
   but still lighter than it was, with a shadow carrying the legibility. */
.cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,13,15,.74) 0%, rgba(11,13,15,.62) 50%, rgba(11,13,15,.74) 100%);
}
.cta__inner {
  position: relative; text-align: center;
  padding-block: clamp(64px, 11vw, 132px);
  max-width: 760px; margin-inline: auto;
}
.cta h2 { color: #fff; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.cta p {
  color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.9vw, 1.18rem); margin-bottom: 2.2em;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Reasons grid ("Why VOLZ")
   ----------------------------------------------------------------------- */

.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
@media (min-width: 640px)  { .reasons { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (min-width: 1040px) { .reasons { grid-template-columns: repeat(4, 1fr); } }

.reason__num {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  color: var(--accent); margin-bottom: 1em;
}
.reason { border-top: 3px solid var(--charcoal); padding-top: 22px; }
.band--dark .reason { border-top-color: var(--accent); }
.reason h3 { margin-bottom: .5em; }
.reason p { font-size: .95rem; color: var(--slate); }
.band--dark .reason p { color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   Stats / hours strip
   ----------------------------------------------------------------------- */

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.hours li:last-child { border-bottom: 0; }
.hours dt, .hours .h-label { font-weight: 700; color: #fff; }
.hours .h-value { color: rgba(255,255,255,.7); text-align: right; }

/* --------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------- */

.formcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
}

.field { margin-bottom: 22px; }
/* Sentence case rather than tiny uppercase — easier to read at a glance. */
.field > label {
  display: block; margin-bottom: 10px;
  font-size: 1.02rem; font-weight: 800; letter-spacing: 0;
  color: var(--charcoal);
}
.field .opt { color: var(--slate); font-weight: 600; letter-spacing: .04em; text-transform: none; }
.req { color: var(--accent); }

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea {
  width: 100%; padding: 18px 18px; min-height: 62px;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 160px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c0392b; }

.field__err { margin: 7px 0 0; font-size: .85rem; color: #c0392b; }
.field__err:empty { display: none; }

.field-row { display: grid; gap: 0 20px; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* File input styled as a drop zone */
.filefield {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center; background: var(--mist);
}
.filefield input[type=file] { width: 100%; font-size: .9rem; }
.filefield p { margin: 10px 0 0; font-size: .84rem; color: var(--slate); }

/* Honeypot — positioned off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 16px 0 0; font-weight: 700; color: #c0392b; }
.form__status:empty { display: none; }
.form__fine { margin: 16px 0 0; font-size: .84rem; color: var(--slate); text-align: center; }

.form__done { text-align: center; padding: 40px 12px; }
.form__done-icon {
  width: 62px; height: 62px; margin: 0 auto 20px;
  fill: none; stroke: var(--accent); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.form__done h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.form__done p { color: var(--slate); }

button[disabled] { opacity: .6; cursor: progress; }

/* --------------------------------------------------------------------------
   Contact panel
   ----------------------------------------------------------------------- */

.contactgrid { display: grid; gap: 40px; }
@media (min-width: 940px) { .contactgrid { grid-template-columns: 5fr 7fr; gap: 60px; } }

.contactlist { list-style: none; margin: 0; padding: 0; }
.contactlist li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contactlist li:last-child { border-bottom: 0; }
.contactlist .c-label {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate); margin-bottom: .45em;
}
.contactlist .c-value { font-size: 1.08rem; font-weight: 700; }
.contactlist a { text-decoration: none; color: var(--charcoal); }
.contactlist a:hover { color: var(--accent); }
.contactlist .c-big { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; }

/* --------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */

.foot { background: var(--charcoal); color: rgba(255,255,255,.66); font-size: .95rem; }
.foot__top { padding-block: var(--band) calc(var(--band) * .6); }
.foot__grid { display: grid; gap: 40px; }
@media (min-width: 760px)  { .foot__grid { grid-template-columns: 1.7fr 1fr 1.3fr; gap: 48px; } }
@media (min-width: 1080px) { .foot__grid { grid-template-columns: 2.2fr 1fr 1.4fr; gap: 64px; } }

.foot .logo__mark { color: #fff; }
.foot .logo__sub { color: rgba(255,255,255,.5); }
.foot__blurb { margin-top: 20px; color: rgba(255,255,255,.6); max-width: 40ch; }

.foot h4 {
  color: #fff; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 1.5em;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .85em; }
.foot a { color: rgba(255,255,255,.72); text-decoration: none; }
.foot a:hover { color: var(--accent); }

.foot__cta { margin-top: 26px; }

.social { display: flex; gap: 12px; margin-top: 22px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.24);
}
.social a:hover { background: var(--accent); border-color: var(--accent); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

.foot__legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 26px;
  font-size: .82rem; color: rgba(255,255,255,.42);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
}
.foot__legal p { margin: 0; }

/* --------------------------------------------------------------------------
   Lightbox
   ----------------------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,9,10,.95);
  display: flex; align-items: center; justify-content: center;
  padding: 64px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 100%; text-align: center; }
.lightbox__figure img {
  max-width: 100%; max-height: calc(100vh - 150px); width: auto; margin-inline: auto;
  border-radius: var(--radius);
}
.lightbox__figure figcaption { margin-top: 16px; color: rgba(255,255,255,.78); font-size: .92rem; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 0; cursor: pointer; color: #fff; padding: 12px; line-height: 1;
}
.lightbox__close { top: 14px; right: 18px; font-size: 2.6rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 3.2rem; }
.lightbox__nav--prev { left: 6px; }
.lightbox__nav--next { right: 6px; }
.lightbox__close:hover, .lightbox__nav:hover { color: var(--accent); }

body.lb-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Empty states and notices
   ----------------------------------------------------------------------- */

.empty {
  text-align: center; max-width: 46ch; margin-inline: auto;
  padding-block: clamp(40px, 8vw, 80px);
}
.empty p { color: var(--slate); margin-bottom: 2em; }

.notice {
  padding: 16px 20px; border-radius: var(--radius); margin-bottom: 26px;
  border: 1px solid; font-size: .95rem;
}
.notice--success { background: #eaf7ed; border-color: #b5dfc0; color: #14512a; }
.notice--error   { background: #fdeded; border-color: #f0bcbc; color: #8a1f1f; }