/* ==========================================================================
   Lake Norman Land Works
   Design tokens first, then layout primitives, then components.
   The source design was desktop-only at 1440px; every grid here collapses
   through tablet to a single column.
   ========================================================================== */

:root {
  --black:   #0C0C0C;
  --panel:   #111110;
  --panel-2: #151513;
  --navy:    #0A2036;
  --navy-2:  #8FA3B8;
  --navy-3:  #A8BACB;
  --yellow:  #FFCD11;
  --cream:   #F3F0EA;
  --line:    #232323;
  --line-2:  #2E2E2B;
  --line-3:  #3A3A38;
  --muted:   #8A8A85;
  --body:    #B6B5AE;
  --dim:     #6E6E68;
  --ink-70:  #3A3630;

  --wrap: 1440px;
  --gut: clamp(20px, 4vw, 40px);

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --notch: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

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

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

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--yellow); text-decoration: none; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
::selection { background: var(--yellow); color: var(--black); }

h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.025em; text-transform: uppercase; line-height: .95; margin: 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--yellow); color: var(--black); padding: 14px 22px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --- shared bits ---------------------------------------------------------- */

.rule { width: 104px; height: 8px; background: var(--yellow); margin-bottom: 32px; }
.rule--sm { width: 72px; height: 6px; margin-bottom: 24px; }
.rule--dark { width: 80px; height: 7px; background: var(--black); margin-bottom: 28px; }

.eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 22px;
}
.eyebrow--dark { color: #7A776E; }
.eyebrow--navy { color: var(--navy-2); }

.accent { color: var(--yellow); }

.hazard { height: 5px; background: repeating-linear-gradient(135deg, var(--yellow) 0 14px, var(--black) 14px 28px); }

.sechead {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap; margin-bottom: 54px;
}
.sechead h2 { font-size: clamp(30px, 4.2vw, 60px); }
.sechead__note { font-size: 17px; line-height: 1.65; color: var(--body); max-width: 420px; margin: 0; }
.sechead__note--dark { color: #55534C; }
.sechead--tight { margin-bottom: 44px; align-items: flex-end; }
.sechead__places { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 13.5px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 22px; border: 0; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn--yellow { background: var(--yellow); color: var(--black); clip-path: var(--notch); }
.btn--yellow:hover { background: #fff; color: var(--black); }
.btn--ghost { background: transparent; border: 1px solid var(--line-3); color: var(--cream); padding: 13px 20px; }
.btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }

.btn--call, .btn--black {
  flex-direction: column; align-items: flex-start;
  background: var(--yellow); color: var(--black);
  padding: 18px 30px; clip-path: var(--notch);
}
.btn--call:hover { background: #fff; color: var(--black); }
.btn--black { background: var(--black); color: var(--yellow); padding: 20px 32px; }
.btn--black:hover { background: var(--navy); color: var(--yellow); }
.btn__kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.btn__number { font-family: var(--display); font-weight: 900; font-size: clamp(20px, 3vw, 24px); letter-spacing: -.01em; }

.btn--outline { background: transparent; border: 1px solid var(--line-3); color: var(--cream); font-size: 14px; letter-spacing: .1em; }
.btn--outline:hover { border-color: var(--yellow); color: var(--yellow); }
.btn--tall { padding: 26px 28px; }

.btn--submit {
  background: var(--yellow); color: var(--black); padding: 18px 22px;
  font-size: 15px; font-weight: 900; letter-spacing: .1em; width: 100%;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn--submit:hover { background: #fff; }

/* --- utility bar + header ------------------------------------------------- */

/* Slim contact strip: email hard left, phone hard right, one line at every
   width. Padding lives on the links rather than the bar so the strip stays
   visually thin while the tap targets keep some height. */
.utilbar { background: var(--navy); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.utilbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 0; }
.utilbar a { display: inline-block; padding-block: 9px; color: var(--navy-2); white-space: nowrap; }
.utilbar a:hover { color: #fff; }
.utilbar__email { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.utilbar__tel { color: var(--yellow); font-weight: 600; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--black); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; min-height: 82px; }


.nav ul { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.nav a { color: var(--cream); }
.nav a:hover, .nav a[aria-current] { color: var(--yellow); }

.site-header__cta { display: flex; align-items: center; gap: 12px; }

.navtoggle { display: none; background: none; border: 1px solid var(--line-3); padding: 12px 11px; cursor: pointer; }
.navtoggle__bar { display: block; width: 20px; height: 2px; background: var(--cream); }
.navtoggle__bar + .navtoggle__bar { margin-top: 4px; }

@media (max-width: 1080px) {
  .navtoggle { display: block; order: 3; }
  .nav { order: 4; flex-basis: 100%; display: none; }
  .nav[data-open] { display: block; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding-block: 8px 16px; }
  .nav li { width: 100%; border-top: 1px solid var(--line); }
  .nav a { display: block; padding: 16px 2px; }
  .site-header__inner { flex-wrap: wrap; }
  .site-header__cta .btn--ghost { display: none; }
}


/* --- hero ----------------------------------------------------------------- */

.hero { background: var(--black); border-bottom: 1px solid var(--line); }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 660px; padding-inline: 0; }
.hero__copy { padding: clamp(48px, 6vw, 72px) var(--gut); display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font-size: clamp(38px, 6vw, 92px); line-height: .92; letter-spacing: -.03em; margin: 0 0 26px; max-width: 12ch; }
.hero__lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--body); max-width: 520px; margin: 0 0 38px; text-wrap: pretty; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.hero__media { position: relative; background: var(--panel-2); border-left: 1px solid var(--line); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding-block: 56px 44px; }
  .hero__media { border-left: 0; border-top: 1px solid var(--line); aspect-ratio: 4 / 5; }
}

/* --- stats ---------------------------------------------------------------- */

.stats { background: var(--yellow); color: var(--black); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 38px 28px; border-left: 1px solid rgba(12,12,12,.22); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }
.stat__value { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4vw, 52px); line-height: 1; letter-spacing: -.03em; }
.stat__label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; margin-top: 8px; opacity: .7; }
@media (max-width: 780px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 26px 18px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(12,12,12,.22); }
}

/* --- services grid -------------------------------------------------------- */

.services { background: var(--black); padding: clamp(64px, 8vw, 104px) 0 clamp(70px, 9vw, 112px); }
.services--index { padding-top: 0; }

.cardgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  list-style: none; margin: 0; padding: 0;
}
.cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .cardgrid, .cardgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cardgrid, .cardgrid--3 { grid-template-columns: 1fr; } }

