/* premium-services — owned by one agent; layered on top of styles.css
   ============================================================================
   Soft UI Evolution, applied to the services listing and the service detail
   template only. Everything here leans on the tokens declared at the end of
   styles.css (--elev-*, --ease-out, --dur*, --space-*, --r*). No new colours,
   no font changes, radii stay inside the approved 8–12px band.

   Scoping note: several class names below are shared with the resources/blog
   listing (.directory-hero, .directory-heading, .resource-card …). Every rule
   is qualified so it cannot reach a blog page:
     · .directory-hero:not(.resources-hero)   — services listing hero only
     · .service-categories ~ .directory-heading — services listing heading only
     · .service-directory-card                — never .resource-card
     · .service-detail-aside                  — never .resource-article-aside
   ========================================================================= */


/* ==========================================================================
   1. SERVICES LISTING — hero
   ========================================================================== */

/* The hero image is the first thing on the page; give it real, soft depth
   instead of the single flat drop shadow, and the large-surface radius. */
.directory-hero:not(.resources-hero) .directory-hero__visual {
  border-radius: var(--r-lg);
  box-shadow: var(--elev-4);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}

.directory-hero:not(.resources-hero) .directory-hero__copy {
  padding: var(--space-3) 0;
}

/* A touch more air under the lede before the category mosaic. */
.directory-hero:not(.resources-hero) p:not(.directory-hero__eyebrow) {
  margin-top: var(--space-3);
}


/* ==========================================================================
   2. SERVICES LISTING — the four-up category mosaic
   ========================================================================== */

.service-categories {
  margin-bottom: var(--space-6);
}

/* Was a raw edge-to-edge block with hairline rules and square corners — it
   read like a stock CMS grid. Rounding the whole mosaic as one surface and
   floating it on a soft shadow makes it feel like a deliberate object. */
.service-categories > div {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}

.service-category {
  padding: var(--space-3);
}

/* Slower, softer image push — 320ms rather than a snappy 260ms — and the
   scrim resolves over the same beat so nothing feels like it snaps. */
.service-category img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.service-category:hover img {
  transform: scale(1.05);
}

.service-category:after {
  transition: background var(--dur) var(--ease-out);
}

.service-category span {
  transition: transform var(--dur) var(--ease-out);
}

.service-category:hover span,
.service-category:focus-visible span {
  transform: translateY(-3px);
}

.service-category:focus-visible {
  outline: 3px solid #b9e584;
  outline-offset: -6px;
  border-radius: var(--r);
}


/* ==========================================================================
   3. SERVICES LISTING — section heading
   ========================================================================== */

.service-categories ~ .directory-heading {
  margin-bottom: var(--space-4);
}

.service-categories ~ .directory-heading > span {
  padding-bottom: var(--space-1);
}


/* ==========================================================================
   4. SERVICES LISTING — the service cards
   ========================================================================== */

.service-directory {
  gap: var(--space-3);
  padding-bottom: var(--space-6);
}

/* Flat hairline card on a near-white page = almost no card at all. Give it a
   white surface, a much lighter hairline, and a real (if quiet) first level of
   elevation, so the grid reads as a set of physical cards at rest. */
.service-directory-card {
  border-radius: var(--r-lg);
  border-color: #dbeaf5;
  background: #fff;
  box-shadow: var(--elev-1);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.service-directory-card:hover,
.service-directory-card:focus-visible {
  transform: translateY(-4px);
  border-color: #bcdcef;
  box-shadow: var(--elev-3);
}

.service-directory-card img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.service-directory-card:hover img,
.service-directory-card:focus-visible img {
  transform: scale(1.035);
}

/* The old 176px floor left a dead gap between the title and the link on short
   titles. Slightly smaller floor, more generous padding: the copy block now
   sits in the card rather than rattling around inside it. */
.service-directory-card__copy {
  min-height: 156px;
  padding: var(--space-3) var(--space-3) var(--space-3);
}

.service-directory-card h3 {
  margin: 10px 0 var(--space-3);
}

.service-directory-card b {
  padding-top: var(--space-1);
  transition: transform var(--dur) var(--ease-out);
}

.service-directory-card b em {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}

.service-directory-card:hover b em {
  transform: translateX(5px);
}


/* ==========================================================================
   5. SERVICE DETAIL — hero
   ========================================================================== */

.service-detail-hero .service-detail-hero__copy {
  padding: var(--space-3) 0;
}

/* THE one bold move on this template: the hard `18px 18px 0` offset block
   behind the hero photo was the single most dated thing on the page. It is
   replaced by genuine layered elevation plus a soft brand-tinted halo, so the
   image floats instead of being stencilled onto a pale rectangle. */
.service-detail-hero__visual {
  border-radius: var(--r-lg);
  box-shadow:
    var(--elev-4),
    0 0 0 1px rgb(7 82 143 / .05);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}

/* Fallback service template (article-hero.service-detail-hero > img). */
.service-detail-hero > img {
  border-radius: var(--r-lg);
  border-color: #dbeaf5;
  box-shadow: var(--elev-4);
}

.service-detail-hero__intro {
  margin: var(--space-3) 0 var(--space-4);
}

.service-detail-hero .button {
  border-radius: var(--r);
  box-shadow: var(--elev-2);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.service-detail-hero .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3);
}


