/* ============================================================
   INDUSTRY PAGE TEMPLATE  —  /industries/{slug}
   Sibling to the service page. Reuses service-page.css for the
   hero, breadcrumb, chip, CTAs and closing strip; this file adds
   the industry-specific sections:
     1. Industry Overview   — editorial two-column
     2. Featured Report     — navy showcase + CSS report cover
     3. Focus Areas         — 2×2 card grid (navy-on-hover)
     4. Insights            — partner LinkedIn spotlight + blogs
   No new JS dependencies beyond industry.js (scroll reveals).
============================================================ */

/* ---- Scroll-reveal primitive (mirrors the site's .in-view pattern).
        Elements start hidden; industry.js adds .is-in when they enter
        the viewport. Stagger via inline style="--d:N". Degrades to
        fully-visible if JS or motion is off. ---- */
.ind-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-butter),
              transform 0.9s var(--ease-butter);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.ind-reveal.is-in { opacity: 1; transform: none; }
.no-js .ind-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ind-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Shared section label — gold dot + uppercase tracking */
.ind-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.ind-label__dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,150,110,0.16);
}


/* ------------------------------------------------------------
   1. INDUSTRY OVERVIEW  —  editorial two-column
------------------------------------------------------------ */
.ind-overview {
  background: #fff;
  padding: clamp(64px, 8vw, 120px) 0;
}
.ind-overview__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: start;
}
.ind-overview__head { position: sticky; top: 104px; }
.ind-overview__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.ind-overview__title em { font-style: italic; color: var(--gold); }

.ind-overview__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 clamp(24px, 2.4vw, 36px);
}
.ind-overview__body p {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.75;
  color: rgba(11,30,61,0.74);
  margin: 0 0 1.15em;
}
.ind-overview__body p:last-child { margin-bottom: 0; }

/* Capability tag row beneath the overview body */
.ind-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(26px, 2.6vw, 38px);
}
.ind-tag {
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 500;
  color: rgba(11,30,61,0.7);
  padding: 8px 15px;
  border: 1px solid rgba(11,30,61,0.12);
  border-radius: 999px;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.ind-tag:hover {
  border-color: rgba(184,150,110,0.55);
  color: var(--navy);
  background: rgba(184,150,110,0.07);
}


/* ------------------------------------------------------------
   2. FEATURED INDUSTRY REPORT  —  navy showcase
------------------------------------------------------------ */
.ind-report {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* faint dot mesh + gold corner glow */
.ind-report::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 15% 20%, #000 30%, transparent 72%);
          mask-image: radial-gradient(ellipse at 15% 20%, #000 30%, transparent 72%);
  pointer-events: none; z-index: -1;
}
.ind-report::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 80% at 100% 0%, rgba(184,150,110,0.22), transparent 60%);
  pointer-events: none; z-index: -1;
}
.ind-report__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  padding: clamp(64px, 8vw, 120px) 0;
}
.ind-report__label { color: var(--gold); }
.ind-report__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  text-wrap: balance;
}
.ind-report__title em { font-style: italic; color: var(--gold); }
.ind-report__body p {
  font-family: var(--font-sans);
  font-size: clamp(0.98rem, 1.05vw, 1.05rem);
  line-height: 1.72;
  color: rgba(255,255,255,0.72);
  margin: 0 0 1.1em;
}
.ind-report__cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(20px, 2.4vw, 32px);
  padding: 15px 26px;
  background: var(--gold);
  color: #0b1e3d;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.92rem; font-weight: 500;
  text-decoration: none;
  transition: background 0.35s ease, gap 0.35s ease, transform 0.3s ease;
}
.ind-report__cta svg { width: 15px; height: 15px; }
.ind-report__cta:hover { background: #cba883; gap: 16px; transform: translateY(-2px); }

/* ---- Photo-cover variant (real JPG image) ---------------------------
   Added 2026-06-09 when client supplied the 7 industry-perspective
   covers. The Razor renders <img class="ind-cover__photo"> when the
   slug-matched JPG exists at /images/industries/covers/<slug>-cover.jpg,
   and the card swaps to .ind-cover--photo. The image fills the whole
   card (object-fit: cover) and we hide the CSS gold-spine pseudo so
   the JPG's own design isn't overlaid. */
.ind-cover--photo { background: transparent; }
.ind-cover--photo::before,
.ind-cover--photo::after { display: none; }
.ind-cover__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ---- CSS-rendered report cover (no stock photo) ---- */
.ind-cover {
  position: relative;
  justify-self: center;
  width: min(330px, 80%);
  aspect-ratio: 3 / 4;
  border-radius: 6px 14px 14px 6px;
  background:
    linear-gradient(155deg, #16305c 0%, #0b1e3d 62%, #07142b 100%);
  background-color: #102649;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.65),
    0 2px 0 rgba(255,255,255,0.06) inset;
  transform: rotate(2.5deg);
  transition: transform 0.6s var(--ease-butter), box-shadow 0.6s var(--ease-butter);
  overflow: hidden;
}
.ind-cover:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 50px 90px -28px rgba(0,0,0,0.7);
}
/* gold binding spine */
.ind-cover::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 9px;
  background: linear-gradient(180deg, var(--gold), #8f6f4c);
}
/* subtle sheen sweep */
.ind-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  pointer-events: none;
}
.ind-cover__inner {
  position: absolute; inset: 0;
  padding: clamp(24px, 2vw, 32px) clamp(22px, 1.8vw, 28px) clamp(22px, 1.8vw, 28px) clamp(30px, 2.4vw, 40px);
  display: flex; flex-direction: column;
}
.ind-cover__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.ind-cover__rule {
  width: 40px; height: 2px; background: var(--gold);
  margin: 14px 0 auto; border-radius: 2px;
}
.ind-cover__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 10px;
}
.ind-cover__sub {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  margin: 0 0 18px;
}
.ind-cover__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
}
.ind-cover__brand { color: rgba(255,255,255,0.82); font-weight: 500; letter-spacing: 0.01em; }