.cardgrid__item { display: flex; }
.scard {
  display: flex; flex-direction: column; width: 100%;
  background: var(--panel); padding: 34px 30px 30px; min-height: 246px;
  color: var(--cream); transition: background .15s, color .15s;
}
.scard:hover { background: var(--yellow); color: var(--black); }
.scard:hover .scard__copy, .scard:hover .scard__tag, .scard:hover .scard__num { color: var(--black); }
.scard__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; }
.scard__num { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--yellow); }
.scard__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.scard__tag--light { color: var(--navy-2); }
.scard__title { font-size: clamp(22px, 2.4vw, 27px); line-height: 1.02; letter-spacing: -.02em; margin: 28px 0 12px; }
.scard__copy { font-size: 15px; line-height: 1.55; color: #A8A7A1; margin: 0 0 18px; }
.scard__more { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
.scard--alt { background: var(--navy); justify-content: space-between; }
.scard--alt .scard__title { margin-top: 0; font-size: 25px; }

/* --- fleet ---------------------------------------------------------------- */

.fleet { background: var(--cream); color: var(--black); padding: clamp(64px, 8vw, 100px) 0 clamp(68px, 8vw, 104px); border-top: 5px solid var(--yellow); }
.fleet h2 { color: var(--black); }
.fleetgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1100px) { .fleetgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .fleetgrid { grid-template-columns: 1fr; } }

.machine { background: #fff; border: 1px solid #DEDAD0; display: flex; flex-direction: column; }
.machine__media { aspect-ratio: 3 / 2; overflow: hidden; background: #E7E2D6; }
.machine__media img { width: 100%; height: 100%; object-fit: cover; }
.machine__body { padding: 22px 22px 24px; border-top: 1px solid #DEDAD0; }
.machine__cls { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #7A776E; margin: 0 0 8px; }
.machine__name { font-size: 21px; letter-spacing: -.02em; margin: 0 0 12px; }
.machine__use { font-size: 14.5px; line-height: 1.5; color: #55534C; margin: 0; }

/* --- process -------------------------------------------------------------- */

.process { background: var(--navy); padding: clamp(64px, 8vw, 100px) 0 clamp(70px, 8vw, 108px); }
.process--compact { padding-block: clamp(56px, 7vw, 84px); }
.process__title { font-size: clamp(30px, 4.2vw, 60px); margin: 0 0 56px; max-width: 760px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); list-style: none; margin: 0; padding: 0; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--navy); padding: 34px 26px 30px; }
.step__num { display: block; font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--yellow); letter-spacing: -.03em; margin-bottom: 22px; }
.step__name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .01em; margin: 0 0 12px; }
.step__copy { font-size: 15.5px; line-height: 1.6; color: var(--navy-3); margin: 0; }

/* --- project grid ---------------------------------------------------------
   Shared by the homepage strip and the /projects/ page. Tiles are real links to
   the full-size photo, so they work with JavaScript disabled; the lightbox is a
   progressive enhancement layered on top. */

.work { background: var(--black); padding: clamp(64px, 8vw, 100px) 0 clamp(70px, 8vw, 108px); }
.projects { background: var(--black); padding: 0 0 clamp(64px, 8vw, 96px); }

.sechead__link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--yellow); white-space: nowrap;
}
.sechead__link:hover { color: #fff; }

.projgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 980px) { .projgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .projgrid { grid-template-columns: 1fr; } }

