/* JimGO Taxis: all services hub. Surfaces square, buttons pill (design-plan.md). */

/* ---------- opener: rolling headline beside a fanned hand of service photos ---------- */
.svo { position: relative; min-height: max(560px, 70svh); padding: calc(var(--head-h) + clamp(14px, 3vh, 40px)) 0 clamp(40px, 6.5vh, 70px); display: flex; align-items: center; overflow: clip; isolation: isolate; background: radial-gradient(70% 90% at 82% 46%, rgba(232, 169, 65, .13), transparent 62%), var(--tarmac); }
.svo-rings { position: absolute; z-index: -1; right: -16vw; top: -10vh; width: 80vw; height: 130%; pointer-events: none; background: repeating-radial-gradient(circle at 60% 52%, rgba(251, 229, 193, .05) 0 2px, transparent 2px 54px); animation: svo-rings 26s ease-in-out infinite alternate; }
@keyframes svo-rings { to { transform: translate(-4vw, 2vh) scale(1.08); } }
.svo-in { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.svo-h1 { font-size: clamp(2.5rem, 4vw, 4.1rem); line-height: 1.02; margin-bottom: .36em; display: flow-root; }
/* masks reach out to the left only, so the heading never grows wider than its own box */
.svo-m, .svo-slot { display: block; margin: 0 0 -.7em -.15em; padding: .2em .15em .5em; }
.svo-m { overflow: clip; }
.svo-m:first-child { margin-top: -.2em; }
.svo-m:last-child { margin-bottom: -.5em; }
/* the slot masks with clip-path, so only one word ever sits inside it at rest */
.svo-slot { position: relative; display: grid; clip-path: inset(.17em -.2em .4em -.2em); }
.svo-slot > .svo-w { grid-area: 1 / 1; }
.svo-w.is-parked { visibility: hidden; }
.svo-l { display: block; white-space: nowrap; }
.svo-w { will-change: transform; }
.svo .lede { margin-bottom: 1.4em; }
.svo-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; color: var(--fog); font-size: .98rem; }
.svo-trust li { display: flex; align-items: center; gap: 8px; }
.svo-trust .ic { color: var(--amber); }
.svo-road { position: absolute; left: 0; right: 0; bottom: 0; }

/* the fan: four photo prints dealt from one pivot */
.svo-fan-wrap { position: relative; height: clamp(340px, 50vh, 480px); perspective: 1400px; }
.svo-fan { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.fan-card { --cw: clamp(220px, 23vw, 350px); position: absolute; left: 50%; top: 50%; width: var(--cw); margin: calc(var(--cw) * -.36) 0 0 calc(var(--cw) * -.5); padding: 7px 7px 0; background: var(--paper); box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .85), 0 2px 0 rgba(0, 0, 0, .25); transform-origin: 50% 135%; will-change: transform; }
/* 16:10, sized from the card width (the prints are rotated, so the box is measured from --cw, not its rotated bounds) */
.fan-img { position: relative; overflow: hidden; height: calc((var(--cw) - 2 * var(--fp, 7px)) * .625); background: var(--asphalt); }
.fan-img img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; transform: scale(1.12); will-change: transform; }
.fan-card figcaption { display: flex; align-items: center; min-height: 46px; padding: 0 6px; font: 700 1.05rem/1.1 var(--display); font-stretch: 90%; color: var(--ink); transition: color .4s; }
.fan-card figcaption::before { content: ''; width: 10px; height: 10px; margin-right: 10px; background: var(--kerb); transition: background-color .4s, transform .4s var(--ease); flex: none; }
.fan-card.is-front figcaption::before { background: var(--amber); transform: rotate(45deg); }
/* fanned (no JS, reduced motion, and the end of the deal) */
.fc-0 { z-index: 4; transform: translate(-2%, 2%) rotate(-3deg); }
.fc-1 { z-index: 3; transform: translate(12%, -4%) rotate(6deg); }
.fc-2 { z-index: 2; transform: translate(-14%, -6%) rotate(-10deg); }
.fc-3 { z-index: 1; transform: translate(21%, 3%) rotate(13deg); }
/* dealt from a single stack once JS takes over */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reveal-all) .fan-card { transform: rotate(0deg) scale(.9); }
  html.js:not(.reveal-all) .svo-h1 .svo-l { transform: translateY(140%); }
}

