/* ============================================================
   CINEMATIC — inner page components
   Loaded after styles.css on services / process / offers / contact
   ============================================================ */

/* Inner-page headings speak in the same display voice as the shell — see the
   matching group in styles.css. */
.svcd__name,
.rail__card h3,
.offer__save,
.howto__item h4 {
  font-family: var(--display);
  font-weight: var(--display-w);
  font-stretch: var(--display-wd);
  letter-spacing: var(--display-ls);
}

/* ---------- 1. Page hero ---------- */
.phero {
  position: relative;
  padding-top: clamp(128px, 15vh, 190px);
  padding-bottom: clamp(48px, 6vw, 84px);
  overflow: hidden;
}

.phero__glow {
  position: absolute;
  left: 50%;
  top: -280px;
  width: 1100px;
  height: 720px;
  margin-left: -550px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(216, 162, 74, 0.11), transparent 66%);
}

.phero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}

.phero__title { max-width: 18ch; }
.phero__lede { padding-bottom: 10px; }

.phero__crumb {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-34);
}

.phero__crumb a { color: var(--paper-52); transition: color 0.35s var(--ease); }
.phero__crumb a:hover { color: var(--amber); }
.phero__crumb i { display: block; width: 14px; height: 1px; background: var(--line-2); }

/* Wide banner image with a clip reveal + parallax.

   The closed clip-path that starts the reveal is applied by pages.js, not here.
   As a stylesheet rule it collapsed the banner to nothing until GSAP opened it,
   so with JavaScript blocked — or with pages.js bailing out, which it does
   whenever GSAP has not loaded — the image and its caption were simply gone.
   The banner sits below the fold, so setting the closed state from script
   costs nothing visually. */
.pbanner {
  position: relative;
  margin-top: clamp(34px, 5vw, 68px);
  height: clamp(280px, 42vw, 520px);
  overflow: hidden;
}

.pbanner img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  will-change: transform;
}

.pbanner__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,8,10,0.5) 0%, transparent 34%, rgba(7,8,10,0.72) 100%);
}

.pbanner__cap {
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  bottom: clamp(16px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-70);
}

.pbanner__cap i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

/* ---------- 2. Services: sticky media + scrolling detail ---------- */
.svcx {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: start;
}

.svcx__media {
  position: sticky;
  top: 118px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-2);
}

.svcx__frame { position: relative; width: 100%; height: 100%; }

.svcx__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.75s var(--ease);
}

.svcx__shot.is-on { opacity: 1; }
.svcx__shot img { width: 100%; height: 100%; object-fit: cover; }

.svcx__badge {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  background: rgba(7, 8, 10, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}

.svcx__list > * + * { margin-top: 0; }

.svcd {
  padding-block: clamp(36px, 5vw, 68px);
  border-top: 1px solid var(--line);
}

.svcd:last-child { border-bottom: 1px solid var(--line); }

.svcd__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.svcd__idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--paper-34);
}

.svcd__price {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--amber);
  white-space: nowrap;
}

.svcd__name {
  font-size: clamp(23px, 2.5vw, 35px);
  line-height: 1.1;
  margin-bottom: 16px;
}

.svcd__body { font-size: 15px; line-height: 1.65; color: var(--paper-52); max-width: 50ch; }

.svcd__inc {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.svcd__inc li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--paper-70);
}

.svcd__inc svg { width: 13px; height: 13px; flex: none; margin-top: 5px; color: var(--amber); }

/* ---------- 3. Pinned horizontal rail (process page) ---------- */
.rail { position: relative; overflow: hidden; }

.rail__viewport {
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.rail__track {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  padding-inline: var(--gutter);
  will-change: transform;
}

.rail__intro {
  flex: none;
  width: min(430px, 74vw);
  padding-right: clamp(18px, 3vw, 44px);
}

.rail__card {
  flex: none;
  width: min(380px, 76vw);
  min-height: 440px;
  padding: clamp(26px, 2.6vw, 38px);
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.rail__card:hover { border-color: var(--line-2); background: var(--ink-3); }

.rail__card-idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 30px;
}

.rail__card h3 {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.14;
  margin-bottom: 16px;
}

.rail__card p { font-size: 14.5px; line-height: 1.62; color: var(--paper-52); flex: 1; }

.rail__card-meta {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-34);
}