.projgrid > li { display: flex; }

.ptile {
  display: flex; flex-direction: column; width: 100%;
  background: var(--panel); border: 1px solid var(--line); color: var(--cream);
  overflow: hidden; transition: border-color .15s;
}
.ptile:hover, .ptile:focus-visible { border-color: var(--yellow); color: var(--cream); }

.ptile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel-2); }
.ptile__media picture { display: block; width: 100%; height: 100%; }
.ptile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ptile:hover .ptile__media img { transform: scale(1.04); }

.ptile__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ptile__cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }
.ptile__title { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.01em; text-transform: uppercase; line-height: 1.15; }

.jobjacket { background: var(--yellow); color: var(--black); padding: 30px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.jobjacket--row { flex-direction: row; align-items: center; gap: 40px; margin-top: 18px; flex-wrap: wrap; }
.jobjacket--row > div { flex: 1 1 420px; }
.jobjacket__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin: 0; }
.jobjacket h3 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.05; letter-spacing: -.02em; }
.jobjacket p { font-size: 15px; line-height: 1.55; margin: 10px 0 0; color: var(--ink-70); max-width: 60ch; }

/* --- lightbox -------------------------------------------------------------- */

.lightbox {
  border: 0; padding: 0; max-width: 100vw; max-height: 100dvh;
  width: 100%; height: 100%; background: rgba(8,8,8,.96); color: var(--cream);
}
.lightbox::backdrop { background: rgba(8,8,8,.9); }
.lightbox[open] { display: grid; place-items: center; }

.lightbox__fig { margin: 0; display: grid; place-items: center; gap: 14px; padding: 56px 16px 24px; max-width: min(1400px, 96vw); }
.lightbox__img { max-width: 100%; max-height: 78dvh; width: auto; height: auto; object-fit: contain; background: var(--panel-2); }

.lightbox__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; justify-content: center; text-align: center; }
.lightbox__cat { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }
.lightbox__title { font-family: var(--display); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: -.01em; }
.lightbox__count { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }

.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(20,20,18,.9); border: 1px solid var(--line-3);
  color: var(--cream); cursor: pointer; display: grid; place-items: center;
  width: 48px; height: 48px; font-size: 26px; line-height: 1; padding: 0;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 32px; }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }

