/* GF Web page visuals. Branded Higgsfield artwork is delivered through Cloudinary. */

body:has(.service-list) {
  --gf-page-visual:url('https://res.cloudinary.com/vso7adpt/image/upload/f_auto,q_auto:good,w_1600/services-hero-2026-09.png');
}
body:has(.featured-work-page) {
  --gf-page-visual:url('https://res.cloudinary.com/vso7adpt/image/upload/f_auto,q_auto:good,w_1600/work-hero-2026-09.png');
}
body:has(.insights-index) {
  --gf-page-visual:url('https://res.cloudinary.com/vso7adpt/image/upload/f_auto,q_auto:good,w_1600/insights-hero-2026-09.png');
}
body:has(.process-list) {
  --gf-page-visual:url('https://res.cloudinary.com/vso7adpt/image/upload/f_auto,q_auto:good,w_1600/process-hero-2026-09.png');
}
body:has(.about-grid) {
  --gf-page-visual:url('https://res.cloudinary.com/vso7adpt/image/upload/f_auto,q_auto:good,w_1600/about-hero-2026-09.png');
}

body:has(.service-list) .page-hero,
body:has(.featured-work-page) .page-hero,
body:has(.insights-index) .page-hero,
body:has(.process-list) .page-hero,
body:has(.about-grid) .page-hero {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  column-gap:clamp(44px,6vw,96px);
  row-gap:0;
  align-items:center;
  min-height:clamp(590px,66vw,760px);
}

body:has(.service-list) .page-hero > *,
body:has(.featured-work-page) .page-hero > *,
body:has(.insights-index) .page-hero > *,
body:has(.process-list) .page-hero > *,
body:has(.about-grid) .page-hero > * {
  grid-column:1;
}

body:has(.service-list) .page-hero h1,
body:has(.featured-work-page) .page-hero h1,
body:has(.insights-index) .page-hero h1,
body:has(.process-list) .page-hero h1,
body:has(.about-grid) .page-hero h1 {
  max-width:760px;
  font-size:clamp(48px,5.35vw,86px);
}

body:has(.service-list) .page-hero::after,
body:has(.featured-work-page) .page-hero::after,
body:has(.insights-index) .page-hero::after,
body:has(.process-list) .page-hero::after,
body:has(.about-grid) .page-hero::after {
  content:'';
  grid-column:2;
  grid-row:1 / span 3;
  width:100%;
  aspect-ratio:16/9;
  min-height:340px;
  align-self:center;
  background-image:var(--gf-page-visual);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border:1px solid rgba(17,27,24,.16);
  box-shadow:0 28px 70px rgba(17,27,24,.12);
}

/* Insights: reuse different crops from the generated editorial artwork so the article index no longer reads like a wall of text. */
body:has(.insights-index) .insight-card {
  overflow:hidden;
}
body:has(.insights-index) .insight-card::before {
  content:'';
  display:block;
  width:100%;
  aspect-ratio:16/6;
  margin:0 0 24px;
  background-image:url('https://res.cloudinary.com/vso7adpt/image/upload/f_auto,q_auto:good,w_1200/insights-hero-2026-09.png');
  background-repeat:no-repeat;
  background-size:220% auto;
  border:1px solid rgba(17,27,24,.12);
}
body:has(.insights-index) .insight-card:nth-child(3n+1)::before { background-position:left 20%; }
body:has(.insights-index) .insight-card:nth-child(3n+2)::before { background-position:center 52%; }
body:has(.insights-index) .insight-card:nth-child(3n)::before { background-position:right 78%; }
body:has(.insights-index) .insight-card .kicker { margin-bottom:38px; }

/* Process: strengthen the visual route through the six stages without adding decorative clutter. */
body:has(.process-list) .process-list {
  position:relative;
}
body:has(.process-list) .process-list article > span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(29,91,72,.34);
  border-radius:50%;
  background:var(--cream);
  color:var(--forest);
  font-weight:700;
}
body:has(.process-list) .process-list article:nth-child(2n) {
  background:linear-gradient(90deg,rgba(168,191,101,.11),rgba(168,191,101,0) 62%);
}

@media(max-width:980px) {
  body:has(.service-list) .page-hero,
  body:has(.featured-work-page) .page-hero,
  body:has(.insights-index) .page-hero,
  body:has(.process-list) .page-hero,
  body:has(.about-grid) .page-hero {
    grid-template-columns:1fr;
    row-gap:42px;
    min-height:0;
  }

  body:has(.service-list) .page-hero::after,
  body:has(.featured-work-page) .page-hero::after,
  body:has(.insights-index) .page-hero::after,
  body:has(.process-list) .page-hero::after,
  body:has(.about-grid) .page-hero::after {
    grid-column:1;
    grid-row:auto;
    min-height:0;
  }
}

@media(max-width:600px) {
  body:has(.service-list) .page-hero h1,
  body:has(.featured-work-page) .page-hero h1,
  body:has(.insights-index) .page-hero h1,
  body:has(.process-list) .page-hero h1,
  body:has(.about-grid) .page-hero h1 {
    font-size:clamp(44px,13vw,64px);
  }
  body:has(.insights-index) .insight-card::before {
    aspect-ratio:16/7;
    background-size:180% auto;
  }
  body:has(.process-list) .process-list article:nth-child(2n) {
    background:transparent;
  }
}

@media(prefers-reduced-motion:reduce) {
  body:has(.service-list) .page-hero::after,
  body:has(.featured-work-page) .page-hero::after,
  body:has(.insights-index) .page-hero::after,
  body:has(.process-list) .page-hero::after,
  body:has(.about-grid) .page-hero::after {
    scroll-behavior:auto;
  }
}