/* ------------------------------------------------------------
   3. FOCUS AREAS  —  2×2 card grid
------------------------------------------------------------ */
.ind-focus {
  background: #fff;
  padding: clamp(64px, 8vw, 120px) 0;
}
.ind-focus__head {
  max-width: 720px;
  margin: 0 0 clamp(36px, 4vw, 60px);
}
.ind-focus__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.ind-focus__title em { font-style: italic; color: var(--gold); }

.ind-focus__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.ind-focus__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 40px);
  border-radius: 18px;
  background: #f7f5f0;
  border: 1px solid rgba(11,30,61,0.05);
  overflow: hidden;
  transition: background 0.45s ease, transform 0.45s ease, border-color 0.45s ease, box-shadow 0.5s ease;
}
.ind-focus__card:hover {
  background: var(--navy);
  border-color: rgba(184,150,110,0.45);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -34px rgba(11,30,61,0.5);
}
/* watermark numeral */
.ind-focus__num {
  position: absolute;
  top: clamp(14px, 1.4vw, 22px); right: clamp(18px, 1.8vw, 28px);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1;
  color: rgba(11,30,61,0.08);
  transition: color 0.45s ease;
  pointer-events: none;
}
.ind-focus__card:hover .ind-focus__num { color: rgba(184,150,110,0.28); }

.ind-focus__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: #fff;
  color: var(--navy);
  margin-bottom: clamp(18px, 1.8vw, 26px);
  transition: background 0.45s ease, color 0.45s ease, transform 0.55s var(--ease-butter);
}
.ind-focus__icon svg { width: 26px; height: 26px; }
.ind-focus__card:hover .ind-focus__icon {
  background: var(--gold);
  color: #0b1e3d;
  transform: scale(1.10);
}
.ind-focus__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 10px;
  max-width: 22ch;
  transition: color 0.45s ease;
}
.ind-focus__desc {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1vw, 0.98rem);
  line-height: 1.62;
  color: rgba(11,30,61,0.7);
  margin: 0;
  transition: color 0.45s ease;
}
.ind-focus__card:hover .ind-focus__name { color: #fff; }
.ind-focus__card:hover .ind-focus__desc { color: rgba(255,255,255,0.74); }


/* ------------------------------------------------------------
   4. INSIGHTS & PERSPECTIVES  —  partner spotlight + blogs
------------------------------------------------------------ */
.ind-insights {
  background: #f7f5f0;
  padding: clamp(64px, 8vw, 120px) 0;
}
.ind-insights__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  margin-bottom: clamp(34px, 4vw, 54px);
}
.ind-insights__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
}
.ind-insights__title em { font-style: italic; color: var(--gold); }

