/* Custom Transport, Amarillo TX
   Identity: the black gooseneck trailer (white phone number on the neck, red and white DOT reflective tape)
   and the company logo red. Headings Oswald, body Roboto. */

:root {
  --black: #1A1A1A;      /* trailer powder coat */
  --black-2: #262626;
  --red: #B01B1A;        /* logo red */
  --red-dark: #8E1514;
  --white: #FFFFFF;
  --caliche: #ECEBE7;    /* Panhandle road base */
  --ink: #1A1A1A;
  --muted: #55585C;
  --line: #D5D3CD;
  --on-dark: #CFCFCF;
  --sky: #2E73D0;        /* focus ring only; the sky itself comes from the photos */
  --wrap: 1240px;
  --pad: 32px;
  --tape: repeating-linear-gradient(90deg, var(--red) 0 30px, #F4F4F4 30px 60px);
  --tape-v: repeating-linear-gradient(180deg, var(--red) 0 30px, #F4F4F4 30px 60px);
  --tape-h: 8px;
  --head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --body: "Roboto", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: 0; }
h2 { font-size: clamp(34px, 3.6vw, 50px); text-wrap: balance; }
h3 { font-size: 26px; }
p { margin: 0 0 1em; }
figure { margin: 0; }
blockquote { margin: 0; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: var(--red); color: var(--white); font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 3px; font-family: var(--body); font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-dark); }
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: #000; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 19px; }
.btn--full { width: 100%; }

/* Header */
.header { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.header__in { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__logo { width: 52px; height: 52px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--head); font-weight: 600; font-size: 24px; }
.brand__city { font-size: 14px; color: var(--muted); }
.nav { display: flex; gap: 24px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 17px; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--red); }
.header__call { font-family: var(--head); font-weight: 600; font-size: 22px; text-decoration: none; white-space: nowrap; }
.header__call:hover { color: var(--red); }
.header__quote { min-height: 46px; padding: 0 20px; font-size: 17px; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--ink); cursor: pointer; }
.menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.mobile-menu { border-top: 1px solid var(--line); background: var(--white); padding: 8px 16px 18px; }
.mobile-menu a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; font-size: 19px; }
.mobile-menu a.mobile-menu__call { border: 0; margin-top: 12px; text-align: center; background: var(--red); color: var(--white); border-radius: 3px; font-weight: 700; }

/* Hero: photo with the "rig" panel (neck + deck) */
.hero { position: relative; background: var(--black); }
.hero__photo img { width: 100%; height: clamp(600px, calc(100svh - 77px), 980px); object-fit: cover; object-position: 50% 58%; }
.rig { --gut: max(var(--pad), calc(50% - (var(--wrap) / 2) + var(--pad))); --neck-w: calc(var(--gut) + 400px); position: absolute; left: 0; right: 0; bottom: 0; color: var(--white); }
.rig__neck { position: absolute; left: 0; bottom: 100%; width: var(--neck-w); background: var(--black); padding: 24px 28px 20px var(--gut); }
.rig__neck::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--tape-h); background: var(--tape); }
.rig__neck::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: var(--tape-h); background: var(--tape-v); }
.rig__phone { display: inline-block; font-family: var(--head); font-weight: 600; font-size: clamp(40px, 3.9vw, 58px); line-height: 1.05; letter-spacing: .01em; text-decoration: none; color: var(--white); padding-top: 6px; }
.rig__phone:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.rig__hours { margin: 4px 0 0; color: var(--on-dark); font-size: 16px; }
.rig__deck { position: relative; background: var(--black); padding: 30px 0 36px; }
.rig__deck::before { content: ""; position: absolute; left: var(--neck-w); right: 0; top: 0; height: var(--tape-h); background: var(--tape); }
.rig__in { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.rig h1 { font-size: clamp(38px, 3.7vw, 52px); line-height: 1.04; text-wrap: balance; }
.rig__side p { color: var(--on-dark); margin-bottom: 18px; max-width: 34em; }

/* Facts */
.facts { border-bottom: 1px solid var(--line); }
.facts__list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts__list li { padding: 22px 20px 22px 0; display: flex; flex-direction: column; }
.facts__list li + li { border-left: 1px solid var(--line); padding-left: 24px; }
.facts__list strong { font-family: var(--head); font-weight: 600; font-size: 22px; line-height: 1.2; }
.facts__list span { color: var(--muted); font-size: 16px; line-height: 1.4; }

/* Signature: moving day */
.moveday { position: relative; background: var(--black); color: var(--white); padding: 92px 0 96px; }
.moveday::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--tape-h); background: var(--tape); }
.moveday__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.moveday__head p { color: var(--on-dark); margin: 0; max-width: 32em; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.step--1 { grid-column: 1 / span 7; }
.step--2 { grid-column: 8 / span 5; align-self: end; }
.step--3 { grid-column: 1 / span 5; }
.step--4 { grid-column: 6 / span 3; }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step--4 img { aspect-ratio: 3 / 4; object-position: 50% 60%; }
.step figcaption { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; margin-top: 14px; }
.step__n { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--red); color: var(--white); font-family: var(--head); font-weight: 600; font-size: 24px; }
.step__q { font-family: var(--head); font-weight: 500; font-size: 23px; line-height: 1.25; }
.step__s { color: var(--on-dark); font-size: 16px; }
.moveday__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.moveday__grid > .steps { grid-column: 1 / -1; grid-row: 1; }
.moveday__review { grid-column: 9 / -1; grid-row: 1; align-self: end; border-left: 4px solid var(--red); padding-left: 22px; }
.moveday__review p { font-size: 19px; }
.moveday__review footer { color: var(--on-dark); font-size: 16px; }

