/* Home: hanksmobilemechanic.help — bleed overlay, Nyoka shop, truck lanes */

.han07-kicker {
  margin: 0;
  color: #8c5b00;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.han07-lead,
.han07-sec-head p,
.han07-shop-copy > p:not(.han07-kicker) {
  color: var(--han07-muted);
  font-size: 1.05rem;
  text-wrap: pretty;
}

.han07-sec-head,
.han07-route-head,
.han07-shop-copy,
.han07-hero-overlay,
.han07-book-copy {
  display: grid;
  align-content: start;
  gap: .8rem;
}

.han07-sec-head {
  max-width: 40rem;
  margin: 0 0 2rem;
}

.han07-sec-head h2,
.han07-shop-copy h2,
.han07-route-head h2,
.han07-book-copy h2,
.han07-hero-overlay h1 {
  text-wrap: balance;
}

.han07-sec-head h2,
.han07-shop-copy h2,
.han07-route-head h2 {
  font-size: clamp(1.85rem, 4vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

/* Bleed hero + paper overlay block */
.dna-hero-bleed .han07-hero.hero {
  position: relative;
  min-height: min(78vh, 760px);
  padding: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.han07-hero .hero-visual,
.han07-hero .hero-photo,
.han07-hero .hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.han07-hero .hero-photo img {
  object-fit: cover;
  object-position: 48% 72%;
}

.dna-hero-bleed .han07-hero .hero-visual::after {
  background:
    linear-gradient(90deg, rgba(32, 29, 24, .22) 0%, transparent 48%),
    linear-gradient(0deg, rgba(32, 29, 24, .28) 0%, transparent 42%);
}

.han07-hero .hero-inner {
  position: relative;
  z-index: 2;
  width: min(var(--han07-max), calc(100% - 2 * var(--han07-pad)));
  max-width: none;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(2.2rem, 5vw, 3.4rem);
}

.han07-hero-overlay {
  max-width: 42rem;
  padding: clamp(1.3rem, 3vw, 1.85rem);
  border: 1px solid var(--han07-line);
  border-left: 4px solid var(--han07-accent);
  background: color-mix(in srgb, var(--han07-bg) 94%, #fff);
  color: var(--han07-ink);
}

.han07-hero-overlay h1 {
  font-size: clamp(1.85rem, 4.4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.028em;
}

.han07-hero-overlay .han07-lead { color: var(--han07-muted); }

.han07-hero-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.2rem;
}

.han07-hero-call {
  display: grid;
  gap: .12rem;
  color: var(--han07-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}

.han07-hero-call span {
  color: var(--han07-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Nyoka about: stats-led split */
.han07-shop { padding-block: clamp(4rem, 8vw, 6.5rem); }

.han07-shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.han07-facts {
  display: grid;
  gap: 0;
  margin: .4rem 0 0;
}

.han07-facts div {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: start;
  gap: .85rem;
  padding-block: .85rem;
  border-top: 1px solid var(--han07-line);
}

.han07-facts div:last-child { border-bottom: 1px solid var(--han07-line); }
.han07-facts dt {
  margin: 0;
  color: #8c5b00;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.han07-facts dd { margin: 0; font-weight: 700; }

.han07-statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
}

.han07-statrow li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: .35rem;
  min-width: 0;
  padding: .9rem 0 0;
}

.han07-statrow .dna-ic { color: #8c5b00; }
.han07-statrow b { font-size: .92rem; line-height: 1.2; }
.han07-statrow span:last-child { color: var(--han07-muted); font-size: .82rem; }

.han07-shop-photo { margin: 0; }
.han07-shop-photo img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 1px solid var(--han07-line);
}

/* Truck lanes: DNA tabs + numbered panel */
.han07-lanes {
  padding-block: clamp(4rem, 8vw, 6.5rem);
  border-block: 1px solid var(--han07-line);
  background: var(--han07-surface-2);
}

.han07-lanes .svc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1.25rem;
}

.han07-lanes .svc-tab {
  min-height: 42px;
  padding: .55rem .85rem;
  border: 1px solid var(--han07-line);
  border-radius: 0;
  background: var(--han07-surface);
  color: var(--han07-muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.han07-lanes .svc-tab:hover,
.han07-lanes .svc-tab.active {
  border-color: var(--han07-accent);
  background: var(--han07-accent);
  color: var(--han07-accent-ink);
}

.han07-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 1.5rem;
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid var(--han07-line);
  background: var(--han07-surface);
}

.han07-lane--plain { grid-template-columns: 1fr; }

.han07-lane-copy {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: .55rem;
  min-width: 0;
}

.han07-lane-no {
  color: #8c5b00;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.han07-lane h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.1;
}

.han07-lane p {
  margin: 0;
  color: var(--han07-muted);
  text-wrap: pretty;
}

.han07-lane-photo { margin: 0; }
.han07-lane-photo img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

/* What a call covers: metric bar */
.han07-covers {
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: #2a261f;
  color: #fffaf0;
}

.han07-sec-head--ink .han07-kicker { color: var(--han07-accent-2); }
.han07-sec-head--ink p { color: rgba(255, 250, 240, .72); }

.han07-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.han07-metrics article {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: .4rem;
  min-width: 0;
  padding: 1.35rem 1.15rem 1.45rem 0;
  border-top: 1px solid rgba(255, 250, 240, .18);
}

.han07-metrics article + article { padding-left: 1.15rem; border-left: 1px solid rgba(255, 250, 240, .18); }
.han07-metrics span {
  color: var(--han07-accent-2);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.han07-metrics strong {
  font: 600 clamp(1.25rem, 2vw, 1.7rem)/1.15 "Playfair Display", Georgia, serif;
}
.han07-metrics p { margin: 0; color: rgba(255, 250, 240, .74); font-size: .92rem; text-wrap: pretty; }

/* Yard or shop zigzag */
.han07-route { padding-block: clamp(4rem, 8vw, 6.5rem); }
.han07-route-head { max-width: 38rem; margin-bottom: 2rem; }

.han07-zigzag { display: grid; gap: 1rem; }

.han07-zig {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 18rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem 1.6rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--han07-line);
}

.han07-zig:last-child { border-bottom: 1px solid var(--han07-line); }
.han07-zig:nth-child(even) { direction: rtl; }
.han07-zig:nth-child(even) > * { direction: ltr; }

.han07-zig-label {
  color: #8c5b00;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.han07-zig h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.15;
}

.han07-zig p { margin: 0; color: var(--han07-muted); text-wrap: pretty; }

/* Tabs around one phone field */
.han07-book {
  padding-block: 0 4.5rem;
}

.han07-book-shell {
  border: 1px solid var(--han07-line);
  background: var(--han07-surface);
}

.han07-book-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--han07-line);
}

.han07-book-tabs button {
  min-height: 48px;
  padding: .75rem 1.1rem;
  border: 0;
  border-right: 1px solid var(--han07-line);
  background: transparent;
  color: var(--han07-muted);
  font: 800 .72rem/1 "Lato", "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.han07-book-tabs button.is-active {
  background: var(--han07-accent);
  color: var(--han07-accent-ink);
}

.han07-book-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 1.6rem 2rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.han07-book-copy p:last-of-type,
.han07-book-copy a { color: var(--han07-muted); font-size: .92rem; }
.han07-book-copy a:hover { color: var(--han07-ink); }

.han07-phone-form { display: grid; gap: .45rem; }
.han07-phone-form label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.han07-phone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.han07-phone-form input {
  min-width: 0;
  min-height: 52px;
  padding: .7rem .9rem;
  border: 1px solid var(--han07-line);
  background: var(--han07-bg);
  color: var(--han07-ink);
  font: inherit;
}

.han07-phone-form .han07-cta {
  border-radius: 0;
}

.han07-phone-err { color: #8a2b12; font-size: .88rem; }
.han07-phone-ok { color: var(--han07-ink); font-size: 1.05rem; font-weight: 700; }

.han07-book-dial {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: .35rem;
  min-height: 52px;
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
}

.han07-book-dial strong {
  font: 600 1.8rem/1.1 "Playfair Display", Georgia, serif;
}

.han07-book-dial span:last-child { color: var(--han07-muted); font-size: .88rem; }

@media (max-width: 980px) {
  .han07-shop-grid,
  .han07-book-split,
  .han07-lane { grid-template-columns: 1fr; }
  .han07-statrow { grid-template-columns: 1fr; }
  .han07-metrics { grid-template-columns: 1fr 1fr; }
  .han07-metrics article:nth-child(odd) { padding-left: 0; border-left: 0; }
  .han07-zig {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .han07-zig:nth-child(even) { direction: ltr; }
}

@media (max-width: 768px) {
  .han07-hero .hero-photo img { object-position: 70% 50%; }
  .han07-hero-overlay { max-width: none; }
  .han07-lane-photo img { min-height: 200px; }
}

@media (max-width: 560px) {
  .han07-hero-acts { align-items: stretch; flex-direction: column; }
  .han07-hero-acts .han07-cta { width: 100%; }
  .han07-facts div { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .han07-metrics { grid-template-columns: 1fr; }
  .han07-metrics article,
  .han07-metrics article + article {
    padding-left: 0;
    border-left: 0;
  }
  .han07-phone-row { grid-template-columns: 1fr; gap: .65rem; }
  .han07-phone-form .han07-cta { width: 100%; }
  .han07-sec-head h2,
  .han07-shop-copy h2,
  .han07-route-head h2 { font-size: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .han07-lanes .svc-tab { transition: none; }
}