.rail__progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 48px;
  height: 1px;
  background: var(--line);
}

.rail__progress i {
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- 4. Spec table ---------- */
.spec { border-top: 1px solid var(--line); }

.spec__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}

.spec__row dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-34);
  padding-top: 3px;
}

.spec__row dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--paper-70); }

/* ---------- 5. Offers ---------- */
.offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2vw, 28px);
}

.offer {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.offer::after {
  content: '';
  position: absolute;
  right: -90px;
  top: -90px;
  width: 260px;
  height: 260px;
  z-index: -1;
  background: radial-gradient(circle, rgba(216, 162, 74, 0.13), transparent 66%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.offer:hover::after { opacity: 1; }
.offer:hover { border-color: var(--amber-2); }

.offer--wide { grid-column: 1 / -1; }

.offer__tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber-2);
  border-radius: 999px;
  padding: 6px 13px;
}

.offer__save {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 0.96;
}

.offer__save small { font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; color: var(--paper-52); }

.offer__name { font-size: 17px; font-weight: 500; }
.offer__body { font-size: 14px; line-height: 1.62; color: var(--paper-52); }

.offer__foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.code {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px dashed var(--line-2);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--paper);
  cursor: pointer;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.code:hover { border-color: var(--amber); color: var(--amber); }
.code svg { width: 13px; height: 13px; opacity: 0.6; }
.code.is-copied { border-color: var(--amber); color: var(--amber); border-style: solid; }

.offer__terms { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--paper-34); }

/* ---------- 6. Steps how-to ---------- */
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }

.howto__item { background: var(--ink); padding: clamp(24px, 2.6vw, 36px); }
.howto__item b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--amber); margin-bottom: 20px; font-weight: 400; }
.howto__item h4 { font-size: 19px; line-height: 1.16; margin-bottom: 10px; }
.howto__item p { font-size: 14px; line-height: 1.6; color: var(--paper-52); }

/* ---------- 7. Contact ---------- */
.cgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 5vw, 88px);
  align-items: start;
}

.cinfo { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }

.cinfo__cell { background: var(--ink); padding: 24px 26px; }
.cinfo__cell dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-34); margin-bottom: 9px; }
.cinfo__cell dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.cinfo__cell dd a:hover { color: var(--amber); }

.hours { border-top: 1px solid var(--line); margin-top: 34px; }

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.hours__row span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-34); }
.hours__row.is-today b { color: var(--amber); }
.hours__row b { font-weight: 450; }

.map {
  margin-top: clamp(48px, 6vw, 88px);
  position: relative;
  height: clamp(300px, 40vw, 460px);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-2);
}

/* Google serves a light map and there is no dark option on the free
   embed, so it gets inverted into the page rather than glaring out of it.
   Hover eases the invert off for anyone who needs to read street names. */
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: invert(1) grayscale(1) contrast(0.86) brightness(0.92);
  transition: filter 0.7s var(--ease);
}

.map:hover iframe { filter: invert(1) grayscale(0.4) contrast(0.94) brightness(1); }

.map__pin {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px clamp(18px, 3vw, 30px);
  background: rgba(7, 8, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.map__pin i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
.map__pin span { color: var(--paper); }
.map__pin em { font-style: normal; color: var(--paper-34); }

/* ---------- 8. Responsive ---------- */
@media (max-width: 1100px) {
  .phero__inner,
  .svcx,
  .cgrid { grid-template-columns: 1fr; }

  .svcx__media { position: static; aspect-ratio: 16 / 10; }
  .offers { grid-template-columns: 1fr; }
  .howto { grid-template-columns: 1fr; }
  .svcd__inc { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .spec__row { grid-template-columns: 1fr; gap: 8px; }
  .rail__viewport { height: 88vh; min-height: 520px; }
  .rail__card { min-height: 400px; }
}