@media (max-width: 620px) {
  .lightbox__fig { padding: 60px 10px 20px; }
  .lightbox__nav { top: auto; bottom: 14px; transform: none; }
  .lightbox__img { max-height: 66dvh; }
}

/* --- faq ------------------------------------------------------------------ */

.faq { background: var(--panel); padding: clamp(64px, 8vw, 96px) 0; border-top: 1px solid var(--line); }
.faq h2 { font-size: clamp(28px, 4vw, 52px); margin-bottom: 44px; }
.faqlist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faqitem { background: var(--black); }
.faqitem summary { list-style: none; cursor: pointer; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faqitem summary::-webkit-details-marker { display: none; }
.faqitem summary::after { content: '+'; font-family: var(--display); font-weight: 900; font-size: 26px; color: var(--yellow); line-height: 1; flex: none; }
.faqitem[open] summary::after { content: '–'; }
.faqitem summary h3 { font-family: var(--display); font-weight: 800; font-size: clamp(16px, 2vw, 20px); letter-spacing: -.01em; text-transform: none; margin: 0; line-height: 1.3; }
.faqitem summary:hover h3 { color: var(--yellow); }
.faqitem > p { margin: 0; padding: 0 28px 28px; max-width: 78ch; color: var(--body); font-size: 16.5px; line-height: 1.7; }

/* --- quote / contact ------------------------------------------------------ */

.quote { background: var(--yellow); color: var(--black); }
.quote__inner { display: grid; grid-template-columns: 1fr 1fr; padding-inline: 0; }
.quote__pitch { padding: clamp(56px, 7vw, 88px) var(--gut); }
.quote h1, .quote h2 { font-size: clamp(32px, 4.6vw, 64px); line-height: .94; letter-spacing: -.03em; margin: 0 0 20px; }
.quote__lede { font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: var(--ink-70); max-width: 460px; margin: 0 0 34px; }
.quote__facts { display: grid; gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); font-style: normal; }
.quote__facts a { color: var(--ink-70); text-decoration: underline; }
.quote__facts a:hover { color: var(--black); }
.quote__area { font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 28px 0 0; max-width: 460px; }
@media (max-width: 900px) { .quote__inner { grid-template-columns: 1fr; } }

.quote-form { background: var(--black); color: var(--cream); padding: clamp(40px, 5vw, 60px) var(--gut) clamp(40px, 5vw, 56px); }
.quote-form__title { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; }
.quote-form form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field__label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0; }
.req { color: var(--yellow); }
.field input, .field textarea {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--cream);
  padding: 14px; font-family: var(--sans); font-size: 16px; width: 100%; resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--yellow); outline-offset: 0; }

.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Visually hidden, but still focusable and still submitted. The selector has to
   out-specify `.field input { width: 100% }` above (0-1-1) or these checkboxes
   render full width, push the document wider than the viewport, and every
   100%-width container on the page gets clipped. */
.chips .chip__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 14px; cursor: pointer; border: 1px solid var(--line-2); color: var(--body);
}
.chip:hover { border-color: var(--muted); }
.chip__input:checked + .chip { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.chip__input:focus-visible + .chip { outline: 3px solid var(--yellow); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.quote-form__note { font-size: 13px; color: var(--muted); margin: 0; }

.alert { padding: 20px 22px; border-left: 4px solid; margin-bottom: 24px; }
.alert h3 { font-size: 22px; margin: 0 0 8px; }
.alert p, .alert ul { margin: 0; font-size: 15.5px; line-height: 1.6; }
.alert ul { padding-left: 20px; margin-top: 8px; }
.alert--ok  { background: rgba(255,205,17,.1); border-color: var(--yellow); color: var(--cream); }
.alert--err { background: rgba(220,60,60,.12); border-color: #DC3C3C; color: #FFD9D9; }

/* --- page head / breadcrumbs / service page ------------------------------- */

.crumbs { background: var(--black); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 16px 0; color: var(--dim); }
.crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--line-3); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--yellow); }