/* ==========================================================================
   6. SERVICE DETAIL — long-form article
   ========================================================================== */

/* Rebalanced two-column rhythm: the aside column was 280px, which left the
   CTA card cramped (three-line heading, orphaned words) while a very wide
   gutter sat doing nothing. Slightly narrower gutter, slightly wider aside. */
.service-detail-layout {
  margin-bottom: var(--space-6);
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(var(--space-4), 7vw, 96px);
}

.service-detail-layout .service-article,
.article.service-article {
  max-width: 68ch;
}

/* Section headings had a 58px lead-in with only 17px trailing; the block never
   read as a unit. Widen the lead-in and let the heading sit closer to the text
   it introduces — classic editorial proximity. */
.service-detail-layout .service-article h2,
.article.service-article h2 {
  margin: var(--space-5) 0 var(--space-2);
}

.service-detail-layout .service-article h3,
.article.service-article h3 {
  margin: var(--space-4) 0 var(--space-1);
}

.service-detail-layout .service-article p,
.article.service-article p {
  margin: 0 0 var(--space-3);
}

/* A quiet lead paragraph. No copy change — the first paragraph simply gets
   the weight it already carries in the reading order. */
.service-detail-layout .service-article__body > p:first-child {
  color: #2c5675;
  font-size: 1.14rem;
  line-height: 1.72;
}

.service-detail-layout .service-article ul,
.service-detail-layout .service-article ol,
.article.service-article ul,
.article.service-article ol {
  margin: var(--space-3) 0 var(--space-4);
}

.service-detail-layout .service-article li,
.article.service-article li {
  margin: var(--space-1) 0;
  padding-left: var(--space-3);
}

/* Smaller, calmer bullet with a soft brand ring instead of a solid blob. */
.service-detail-layout .service-article ul li:before,
.article.service-article ul li:before {
  top: .78em;
  width: 7px;
  height: 7px;
  background: #1675bb;
  box-shadow: 0 0 0 4px rgb(22 117 187 / .12);
}

/* Pull-quotes become a soft panel rather than a flat tinted slab with a hard
   4px rule butted against a square corner. */
.service-detail-layout .service-article blockquote,
.article.service-article blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left-width: 3px;
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
}

.service-detail-layout .service-article a,
.article.service-article a {
  transition: color var(--dur-fast) var(--ease-out);
}


/* ==========================================================================
   7. SERVICE DETAIL — the sticky aside CTA
   ========================================================================== */

/* Second place worth spending on: the aside was a hairline rail floating in a
   very wide empty column and read as leftover markup. It becomes a single
   soft, self-contained card — the page's clear next step — while keeping the
   same brand blue top rule as its accent. */
.service-detail-aside {
  top: 112px;
  padding: var(--space-3);
  border-top: 0;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--elev-2);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}

.service-detail-aside:before {
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: var(--space-2);
  border-radius: 2px;
  background: #1675bb;
  content: "";
}

.service-detail-aside h2 {
  margin: var(--space-1) 0 var(--space-2);
}

.service-detail-aside > span {
  margin-bottom: var(--space-3);
}

.service-detail-aside a,
.service-detail-aside button {
  align-items: center;
  padding: 15px 0;
  border-top-color: #dbeaf5;
  transition: color var(--dur-fast) var(--ease-out);
}

.service-detail-aside button {
  border-bottom-color: #dbeaf5;
}

.service-detail-aside a b,
.service-detail-aside button b {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}

.service-detail-aside a:hover b,
.service-detail-aside button:hover b {
  transform: translateX(5px);
}


/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .service-detail-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-4);
  }
}

@media (max-width: 760px) {
  .service-categories {
    margin-bottom: var(--space-5);
  }

  .service-categories > div {
    box-shadow: var(--elev-2);
  }

  .service-category {
    padding: var(--space-2);
  }

  .service-directory {
    gap: var(--space-2);
    padding-bottom: var(--space-5);
  }

  .service-directory-card__copy {
    min-height: 132px;
    padding: var(--space-3) 22px;
  }

  /* No lift on touch — a hover transform that never resolves just leaves the
     card stuck mid-air after a tap. */
  .service-directory-card:hover {
    transform: none;
  }

  .service-detail-hero__visual {
    box-shadow: var(--elev-3);
  }

  .service-detail-layout {
    margin-bottom: var(--space-5);
  }

  .service-detail-layout .service-article h2,
  .article.service-article h2 {
    margin-top: var(--space-4);
  }

  .service-detail-layout .service-article__body > p:first-child {
    font-size: 1.06rem;
  }

  .service-detail-aside {
    margin-top: var(--space-4);
    padding: var(--space-3) 22px;
  }
}

@media (hover: none) {
  .service-directory-card:hover,
  .service-category:hover img,
  .service-directory-card:hover img {
    transform: none;
  }
}