/* ---------- set piece: every service, filtered with Flip ---------- */
.svg-sec { overflow: clip; padding-top: clamp(72px, 10vh, 120px); }
.sv-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 26px; }
.sv-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--asphalt); border-radius: 999px; isolation: isolate; }
.sv-chip { position: relative; z-index: 1; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--cream); font-weight: 600; font-size: 1rem; cursor: pointer; transition: color .35s; }
.sv-chip:hover { color: var(--amber); }
.sv-chip.is-on { color: var(--ink); }
.sv-chip-glow { position: absolute; z-index: 0; left: 0; top: 6px; height: 46px; width: 0; border-radius: 999px; background: var(--amber); box-shadow: 0 8px 26px -10px rgba(232, 169, 65, .8); pointer-events: none; }
.no-js .sv-bar, .reveal-all .sv-chips { display: none; }
html:not(.js) .sv-chip.is-on, .sv-chips:not(.is-live) .sv-chip.is-on { background: var(--amber); }
.sv-count { margin: 0; color: var(--fog); }

.sv-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(186px, 23vh, 214px), auto); grid-auto-flow: row dense; gap: 16px; }
.tile { display: flex; min-width: 0; }
.tile.has-img { grid-row: span 2; }
.tile.is-wide { grid-column: span 2; }
.tile-in { position: relative; display: flex; flex-direction: column; width: 100%; background: var(--asphalt); color: var(--text); text-decoration: none; overflow: hidden; isolation: isolate; transform-style: preserve-3d; transition: background-color .35s; }
.tile-in::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.tile-in:hover, .tile-in:focus-visible { background: var(--asphalt-2); }
.tile-in:hover::after, .tile-in:focus-visible::after { transform: scaleX(1); }
.tile-img { position: relative; display: block; height: 50%; min-height: 150px; overflow: hidden; background: #24231F; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0%)) scale(calc(1.12 * var(--z, 1))); transition: transform 1.2s var(--ease); }
.tile-in:hover .tile-img img { transform: translateY(var(--py, 0%)) scale(calc(1.2 * var(--z, 1))); }
.tile-body { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 22px 22px 16px; }
.tile-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border: 2px solid rgba(232, 169, 65, .6); color: var(--amber); background: var(--tarmac); transition: background-color .35s, color .35s; }
.tile-ic .ic { width: 24px; height: 24px; }
.has-img .tile-ic { position: absolute; right: 20px; top: -23px; margin: 0; }
.tile-in:hover .tile-ic { background: var(--amber); color: var(--ink); }
.tile-t { display: block; font: 760 clamp(1.25rem, 1.5vw, 1.45rem)/1.12 var(--display); font-stretch: 90%; color: var(--cream); }
.has-img .tile-t { font-size: clamp(1.4rem, 1.8vw, 1.75rem); padding-right: 52px; }
.tile-l { display: block; color: var(--fog); font-size: .98rem; line-height: 1.5; }
.tile-go { display: inline-flex; align-items: center; gap: .5em; margin-top: auto; padding-top: 8px; color: var(--amber); font-weight: 600; font-size: .98rem; }
.tile-go .ic { transition: transform .35s var(--ease); }
.tile-in:hover .tile-go .ic { transform: translateX(6px); }
.tile:not(.has-img) .tile-in { background: repeating-radial-gradient(circle at 108% 112%, rgba(251, 229, 193, .045) 0 1.5px, transparent 1.5px 26px) 0 0 / 100% 100% no-repeat, var(--asphalt); animation: tile-rings 14s ease-in-out infinite alternate; }
.tile:not(.has-img) .tile-in:hover { background-color: var(--asphalt-2); }
@keyframes tile-rings { to { background-size: 118% 118%; } }
.tile.is-wide .tile-in { background: linear-gradient(120deg, rgba(232, 169, 65, .16), rgba(232, 169, 65, 0) 60%), var(--asphalt); }
.tile.is-wide .tile-body { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; align-content: start; }
.tile.is-wide .tile-ic { grid-row: span 3; }
.tile.is-wide .tile-t { font-size: clamp(1.4rem, 1.8vw, 1.75rem); }

