/* vars: --c-accent,--c-accent2,--c-bg,--c-dark,--c-ink,--c-ink-faint,--c-ink-ghost,--c-ink-mid,--c-surface,--f-cond,--f-sans,--f-serif,--nav-h,--panel-accent,--panel-accent-fade */
/* Obstacle/truck-panel (truck-panel theme) */
.obstacle {
  min-height: 220vh; position: relative; z-index: 3;
  view-timeline-name: --obstacle-tl; view-timeline-axis: block;
}
@media (max-width: 1024px) { .obstacle { min-height: 90vh; } }
.obstacle__pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 0 clamp(16px, 4vw, 60px) 20vh;
}
@media (max-width: 1024px) {
  .obstacle__pin { position: static; height: auto; padding: 0; }
}
.truck-panel {
  position: relative; max-width: 460px; width: 100%;
  transform-origin: 50% 50%; will-change: transform, opacity, filter;
}
@media (max-width: 1024px) { .truck-panel { max-width: 520px; } }
@supports (animation-timeline: view()) {
  .truck-panel {
    animation: panel-cycle linear both;
    animation-timeline: --obstacle-tl;
    animation-range: cover 0% cover 100%;
  }
  .obstacle--left .truck-panel { animation-name: panel-cycle-left; }
}
@supports not (animation-timeline: --obstacle-tl) {
  .truck-panel {
    transform: translate(0, -30vh) scale(0.2);
    opacity: 0; filter: blur(8px);
    transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .55s ease-out, filter .6s ease-out;
  }
  .truck-panel.is-approaching {
    transform: translate(11vw, 0) scale(1); opacity: 1; filter: blur(0);
  }
  .obstacle--left .truck-panel.is-approaching {
    transform: translate(-11vw, 0) scale(1);
  }
}
@keyframes panel-cycle {
  0%,26%   { transform: translate(0,-30vh) scale(.2); opacity:0; filter:blur(8px); }
  38%      { transform: translate(7vw,-12vh) scale(.55); opacity:.7; filter:blur(3px); }
  48%,62%  { transform: translate(11vw,0) scale(1); opacity:1; filter:blur(0); }
  74%      { transform: translate(11vw,5vh) scale(.92); opacity:.55; filter:blur(2px); }
  86%,100% { transform: translate(11vw,12vh) scale(.6); opacity:0; filter:blur(5px); }
}
@keyframes panel-cycle-left {
  0%,26%   { transform: translate(0,-30vh) scale(.2); opacity:0; filter:blur(8px); }
  38%      { transform: translate(-7vw,-12vh) scale(.55); opacity:.7; filter:blur(3px); }
  48%,62%  { transform: translate(-11vw,0) scale(1); opacity:1; filter:blur(0); }
  74%      { transform: translate(-11vw,5vh) scale(.92); opacity:.55; filter:blur(2px); }
  86%,100% { transform: translate(-11vw,12vh) scale(.6); opacity:0; filter:blur(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .truck-panel { animation: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }
}
@media (max-width: 1024px) {
  .truck-panel, .obstacle--left .truck-panel {
    position: fixed !important; top: 50% !important; left: 50% !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
    width: calc(100vw - 32px) !important;
    animation: none !important;
    transform: translate(-50%,-50%) scale(.75) !important;
    opacity: 0 !important; filter: blur(4px) !important;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease-out, filter .3s ease-out !important;
    z-index: 5; pointer-events: none;
  }
  .truck-panel.is-approaching, .obstacle--left .truck-panel.is-approaching {
    transform: translate(-50%,-50%) scale(1) !important;
    opacity: 1 !important; filter: blur(0) !important; pointer-events: auto;
  }
}
.truck-panel__body {
  background: var(--c-surface); border: 1px solid var(--c-ink-ghost);
  position: relative; overflow: hidden;
}
.truck-panel__body.is-red {
  --panel-accent: var(--c-accent2);
  --panel-accent-fade: rgba(232,32,32,.06);
}
.truck-panel__body.is-red .truck-panel__ad { border-left: 3px solid var(--panel-accent); }
.truck-panel__body.is-red .truck-panel__num { color: var(--panel-accent-fade); }
.truck-panel__body.is-red .truck-panel__stripe,
.truck-panel__body.is-red .truck-panel__btn { background: var(--panel-accent); }
.truck-panel__body.is-red .truck-panel__tag,
.truck-panel__body.is-red .truck-panel__phone,
.truck-panel__body.is-red .truck-panel__title em { color: var(--panel-accent); }
.truck-panel__body.is-red .truck-panel__tag::before { background: var(--panel-accent); }
.truck-panel__lights {
  display: flex; justify-content: space-between; padding: 0 12px; height: 8px; background: #1A1714;
}
.truck-panel__lights::before, .truck-panel__lights::after {
  content: ''; width: 48px; height: 6px; margin-top: 1px; border-radius: 1px;
}
.truck-panel__lights::before { background: var(--c-accent2); }
.truck-panel__lights::after { background: var(--c-accent); }
.truck-panel__ad { padding: clamp(28px, 4vw, 48px); position: relative; }
.truck-panel__stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c-accent);
}
.truck-panel__tag {
  font-family: var(--f-cond); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase; color: var(--c-accent);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.truck-panel__tag::before { display: none; }
.truck-panel__title {
  font-family: var(--f-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: .86; text-transform: uppercase; margin-bottom: 16px;
}
.truck-panel__title em { color: var(--c-accent); font-style: normal; }
.truck-panel__desc {
  font-size: clamp(1rem, 1.6vw, 1.1875rem); font-weight: 400;
  line-height: 1.7; color: var(--c-ink-mid); max-width: 440px; margin-bottom: 28px;
  text-align: justify;
}
.truck-panel__features {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; max-width: 440px;
}
.truck-panel__features li {
  font-family: var(--f-cond); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--c-ink);
  background: var(--c-dark); border: 1px solid var(--c-ink-ghost); padding: 8px 12px;
  text-align: center; display: flex; align-items: center; justify-content: center;
  flex: 1 1 calc(33.333% - 6px); min-width: 0; box-sizing: border-box;
}
.truck-panel__features li:nth-last-child(4):first-child,
.truck-panel__features li:nth-last-child(4):first-child ~ li { flex-basis: calc(50% - 4px); }
.truck-panel__btn {
  font-family: var(--f-sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; background: var(--c-accent); color: var(--c-bg);
  padding: 10px 28px; border: none; cursor: pointer; display: block;
  text-decoration: none; transition: background .2s; text-align: center; max-width: 440px;
}
.truck-panel__btn:hover { background: #ffad2a; }
.truck-panel__footer {
  padding: 10px clamp(28px, 4vw, 48px); background: var(--c-dark);
  border-top: 1px solid var(--c-ink-ghost);
  display: flex; justify-content: space-between; align-items: center;
}
.truck-panel__brand {
  font-family: var(--f-serif); font-size: 1rem; letter-spacing: 4px; color: var(--c-ink-faint);
}
.truck-panel__brand em { color: var(--c-accent); font-style: normal; }
.truck-panel__phone {
  font-family: var(--f-cond); font-size: 1rem; font-weight: 700; letter-spacing: 1px; color: var(--c-ink);
}
.truck-panel__mud { display: flex; justify-content: space-between; padding: 0 20px; }
.truck-panel__mud span {
  display: block; width: 50px; height: 18px; background: var(--c-dark);
  border: 1px solid var(--c-ink-ghost); border-top: none; border-radius: 0 0 4px 4px;
}

/* Svc-tile grid (tile theme) */
.svc-fullpage {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1fr;
  height: 100vh; width: 100%;
  padding-top: var(--nav-h); box-sizing: border-box;
  overflow: hidden;
}
.svc-tile:nth-child(-n+5) { grid-column: span 3; }
.svc-tile:nth-child(n+6) { grid-column: span 4; }
.svc-tile {
  display: grid; grid-template-rows: auto auto auto auto auto;
  justify-items: center; align-content: space-evenly;
  text-align: center; text-decoration: none; color: inherit;
  padding: 2rem 1.5rem; border: 1px solid var(--c-ink-ghost);
  overflow: hidden; margin: -0.5px;
  position: relative; transition: background .3s; background: var(--c-bg);
}
.svc-tile:nth-child(even) { background: var(--c-dark); }
.svc-tile:hover { background: rgba(245, 154, 0, 0.05); }
.svc-tile[data-variant="red"] { background: linear-gradient(135deg, #1a0505 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="red"]:hover { background: linear-gradient(135deg, #2a0808 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="blue"] { background: linear-gradient(135deg, #050a1a 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="blue"]:hover { background: linear-gradient(135deg, #081230 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="green"] { background: linear-gradient(135deg, #051a0a 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="green"]:hover { background: linear-gradient(135deg, #083012 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="gold"] { background: linear-gradient(135deg, #1a1505 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="gold"]:hover { background: linear-gradient(135deg, #302808 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="purple"] { background: linear-gradient(135deg, #120518 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="purple"]:hover { background: linear-gradient(135deg, #1e0830 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="teal"] { background: linear-gradient(135deg, #051518 0%, var(--c-bg) 100%); }
.svc-tile[data-variant="teal"]:hover { background: linear-gradient(135deg, #082830 0%, var(--c-bg) 100%); }
.svc-tile__number { font-family: var(--f-serif); font-size: 2.5rem; color: var(--c-ink-ghost); line-height: 1; margin-bottom: .75rem; opacity: .3; }
.svc-tile__icon { font-size: 2rem; color: var(--c-accent); margin-bottom: 1rem; }
.svc-tile__title {
  font-family: var(--f-serif); font-size: clamp(1.25rem, 2vw, 1.75rem);
  letter-spacing: .04em; line-height: 1.1; margin-bottom: .75rem;
}
.svc-tile__title em { color: var(--c-accent); font-style: normal; display: block; }
.svc-tile__desc { font-size: .875rem; color: var(--c-ink-mid); line-height: 1.5; max-width: 360px; margin-bottom: 1.25rem; align-self: start; }
.svc-tile__features { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-bottom: 1.25rem; }
.svc-tile__tag {
  font-size: 0.875rem; font-weight: 600; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 4px;
  background: rgba(245,154,0,.1); color: var(--c-accent); letter-spacing: .04em;
}
.svc-tile__cta {
  display: inline-block; font-family: var(--f-cond); font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-bg); background: var(--c-accent);
  padding: .65rem 1.75rem; border-radius: 4px; transition: background .2s;
}
.svc-tile:hover .svc-tile__cta { background: #ffad2a; }
@media (max-width: 1100px) {
  .svc-fullpage { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; min-height: auto; height: auto; overflow: visible; }
  .svc-tile:nth-child(-n+4), .svc-tile:nth-child(n+5) { grid-column: span 1; }
  .svc-tile { min-height: 40vh; }
}
@media (max-width: 600px) {
  .svc-fullpage { grid-template-columns: 1fr; }
  .svc-tile { min-height: auto; padding: 1.75rem 1.25rem; }
  .svc-tile__number { margin-bottom: .25rem; font-size: 1.75rem; }
  .svc-tile__icon { margin-bottom: .5rem; font-size: 1.5rem; }
  .svc-tile__title { margin-bottom: .4rem; }
  .svc-tile__desc { margin-bottom: .75rem; }
  .svc-tile__features { margin-bottom: .75rem; }
}