.p-home .service-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.home-social {
  background: #fff;
  color: var(--ink);
}

.home-social::before {
  right: auto;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, transparent, #7b8087 22%, #fff 50%, #a8adb3 78%, transparent);
}

.home-social-grid {
  grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1.2fr);
  gap: clamp(26.4px, 3.6vw, 51.6px);
  align-items: start;
}

.home-social .eyebrow { color: var(--gold-deep); }
.home-social h2 { max-width: 10ch; color: var(--ink); }
.home-social-copy > p { color: var(--ink-soft); }
.social-channel-list { margin-top: clamp(21px, 2.4vw, 28.8px); border-top-color: var(--line); }
.social-channel { border-bottom-color: var(--line); color: var(--ink); }
.social-channel:hover,
.social-channel:focus-visible { color: var(--gold-deep); }
.social-channel-name { display: flex; align-items: center; gap: 11px; }
.social-channel-name svg { width: 22px; height: 22px; flex: 0 0 22px; }
.social-channel[href*="facebook"] .social-channel-name svg { color: #1877f2; }
.social-channel-action { justify-self: end; color: var(--gold-deep); font-size: 18px; }

/* ---- Work gallery — every tile opens Instagram ---- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-grid a {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: #ecece8;
}

.work-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work-grid a:hover img,
.work-grid a:focus-visible img { opacity: 0.82; }

.work-grid a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.work-grid-cta {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--gold-deep);
  text-decoration: none;
}

.work-grid-cta:hover,
.work-grid-cta:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 1100px) {
  .home-social-grid {
    max-width: 1320px;
    grid-template-columns: minmax(300px, 0.68fr) minmax(620px, 1.32fr);
  }
}

@media (max-width: 900px) {
  .home-social-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .social-channel { grid-template-columns: 1fr auto; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ---- Left-anchored page grid ----
   Every section starts at the same --pad gutter as the nav logo and the hero,
   instead of centring a 1140px column. Two sections are deliberately left
   centred: .home-social (the gallery reads better balanced) and .service-area
   (the map). Do not add them to this list. ---- */
.p-home .b0 > .wrap,
.p-home .b2 > .wrap,
.p-home .faq-section > .wrap,
.p-home .cta-band > .wrap,
.p-home footer > .wrap {
  max-width: 1340px;
  margin-left: 0;
  margin-right: auto;
}

/* The trust block was capped at 780px and centred on its own, which put it out
   of line with every other section.  Column widths and media sizing live in the
   later .p-home .trust-block / .trust-media block — do not set aspect-ratio
   here as well: combined with min-height it forces the image wider than its
   column and it overlaps the heading. */
.p-home .trust-block {
  max-width: 1340px;
  align-items: center;
}

.p-home .trust-media { max-height: none; }

/* ---- Hero copy is left-anchored so the headline lines up directly under the
   BLACK SHIELD logo in the nav, which uses the same --pad gutter. ---- */
.p-home .hero-content {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  padding-left: var(--pad);
}

.p-home .hero-content > * { max-width: 760px; }
.p-home .hero h1 { max-width: 12ch; }

/* ---- GeoShield film brand band (home) ---- */
.film-brand {
  margin-top: 24px;
  padding: 21px 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: #FFFFFF;
}
.film-brand-eyebrow {
  margin: 0;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--ink-soft);
}
.film-brand-name {
  margin: 6px 0 0;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  font-size: clamp(25.5px, 3.5vw, 32.2px);
  color: var(--ink);
}
.film-brand-note {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
.film-brand-note a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .film-brand { padding: 22px 20px; }
}

/* ========================================================================== 
   HOME V8 — cinematic editorial redesign
   Strong type, clipped automotive geometry, asymmetrical proof, clear paths.
   ========================================================================== */

body.p-home { overflow-x: clip; }

.p-home .btn {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

.p-home .hero {
  min-height: min(705.6px, 100svh);
  border-bottom: 0;
}

.p-home .hero-content {
  padding-top: clamp(25.5px, 4.2vh, 50.4px);
}

.p-home .hero-content::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pad);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(244,196,0,0.72) 24%, rgba(255,255,255,0.18) 72%, transparent);
  transform: translateX(-18px);
}

