/* JimGO Taxis: service page template (train, castle, local). Surfaces square, buttons pill. */

/* ---------- opener: copy left, the service photo right with the page's device over it ---------- */
.so { position: relative; min-height: max(560px, 78svh); padding-top: var(--head-h); display: flex; flex-direction: column; justify-content: center; overflow: clip; background: var(--tarmac); isolation: isolate; }
.so::before { content: ''; position: absolute; left: -20vw; top: -20vh; width: 80vw; height: 120%; pointer-events: none; z-index: -1; background: repeating-radial-gradient(ellipse at 30% 60%, rgba(251, 229, 193, .045) 0 2px, transparent 2px 46px); animation: so-rings 30s ease-in-out infinite alternate; }
@keyframes so-rings { to { transform: translate(5vw, 3vh) scale(1.1); } }
.so-in { position: relative; z-index: 2; pointer-events: none; padding-block: clamp(18px, 3.4vh, 44px) clamp(22px, 4vh, 48px); }
.so-in > * { pointer-events: auto; }
.so-copy { width: calc(50vw - max(var(--gut), (100vw - 1320px) / 2) - 52px); }
.so .h1 { font-size: clamp(2.2rem, 3.45vw, 3.5rem); margin-bottom: .34em; }
.so .lede { margin-bottom: 1.4em; }
.so-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: clamp(20px, 3.4vh, 34px); border-top: 1px solid rgba(251, 229, 193, .12); }
.so-facts li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(251, 229, 193, .12); color: var(--fog); font-size: .95rem; line-height: 1.35; }
.so-facts .ic { width: 40px; height: 40px; padding: 9px; border: 2px solid rgba(232, 169, 65, .55); color: var(--amber); }
.so-facts b { display: block; color: var(--cream); font-weight: 600; font-size: 1rem; }

.so-media { position: absolute; z-index: 1; top: var(--head-h); bottom: 0; left: 50vw; right: 0; }
.so-photo { position: absolute; inset: 0; overflow: hidden; background: var(--asphalt); }
.so-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 60%; will-change: transform; }
.so-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18, 17, 16, .5) 0%, rgba(18, 17, 16, 0) 40%), linear-gradient(90deg, rgba(18, 17, 16, .4), rgba(18, 17, 16, 0) 32%); }
.so-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber); transform-origin: 50% 0; z-index: 2; }

/* the device panel that sits over the photo (each page fills it) */
.so-device { position: absolute; z-index: 3; left: -36px; bottom: clamp(18px, 4vh, 44px); width: min(580px, 84%); background: rgba(14, 13, 12, .92); border: 1px solid rgba(251, 229, 193, .08); box-shadow: 0 46px 80px -34px rgba(0, 0, 0, .9), 0 0 0 6px rgba(18, 17, 16, .35); backdrop-filter: blur(6px); }

/* ---------- benefits split ---------- */
.sw { overflow: clip; }
.sw-in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.sw.is-flip .sw-photo { order: 2; }
.sw-photo .frame-img { height: min(72vh, 640px); max-height: none; }
.sw-copy .lede { margin: 18px 0 8px; }
.sw-list { position: relative; margin-top: 18px; }
.sw-list::before { content: ''; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; background: rgba(251, 229, 193, .1); }
.sw-list::after { content: ''; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; background: var(--amber); transform-origin: 50% 0; transform: scaleY(var(--grow, 1)); }
.sw-list li { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; padding: 11px 0; }
.sw-ic { display: grid; place-items: center; width: 48px; height: 48px; background: var(--tarmac); border: 2px solid rgba(232, 169, 65, .65); color: var(--amber); }
.sw-ic .ic { width: 24px; height: 24px; }
.sw-list h3 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.2; font-weight: 720; font-stretch: 92%; margin: 2px 0 3px; }
.sw-list p { margin: 0; color: var(--fog); }

/* ---------- related services ---------- */
.rel { overflow: clip; background: linear-gradient(180deg, var(--tarmac), #181715); }
.rel .sec-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.rel .card { min-height: min(54vh, 480px); }

/* ---------- FAQ beside a photo ---------- */
.sfaq { overflow: clip; }
.sfaq-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.sfaq-photo { position: sticky; top: 120px; }
.sfaq-photo .frame-img { height: min(68vh, 600px); max-height: none; }
.sfaq-note { position: absolute; left: -22px; bottom: 11%; z-index: 2; display: grid; gap: 4px; padding: 16px 22px 18px; background: #FFFDF8; color: var(--ink); box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .7); transform: rotate(-3deg); will-change: transform; pointer-events: none; }
.sfaq-note small { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6A6255; }
.sfaq-note b { font: 840 clamp(1.4rem, 1.9vw, 1.8rem)/1 var(--display); font-stretch: 80%; }
.sfaq-note span { font-size: .9rem; color: #4A453D; }

@media (prefers-reduced-motion: reduce) { .so::before { animation: none; } }

@media (max-width: 960px) {
  .so { display: block; min-height: 0; }
  .so-copy { width: 100%; }
  .so-media { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: clamp(440px, 64svh, 580px); margin-top: 0; }
  .so-device { left: var(--gut); right: var(--gut); width: auto; bottom: 16px; }
  .sw-in, .sfaq-in { grid-template-columns: 1fr; }
  .sw.is-flip .sw-photo { order: 0; }
  .sfaq-photo { position: relative; top: 0; }
  .sfaq-note { left: 10px; }
}
@media (max-width: 760px) {
  .so .h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .so .lede { font-size: 1rem; margin-bottom: 1.1em; }
  .so .btn-row .btn { flex: 1 1 auto; padding: 0 1.1em; }
  .so-facts { gap: 0 14px; }
  .so-facts li { gap: 10px; font-size: .88rem; align-items: flex-start; }
  .so-facts .ic { width: 34px; height: 34px; padding: 7px; }
  .sw-photo .frame-img { height: min(56vh, 420px); }
  .sfaq-photo .frame-img { height: min(56vh, 420px); }
  .rel .card { min-height: 340px; }
}