/* Sheds */
.sheds { padding: 100px 0 96px; }
.sheds__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.lead { font-family: var(--head); font-weight: 500; font-size: 26px; line-height: 1.25; margin: 18px 0 14px; }
.owner { margin-top: 30px; padding: 22px 24px; background: var(--caliche); border-left: 4px solid var(--red); }
.owner p { font-family: var(--head); font-weight: 500; font-size: 24px; line-height: 1.3; margin-bottom: 10px; }
.owner footer { color: var(--muted); font-size: 16px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pair figcaption { font-family: var(--head); font-weight: 500; font-size: 21px; margin-top: 10px; }
.pair__note { grid-column: 1 / -1; color: var(--muted); font-size: 16px; margin: 0; }
.loads { display: flex; gap: 16px; margin-top: 64px; }
.loads figure { flex: var(--r, 1.333) 1 0; min-width: 0; }
.loads__b { --r: .869; }
.loads img { width: 100%; height: 300px; object-fit: cover; }
.loads figcaption, .drive figcaption, .job__img figcaption { color: var(--muted); font-size: 16px; margin-top: 8px; }

/* Demolition */
.demo { background: var(--caliche); padding: 96px 0; }
.demo__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.demo__text > p { margin: 16px 0 0; max-width: 24em; }
.demo__quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin-top: 30px; }
.demo__quotes .quote { margin-top: 0; border-top: 2px solid var(--ink); }
.quote { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.quote p { margin-bottom: 8px; }
.quote footer { color: var(--muted); font-size: 16px; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ba figure { position: relative; }
.ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba figcaption { position: absolute; left: 14px; top: 14px; }
.tag { display: inline-block; padding: 5px 12px; font-family: var(--head); font-weight: 500; font-size: 18px; color: var(--white); }
.tag--dark { background: var(--black); }
.tag--red { background: var(--red); }
.ba__note { grid-column: 1 / -1; color: var(--muted); font-size: 16px; margin: 10px 0 0; }

/* Dirt work */
.dirt { padding: 100px 0 96px; }
.dirt__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.dirt__head p { margin: 0; max-width: 32em; }
.drive h3 { font-size: 22px; font-weight: 500; margin-bottom: 14px; }
.drive__row { display: flex; gap: 12px; }
.drive__row figure { flex: var(--r) 1 0; min-width: 0; }
.drive__row img { width: 100%; height: clamp(220px, 26vw, 340px); object-fit: cover; }
.drive__row figcaption { font-family: var(--head); font-weight: 500; font-size: 20px; color: var(--ink); }
.jobs { list-style: none; margin: 64px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.job { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.job p { margin: 0; }
.job__src { display: block; color: var(--muted); font-size: 16px; margin-top: 6px; }
.job__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.job__img--two { display: grid; grid-template-columns: 3fr 4fr; gap: 10px; }
.job__img--two img { aspect-ratio: auto; height: 200px; }
.job--text { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }

/* Gallery */
.work { background: var(--caliche); padding: 96px 0; }
.work h2 { margin-bottom: 36px; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 10px; }
.g-item { position: relative; padding: 0; border: 0; background: var(--black); cursor: zoom-in; overflow: hidden; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .2s ease; }
.g-item:hover img { transform: scale(1.03); }
.g-item--big { grid-column: span 2; grid-row: span 2; }
.g-item--tall { grid-row: span 2; }
.g-item--wide { grid-column: span 2; }

/* Reviews */
.reviews { padding: 100px 0; }
.reviews__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.scores { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 22px 18px; margin-top: 28px; }
.score { display: contents; }
.score__n { font-family: var(--head); font-weight: 600; font-size: 64px; line-height: 1; color: var(--red); }
.score__t { color: var(--muted); font-size: 16px; line-height: 1.35; }
.reviews__list { columns: 2; column-gap: 48px; }
.reviews__list .quote { break-inside: avoid; margin-top: 0; margin-bottom: 26px; border-top: 2px solid var(--ink); }

/* About */
.about { background: var(--black); color: var(--white); padding: 96px 0; }
.about__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.about__img { margin-top: 10px; }
.about__img figcaption { color: var(--on-dark); font-size: 16px; margin-top: 10px; }
.about__text > p { color: var(--on-dark); margin: 16px 0 24px; }
.about__facts { margin: 0 0 28px; border-top: 1px solid #3A3A3A; }
.about__facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #3A3A3A; }
.about__facts dt { color: var(--on-dark); font-size: 16px; padding-top: 2px; }
.about__facts dd { margin: 0; }
.about h3 { font-size: 20px; font-weight: 500; color: var(--on-dark); }
.about__text > .towns { font-family: var(--head); font-weight: 500; font-size: 30px; line-height: 1.2; margin: 8px 0 10px; color: var(--white); }
.about__note { color: var(--on-dark); margin: 0; }

/* Quote */
.quote-sec { background: var(--caliche); padding: 96px 0; }
.quote__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.quote__text > p { margin: 16px 0 24px; }
.contact { list-style: none; margin: 0 0 30px; padding: 0; }
.contact li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact li > span:first-child { color: var(--muted); font-size: 16px; padding-top: 2px; }
.contact a { font-weight: 500; overflow-wrap: anywhere; }
.hours__h { font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.hours { width: 100%; max-width: 380px; border-collapse: collapse; }
.hours th, .hours td { text-align: left; font-weight: 400; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hours td { text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; }
.form { background: var(--white); padding: 32px; border-top: 6px solid var(--black); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 500; margin-bottom: 6px; }
.opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--ink); background: var(--white); border: 1px solid #A9A7A1; border-radius: 3px; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.form__err { color: var(--red); font-weight: 500; }
.form__note { color: var(--muted); font-size: 15px; margin: 12px 0 0; }

/* Footer */
.footer { position: relative; background: var(--black); color: var(--on-dark); padding: 64px 0 56px; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--tape-h); background: var(--tape); }
.footer__in { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.footer__logo { width: 110px; height: 110px; }
.footer .footer__name { font-family: var(--head); font-weight: 600; font-size: 26px; color: var(--white); margin-bottom: 6px; }
.footer p { font-size: 16px; }
.footer a { color: var(--white); overflow-wrap: anywhere; }

.sticky-book { display: none; }

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(16, 16, 16, .97); color: var(--white); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, .6); }
.lightbox img { max-width: min(92vw, 1200px); max-height: 78vh; width: auto; height: auto; object-fit: contain; }
.lightbox__cap { position: absolute; left: 16px; right: 16px; bottom: 22px; text-align: center; margin: 0; }
.lightbox__btn { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 0; border-radius: 3px; color: var(--white); cursor: pointer; }
.lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.lightbox__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; margin-top: -26px; }
.lightbox__next { right: 16px; top: 50%; margin-top: -26px; }

/* Tablet */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .moveday__review { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 44px; max-width: 680px; }
  .step--3 { grid-column: 1 / span 6; }
  .step--4 { grid-column: 7 / span 4; }
}

@media (max-width: 1000px) {
  :root { --pad: 24px; }
  .header__quote { display: none; }
  .rig { --neck-w: calc(var(--gut) + 360px); }
  .rig__in { grid-template-columns: 1fr; gap: 18px; }
  .moveday__head, .dirt__head { grid-template-columns: 1fr; gap: 14px; }
  .sheds__top, .demo__in, .reviews__in, .about__in, .quote__in { grid-template-columns: 1fr; gap: 40px; }
  .facts__list { grid-template-columns: repeat(2, 1fr); }
  .facts__list li:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .job { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .job__img { grid-column: 1 / -1; }
  .job--text { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Phone */
@media (max-width: 760px) {
  :root { --pad: 16px; }
  body { font-size: 17px; }
  .header__in { min-height: 64px; gap: 12px; }
  .brand__logo { width: 44px; height: 44px; }
  .brand__name { font-size: 21px; }
  .header__call { display: none; }

  .hero__photo img { height: auto; aspect-ratio: 1 / 1; object-position: 58% 50%; }
  .rig { position: relative; --neck-w: 292px; }
  .rig__neck { padding: 16px 18px 10px 16px; }
  .rig__phone { font-size: 38px; padding-top: 4px; }
  .rig__hours { font-size: 15px; margin-top: 0; }
  .rig__deck { padding: 20px 0 30px; }
  .rig h1 { font-size: 34px; }
  .rig__side p { margin-bottom: 16px; }
  .rig__side .btn { width: 100%; }

  .facts__list li { padding: 16px 12px 16px 0; }
  .facts__list li + li { padding-left: 14px; }
  .facts__list li:nth-child(3) { padding-left: 0; }
  .facts__list strong { font-size: 19px; }
  .facts__list span { font-size: 15px; }

  .moveday { padding: 64px 0 64px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .step--1, .step--2, .step--3, .step--4 { grid-column: 1; }
  .step--4 img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
  .step__q { font-size: 21px; }

  .sheds, .dirt, .reviews { padding: 64px 0; }
  .demo, .work, .about, .quote-sec { padding: 64px 0; }
  .lead { font-size: 23px; }
  .owner p { font-size: 21px; }
  .pair { gap: 10px; }
  .pair figcaption { font-size: 19px; }
  .loads { flex-direction: column; gap: 22px; margin-top: 44px; }
  .loads figure { flex: none; }
  .loads img { height: auto; aspect-ratio: 4 / 3; }
  .ba { grid-template-columns: 1fr; gap: 10px; }

  .drive__row { flex-wrap: wrap; }
  .drive__row figure:first-child { flex: 1 1 100%; }
  .drive__row figure:first-child img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 70%; }
  .drive__row figure { flex: 1 1 40%; }
  .drive__row img { height: 150px; }
  .job, .job--text { grid-template-columns: 1fr; gap: 12px; }
  .job__img--two img { height: 150px; }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; }
  .g-item--wide { grid-column: span 2; }

  .reviews__list { columns: 1; }
  .score__n { font-size: 52px; }
  .demo__quotes { grid-template-columns: 1fr; }

  .about__facts div { grid-template-columns: 1fr; gap: 2px; }
  .about__text > .towns { font-size: 26px; }

  .form { padding: 22px 16px; }
  .contact li { grid-template-columns: 76px 1fr; }

  .footer { padding: 52px 0 calc(96px + env(safe-area-inset-bottom)); }
  .footer__in { grid-template-columns: 1fr; gap: 18px; }
  .footer__logo { width: 84px; height: 84px; }

  .sticky-book { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .16); transform: translateY(110%); transition: transform .25s ease; }
  .sticky-book.is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .g-item img, .sticky-book, .btn { transition: none; }
  .g-item:hover img { transform: none; }
}