.p-home .hero h1 {
  max-width: 10.5ch;
  font-family: var(--font-head);
  font-size: clamp(40.5px, 4vw, 56px);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.p-home .hero h1 em {
  color: var(--gold);
  font-style: normal;
}

.p-home .hero-sub {
  max-width: 41ch;
  font-size: clamp(15.2px, 1.2vw, 18px);
}

.p-home .hero-reassure {
  padding-left: 15px;
  border-left: 2px solid rgba(244,196,0,0.7);
}

.p-home .hero-proof {
  max-width: 780px;
}

.p-home .proof-item {
  position: relative;
  min-height: 92px;
}

.p-home .proof-item::after {
  content: '';
  position: absolute;
  top: -1px;
  right: 14px;
  width: 22px;
  height: 1px;
  background: var(--gold);
}

.p-home .fact-strip {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 44px rgba(5,5,5,0.07);
}

.p-home .fact-strip li {
  position: relative;
  padding-block: 22px;
}

.p-home .fact-strip li::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 16px;
  height: 16px;
  border-right: 1px solid var(--line);
  transform: skewX(-35deg);
}

.p-home .home-services {
  position: relative;
  padding-top: clamp(46.8px, 6vw, 81.6px);
  overflow: hidden;
}

.p-home .home-services::after {
  content: 'PROTECT';
  position: absolute;
  z-index: 0;
  top: 42px;
  right: -0.08em;
  color: rgba(17,18,20,0.026);
  font-family: var(--font-head);
  font-size: clamp(82.5px, 10vw, 155px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.8;
  pointer-events: none;
}

.p-home .home-services > .wrap {
  position: relative;
  z-index: 1;
}

.p-home .section-head h2,
.p-home .process-head h2,
.p-home .availability-copy h2 {
  font-size: clamp(30.8px, 3.4vw, 44.6px);
  line-height: 0.96;
  letter-spacing: -0.032em;
}

.p-home .service-index {
  border-top: 2px solid var(--ink);
}

.p-home .service-row {
  grid-template-columns: 76px minmax(0, 1fr) auto;
  padding: clamp(24px, 2.4vw, 32.4px) clamp(12px, 2vw, 26px) clamp(24px, 2.4vw, 32.4px) 0;
  overflow: hidden;
  isolation: isolate;
}

.p-home .service-row::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: -90px;
  bottom: 0;
  width: min(38%, 430px);
  background: linear-gradient(135deg, transparent 18%, rgba(244,196,0,0.08) 18%, rgba(244,196,0,0.08) 52%, rgba(17,18,20,0.045) 52%);
  transform: translateX(100%);
  transition: transform 420ms cubic-bezier(0.22, 0.76, 0.28, 1);
}

.p-home .service-row:hover,
.p-home .service-row:focus-visible {
  padding-left: 18px;
  background: rgba(255,255,255,0.82);
}

.p-home .service-row:hover::after,
.p-home .service-row:focus-visible::after {
  transform: translateX(0);
}