.pagehead { background: var(--black); padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px); }
.pagehead h1 { font-size: clamp(32px, 5vw, 68px); margin: 0 0 24px; max-width: 18ch; }
.pagehead__lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--body); max-width: 620px; margin: 0; }
.pagehead--404 { padding-block: clamp(70px, 10vw, 140px); }
.pagehead--404 .hero__actions { margin-top: 36px; }

.svc__hero { background: var(--black); border-bottom: 1px solid var(--line); }
.svc__hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; padding-inline: 0; align-items: stretch; }
.svc__intro { padding: clamp(48px, 6vw, 84px) var(--gut); }
.svc__intro h1 { font-size: clamp(30px, 4.6vw, 62px); margin: 0 0 26px; max-width: 16ch; }
.svc__lede { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.65; color: var(--body); max-width: 560px; margin: 0 0 20px; text-wrap: pretty; }
.svc__intro .hero__actions { margin-top: 34px; }
.svc__media { border-left: 1px solid var(--line); min-height: 380px; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .svc__hero-inner { grid-template-columns: 1fr; }
  .svc__media { border-left: 0; border-top: 1px solid var(--line); min-height: 0; aspect-ratio: 16 / 10; }
}

.svc__what { background: var(--black); padding: clamp(56px, 7vw, 88px) 0; }
.svc__what h2 { font-size: clamp(26px, 3.4vw, 44px); margin-bottom: 36px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.checklist li { background: var(--panel); padding: 22px 26px 22px 58px; position: relative; font-size: 16.5px; line-height: 1.55; color: var(--body); }
.checklist li::before { content: '✓'; position: absolute; left: 26px; top: 22px; color: var(--yellow); font-weight: 700; }

.related { background: var(--panel); padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.related h2 { font-size: clamp(26px, 3.4vw, 44px); margin-bottom: 36px; }

.cta-strip { background: var(--yellow); color: var(--black); padding: clamp(48px, 6vw, 76px) 0; }
.cta-strip__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-strip h2 { font-size: clamp(28px, 4vw, 52px); }
.cta-strip p { font-size: 17px; color: var(--ink-70); margin: 0 0 12px; max-width: 52ch; }

/* --- footer --------------------------------------------------------------- */

.site-footer { background: var(--black); border-top: 5px solid var(--yellow); padding: 64px 0 34px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.brand--footer { margin-bottom: 20px; }
.site-footer__blurb { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 320px; margin: 0; }
.site-footer__head { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin: 0 0 16px; }
.site-footer__list { display: grid; gap: 10px; font-size: 15px; list-style: none; margin: 0; padding: 0; }
.site-footer__list a { color: var(--body); }
.site-footer__list a:hover { color: var(--yellow); }
.site-footer__contact { display: grid; gap: 10px; font-size: 15px; color: var(--body); font-style: normal; }
.site-footer__contact a { color: var(--body); }
.site-footer__tel { font-family: var(--display) !important; font-weight: 900; font-size: 22px; color: var(--cream) !important; }
.site-footer__tel:hover { color: var(--yellow) !important; }
.site-footer__areas { padding: 32px 0 0; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
.site-footer__areas p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 90ch; }
.site-footer__legal { padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* --- scroll reveal (progressive enhancement; JS adds .reveal) ------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- service card background plates --------------------------------------
   Generated low-key imagery sits behind the card copy. The scrim is doing the
   real work: the plates are already near-black, and this guarantees the text
   keeps its contrast regardless of how any individual image came out.
   On hover the card flips to solid yellow, so the plate fades out entirely. */

.scard { position: relative; overflow: hidden; isolation: isolate; }

.scard__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; transition: opacity .25s ease, transform .5s ease;
}
.scard__bg img { width: 100%; height: 100%; object-fit: cover; }
.scard__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(17,17,16,.42) 0%, rgba(17,17,16,.20) 55%, rgba(17,17,16,.56) 100%);
}

/* Keep every real child above the plate. */
.scard > *:not(.scard__bg) { position: relative; z-index: 1; }

.scard:hover .scard__bg,
.scard:focus-visible .scard__bg { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .scard__bg { transition: none; }
}

/* --- reviews -------------------------------------------------------------- */

.reviews {
  background: var(--cream); color: var(--black);
  padding: clamp(64px, 8vw, 100px) 0 clamp(68px, 8vw, 104px);
  border-top: 5px solid var(--yellow);
}
.reviews h2 { color: var(--black); font-size: clamp(30px, 4.2vw, 60px); }

.reviewgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1100px) { .reviewgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .reviewgrid { grid-template-columns: 1fr; } }