.ind-insights__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: stretch;
}

/* --- Partner LinkedIn spotlight (navy card) --- */
.ind-partner {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--navy);
  color: #fff;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
}
.ind-partner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(184,150,110,0.24), transparent 58%);
  pointer-events: none; z-index: 0;
}
.ind-partner__media {
  position: relative; z-index: 1;
  margin: 0;
  aspect-ratio: 16 / 12;
  overflow: hidden;
  background: #102649;
}
.ind-partner__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  transition: transform 1.1s var(--ease-butter);
}
.ind-partner:hover .ind-partner__media img { transform: scale(1.05); }
.ind-partner__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11,30,61,0.85) 100%);
}
.ind-partner__copy {
  position: relative; z-index: 1;
  padding: clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column;
  flex: 1;
}
.ind-partner__chip {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 5px 12px; margin-bottom: 16px;
  border: 1px solid rgba(184,150,110,0.5);
  border-radius: 999px;
  background: rgba(184,150,110,0.12);
  font-family: var(--font-sans);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.ind-partner__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.ind-partner__role {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.66);
  margin: 0 0 18px;
}
.ind-partner__desc {
  font-family: var(--font-sans);
  font-size: 0.92rem; line-height: 1.6;
  color: rgba(255,255,255,0.74);
  margin: 0 0 auto;
}
.ind-partner__cta {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  margin-top: clamp(22px, 2.2vw, 30px);
  padding: 12px 20px;
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.86rem; font-weight: 500;
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, gap 0.35s ease, transform 0.3s ease;
}
.ind-partner__cta svg { width: 16px; height: 16px; }
.ind-partner__cta:hover { background: var(--gold); color: #0b1e3d; gap: 14px; transform: translateY(-2px); }

/* Text-only variant (no named sector lead — archive promo) */
.ind-partner--text { justify-content: center; min-height: 340px; }
.ind-partner--text .ind-partner__copy { padding: clamp(34px, 4vw, 52px); }
.ind-partner--text .ind-partner__name { max-width: 18ch; margin-bottom: 12px; }

/* --- Blogs / publications column --- */
.ind-feed { display: flex; flex-direction: column; }
.ind-feed__bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.ind-feed__bar h3 {
  font-family: var(--font-serif);
  font-weight: 500; font-size: 1.15rem;
  color: var(--navy); margin: 0;
}
/* Feed-only layout (partner spotlight hidden) — collapse the
   insights grid to a single column and render the feed as 3
   publication-style cards in one row, reusing the homepage
   carousel's .hb-card / .hb-card--col styles defined in
   home-page.css. Per client request (2026-06-09). */
.ind-insights__grid--feed-only {
  grid-template-columns: 1fr;
}
.ind-insights__grid--feed-only .ind-feed__list--cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ind-insights__grid--feed-only .ind-feed__list--cards > li {
  list-style: none;
  display: flex;
}
.ind-insights__grid--feed-only .ind-feed__list--cards .hb-card {
  width: 100%;
}
/* Mobile: collapse to single column so cards don't crush. */
@media (max-width: 720px) {
  .ind-insights__grid--feed-only .ind-feed__list--cards {
    grid-template-columns: 1fr;
  }
}

.ind-feed__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.ind-feed__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(11,30,61,0.06);
  border-radius: 16px;
  padding: 12px;
  text-decoration: none;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.45s ease;
}
.ind-feed__item:hover {
  border-color: rgba(184,150,110,0.5);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -24px rgba(11,30,61,0.3);
}
.ind-feed__media {
  margin: 0; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1 / 1; background: #ececea;
}
.ind-feed__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-butter); }
.ind-feed__item:hover .ind-feed__media img { transform: scale(1.06); }
.ind-feed__cat {
  font-family: var(--font-sans);
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
}
.ind-feed__title {
  font-family: var(--font-serif);
  font-weight: 500; font-size: 0.98rem; line-height: 1.28;
  color: var(--navy); margin: 4px 0 0;
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}
.ind-feed__item:hover .ind-feed__title { color: var(--gold); }


