/* Homepage SERVICES block — two sections that replace the Fragment topic banners.

   1. .fodl-services-title — the site's own title block (the one "Featured Projects"
      uses: .section-text-box.for-titles + .heading-h2 + the [ ] labels link), recoloured
      for a dark background. Structure is copied verbatim so the Webflow loader-block
      wipe and the label hover-roll keep working; only colours change here.
   2. .fodl-services — the four SERVICE 01-04 banners: black cards carrying generated
      black-and-gold renders (images/fodl-service-0*.avif) on a cinema-black field.
      Card internals are still the Fragment ftl- component (css/fragment-topics.css)
      with its existing script (image reveal + parallax + title slide-in + hover
      padding-expansion); this file restyles it onto our system: Funnel Display type,
      site gutters, hairline card borders.

   Round-2 comp note: everything behind the cards is BLACK ONLY — no yellow field and
   no black-to-yellow fade (the first pass had both; the gold lives inside the card
   artwork now, nowhere else).

   Both sections sit inside the template's .padding-section-h > .padding-section-v >
   .container wrappers so the heading and the cards share one gutter with the rest of
   the page. The ftl- em scale (.75vw) lives on the inner .fsv-list instead of the
   section, which is what lets the outer padding stay on the fluid root em. */

:root{
  --fsv-black:#0A0A0A;
}

/* ---- 1. Title section ------------------------------------------------------ */

.fodl-services-title{background-color:var(--fsv-black)}
.fodl-services-title .heading-h2{color:var(--_theme---neutral-colors--primary)}
/* the wipe tiles must match the section, or the load animation flashes a grid */
.fodl-services-title .loader-block{background-color:var(--fsv-black)}
/* The label roll-up (IX3 slides .label-text.center up by 1em on hover) draws its
   second row as a text-shadow that .labels-block clips. Two things follow on a dark
   field: the template's 3x-small bottom padding leaves ~3px of that copy showing
   under the text at rest — invisible at the template's contrast, glaring here — so
   it is dropped; and the shadow keeps the template's #262626 rather than the
   section's light text, because the only time it is visible is over the yellow bar
   IX3 paints behind the block on hover, where dark is the legible colour. */
.fodl-services-title .labels-block{padding-bottom:0}

/* ---- 2. Services banners --------------------------------------------------- */

.fodl-services{background-color:var(--fsv-black)}
/* the ftl- component's em scale, moved off the section onto the list */
.fodl-services .fsv-list{font-family:"Funnel Display",sans-serif;font-size:.75vw;font-weight:400;line-height:1.2em;grid-row-gap:2.25em;gap:2.25em}

/* ~3.1:1 cards like the comp (the first pass ran 4:1; the generated art is composed
   for the taller frame) */
.fodl-services .ftl-link{border-radius:12px;padding:18em 4em;color:#fff}
.fodl-services .ftl-link:hover{padding-top:19.5em;padding-bottom:19.5em}
.fodl-services .ftl-bg{background-color:var(--fsv-black);border-radius:12px;overflow:hidden}
/* black card on black field: the hairline is what makes the card edge exist */
.fodl-services .ftl-link:after{content:"";z-index:30;border:1px solid rgba(220,220,220,.16);border-radius:12px;position:absolute;inset:0;pointer-events:none}
/* the reveal panel slides away over the section colour, so it has to be that colour */
.fodl-services .ftl-color-bg{background-color:var(--fsv-black)}

/* Titles onto the site's display face (was Manrope 700), uppercase with the comp's
   full stop supplied by the markup. */
.fodl-services .ftl-title{font-family:"Funnel Display",sans-serif;font-size:5.5em;font-weight:800;letter-spacing:-.03em;line-height:1.1em;text-transform:uppercase;color:#fff}

/* The renders are black at their own edges; this only steadies the label corners and
   the floor under wide-viewport crops. (The plum multiply, the radial black-out
   vignette and the per-card gold CSS filters from the placeholder era are gone —
   the art is really gold now.) */
.fodl-services .ftl-bg-overlay{mix-blend-mode:normal;background-image:linear-gradient(to bottom,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 32%,rgba(10,10,10,0) 72%,rgba(10,10,10,.35) 100%)}

/* SERVICE 01 — / EXPLORE -> */
.fodl-services .ftl-label{grid-column-gap:1.1em;gap:1.1em;align-items:center;display:flex;opacity:.85}
.fodl-services .ftl-label-text{font-family:"Funnel Display",sans-serif;font-size:.95em;font-weight:500;letter-spacing:.08em}
.fodl-services .fsv-dash{background-color:currentColor;opacity:.6;flex:none;width:1.8em;height:1px;display:block}

@media screen and (min-width:1440px){
  .fodl-services .fsv-list{font-size:11px}
}
@media screen and (min-width:1920px){
  .fodl-services .fsv-list{font-size:13px}
}
@media screen and (max-width:991px){
  .fodl-services .fsv-list{font-size:11px}
  .fodl-services .ftl-title{font-size:4.2em}
  .fodl-services .ftl-link{padding:12.5em 3em}
  .fodl-services .ftl-link:hover{padding-top:13.5em;padding-bottom:13.5em}
}
@media screen and (max-width:767px){
  .fodl-services .ftl-title{font-size:3.2em}
  .fodl-services .ftl-link{padding:9.5em 2.5em}
  .fodl-services .ftl-link:hover{padding-top:10.1em;padding-bottom:10.1em}
  .fodl-services .ftl-label{inset:2em auto auto 2em}
  .fodl-services .ftl-label.ftl-label-2nd{left:auto;right:2em}
}
@media screen and (max-width:479px){
  .fodl-services .ftl-title{font-size:2.5em}
  /* the label row is tight on a phone card; the dash is the part that gives */
  .fodl-services .fsv-dash{display:none}
}