/* rTech homepage motion layer: styles
 * Load AFTER assets/site.css. Everything here either overrides a site.css rule
 * or styles markup that only exists on the motion build of the homepage.
 * Generated from the workbench component; safe to fold into site.css instead.
 */
/* ---- Seam wipes removed, and their reserved space reclaimed ----
     site.css reserves a handover ramp at the foot of all seven home sections:
       --flow-ramp: clamp(3rem, 6vw, 5.5rem);
       padding-bottom: calc(var(--flow-ramp) + clamp(1rem, 2vw, 2rem));
     That is up to ~7.5rem of deliberately empty space per section, sized for a
     colour-handover animation to play in. The wipe bands also stayed drawn once
     scrolled past, leaving a stray garnet slab sitting above the next section.
     Both are gone now: no wipe is built, and the ramp collapses to the base
     padding so the gaps between sections are just normal section spacing. */
  .assessment-section, .next-result, .concierge-home,
  .focused-work, .testimonials, .kit-explorer-section { --flow-ramp: 0px; }

  /* ---- Two backgrounds, not five ----
     The page was running four different light tones, cream #f5f2ee, gold-soft
     #f0d9a8, white #fff, plus garnet, so every section was a slightly
     different variation of the palette and none of it read as a system.
     Text colour decides which tone a section can take: white-on-garnet
     sections (hero, concierge, contact) must stay dark, dark-text sections must
     stay light. So the fix is not to flip tones but to collapse each family to
     ONE colour: every light section is cream, every dark section is garnet.
     Adjacent light sections then merge into a single band, and the page reads
     as an alternating cadence:
       garnet · cream (assessment + next result) · garnet · cream (focused work
       + kits + testimonials) · garnet
dark, light, dark, light, dark. */
  .home .next-result, .home .focused-work { background: var(--cream); }

  /* Hairlines where two light sections meet, so a merged band still has
     internal structure instead of running on. Set on the section itself, not
     with a sibling selector, pinned sections are wrapped in a .pin-spacer,
     which breaks adjacency. */
  .home .next-result, .home .kit-explorer-section, .home .testimonials {
    border-top: 1px solid rgb(100 18 32 / .1);
  }


  /* ---- Hero: left entirely to site.css ----
     A keeps site.css's original hero and it reads far better than anything the
     full-screen/copy-high/pinned-takeover experiments produced here, so every
     one of those overrides is gone: no min-height, no padding or margin resets
     on the inner block, no repositioning of the art, no pin. B's hero is now
     the same design pattern as A's. */

  /* ---- Local contact: one closing call, nothing the footer already says ----
     This block used to be a two-column grid: copy on the left, a 248px crest
     on the right, and (briefly) three contact routes underneath. It read as
     redundant because the footer sits directly below it and already carries the
     crest, the email, the phone, and the "Long Island, New York" line, so the
     page said all of it twice in a row, and the crest column left the right
     half of the section visually empty.
     It is now a single centred closing statement: kicker, headline, one line of
     copy, and the two actions. Contact details live in the footer only. */
  .local-contact .local-contact-cta {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
  }
  .local-contact .local-contact-cta > * { margin: 0; }
  .local-contact .local-contact-cta > p:not(.kicker) { color: var(--gold-soft); text-wrap: pretty; }
  .local-contact .local-contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.75rem;
    margin-top: .85rem;
  }
  /* The pinned assessment scene. Applied by the logic class only when the pin
     is actually installed (never on phones, never under reduced motion), so
     the section keeps its normal flow layout everywhere else. It has to fill
     the viewport: a section that pins while half-scrolled reads as a stuck
     page rather than a held scene. */
  /* flex-start, not center: the scene has to be 100svh for the pin, but the
     copy is only ~510px of that, and centring it dumped roughly 280px of empty
     cream above the first line. Seating it just below the header puts the
     surplus underneath the list, where the rail ends. */
  html.has-motion .assessment-section.is-scene {
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
    padding-top: clamp(6rem, 14vh, 11rem);
    padding-bottom: 2.5rem;
  }
  html.has-motion .assessment-section.is-scene > .wrap { width: min(calc(100% - (2 * var(--gutter))), var(--wrap)); }

  /* Electrified island overlay. Both layers live inside the <picture>, so they
     inherit its exact position and size, no separate geometry to keep in sync
     with site.css's art placement. */
  .fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  /* The HQ marker sits where the lit computer is in the artwork (Melville), and
     is the point the current radiates from. */
  .fx-hq {
    position: absolute;
    left: 36%;
    top: 52%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .fx-hq span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f2d38d;
    animation: fx-hq-pulse 2.6s ease-out infinite;
  }
  @keyframes fx-hq-pulse {
    0% { box-shadow: 0 0 0 0 rgb(240 217 168 / .55); }
    70% { box-shadow: 0 0 0 14px rgb(240 217 168 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(240 217 168 / 0); }
  }

  /* ---- Kit explorer: stepper on mobile ----
     site.css turns the eleven kit tabs into a horizontally scrolling strip of
     145px buttons under 760px. Eleven off-screen targets in a scroller is a
     poor way to browse a set, nothing tells you how many there are or where
     you are. Below that breakpoint the strip is moved off-screen (kept
     focusable, the same technique site.css uses for .hp-field) and replaced by
     a prev/next stepper with a position counter. The stepper drives the real
     tab buttons, so site.js stays the single owner of kit selection. */
  .kit-carousel { display: none; }
  @media (max-width: 760px) {
    .kit-explorer .kit-tabs { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .kit-carousel {
      display: flex; align-items: center; gap: .9rem;
      padding: .7rem .8rem;
      background: oklch(22% .09 18);
      border-bottom: 1px solid rgb(240 217 168 / .16);
    }
    .kit-carousel button {
      flex: none; width: 46px; height: 46px;
      display: grid; place-items: center;
      color: var(--gold-soft);
      background: oklch(20% .08 18 / .8);
      border: 1px solid rgb(240 217 168 / .28);
      border-radius: 999px;
      font-size: 1.5rem; line-height: 1;
      cursor: pointer;
    }
    .kit-carousel button:active { color: var(--garnet-3); background: var(--gold); }
    .kit-carousel-meta { flex: 1; display: grid; gap: .2rem; text-align: center; min-width: 0; }
    .kit-carousel-meta b { color: var(--gold); font-size: .6rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
    .kit-carousel-meta em { color: #fff; font-size: .95rem; font-style: normal; font-weight: 700; letter-spacing: -.01em; }
  }





/* ---- Hero seam ----
   The seam is painted at the TOP of the assessment section, not the foot of
   the hero. The hero clips at its edge, so a band inside it could only grow
   by pushing the next section down. Here the band reaches up 7rem over the
   hero's clear bottom strip (its inner block keeps 7rem of padding there, so
   no copy or button is ever under it; the band fades in from transparent so it has no top edge) and runs on into the section, where
   the fade finishes on the section's own cream. The kicker stays put and
   lands on the cream side of the fade. Garnet top-left, cream meets the hero
   at the top on the right. */
.assessment-hero { --flow-ramp: 0px; padding-bottom: 0; }
.assessment-hero::after { display: none; }
.assessment-hero-inner { padding-bottom: 11rem; }
.assessment-section { --seam-up: 11rem; --seam-down: 8rem; }
.assessment-section::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0;
  top: calc(-1 * var(--seam-up));
  height: calc(var(--seam-up) + var(--seam-down));
  background: linear-gradient(167deg,
    transparent 0%, transparent 6%, var(--cream) 30%, var(--cream) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  pointer-events: none;
}
.assessment-section > .wrap { position: relative; z-index: 1; }
html.has-motion .assessment-section.is-scene { padding-top: 1rem; }
.assessment-section { padding-top: 1rem; }
@media (max-width: 759px) {
  .assessment-section { --seam-up: 3rem; --seam-down: 5rem; }
}

/* ---- Pinned scene height ----
   The scene was forced to 100svh so it covered the viewport while pinned,
   which left the rest of the viewport blank once the steps ended (Rico,
   2026-08-29). The section is now its natural height; the pin spacer
   ScrollTrigger inserts beneath it is painted cream so nothing else shows
   through while the scene is held. */
html.has-motion .assessment-section.is-scene { min-height: 0; }
html.has-motion .pin-spacer { background: var(--cream); }