.p-home .service-idx {
  align-self: start;
  padding-top: 7px;
  color: var(--gold-deep);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.p-home .service-kicker {
  margin-bottom: 9px;
  color: var(--ink-soft);
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.p-home .service-title {
  font-size: clamp(23.8px, 2.4vw, 33.6px);
}

.p-home .service-go {
  min-width: 175px;
  justify-content: space-between;
  padding: 13px 0 11px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.p-home .film-brand {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  column-gap: clamp(21px, 3.6vw, 50.4px);
  align-items: end;
  margin-top: clamp(26.4px, 3.6vw, 43.2px);
  padding: clamp(22.5px, 2.4vw, 30px);
  border: 0;
  border-left: 6px solid var(--gold);
  border-radius: 0;
  color: #fff;
  background: var(--band-4);
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
}

.p-home .film-brand-eyebrow {
  grid-column: 1 / -1;
  color: var(--gold);
}

.p-home .film-brand-name {
  color: #fff;
  font-size: clamp(35.6px, 4.3vw, 54.6px);
  letter-spacing: -0.025em;
}

.p-home .film-brand-note {
  margin: 0 0 7px;
  color: var(--ink-inverse-soft);
}

.p-home .film-brand-note a { color: var(--gold); }

.p-home .b2 {
  position: relative;
  padding-block: clamp(50.4px, 6.6vw, 90px);
  overflow: hidden;
}

.p-home .trust-block {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(27.6px, 4.8vw, 70.8px);
}

.p-home .trust-media {
  position: relative;
  /* .trust-media inherits aspect-ratio: 3/2 from main.css.  Combined with a
     min-height that forces the box wider than its grid column, which made the
     photo overlap the heading.  Height is driven by min-height alone here. */
  aspect-ratio: auto;
  max-width: 100%;
  min-height: 388.8px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), calc(100% - 54px) 100%, 0 100%);
  box-shadow: none;
}

.p-home .trust-media::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 92px;
  height: 6px;
  background: var(--gold);
}

.p-home .trust-media img {
  object-position: center 60%;
  transition: transform 520ms cubic-bezier(0.22, 0.76, 0.28, 1);
}

.p-home .trust-media:hover img { transform: scale(1.025); }

.p-home .stat-callout {
  display: grid;
  grid-template-columns: auto minmax(110px, 1fr);
  padding-block: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.p-home .home-process {
  position: relative;
  color: #fff;
  background:
    linear-gradient(116deg, transparent 0 71%, rgba(244,196,0,0.06) 71% 79%, transparent 79%),
    var(--band-5);
  overflow: hidden;
}

.p-home .home-process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(110px, 17vw, 260px);
  height: 6px;
  background: var(--gold);
}

.p-home .home-process > .wrap { max-width: 1340px; }

.p-home .process-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(24px, 4.2vw, 62.4px);
  align-items: end;
}

.p-home .process-head .eyebrow { color: var(--gold); }
.p-home .process-head p { max-width: 48ch; color: var(--ink-inverse-soft); }

.p-home .process-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28.8px, 4.2vw, 50.4px);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.24);
  list-style: none;
}

.p-home .process-track li {
  position: relative;
  min-height: 172.8px;
  padding: 25.5px clamp(20px, 3vw, 25.2px) 21px 0;
}

.p-home .process-track li + li {
  padding-left: clamp(20px, 3vw, 42px);
  border-left: 1px solid rgba(255,255,255,0.18);
}

.p-home .process-number {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 42px;
  margin-bottom: 28.5px;
  color: #16140c;
  background: var(--gold);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.p-home .process-track h3 {
  font-size: clamp(18px, 1.9vw, 24px);
}

.p-home .process-track p {
  max-width: 33ch;
  margin-top: 14px;
  color: var(--ink-inverse-soft);
  font-size: 14px;
}

.p-home .home-social {
  padding-block: clamp(51.6px, 6.6vw, 88.8px);
}

.p-home .home-social h2 {
  max-width: 11ch;
  font-size: clamp(34px, 3.6vw, 47.1px);
  line-height: 0.95;
}

.p-home .home-social::before {
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--gold) 28%, transparent 28%);
}

.p-home .social-channel[href*="facebook"] .social-channel-name svg,
.p-home .social-channel[href*="instagram"] .social-channel-name svg {
  color: var(--ink);
}

.p-home .work-grid {
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  grid-auto-rows: 160px;
  gap: 12px;
}

.p-home .work-grid li:first-child { grid-row: span 2; }
.p-home .work-grid li:nth-child(3) { grid-row: span 2; }

.p-home .work-grid a {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

.p-home .work-grid img {
  transition: transform 420ms cubic-bezier(0.22, 0.76, 0.28, 1), opacity 220ms ease;
}

.p-home .work-grid a:hover img,
.p-home .work-grid a:focus-visible img {
  opacity: 0.9;
  transform: scale(1.045);
}

.p-home .work-grid-cta {
  margin-top: 26px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--gold);
}

