/* ==========================================================================
   /rocklin-seo/ — page layout.

   The shared house devices live in public/assets/css/service-devices.css,
   loaded first via ServicePageData.extraStyles. This file is only what is
   genuinely this page's own, and must not redefine anything that sheet owns.
   ========================================================================== */

/* The palette and section rhythm for this page's own sections. */
.rk-proof,
.rk-who,
.rk-choose,
.rk-offer {
  --surface: #0a0a0f;
  --surface-2: #101018;
  --card-border: #1a1a24;
  --purple: #6119ac;
  --purple-light: #8b5cf6;
  --purple-glow: #7c3aed;
  --purple-border: rgba(139, 92, 246, 0.22);
  --text-primary: #ffffff;
  --text-body: #e8e8f0;
  --text-secondary: #a1a1b5;
  --text-muted: #6a6a77;
  background: var(--surface);
  color: var(--text-body);
  font-family: var(--font-body);
  font-stretch: var(--wdth-body, 100%);
  padding: var(--section-y, clamp(5rem, 10vw, 11rem)) var(--gutter, 24px);
  -webkit-font-smoothing: antialiased;
}

.rk-inner {
  max-width: var(--shell, 1180px);
  margin-inline: auto;
}

/* --- Hero backdrop ----------------------------------------------------------
   The Rocklin depot clock tower, full bleed across the whole hero.

   Every other page on this site opens on flat colour, and this is the one page
   where breaking that earns something: a local landing page is judged partly
   on whether it looks like it belongs to the place, and this is the landmark
   locals actually navigate by.

   It runs the full viewport because the page is establishing a place before it
   makes an argument. It reaches behind the nav for free: the nav is
   position:fixed and `.flush-top main` zeroes the top padding, so the hero
   already starts at y=0 and the fixed nav simply overlays it.

   Two scrims keep it a backdrop rather than a picture: a directional wash that
   stays near-opaque behind the copy column and thins toward the tower, and a
   short fade on the last few percent so it meets the next section without a
   seam. The breathing glow from service-devices.css still sits above it. */

.svc-hero {
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The stat rail is part of the hero, so on a short viewport the whole thing
   scrolls rather than the rail being clipped. */
@media (max-height: 760px) {
  .svc-hero {
    min-height: 0;
  }
}

.rk-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.rk-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The tower sits left of centre in the source. Showing the left of the frame
     pushes it right, clear of the headline. */
  object-position: 30% 34%;
  /* Dark and desaturated enough that white 900-weight type clears WCAG AA over
     any part of it, and the warm stone does not fight the purple accent. */
  opacity: 0.42;
  filter: saturate(0.72) contrast(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

/* Protects the copy column specifically: the headline sits left and the lit
   stonework sits centre-right. */
.rk-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 10, 15, 0.94) 18%, rgba(10, 10, 15, 0.76) 46%, rgba(10, 10, 15, 0.42));
}

/* --- Who we work with -------------------------------------------------------
   Verticals as chips. Chips are pills on this site; buttons never are. */

.rk-verticals {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}

.rk-vertical {
  display: inline-flex;
  align-items: center;
  padding: 0.65em 1.15em;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--step--1);
  color: var(--text-secondary);
  transition: border-color var(--dur, 340ms) var(--ease-out),
    color var(--dur, 340ms) var(--ease-out);
}

a.rk-vertical {
  text-decoration: none;
}

a.rk-vertical:hover,
a.rk-vertical:focus-visible {
  border-color: var(--purple-border);
  color: var(--text-primary);
}

.rk-p {
  margin-top: 1.1rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 66ch;
}

/* The experience line. Stated as verifiable figures rather than a years count,
   because there is no approved years number to publish. */
.rk-credentials {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
}

.rk-credential {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg, 10px);
  background: var(--surface-2);
}

.rk-credential__num {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display, 108%);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--text-primary);
}

.rk-credential__label {
  margin-top: 0.55rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-muted);
}

/* --- Proof ------------------------------------------------------------------ */

.rk-proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* --- Offer ------------------------------------------------------------------ */

.rk-offer__card {
  padding: clamp(1.75rem, 4vw, 3rem);
}

.rk-offer__actions {
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
}

/* --- Areas served, in the closing block -------------------------------------- */

.rk-areas {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
}

.rk-area {
  padding: 0.45em 0.9em;
  border: 1px solid var(--card-border, #1a1a24);
  border-radius: 999px;
  font-size: var(--step--2);
  color: var(--text-muted, #6a6a77);
}

/* --- Inline links ------------------------------------------------------------ */

.rk-p a,
.rk-proof__p a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--purple-border);
  transition: text-decoration-color var(--dur, 340ms) var(--ease-out);
}

.rk-p a:hover,
.rk-proof__p a:hover,
.rk-p a:focus-visible,
.rk-proof__p a:focus-visible {
  text-decoration-color: var(--purple-light);
}

.rk-proof__p {
  margin-top: 1.25rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 58ch;
}

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 980px) {
  .rk-proof__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rk-credentials {
    grid-template-columns: 1fr;
  }
  /* On a phone the frame is mostly headline, so the backdrop is cropped hard.
     Quieter and centred on the tower so what survives the crop is the landmark
     rather than a wall of stone. */
  .rk-hero-bg img {
    opacity: 0.3;
    object-position: 34% 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rk-vertical,
  .rk-p a,
  .rk-proof__p a {
    transition: none;
  }
}

/* --- Letting the backdrop escape the shell ----------------------------------
   ServicePage renders heroMedia inside .svc-hero__inner, which is the centred
   max-width column and is position:relative. An absolutely positioned backdrop
   in there resolves against that column, so it came out inset by the shell
   margins and pushed down by the hero's top padding.

   Making the inner static hands the containing block back to .svc-hero, which
   is already position:relative and spans the full viewport width and the full
   hero height, including the strip behind the fixed nav.

   The inner's z-index:1 goes inert when it is static, and the hero's glow
   ::before is a positioned element at z-index 0, which would then paint over
   the copy. So the copy and the stat rail take their own layer explicitly. */
.svc-hero__inner {
  position: static;
}

.svc-hero__lead,
.svc-hero .svc-stats {
  position: relative;
  z-index: 2;
}