.reviewgrid > li { display: flex; }

.review {
  background: #fff; border: 1px solid #DEDAD0; margin: 0;
  padding: 26px 26px 24px; display: flex; flex-direction: column; width: 100%;
}

.review__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

.review__avatar {
  width: 44px; height: 44px; flex: none;
  background: var(--yellow); color: var(--black);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 16px; letter-spacing: -.02em;
}

.review__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review__name { font-family: var(--display); font-weight: 900; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; }
.review__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Star glyphs are decorative; the accessible name lives on the role="img". */
.stars { color: #B8820A; font-size: 14px; letter-spacing: .08em; line-height: 1; }
.review__meta time { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6E6B62; }

.review__body { margin: 0 0 18px; }
.review__body p { margin: 0; font-size: 15.5px; line-height: 1.62; color: #3F3D37; text-wrap: pretty; }

.review__place {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid #EAE5DA;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #6E6B62;
}

/* --- hero offer badge + core-service pills -------------------------------- */

.offer {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  align-self: flex-start; margin: 0 0 26px; padding: 11px 18px;
  background: var(--yellow); color: var(--black);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.offer__amount {
  font-family: var(--display); font-weight: 900; font-size: 17px;
  letter-spacing: -.01em; text-transform: uppercase;
}
.offer__terms {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; opacity: .78;
}

/* Real links to the service pages, not decorative chips — the hero is the
   strongest place on the page to hand internal link equity to them. */
.pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 32px; padding: 0;
}
.pill {
  display: inline-flex; align-items: center;
  padding: 10px 16px; border: 1px solid var(--line-3); color: var(--body);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; transition: border-color .15s, color .15s, background .15s;
}
.pill:hover, .pill:focus-visible { border-color: var(--yellow); color: var(--yellow); }

@media (max-width: 520px) {
  .offer { margin-bottom: 20px; }
  .pills { gap: 6px; margin-bottom: 26px; }
  .pill { padding: 9px 12px; font-size: 10.5px; letter-spacing: .1em; }
}

/* --- picture wrappers ------------------------------------------------------
   <picture> is an inline element with no height of its own, so an
   `img { height: 100% }` inside it has no definite parent height to resolve
   against and silently falls back to the image's natural aspect ratio. In a
   cover-cropped slot that leaves dead space under the photo. Every such slot
   needs the picture itself to fill the box. */

.hero__media picture,
.svc__media picture,
.machine__media picture,
.ptile__media picture,
.scard__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Responsive pass
   ========================================================================== */

/* Sticky-header offset. Without this every in-page anchor (#services, #reviews,
   #quote …) drops its target underneath the fixed header. Kept as a variable so
   the offset tracks the header height at each breakpoint. */
:root { --header-h: 92px; }
@media (max-width: 1080px) { :root { --header-h: 80px; } }
@media (max-width: 520px)  { :root { --header-h: 72px; } }

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Long unbroken strings — email addresses, long service names — wrap instead of
   forcing a horizontal scrollbar. This is what `overflow-x: hidden` on body was
   papering over. */
body, h1, h2, h3, p, li, a, address { overflow-wrap: break-word; }

/* Kill the grey tap flash on iOS; focus-visible still provides the real state. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

/* --- touch targets --------------------------------------------------------
   Pointer-coarse only, so mouse users keep the tighter visual rhythm. */
@media (pointer: coarse), (max-width: 900px) {
  .pill, .chip { min-height: 44px; padding-block: 13px; }
  .site-footer__list a,
  .crumbs a,
  .site-footer__list { gap: 4px; }
  .scard__more { display: inline-block; padding-block: 8px; }
  .navtoggle { min-width: 46px; min-height: 46px; }
  .faqitem summary { min-height: 56px; }
}

/* --- header ---------------------------------------------------------------- */

.callicon {
  display: none; place-items: center;
  width: 46px; height: 46px; flex: none;
  background: var(--yellow); color: var(--black);
}
.callicon:hover, .callicon:focus-visible { background: #fff; color: var(--black); }
.callicon svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 1080px) {
  .site-header__inner { min-height: 66px; padding-block: 10px; }
  /* A long menu must not run past the bottom of a short screen. */
  .nav[data-open] ul { max-height: calc(100dvh - var(--header-h) - 40px); overflow-y: auto; }
}

@media (max-width: 460px) {
  .site-header__tel { display: none; }
  .callicon { display: grid; }
}

/* --- short landscape viewports --------------------------------------------
   On a phone held sideways a sticky header plus a tall hero leaves almost no
   room for content, so the header scrolls away and the hero image flattens. */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .hero__media { aspect-ratio: 16 / 9; }
  [id] { scroll-margin-top: 12px; }
}

/* --- small screens --------------------------------------------------------- */
@media (max-width: 560px) {
  /* Full-bleed calls to action are easier to hit than side-by-side ones. */
  .hero__actions, .pagehead--404 .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .btn--outline, .btn--tall { justify-content: center; padding-block: 18px; }
  .btn--call, .btn--black { align-items: flex-start; }

  .scard { padding: 26px 22px 24px; min-height: 0; }
  .review { padding: 22px 20px 20px; }
  .faqitem summary { padding: 20px; }
  .faqitem > p { padding: 0 20px 22px; }
  .checklist li { padding: 18px 20px 18px 48px; }
  .checklist li::before { left: 20px; top: 18px; }
  .step { padding: 26px 22px 24px; }
  .machine__body { padding: 18px 18px 20px; }
  .jobjacket { padding: 26px 22px; }
  .quote-form { padding-block: 36px; }
  .site-footer { padding-top: 48px; }
  .site-footer__grid { gap: 32px; padding-bottom: 36px; }
}

@media (max-width: 380px) {
  .utilbar { font-size: 10px; letter-spacing: .02em; }
  .btn__number { font-size: 20px; }
  .offer { padding: 10px 14px; }
  .offer__terms { font-size: 10px; letter-spacing: .12em; }
}

/* --- confirmation page ----------------------------------------------------- */

.pagehead--thanks { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); }
.pagehead--thanks .hero__actions { margin-top: 38px; }