.p-home .home-faq {
  padding-block: clamp(49.2px, 6vw, 79.2px);
  background: var(--band-0);
}

.p-home .home-faq .center-head {
  max-width: 760px;
  margin-left: 0;
  text-align: left;
}

.p-home .home-faq .center-head .eyebrow { justify-content: flex-start; }
.p-home .home-faq .center-head h2 { font-size: clamp(30.8px, 3.1vw, 40.9px); line-height: 0.98; }

.p-home .home-faq .faq-list {
  max-width: 920px;
  margin: 26.4px 0 0 auto;
  border-top: 2px solid var(--ink);
}

.p-home .home-faq .faq-q { padding-inline: 4px; }

.p-home .cta-band {
  padding-block: clamp(42px, 5.4vw, 70.8px);
  background: #fff;
}

.p-home .cta-band .inner {
  position: relative;
  padding: clamp(34.8px, 4.8vw, 57.6px) clamp(26px, 4.2vw, 54px);
  border: 0;
  color: #fff;
  background:
    linear-gradient(118deg, transparent 0 72%, rgba(244,196,0,0.1) 72% 80%, transparent 80%),
    var(--band-4);
  clip-path: polygon(0 0, calc(100% - 58px) 0, 100% 58px, 100% 100%, 58px 100%, 0 calc(100% - 58px));
}

.p-home .cta-band .inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 6px;
  background: var(--gold);
  transform: translateX(-50%);
}

.p-home .cta-band .eyebrow { color: var(--gold); }
.p-home .cta-band h2 { color: #fff; font-size: clamp(30.8px, 3.2vw, 42.2px); }
.p-home .cta-band h2 em { color: var(--gold); }
.p-home .cta-band p,
.p-home .cta-band .cta-note { color: var(--ink-inverse-soft); }
.p-home .cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.42); }

.p-home .service-area {
  position: relative;
  padding-block: clamp(45.6px, 6vw, 75.6px);
  overflow: hidden;
}

.p-home .service-area::after {
  content: 'MOBILE';
  position: absolute;
  right: -0.04em;
  bottom: -0.16em;
  color: rgba(255,255,255,0.035);
  font-family: var(--font-head);
  font-size: clamp(84px, 9.5vw, 135px);
  font-weight: 700;
  line-height: 0.8;
  pointer-events: none;
}

.p-home .availability-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(28.8px, 5.4vw, 76.8px);
  align-items: end;
  max-width: 1240px;
}

.p-home .availability-copy { max-width: 680px; }

.p-home .availability-facts {
  border-top: 1px solid rgba(255,255,255,0.34);
}

.p-home .availability-facts div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.p-home .availability-facts dt {
  color: var(--gold);
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-home .availability-facts dd {
  margin: 0;
  color: #fff;
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.35;
  text-transform: uppercase;
}

@media (max-width: 1040px) {
  .p-home .service-row { grid-template-columns: 58px minmax(0, 1fr); }
  .p-home .service-go { grid-column: 2; width: min(100%, 280px); }
  .p-home .trust-media { min-height: 302.4px; }
}

@media (max-width: 900px) {
  .p-home .film-brand,
  .p-home .process-head,
  .p-home .availability-grid { grid-template-columns: 1fr; }

  .p-home .film-brand-name { margin-bottom: 16px; }
  .p-home .process-track { grid-template-columns: 1fr; }
  .p-home .process-track li { min-height: 0; padding: 22.5px 0; }
  .p-home .process-track li + li { padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); border-left: 0; }
  .p-home .process-number { margin-bottom: 22px; }
  .p-home .work-grid { grid-auto-rows: 140px; }
}

