/* ==========================================================================
   Coasties - service pages: the scroll layer.

   Loaded after css/site.css on service pages, with css/scrollcraft.css
   (the engine's floor) loaded before css/styles.css so the site's own rules
   win wherever they overlap. js/services.js mounts the engine.

   One restrained set of devices, the same on every service page:
     hero        the service photo in a pane beside the words; pane and photo
                 drift at different rates as the hero leaves, and a shine
                 crosses the glass once on arrival
     overview    the photo drifts inside its frame
     included    each tick draws itself once as the list arrives
     process     the signature: a pinned walk-through past a squeegee blade
                 (stacked, with a line that runs down, on phones)
     areas       region cards wiped in, as on the homepage
   Everything else keeps site.css's calm one-off fade-ins. Nothing here
   changes a word; with scripting off every section is simply there.
   ========================================================================== */

:root {
  /* The engine's tokens, pointed at the site's colours (selection, caret). */
  --sc-canvas: #F7F9FC; --sc-surface: #FFFFFF;
  --sc-ink: #0F1E36; --sc-ink-soft: #4A5B78;
  --sc-accent: #1D63C9; --sc-accent-ink: #FFFFFF;
  --sc-font-display: Outfit, system-ui, sans-serif;
  --sc-font-text: Outfit, system-ui, sans-serif;
  /* Walk-through geometry: the slot the current step stands in, its width,
     the gap. The rail's trailing spacer is sized from the same numbers, so
     the last step stops exactly where the first one started. */
  --svc-slot: max(var(--s-gutter), calc((100vw - 82rem) / 2 + var(--s-gutter)));
  --svc-card: clamp(17rem, 30vw, 25rem);
  --svc-gap: clamp(1rem, 2vw, 1.75rem);
}
/* clip, not hidden: no sideways scroll, and the pinned stage still sticks. */
html, body { overflow-x: clip; }

/* main.js fades in anything in a grid; these sections have their own
   motion, so its fade stands down inside them. */
.svc-hero .fade-in-up, .svc-walk .fade-in-up, [data-sc-reveal].fade-in-up, [data-sc-reveal] .fade-in-up {
  opacity: 1; transform: none; transition: none;
}

