/**
 * Extracted from template-parts/Service-page/service-hero-v2.php inline <style> block.
 * Scoped under .px-svc-hero.
 */

.px-svc-hero.sh-hero-section {
    --ink: var(--color-primary-black);
    --paper: var(--color-neutral-paper);
    --line: var(--color-neutral-line);
    --line-strong: var(--color-neutral-line-strong);
    --brass: var(--color-primary-orange);
    --sage: var(--color-neutral-muted);
  }
  .px-svc-hero.sh-hero-section * { box-sizing:border-box; }

  .px-svc-hero .sh-page {
    background-color:var(--ink);
    /*background-image:
      repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 22px); */
    color:var(--paper);
    font-family: var(--font-body);
    padding: 0 32px; /* outer gutter so the container is never flush against the true edge */
  }

  /* the "super container" — this is the boundary the image column bleeds to */
  .px-svc-hero .sh-hero {
    max-width:1440px;
    margin:0 auto;
    height:calc(600px + var(--sh-extra-top, 56px));
    display:flex;
    align-items:stretch;
    gap:56px;
    padding:calc(64px + var(--sh-extra-top, 56px)) 40px 64px;
    position:relative;
  }

  /* when a service has no stats, there's no reel — let the copy take the row */
  .px-svc-hero .sh-hero.sh-hero--no-visual {
    height:auto;
  }
  .px-svc-hero .sh-hero.sh-hero--no-visual .sh-left {
    flex:1 1 100%;
  }

  /* ---------- LEFT (wider, bolder) ---------- */
  .px-svc-hero .sh-left {
    flex:1 1 62%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
  }

  .px-svc-hero .sh-eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
  }
  .px-svc-hero .sh-eyebrow .sh-dot {
    width:6px; height:6px; border-radius:50%; background:var(--brass); flex-shrink:0;
  }
  .px-svc-hero .sh-eyebrow span {
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--sage);
  }

  .px-svc-hero .sh-title {
    font-family: var(--font-heading);
    font-weight:500;
    font-style:var(--font-style-heading,italic);
    text-transform:uppercase;
    font-size:clamp(44px, 8vw, 84px);
    line-height:1.02;
    letter-spacing:-0.01em;
    margin:0 0 32px;
    max-width:16ch;
  }

  .px-svc-hero .sh-sub {
    font-size:18px;
    line-height:1.6;
    color:color-mix(in srgb, var(--color-neutral-paper) 82%, transparent);
    max-width:60ch;
    margin:0 0 40px;
  }

  .px-svc-hero .sh-sub p {
    margin:0 0 1em;
  }
  .px-svc-hero .sh-sub p:last-child {
    margin-bottom:0;
  }

  /* Available for manual use inside the rich-text editor content, e.g.
     wrapping a phrase in <span class="sh-highlight">...</span> from the
     WYSIWYG's HTML/source view. */
  .px-svc-hero .sh-highlight {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--brass);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  .px-svc-hero .sh-ctas {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }

  .px-svc-hero .sh-btn {
    font-family: var(--font-body);
    font-size:11.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:16px 26px;
    border-radius:0;
    cursor:pointer;
    border:1px solid var(--line-strong);
    background:transparent;
    color:var(--paper);
    text-decoration:none;
    display:inline-block;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .px-svc-hero .sh-btn:hover {
    background:color-mix(in srgb, var(--color-neutral-paper) 8%, transparent);
    border-color:var(--paper);
  }

  .px-svc-hero .sh-btn--primary {
    background:  var(--color-primary-orange);;
    border-color: var(--brass);
    color: var(--color-neutral-paper);
    font-weight: 600;
}
.px-svc-hero .sh-btn--primary:hover {
    background: var(--color-primary-orange-dark);
    border-color: var(--brass);
    color: var(--color-neutral-paper);
    filter: brightness(1.1);
}

  /* ---------- RIGHT: narrower, bleeds to top/right/bottom, auto-scrolls ---------- */
  .px-svc-hero .sh-right {
    flex:1 1 38%;
    min-width:0;
    overflow:hidden;
    /* cancel the hero's own padding on 3 sides only — left side keeps the gap */
    margin: calc(-64px - var(--sh-extra-top, 56px)) -40px -64px 0;
  }

  .px-svc-hero .sh-track {
    display:flex;
    flex-direction:column;
    gap:10px;
    animation: sh-scroll var(--sh-duration, 26s) linear infinite;
  }

  .px-svc-hero .sh-right:hover .sh-track {
    animation-play-state: paused;
  }

  .px-svc-hero .sh-tile {
    position:relative;
    width:100%;
    aspect-ratio: 9 / 5;
    overflow:hidden;
    flex-shrink:0;
  }
  .px-svc-hero .sh-tile img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* Stat label/value — slides up on hover, same pattern as the old hero */
  .px-svc-hero .sh-tile-overlay {
    position:absolute;
    inset:auto 0 0 0;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:20px;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-primary-black) 92%, transparent) 0%, color-mix(in srgb, var(--color-primary-black) 55%, transparent) 60%, transparent 100%);
    transform: translateY(100%);
    transition: transform .25s ease;
    pointer-events:none;
  }
  .px-svc-hero .sh-tile:hover .sh-tile-overlay {
    transform: translateY(0);
  }
  .px-svc-hero .sh-tile-stat {
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color: var(--sage);
  }
  .px-svc-hero .sh-tile-value {
    font-family: var(--font-heading);
    font-weight:600;
    font-size:22px;
    color: var(--paper);
  }

  @keyframes sh-scroll{
    from{ transform:translateY(0); }
    to{ transform:translateY(-50%); }
  }

  @media (prefers-reduced-motion: reduce){
    .px-svc-hero .sh-track { animation:none; }
  }

  @media (max-width: 900px){
    .px-svc-hero .sh-hero {
      flex-direction:column;
      height:auto;
      padding:calc(48px + var(--sh-extra-top, 56px)) 24px 48px;
      gap:32px;
    }
    .px-svc-hero .sh-left { flex:none; }
    .px-svc-hero .sh-right {
      flex:none;
      height:360px;
      margin: 0 -24px -48px -24px;
    }
  }