@media (max-width: 760px) {
  .p-home .hero { min-height: 100svh; }
  .p-home .hero-content { padding-top: 0; }
  .p-home .hero-content::before { display: none; }
  .p-home .hero h1 { max-width: 10ch; font-size: clamp(37.3px, 8.1vw, 39.7px); }
  .p-home .proof-item { min-height: 0; }
  .p-home .proof-item::after { display: none; }
  .p-home .service-row { grid-template-columns: 42px minmax(0, 1fr); }
  .p-home .film-brand { padding: 21px 24px 24px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
  .p-home .trust-block { grid-template-columns: 1fr; }
  .p-home .trust-media { min-height: 259.2px; }
  .p-home .cta-band .inner { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }
}

@media (max-width: 560px) {
  .p-home .hero h1 { font-size: clamp(35.7px, 8.4vw, 37.8px); }
  .p-home .hero-actions { align-items: stretch; }
  .p-home .hero-actions .btn { width: 100%; text-align: center; }
  .p-home .fact-strip li::after { display: none; }
  .p-home .section-head h2,
  .p-home .process-head h2,
  .p-home .availability-copy h2 { font-size: clamp(28.9px, 7vw, 32.2px); }
  .p-home .service-row { column-gap: 8px; padding-right: 0; }
  .p-home .service-row:hover,
  .p-home .service-row:focus-visible { padding-left: 8px; }
  .p-home .service-desc { font-size: 14px; }
  .p-home .film-brand { display: block; }
  .p-home .film-brand-eyebrow { margin-bottom: 10px; }
  .p-home .film-brand-name { font-size: 32.2px; }
  .p-home .trust-media { min-height: 208.8px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); }
  .p-home .home-social-grid { gap: 28.8px; }
  .p-home .work-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .p-home .work-grid li:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .p-home .work-grid li:nth-child(3) { grid-row: auto; }
  .p-home .home-faq .center-head h2 { font-size: 29.4px; }
  .p-home .availability-facts div { grid-template-columns: 82px 1fr; }
  .p-home .availability-facts dd { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-home .service-row::after,
  .p-home .trust-media img,
  .p-home .work-grid img { transition: none; }
}

/* The shared navigation is warm and light, while the hero stays cinematic. */
.p-home nav {
  color: var(--ink);
  background: rgba(246, 246, 243, 0.94);
  border-bottom-color: rgba(17, 18, 20, 0.14);
  box-shadow: 0 8px 28px rgba(5, 5, 5, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.p-home nav .logo,
.p-home nav .logo span {
  color: var(--ink);
}

.p-home nav .logo span {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.p-home nav .nav-links a { color: #4d5055; }
.p-home nav .nav-links a:hover,
.p-home nav .nav-links a.active { color: var(--ink); }
.p-home nav .nav-links a.active { box-shadow: inset 0 -2px 0 var(--gold); }
.p-home nav .hamburger span { background: var(--ink); }

@media (max-width: 900px) {
  .p-home nav {
    background: rgba(246, 246, 243, 0.98);
    border-bottom-color: rgba(17, 18, 20, 0.14);
    box-shadow: 0 6px 22px rgba(5, 5, 5, 0.08);
  }
}

/* ---- Home: one real job video, both channels ---- */
.work-reel {
  justify-self: end;
  width: min(100%, 420px);
  background: #111214;
  border: 1px solid rgba(255,255,255,0.25);
  border-top: 1px solid rgba(255,255,255,0.58);
  box-shadow: 0 34px 76px rgba(0,0,0,0.38);
}

.work-reel-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #090a0b;
}

.work-reel-foot { padding: 18px; display: grid; gap: 14px; }

.work-reel-foot p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
}

.work-reel-links { display: grid; gap: 8px; }

.work-reel-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.18s, color 0.18s;
}

.work-reel-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }

.work-reel-btn:hover,
.work-reel-btn:focus-visible { border-color: var(--gold); color: var(--gold); }

@media (max-width: 900px) {
  .work-reel { justify-self: center; width: min(100%, 460px); }
}
/* ---------- Our work gallery (replaces the oversized single reel) ---------- */
.home-work { background: #fff; color: var(--ink); padding-block: clamp(40px, 5vw, 68px); border-top: 1px solid var(--line); }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.work-head .eyebrow { color: var(--gold-deep); }
.work-head h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.01em; }
.work-head p { margin-top: 8px; font-size: 15px; }
.work-follow { display: flex; gap: 10px; flex-wrap: wrap; }
.work-follow-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color .18s, color .18s;
}
.work-follow-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.work-follow-btn:hover, .work-follow-btn:focus-visible { border-color: var(--ink); color: var(--gold-deep); }