/* ---------- hero: words on paper, the photo in a pane ---------- */
.svc-hero { padding-top: calc(var(--s-bar-h) + clamp(2rem, 5vw, 4rem)); }
.svc-hero::after { display: none; }                  /* the shine moves onto the glass */
.svc-hero .hero__content { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.svc-hero__pane {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(12.5rem, 54vw, 17rem); margin-top: 1.75rem;
  border-radius: var(--s-r-lg); background: var(--s-mist); box-shadow: var(--s-e2);
}
.svc-hero__pane img {
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none;
  object-fit: cover; border-radius: 0;
}
.svc-hero__pane::after {
  content: ""; position: absolute; inset: -10% auto -10% 0; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-12deg);
}
@media (scripting: enabled) {
  /* Hidden only until decoded; shown after 2.5s whatever happens, so a
     script that never runs cannot leave the pane empty. */
  .svc-hero__pane img { opacity: 0; transition: opacity 700ms var(--s-ease); animation: svc-show 1ms 2500ms both; }
  .svc-hero__pane.is-ready img { opacity: 1; animation: none; }
  @keyframes svc-show { to { opacity: 1; } }
  .svc-hero__pane.is-ready::after { animation: s-sheen 1500ms 200ms var(--s-ease) both; }
}
@media (min-width: 861px) {
  /* Two columns; the spacer rows centre the words against the pane. */
  .svc-hero .hero__content {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .svc-hero .breadcrumb { grid-column: 1; grid-row: 2; }
  .svc-hero .hero__title { grid-column: 1; grid-row: 3; }
  .svc-hero .hero__subtitle { grid-column: 1; grid-row: 4; }
  .svc-hero__pane { grid-column: 2; grid-row: 1 / -1; height: clamp(18rem, 30vw, 26rem); margin-top: 0; }
}

/* ---------- overview: the photo drifts inside its frame ---------- */
.svc-detail .service-detail__image picture {
  display: block; position: relative; overflow: hidden; aspect-ratio: 1200 / 655;
  border-radius: var(--s-r-lg); box-shadow: var(--s-e2); background: var(--s-mist);
}
.svc-detail .service-detail__image picture img {
  position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none;
  object-fit: cover; border-radius: 0; box-shadow: none;
}

/* Other photo frames (about page): same drift, the frame keeps the
   photo's own proportions (--svc-ar, written from its width and height). */
.svc-drift picture {
  display: block; position: relative; overflow: hidden; aspect-ratio: var(--svc-ar, 4 / 3);
  border-radius: var(--s-r-lg); box-shadow: var(--s-e2); background: var(--s-mist);
}
.svc-drift picture img {
  position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none;
  object-fit: cover; border-radius: 0; box-shadow: none;
}

/* ---------- what's included: ticks draw themselves ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .service-detail__checklist[data-sc-stagger] > li > i {
    clip-path: inset(0 100% 0 0); transform: scale(0.55) rotate(-25deg);
    transition: clip-path 560ms cubic-bezier(0.55, 0, 0.25, 1), transform 560ms var(--s-ease);
    transition-delay: inherit;
  }
  .service-detail__checklist[data-sc-stagger] > li.sc-in > i { clip-path: inset(0 0 0 0); transform: none; }
}

/* ---------- service areas: cards wiped in on the section's ground ---------- */
.service-areas [data-sc-reveal] { --sc-reveal-cover: var(--s-canvas); }

/* ---------- process: the walk-through ---------- */
.svc-walk__line { display: none; }
.svc-walk--live .svc-walk__line { display: block; }
.svc-walk .process__number { position: relative; z-index: 3; transition: background-color 280ms var(--s-ease), color 280ms var(--s-ease), box-shadow 280ms var(--s-ease); }
.svc-walk .process__step { transition: border-color 280ms var(--s-ease), transform 420ms var(--s-ease), box-shadow 280ms var(--s-ease), opacity 420ms var(--s-ease); }
/* Steps not reached yet show an open number; reached ones fill in. */
.svc-walk--live .process__step:not(.is-current):not(.is-done) .process__number {
  background: #fff; color: var(--s-accent); box-shadow: inset 0 0 0 2px var(--s-accent);
}
.svc-walk--live .process__step.is-current { border-color: var(--s-accent); }

/* The blade: the homepage squeegee in miniature, rubber and steel. */
.svc-walk__blade {
  position: absolute; z-index: 1; pointer-events: none;
  border-radius: 3px; background: linear-gradient(90deg, #101B2E 0%, #2A3B57 50%, #0D1626 100%);
  box-shadow: 0 3px 8px -2px rgba(15, 30, 54, 0.45);
}
.svc-walk__blade::after {
  content: ""; position: absolute; border-radius: 2px;
  background: linear-gradient(90deg, #8E9BAE 0%, #F4F7FB 35%, #B7C2D1 60%, #6C7A8F 100%);
}
.svc-walk__clean { position: absolute; z-index: 0; background: var(--s-accent); border-radius: 2px; will-change: transform; }

/* Pinned, on screens with room for it. Must match PAN in js/services.js. */
@media (scripting: enabled) and (min-width: 861px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .svc-walk[data-sc-act="pan"] { display: block; position: relative; height: calc(var(--sc-span) * 100vh); padding: 0; }
  .svc-walk[data-sc-act="pan"] > [data-sc-stage] {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
    display: flex; flex-direction: column; justify-content: center; padding-top: var(--s-bar-h);
  }
  .svc-walk[data-sc-act="pan"] .container { max-width: none; width: 100%; padding: 0; }
  .svc-walk[data-sc-act="pan"] .section-header {
    text-align: left; max-width: none; margin: 0 0 clamp(1.75rem, 5vh, 3.25rem); padding-inline: var(--svc-slot);
  }
  .svc-walk[data-sc-act="pan"] .section-header p { margin-inline: 0; max-width: 46ch; }
  .svc-walk[data-sc-act="pan"] .svc-walk__track { position: relative; }
  .svc-walk[data-sc-act="pan"] .process__grid {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--svc-gap);
    padding-left: var(--svc-slot); width: 100%;
  }
  .svc-walk[data-sc-act="pan"] .process__grid::after { content: ""; flex: 0 0 calc(100vw - var(--svc-slot) - var(--svc-card) - var(--svc-gap)); }
  .svc-walk[data-sc-act="pan"] .process__step {
    flex: 0 0 var(--svc-card); text-align: left; margin: 0;
    padding: clamp(1.5rem, 2.4vw, 2.25rem); min-height: clamp(14rem, 30vh, 17rem);
  }
  .svc-walk[data-sc-act="pan"] .process__number { width: 64px; height: 64px; font-size: 1.5rem; margin: 0 0 1.5rem; }
  .svc-walk[data-sc-act="pan"] .process__title { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); margin-bottom: 0.6rem; }
  .svc-walk[data-sc-act="pan"] .process__text { font-size: 1.05rem; line-height: 1.6; }
  .svc-walk[data-sc-act="pan"] .process__step.is-current { transform: translateY(-6px); box-shadow: var(--s-e2); }
  /* Finished steps step back as the blade passes, so the end frame is the
     last step and the full clean line, not cut-off fragments at the edge. */
  .svc-walk--live[data-sc-act="pan"] .process__step.is-done { opacity: 0.28; }
  /* A dashed line runs under the rail; the clean line grows back from the
     blade, which stands still under the current step. */
  .svc-walk--live[data-sc-act="pan"] .svc-walk__line {
    position: relative; height: 2px; margin-top: clamp(1.75rem, 5vh, 3rem);
    background: repeating-linear-gradient(90deg, #C3D2E6 0 8px, transparent 8px 15px);
  }
  .svc-walk[data-sc-act="pan"] .svc-walk__clean {
    top: -1px; height: 4px;
    width: calc((var(--svc-n, 4) - 1) * (var(--svc-card) + var(--svc-gap)));
    left: calc(var(--svc-slot) + var(--svc-card) / 2 - (var(--svc-n, 4) - 1) * (var(--svc-card) + var(--svc-gap)));
    transform-origin: 100% 50%; transform: scaleX(0);
  }
  .svc-walk[data-sc-act="pan"] .svc-walk__blade { left: calc(var(--svc-slot) + var(--svc-card) / 2 - 6px); top: -19px; width: 12px; height: 40px; }
  .svc-walk[data-sc-act="pan"] .svc-walk__blade::after { left: 7px; top: 0; width: 5px; height: 100%; }
}

/* Stacked: phones, short screens, reduced motion, or a pinned walk whose
   window became too small after load. The line runs down the numbers. */
@media (max-width: 860px), (max-height: 559px), (prefers-reduced-motion: reduce) {
  /* The engine stylesheet pre-sizes every pan act; on these screens the walk
     stacks (js/services.js turns it into a flow act), so it is never tall. */
  .svc-walk[data-sc-act] { height: auto; }
  .svc-walk[data-sc-act] > [data-sc-stage] { position: static; height: auto; overflow: visible; }
  .svc-walk.sc-act--pinned { height: auto !important; }
  .svc-walk.sc-act--pinned > .sc-stage { position: static; height: auto; overflow: visible; }
  .svc-walk.sc-act--pinned .process__grid { transform: none !important; }
}
.svc-walk--live[data-sc-act="flow"] .svc-walk__track,
.svc-walk--live.sc-act--pinned .svc-walk__track { position: relative; }
@media (max-width: 860px), (max-height: 559px), (prefers-reduced-motion: reduce) {
  .svc-walk--live .svc-walk__track { max-width: 44rem; margin-inline: auto; padding-left: 3.75rem; }
  /* The rail is its own layer (will-change from the engine), so it is
     lifted above the line as a whole: numbers cover the line and blade. */
  .svc-walk--live .process__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; position: relative; z-index: 1; will-change: auto; }
  .svc-walk--live .process__step { position: relative; text-align: left; padding: 1.25rem 1.25rem 1.35rem; margin: 0; }
  .svc-walk--live .process__step::after { display: none; }
  .svc-walk--live .process__number { position: absolute; left: -3.75rem; top: 1rem; margin: 0; width: 48px; height: 48px; font-size: 1.15rem; }
  .svc-walk--live .svc-walk__line { position: absolute; z-index: 0; left: 23px; top: 1.5rem; bottom: 1.5rem; width: 2px; background: repeating-linear-gradient(180deg, #C3D2E6 0 8px, transparent 8px 15px); }
  .svc-walk--live .svc-walk__clean { left: -1px; top: 0; width: 4px; height: 100%; transform-origin: 50% 0; transform: scaleY(0); }
  .svc-walk--live .svc-walk__blade { left: -12px; top: -5px; width: 26px; height: 10px; }
  .svc-walk--live .svc-walk__blade::after { left: 0; top: 0; width: 100%; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-walk__line { display: none !important; }
  .svc-walk--live .process__step:not(.is-current):not(.is-done) .process__number { background: var(--s-accent); color: #fff; box-shadow: none; }
  .svc-hero__pane::after { display: none; }
}