/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1000px) {
  .ind-overview__wrap { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .ind-overview__head { position: static; }
  .ind-report__wrap { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 60px); }
  .ind-cover { order: -1; }
  .ind-insights__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ind-focus__grid { grid-template-columns: 1fr; }
  .ind-feed__item { grid-template-columns: 72px 1fr; gap: 12px; }
}

/* 2026-06-10 (client request): .ind-report__wrap zeroes the .svc-wrap
   horizontal padding (fine on desktop where the 1380px wrap floats
   centred with viewport margin), but on small screens the report text
   sat flush against the viewport edge. Restore side padding below the
   desktop guard — nothing ≥992px is affected. */
@media (max-width: 991px) {
  .ind-report__wrap {
    padding-left: clamp(20px, 5vw, 48px);
    padding-right: clamp(20px, 5vw, 48px);
  }
}
/* 2026-06-11: the zeroed horizontal padding ALSO leaves the report text
   flush-left at laptop widths (992–1440px), where the 1380px wrap fills the
   viewport but the centred-margin assumption (and the ≤991 fix) don't apply.
   Restore standard side padding for that band only. Wide desktop (>1440px,
   centred wrap with margin) and mobile (≤991px, its own fix) are untouched. */
@media (min-width: 992px) and (max-width: 1440px) {
  .ind-report__wrap {
    padding-left: clamp(20px, 5vw, 80px);
    padding-right: clamp(20px, 5vw, 80px);
  }
}