.thanks-next { background: var(--navy); padding: clamp(56px, 7vw, 88px) 0; }
.thanks-next h2 { font-size: clamp(26px, 3.6vw, 46px); margin: 0 0 40px; }

/* Turnstile widget sits in the dark form panel. */
.cf-turnstile { min-height: 65px; }

/* --- very narrow screens (320px, older/smaller handsets) ------------------
   The Turnstile widget has a hard 300px minimum width. With the panel's normal
   padding that is 340px, which overflows a 320px viewport and — because the
   document then lays out at 340 — clips every 100%-width container on the page.
   Trimming the panel padding at this width lets the widget fit exactly. */
@media (max-width: 380px) {
  .quote-form, .quote__pitch { padding-inline: 10px; }
  .quote__inner > * { min-width: 0; }
  /* The Turnstile iframe cannot shrink below 300px. Letting its container
     scroll means the widget never widens the document itself. */
  .cf-turnstile { max-width: 100%; overflow-x: auto; }
}

/* --- brand logo ------------------------------------------------------------
   The supplied badge is a detailed 1.41:1 illustration containing the wordmark
   and phone number, so it replaces the old text lockup entirely and is given as
   much height as the header allows. */

.brand { display: block; flex: none; line-height: 0; }
.brand picture { display: block; }
.brand img { width: 140px; height: auto; }

.brand--footer { margin-bottom: 20px; }
.brand--footer img { width: 210px; }

@media (max-width: 1080px) { .brand img { width: 124px; } }
@media (max-width: 460px)  { .brand img { width: 108px; } }
@media (max-width: 360px)  { .brand img { width: 96px; } }