.work-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 19vw, 236px);
  gap: 14px; margin-top: 26px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.work-tile { aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #0b0c0d; scroll-snap-align: start; position: relative; }
.work-tile video, .work-tile img { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0c0d; }
.work-tile--more a {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px;
  background: var(--band-5); color: #fff; border-top: 3px solid var(--gold);
}
.work-tile--more svg { width: 30px; height: 30px; color: var(--gold); margin-bottom: auto; }
.work-tile--more strong { font-family: var(--font-head); font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.work-tile--more span { font-size: 13.5px; color: var(--ink-inverse-soft); }
.work-tile--more a:hover span, .work-tile--more a:focus-visible span { color: var(--gold); }
@media (max-width: 560px) {
  .work-strip { grid-auto-columns: 62vw; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); }
}

/* ---------- Home starting prices — big, priced like a menu board ---------- */
.home-prices {
  position: relative; overflow: hidden;
  padding-block: clamp(44px, 5.6vw, 76px);
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,0.035) 58% 64%, transparent 64%),
    radial-gradient(120% 90% at 85% 0%, #1d1f23 0%, #0b0c0d 55%, #050505 100%);
  color: #fff; border-top: 0;
}
.home-prices::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold) 0 26%, #d7dade 26% 27%, rgba(215,218,222,0.4) 60%, transparent);
}
.hp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: end; }
.home-prices .eyebrow { color: var(--gold); }
.hp-head h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); line-height: 0.98; letter-spacing: -0.015em; }
.hp-head h2 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #8f949b 0%, #f4f5f6 30%, #a8adb3 52%, #ffffff 66%, #7b8087 100%); -webkit-background-clip: text; background-clip: text; }
.hp-head p { color: #b9bdc3; font-size: 15px; line-height: 1.6; }

.hp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(26px, 3vw, 40px); }
.hp-card {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "icon idx" "name name" "from from" "price price";
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, #17181b 0%, #0f1012 100%);
  border: 1px solid rgba(255,255,255,0.08);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: transform .2s ease, border-color .2s ease;
}
.hp-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #6f747b, #f3f4f5 35%, #9ca1a8 60%, #e6e8ea 80%, #6f747b);
}
.hp-card:nth-child(2)::before { background: linear-gradient(90deg, #8a6f00, var(--gold) 40%, #fff2b0 55%, var(--gold) 70%, #8a6f00); }
.hp-card:hover { transform: translateY(-3px); border-color: rgba(244,196,0,0.35); }
.hp-icon { grid-area: icon; color: #c9ccd0; width: 92px; }
.hp-icon svg { width: 100%; height: auto; display: block; }
.hp-idx { grid-area: idx; font-family: var(--font-head); font-size: 12px; letter-spacing: 0.18em; color: #5d6168; }
.hp-name { grid-area: name; margin-top: 16px; font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.hp-from { grid-area: from; margin-top: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8e939a; }
.hp-price {
  grid-area: price; display: flex; align-items: flex-start;
  font-family: var(--font-head); font-weight: 700; line-height: 0.9; letter-spacing: -0.02em;
  font-size: clamp(64px, 7.4vw, 104px); color: var(--gold); font-variant-numeric: lining-nums;
}
.hp-price sup { font-size: 0.42em; margin: 0.12em 0.04em 0 0; line-height: 1; color: #f7dc66; }

.hp-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(22px, 2.6vw, 32px); }
.hp-text { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: #e6e8ea; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.25); }
.hp-text:hover, .hp-text:focus-visible { color: var(--gold); border-color: var(--gold); }

@media (max-width: 900px) {
  .hp-head { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 760px) {
  .hp-cards { grid-template-columns: 1fr; }
  .hp-card { grid-template-columns: auto 1fr auto; grid-template-areas: "icon name price" "icon from price"; align-items: center; column-gap: 16px; padding: 16px 18px; }
  .hp-icon { width: 64px; }
  .hp-idx { display: none; }
  .hp-name { margin-top: 0; align-self: end; font-size: 14px; }
  .hp-from { margin-top: 2px; align-self: start; font-size: 11px; }
  .hp-price { font-size: 52px; align-self: center; }
  .hp-actions .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .hp-card { transition: none; } }

/* ---------- Price cards with photos ---------- */
.hp-card { grid-template-columns: 1fr auto; grid-template-areas: "photo photo" "name idx" "from from" "price price"; padding: 0 0 20px; }
.hp-photo {
  grid-area: photo; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 4px;
  background: #0b0c0d;
}
.hp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); transition: transform .5s ease; }
.hp-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,16,18,0) 45%, rgba(15,16,18,0.92) 100%); }
.hp-card:hover .hp-photo img { transform: scale(1.04); }
.hp-card .hp-name, .hp-card .hp-from, .hp-card .hp-price { padding-inline: 24px; }
.hp-card .hp-idx { padding-right: 24px; align-self: center; margin-top: 14px; }
.hp-card::before { z-index: 2; }
@media (max-width: 760px) {
  .hp-card { grid-template-columns: 112px 1fr auto; grid-template-areas: "photo name price" "photo from price"; padding: 0; align-items: center; column-gap: 14px; }
  .hp-photo { aspect-ratio: auto; height: 100%; min-height: 86px; margin: 0; }
  .hp-photo::after { background: linear-gradient(90deg, rgba(15,16,18,0) 55%, rgba(15,16,18,0.9) 100%); }
  .hp-card .hp-name, .hp-card .hp-from { padding-inline: 0; }
  .hp-card .hp-price { padding: 0 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .hp-photo img { transition: none; } }

/* ---------- Services: two photo cards (replaces the long service list) ---------- */
.p-home .home-services { padding-block: clamp(36px, 4.4vw, 60px); }
.p-home .home-services::before, .p-home .home-services::after { content: none !important; }
.svc-head { max-width: 760px; }
.p-home .svc-head h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.01em; }
.svc-head p { margin-top: 6px; font-size: 15px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(20px, 2.4vw, 28px); }
.svc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.svc-card:hover, .svc-card:focus-visible { border-color: #11131755; box-shadow: 0 12px 28px rgba(17,19,23,0.10); }
.svc-photo { margin: 0; aspect-ratio: 2.1 / 1; overflow: hidden; background: #111214; border-bottom: 3px solid var(--gold); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.svc-card:hover .svc-photo img { transform: scale(1.03); }
.svc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-kicker { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.svc-body h3 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.1; }
.svc-body > p:not(.svc-kicker) { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.svc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.svc-meta li { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--band-0); }
.svc-meta li:first-child { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.svc-go { margin-top: auto; padding-top: 8px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; }
.svc-card:hover .svc-go { color: var(--gold-deep); }
@media (max-width: 760px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-photo { aspect-ratio: 2 / 1; }
  .svc-body { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .svc-photo img { transition: none; } }

/* Our work: fit all tiles in one row on wide screens; swipe on smaller ones */
@media (min-width: 1000px) {
  .work-strip { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 12px; }
}

/* Our work — bigger tiles + follow/contact panel */
.home-work > .wrap { max-width: 1440px; }
@media (min-width: 1000px) {
  .work-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
}
.work-cta {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px 16px;
  background: linear-gradient(180deg, #17181b 0%, #050505 100%); color: #fff; border-top: 3px solid var(--gold);
}
.work-cta-kicker { font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-top: auto; }
.work-cta-title { font-family: var(--font-head); font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; line-height: 1; text-transform: uppercase; margin-bottom: 6px; }
.work-cta-btn {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.22); color: #fff; background: rgba(255,255,255,0.04);
  font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.work-cta-btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.work-cta-btn:hover, .work-cta-btn:focus-visible { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.work-cta-btn--ig { background: var(--gold); border-color: var(--gold); color: #16140c; }
.work-cta-btn--ig:hover, .work-cta-btn--ig:focus-visible { background: var(--gold-hover); color: #16140c; }
.work-cta-btn--contact { border-color: #d7dade; }
@media (prefers-reduced-motion: reduce) { .work-cta-btn { transition: none; } }

.work-cta-row { display: none; }
@media (max-width: 999px) {
  .work-strip .work-cta { display: none; }
  .work-cta-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .work-cta-row .work-cta-btn { justify-content: center; background: var(--ink); border-color: var(--ink); font-size: 13px; padding: 12px 8px; gap: 7px; }
  .work-cta-row .work-cta-btn--ig { background: var(--gold); border-color: var(--gold); color: #16140c; }
  .work-cta-row .work-cta-btn--contact { background: #fff; color: var(--ink); border-color: var(--ink); }
}
@media (max-width: 420px) { .work-cta-row .work-cta-btn svg { display: none; } }

/* ---------- Home prices — light autumn (October) look ---------- */
.home-prices {
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(248,243,236,0.55) 0%, rgba(248,243,236,0) 30%),
    url("../img/autumn-bg.webp") center / cover no-repeat,
    #efe8df;
}
.home-prices::before { background: linear-gradient(90deg, #b45309 0 26%, #e0a526 26% 52%, rgba(194,65,12,0.35) 80%, transparent); }
.home-prices .eyebrow { color: #9a3412; }
.home-prices .eyebrow::before { background: #9a3412; }
.hp-head h2 { color: #1c1410; }
.hp-head h2 em { background: linear-gradient(100deg, #9a3412 0%, #c2410c 35%, #d97706 65%, #b45309 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-head p { color: #5b4636; }
.hp-card { box-shadow: 0 18px 40px rgba(124, 45, 18, 0.18); border-color: rgba(0,0,0,0.35); }
.hp-actions .hp-text { color: #3b2a1f; border-color: rgba(59,42,31,0.35); }
.hp-actions .hp-text:hover, .hp-actions .hp-text:focus-visible { color: #9a3412; border-color: #9a3412; }

/* ---------- Home: teaser that sends visitors to the October special on the Tinting page ---------- */
.hero-special {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 7px 18px 7px 7px; border: 1.5px solid #ff7a1a; border-radius: 999px;
  background: rgba(20,10,2,0.6); color: #fff; font-size: 15px; font-weight: 500;
  box-shadow: 0 0 22px rgba(255,122,26,0.45); transition: transform .2s ease, background .2s ease;
  animation: hs-glow 2.4s ease-in-out infinite;
}
.hero-special .hs-tag { background: #ff7a1a; color: #160b02; border-radius: 999px; padding: 6px 12px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.hero-special .hs-text b { color: #ff9a3d; font-weight: 700; }
.hero-special .hs-arrow { display: inline-flex; color: #ff7a1a; font-size: 20px; line-height: 1; animation: hs-nudge 1.2s ease-in-out infinite; }
.hero-special:hover, .hero-special:focus-visible { background: rgba(255,122,26,0.18); transform: translateY(-2px); }
@keyframes hs-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes hs-glow { 0%,100% { box-shadow: 0 0 14px rgba(255,122,26,0.35); } 50% { box-shadow: 0 0 30px rgba(255,122,26,0.75); } }
@media (max-width: 560px) { .hero-special { font-size: 13.5px; gap: 9px; padding-right: 14px; } .hero-special .hs-tag { font-size: 11.5px; padding: 5px 9px; } }
@media (prefers-reduced-motion: reduce) { .hero-special, .hero-special .hs-arrow { animation: none; transition: none; } }

/* Work gallery: 3 clips (Tesla, BMW, F-150) + the follow tile */
@media (min-width: 1000px) {
  .work-strip { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}