/* ============================================================
   HELIOCASTLE — SERVICE PAGE HERO
   The opening frame of a service page: copy on the left, a stack
   of real screens on the right. Like the home hero it keeps its
   night in both themes (see theme-light.css).
   ============================================================ */

.svc-hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(130px, 14vw, 180px) var(--pad-x) clamp(60px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}

.svc-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  min-height: min(52vw, 520px);
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------------
   THE PRODUCT SHOT
   A render of the site on three devices, built by python/prepare_hero.py.
   It is laid over the hero rather than sitting in a column, because its
   own glow is what lights the right-hand side — the copy reads on top of
   it. The file's edges fade to transparent, so there is no rectangle. */
.hero-shot {
  position: absolute;
  z-index: 0;
  /* Centred with auto margins, not translateY: .reveal animates transform
     to none when it lands, which would throw a translated shot back down. */
  top: 0;
  bottom: 0;
  right: calc(var(--pad-x) * -0.5);
  width: 58%;
  height: fit-content;
  margin-block: auto;
  pointer-events: none;
}
.hero-shot img {
  width: 100%;
  height: auto;
  display: block;
}
/* The devices are cut out, so the light around them is ours to make: a
   sunrise behind, a contact shadow under, and a reflection on the floor. */
.hero-shot::before {                       /* the sunrise */
  content: "";
  position: absolute;
  inset: -14% -12% -6% -16%;
  z-index: -1;
  background:
    radial-gradient(34% 40% at 40% 50%, rgb(var(--accent-light-rgb) / 0.3), transparent 70%),
    radial-gradient(64% 62% at 52% 54%, rgb(var(--accent-rgb) / 0.12), transparent 76%);
  filter: blur(10px);
  animation: shot-breathe 8s ease-in-out infinite;
}
.hero-shot::after {                        /* the shadow they stand in */
  content: "";
  position: absolute;
  left: 4%;
  right: 6%;
  bottom: -3%;
  height: 16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgb(var(--shadow-rgb) / calc(0.75 * var(--shadow-a))), transparent 72%);
  filter: blur(14px);
}
@keyframes shot-breathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

/* the reflection: the same picture, flipped and faded out */
.hero-shot-mirror {
  position: absolute;
  top: 99%;
  left: 0;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
  transform-origin: top;
  opacity: 0.16;
  filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.85), transparent 38%);
          mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.85), transparent 38%);
  pointer-events: none;
}

.svc-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.svc-hero-title {
  font-family: var(--serif);
  font-weight: 500;
  /* The copy block is a fixed 560px at the top end, so the size that
     keeps "your ideas into reality." on one line is a plain ratio. */
  font-size: clamp(26px, 3.2vw, 41px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 14px;
}
.svc-hero-title em { font-style: normal; color: var(--gold); }

.svc-hero-lead {
  /* no cap: the lead shares its right edge with the headline, which is
     what puts it on two lines like the design */
  max-width: none;
  margin-top: 20px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.85;
}

/* the short gold rule under the lead */
.svc-hero-rule {
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 26px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
/* a touch tighter than the site default, so both buttons sit on one line
   even when the copy column is narrow */
.svc-hero-actions .btn { padding-left: 26px; padding-right: 26px; }