/* ---------- the four main services: a sticky photo stage beside the rows (static rows without it) ---------- */
.feat { overflow: clip; }
.feat-stage { display: none; }
.feat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; padding-block: clamp(24px, 4.5vh, 52px); }
.feat-row.is-flip .feat-photo { order: 2; }
.feat-photo .frame-img { height: min(60vh, 520px); max-height: none; }
.feat-t { font-size: clamp(1.7rem, 2.4vw, 2.15rem); line-height: 1.08; margin-bottom: .45em; transition: color .5s; }
.feat-copy p { color: var(--text); font-size: 1.06rem; }
.feat-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 24px; }
.feat-facts li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px; border: 1px solid rgba(232, 169, 65, .45); color: var(--cream); font-size: .95rem; font-weight: 500; }
.feat-facts li::before { content: ''; width: 8px; height: 8px; background: var(--amber); transform: rotate(45deg); flex: none; }
.feat-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }

.feat.is-live .feat-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.feat.is-live .feat-stage { display: block; position: sticky; top: calc(82px + max(3vh, 18px)); height: min(calc(100svh - 82px - max(6vh, 36px)), 700px); }
.feat.is-live .feat-photo { display: none; }
.feat.is-live .feat-row { display: flex; align-items: center; min-height: min(80svh, 720px); padding-block: 40px; }
.feat.is-live .feat-row:first-child { min-height: min(70svh, 640px); align-items: flex-start; padding-top: 6vh; }
.feat.is-live .feat-copy { position: relative; padding-left: 30px; }
.feat.is-live .feat-copy::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: rgba(251, 229, 193, .12); }
.feat.is-live .feat-copy::after { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--amber); transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s var(--ease); }
.feat.is-live .feat-row.is-on .feat-copy::after { transform: scaleY(1); }
.feat.is-live .feat-row:not(.is-on) .feat-t { color: rgba(251, 229, 193, .62); }
.feat.is-live .feat-row.is-on .feat-t { color: var(--amber); }
.feat-frame { position: relative; height: 100%; overflow: hidden; background: var(--asphalt); }
.feat-frame::before { content: ''; position: absolute; inset: 14px; z-index: 3; border: 1px solid rgba(251, 229, 193, .28); pointer-events: none; }
.feat-pic { position: absolute; inset: 0; overflow: hidden; }
.feat-pic + .feat-pic { clip-path: inset(0 100% 0 0); }
.feat-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform; }
.feat-cap { position: absolute; z-index: 4; left: 14px; bottom: 14px; display: flex; align-items: baseline; gap: 18px; padding: 14px 20px 15px; background: rgba(18, 17, 16, .9); border-left: 4px solid var(--amber); }
.feat-cap b { font: 760 1.35rem/1.1 var(--display); font-stretch: 90%; color: var(--cream); }
.feat-cap span { color: var(--fog); font-size: .95rem; white-space: nowrap; }
.feat-cap i { font-style: normal; color: var(--amber); font-weight: 600; }
.feat-bar { position: absolute; z-index: 4; right: 14px; top: 14px; bottom: 14px; width: 4px; background: rgba(251, 229, 193, .16); }
.feat-bar i { position: absolute; inset: 0; background: var(--amber); transform: scaleY(0); transform-origin: 50% 0; }