/* ============================================================
   INDUSTRY-SPECIFIC SERVICES (Section 5b)
   CTA grid of service tiles that link to /services/{slug}.
============================================================ */
.ind-services {
  position: relative;
  padding: clamp(72px, 9vw, 130px) clamp(20px, 5vw, 80px);
  background: linear-gradient(180deg, var(--cream, #f6f1e6) 0%, #fdfaf3 100%);
}
.ind-services__wrap { max-width: 1240px; margin: 0 auto; }
.ind-services__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.ind-services__head .ind-label { margin: 0 auto 18px; }
.ind-services__title {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--navy, #0b1e3d);
  margin: 0 0 18px;
}
.ind-services__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold, #b8966e);
}
.ind-services__sub {
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  color: rgba(11,30,61,0.68);
  margin: 0;
}

.ind-services__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

.ind-services__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
  padding: clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 30px);
  background: #fff;
  border: 1.5px solid rgba(11,30,61,0.08);
  border-radius: 16px;
  color: var(--navy, #0b1e3d);
  text-decoration: none;
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.45s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.45s cubic-bezier(0.16,1,0.3,1);
  min-height: 92px;
}
.ind-services__card::before {
  content: '';
  position: absolute;
  left: clamp(22px, 2.2vw, 30px);
  right: clamp(22px, 2.2vw, 30px);
  bottom: 0;
  height: 2px;
  background: var(--gold, #b8966e);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.ind-services__card:hover,
.ind-services__card:focus-visible {
  background: linear-gradient(180deg, #fff 0%, rgba(184,150,110,0.05) 100%);
  border-color: rgba(184,150,110,0.45);
  transform: translateY(-3px);
  box-shadow:
    0 18px 32px -18px rgba(11,30,61,0.18),
    0 0 0 1px rgba(184,150,110,0.25);
  outline: none;
}
.ind-services__card:hover::before,
.ind-services__card:focus-visible::before { transform: scaleX(1); }

.ind-services__card-num {
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(11,30,61,0.40);
  font-feature-settings: 'tnum';
}
.ind-services__card:hover .ind-services__card-num,
.ind-services__card:focus-visible .ind-services__card-num {
  color: var(--gold, #b8966e);
}

.ind-services__card-label {
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-size: clamp(0.98rem, 1.08vw, 1.08rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--navy, #0b1e3d);
}

.ind-services__card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(11,30,61,0.06);
  color: var(--navy, #0b1e3d);
  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.5s cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}
.ind-services__card-arrow svg { width: 14px; height: 14px; display: block; }
.ind-services__card:hover .ind-services__card-arrow,
.ind-services__card:focus-visible .ind-services__card-arrow {
  background: var(--gold, #b8966e);
  color: #0b1e3d;
  transform: rotate(-10deg) scale(1.06);
}

@media (max-width: 760px) {
  .ind-services__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ind-services__card { padding: 18px 20px; min-height: 80px; }
  .ind-services__card-arrow { width: 32px; height: 32px; }
}
@media (max-width: 460px) {
  .ind-services__grid { grid-template-columns: 1fr; }
}
/* F8 (2026-06-10): intermediate refinements between the existing
   460 and 1000 px steps. The Industry Overview lead font shrinks
   at very small phones so it doesn't dominate the screen, and
   the tags row tightens up. */
@media (max-width: 480px) {
  .ind-overview__lead { font-size: clamp(1.05rem, 4.8vw, 1.2rem); }
  .ind-tag { padding: 7px 12px; font-size: 0.72rem; }
  .ind-focus__card { padding: 22px 18px; }
  .ind-focus__num { font-size: 2rem; }
  .ind-feed__item { grid-template-columns: 60px 1fr; gap: 10px; padding: 10px; }
  .ind-feed__title { font-size: 0.9rem; }
}
/* F4 (2026-06-10): touch-target padding for the industry hero
   CTA arrows and feed cards on touch devices. */
@media (hover: none) and (pointer: coarse) {
  .ind-services__card-arrow { width: 40px; height: 40px; }
  .ind-tag { padding: 10px 14px; }
}


/* ============================================================
   HERO  —  industry-page overrides
   ------------------------------------------------------------
   Shifts copy further left and replaces the heavy horizontal
   scrim with a focused radial overlay that darkens only the
   bottom-left zone where the text sits. The rest of the photo
   stays bright and unobscured so the image carries the focus.
============================================================ */

/* Soften the shared linear scrim so the photo reads brighter.
   The radial overlay below handles legibility behind the text. */
.svc-hero--industry .svc-hero__scrim {
  background:
    linear-gradient(180deg,
      rgba(11,30,61,0.35) 0%,
      rgba(11,30,61,0.05) 30%,
      rgba(11,30,61,0.05) 65%,
      rgba(11,30,61,0.35) 100%);
}

/* Focused radial darkening centred on the bottom-left corner —
   protects text legibility without graying out the whole image.
   Two stacked gradients: a tight inner one for the actual text
   block and a wider, fainter one to feather the edge smoothly. */
.svc-hero--industry .svc-hero__radial {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 18% 88%,
      rgba(11,30,61,0.78) 0%,
      rgba(11,30,61,0.55) 30%,
      rgba(11,30,61,0.18) 60%,
      rgba(11,30,61,0) 80%),
    radial-gradient(40% 50% at 14% 92%,
      rgba(11,30,61,0.55) 0%,
      rgba(11,30,61,0) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Pin the hero column to the left rail of the viewport instead
   of inheriting the centred 1380px wrap. Keeps the copy hard
   against the gutter so the right two-thirds of the photo are
   completely uncovered. */
.svc-hero--industry .svc-hero__inner {
  /* Override the wrap's centring by aligning the inner flex to
     the start, then let the column take a fixed sensible width. */
  align-items: flex-end;
  justify-content: flex-start;
}
.svc-hero--industry .svc-wrap.svc-hero__col {
  margin: 0;                          /* override `margin: 0 auto` */
  max-width: min(620px, 58vw);
  padding-left:  clamp(24px, 5vw, 88px);
  padding-right: clamp(20px, 3vw, 32px);
}

/* On narrow viewports the radial naturally expands across the
   whole frame — keep that, but pull the column back to fill
   width so text doesn't sit in a tiny corner. */
@media (max-width: 720px) {
  .svc-hero--industry .svc-wrap.svc-hero__col {
    max-width: 100%;
    padding-right: clamp(24px, 6vw, 48px);
  }
  .svc-hero--industry .svc-hero__radial {
    background:
      radial-gradient(80% 55% at 50% 92%,
        rgba(11,30,61,0.78) 0%,
        rgba(11,30,61,0.45) 40%,
        rgba(11,30,61,0.10) 75%,
        rgba(11,30,61,0) 100%);
  }
}