/* ---------- the car, pointed out on the client's photo ---------- */
.car { overflow: clip; padding-block: clamp(70px, 9vh, 120px); background: radial-gradient(60% 50% at 50% 60%, rgba(232, 169, 65, .07), transparent 70%), linear-gradient(180deg, var(--tarmac), #191816); }
.car .sec-head { margin-bottom: clamp(24px, 3.4vh, 40px); }
.car-stage { position: relative; }
.car-photo { position: relative; width: min(100%, calc(min(54vh, 560px) * 1.755)); margin: 0 auto; }
.car-lines .cl-halo { stroke: rgba(18, 17, 16, .55); stroke-width: 6; }
.car-img { position: relative; overflow: hidden; aspect-ratio: 1536 / 875; background: var(--asphalt); }
.car-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); will-change: transform; }
.car-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 38%, rgba(251, 229, 193, .2) 48%, transparent 58%) no-repeat; background-size: 220% 100%; background-position: 140% 0; }
.car-photo::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(251, 229, 193, .3); pointer-events: none; }
.car-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.car-lines path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.car-lines .cl-run { stroke: #FFF4DA; stroke-width: 2.4; stroke-dasharray: 10 300; opacity: .9; }
.car-spec { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(34px, 6vh, 60px); }
.car-spec li { display: grid; gap: 4px; padding: 16px 20px 18px; background: var(--asphalt); border-top: 3px solid var(--amber); }
.car-spec b { font: 760 1.25rem/1.15 var(--display); font-stretch: 90%; color: var(--cream); }
.car-spec span { color: var(--fog); font-size: .96rem; line-height: 1.45; }

/* ---------- planner teaser ---------- */
.sv-plan { overflow: clip; isolation: isolate; }
.sv-plan::before { content: ''; position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 70%; height: 120%; pointer-events: none; background: repeating-radial-gradient(circle at 20% 80%, rgba(29, 28, 26, .06) 0 1.5px, transparent 1.5px 40px); animation: svo-rings 22s ease-in-out infinite alternate; }
.sv-plan-more { margin: 26px 0 0; }
.sv-plan-more .text-link { color: #8A5A0E; }

@media (prefers-reduced-motion: reduce) {
  .svo-rings, .tile:not(.has-img) .tile-in, .sv-plan::before { animation: none; }
}

@media (max-width: 1080px) {
  .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .svo { display: block; min-height: 0; }
  .svo-in { grid-template-columns: minmax(0, 1fr); }
  .svo-fan-wrap { height: clamp(300px, 46vh, 400px); }
  .fan-card { --cw: min(66vw, 380px); }
  .feat-row, .feat-row.is-flip { grid-template-columns: 1fr; gap: 26px; }
  .feat-row.is-flip .feat-photo { order: 0; }
}
@media (max-width: 760px) {
  .svo-h1 { font-size: clamp(2.2rem, 10.4vw, 2.9rem); }
  .svo-m .svo-l { white-space: normal; }
  .svo .lede { font-size: 1.02rem; }
  .svo-trust { gap: 6px 18px; font-size: .95rem; margin-top: 18px; }
  .svo-fan-wrap { height: 290px; margin-top: 8px; }
  .fan-card { --cw: 58vw; --fp: 5px; padding: 5px 5px 0; }
  .fc-0 { transform: translate(-1%, 2%) rotate(-2deg); }
  .fc-1 { transform: translate(6%, -4%) rotate(4deg); }
  .fc-2 { transform: translate(-7%, -6%) rotate(-7deg); }
  .fc-3 { transform: translate(10%, 3%) rotate(9deg); }
  .fan-card figcaption { min-height: 38px; font-size: .95rem; }
  .sv-chips { border-radius: 30px; }
  .sv-chip { padding: 0 16px; font-size: .96rem; }
  .sv-grid { gap: 12px; grid-auto-rows: minmax(150px, auto); }
  .tile.has-img { grid-column: span 2; grid-row: span 2; }
  .tile.is-wide .tile-body { display: flex; }
  .tile-body { padding: 16px 14px 12px; }
  .tile-t { font-size: 1.12rem; }
  .has-img .tile-t { font-size: 1.35rem; }
  .tile-l { font-size: .92rem; }
  .tile-go { font-size: .92rem; }
  .tile-ic { width: 40px; height: 40px; }
  .has-img .tile-ic { top: -20px; right: 14px; }
  .feat-photo .frame-img { height: min(46vh, 340px); }
  .car-spec { grid-template-columns: 1fr; gap: 12px; }
  .car-lines { display: none; }
  .car-photo::after { inset: 8px; }
}