/* ═══════════════════════════════════════════════════════════════
   DIRIGO — inner page blocks: the split intro, feature cards and the
   gallery strip. All four service pages are built from these three.
   ═══════════════════════════════════════════════════════════════ */

/* ── split intro ─────────────────────────────────────────────────
   Copy against one tall plate. The plate is sticky so the text scrolls
   past a held image rather than the pair moving as one slab. */
.split{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,6rem);align-items:start;
  padding-block:clamp(3rem,6vw,6rem);
}
.split-copy h2{
  font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(1.7rem,3.6vw,2.9rem);margin-bottom:1.8rem;text-wrap:balance;
}
.split-copy p{
  margin:0 0 1.4rem;color:var(--ink-soft);line-height:1.95;
  font-size:clamp(1rem,1.3vw,1.1rem);max-width:52ch;
}
.split-copy p strong{color:var(--ink);font-weight:500}
.split-media{position:sticky;top:7rem;overflow:hidden;border-radius:3px;aspect-ratio:3/4}
.split-media img{width:100%;height:100%;object-fit:cover}


/* ── feature cards ───────────────────────────────────────────── */
.features{width:var(--shell);margin-inline:auto;padding-block:clamp(3rem,6vw,5rem)}
.feature-grid{
  display:grid;gap:1px;margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  background:var(--line);border:1px solid var(--line);
}
.feature{background:var(--paper);padding:clamp(1.8rem,3vw,2.6rem)}
.feature b{
  display:block;font-size:.78rem;letter-spacing:.26em;color:var(--cyan);
  font-weight:500;margin-bottom:1.5rem;direction:ltr;
}
.feature h3{font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.02em;line-height:1.25}
.feature p{margin:1rem 0 0;color:var(--ink-soft);line-height:1.9;font-size:.99rem}

/* ── gallery strip ───────────────────────────────────────────────
   Deliberately uneven: a tall frame beside two shorter ones, so the row
   reads as a composition rather than three equal tiles. */
.gallery{width:var(--shell);margin-inline:auto;padding-block:clamp(3rem,6vw,5rem)}
.gallery-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:1.1rem;margin-top:2.8rem}
.gallery figure{margin:0;overflow:hidden;border-radius:3px;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery .g-main{grid-row:span 2;aspect-ratio:4/5}
.gallery .g-side{aspect-ratio:16/10}

/* ── closing band ────────────────────────────────────────────── */
.band{
  width:var(--shell);margin-inline:auto;
  padding-block:clamp(3.5rem,7vw,6rem);
  border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);
}
.band h2{
  font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(1.6rem,3.6vw,2.8rem);max-width:20ch;
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .band h2{color:var(--blue)}
}

@media(max-width:900px){
  .split{grid-template-columns:1fr;padding-block:2.5rem}
  .split-media{position:static;aspect-ratio:4/3}
  .gallery-grid{grid-template-columns:1fr}
  .gallery .g-main{grid-row:auto;aspect-ratio:4/3}
}


/* ═══ feature cards carry a frame ════════════════════════════════ */
.feature{display:flex;flex-direction:column;padding:0;overflow:hidden}
.feature-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0d0f12}
.feature-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.2s var(--ease)}
.feature:hover .feature-media img{transform:none}
.feature-text{padding:clamp(1.6rem,2.6vw,2.2rem)}
.feature b{margin-bottom:1rem}

/* ═══ gallery mosaic ═════════════════════════════════════════════
   Twelve frames on a six-column grid with a few deliberate spans, so the
   block reads as a wall of work rather than a row of thumbnails. */
.gallery-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(88px,9vw,132px);gap:10px;margin-top:2.8rem;
  grid-auto-flow:dense;
}
.gallery-grid figure{margin:0;overflow:hidden;border-radius:3px;background:#0d0f12}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery-grid figure:hover img{transform:scale(1.06)}
/* Every band has to add up to the full six columns and share one row span,
   or the leftover cell stays empty and reads as a photo that failed to load.
   `dense` cannot rescue it: once the widths are all 2 or more, nothing is
   small enough to backfill a single-column gap.
   Bands: 3+3 · 2+2+2 · 2+4 · 4+2 · 2+2+2 */
.gallery-grid figure:nth-child(1){grid-column:span 3;grid-row:span 3}
.gallery-grid figure:nth-child(2){grid-column:span 3;grid-row:span 3}
.gallery-grid figure:nth-child(3){grid-column:span 2;grid-row:span 2}
.gallery-grid figure:nth-child(4){grid-column:span 2;grid-row:span 2}
.gallery-grid figure:nth-child(5){grid-column:span 2;grid-row:span 2}
.gallery-grid figure:nth-child(6){grid-column:span 2;grid-row:span 3}
.gallery-grid figure:nth-child(7){grid-column:span 4;grid-row:span 3}
.gallery-grid figure:nth-child(8){grid-column:span 4;grid-row:span 3}
.gallery-grid figure:nth-child(9){grid-column:span 2;grid-row:span 3}
.gallery-grid figure:nth-child(10){grid-column:span 2;grid-row:span 2}
.gallery-grid figure:nth-child(11){grid-column:span 2;grid-row:span 2}
.gallery-grid figure:nth-child(12){grid-column:span 2;grid-row:span 2}
@media(max-width:900px){
  /* Four columns: full-width feature rows, everything else in clean pairs.
     The full-width frames sit at 1, 4, 9 and 12 so an even number of paired
     frames falls between each one — any other spacing leaves an odd frame
     with a gap beside it. */
  .gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(70px,14vw,110px);gap:7px;grid-auto-flow:dense}
  .gallery-grid figure:nth-child(n){grid-column:span 2;grid-row:span 2}
  .gallery-grid figure:nth-child(1),
  .gallery-grid figure:nth-child(4),
  .gallery-grid figure:nth-child(9),
  .gallery-grid figure:nth-child(12){grid-column:span 4;grid-row:span 3}
}
/* ═══ THE FLOW — a path, not three boxes ═════════════════════════
   A hairline runs across the top with a node per step; the cards hang
   below it at staggered depths so the row reads as a route being walked
   rather than as a set of equal panels. */
.steps{padding:1rem 0 clamp(4rem,8vw,7rem)}
.flow{
  position:relative;width:var(--shell);margin:3.5rem auto 0;
  list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);
}
/* the track, and the line that draws along it */
.flow::before,.flow::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
}
.flow::before{background:var(--line)}
.flow::after{
  background:var(--cyan);transform:scaleX(0);transform-origin:inline-start;
  transition:transform 1.5s var(--ease) .15s;
}
.flow.in::after{transform:scaleX(1)}

.flow-step{position:relative;padding-block-start:2.6rem}
.flow-step:nth-child(2){padding-block-start:5.4rem}
.flow-step:nth-child(3){padding-block-start:8.2rem}
/* the node sits on the track, whatever depth its card hangs at */
.flow-step::before{
  content:"";position:absolute;inset-block-start:-5px;inset-inline-start:0;
  width:11px;height:11px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease);
}
.flow-step:hover::before{background:var(--cyan);border-color:var(--cyan);transform:scale(1.5)}

.flow-num{
  display:block;font-weight:800;line-height:.8;letter-spacing:-.05em;
  font-size:clamp(3.2rem,7vw,6rem);direction:ltr;text-align:right;
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.3;transition:opacity .5s var(--ease);
}
.flow-step:hover .flow-num{opacity:1}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .flow-num{color:var(--blue)}
}
.flow-step h3{
  margin:1.4rem 0 0;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(1.25rem,2.2vw,1.65rem);
}
.flow-step p{
  margin:.9rem 0 0;color:var(--ink-soft);line-height:1.9;
  font-size:clamp(.98rem,1.25vw,1.06rem);max-width:34ch;
}

@media(max-width:900px){
  .flow{grid-template-columns:1fr;gap:0;margin-top:2.5rem}
  .flow::before,.flow::after{inset-block:0 auto;width:1px;height:100%;inset-inline:0 auto}
  .flow::after{transform:scaleY(0);transform-origin:top}
  .flow.in::after{transform:scaleY(1)}
  .flow-step,.flow-step:nth-child(2),.flow-step:nth-child(3){
    padding-block-start:0;padding-block-end:2.6rem;padding-inline-start:1.7rem;
  }
  .flow-step::before{inset-block-start:.4rem;inset-inline-start:-5px}
  .flow-num{font-size:clamp(2.4rem,12vw,3.4rem);opacity:1;text-align:right}
}
/* ═══ WORLD CARDS ════════════════════════════════════════════════
   Replaces the row of text with a set of graded frames in the hero's
   language: each card carries its own photograph, hued from that image,
   with the label and title sitting on it. One column on a phone, so the
   block reads the same way at every width instead of collapsing. */
.reasons{width:var(--shell);margin-inline:auto;padding-block:clamp(3rem,6vw,5rem)}
.wcards{
  list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;
  display:grid;gap:clamp(.8rem,1.4vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
/* Six cards on four columns left an orphan pair; three columns fill both rows. */
@media(min-width:901px){
  .wcards{grid-template-columns:repeat(3,1fr)
}
.wcard{
  position:relative;isolation:isolate;overflow:hidden;border-radius:4px;
  min-height:clamp(19rem,44vw,25rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.4rem,2.4vw,2rem);color:#fff;background:#0b0c0e;
}
.wcard-bg{position:absolute;inset:0;z-index:0}
.wcard-bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.3s var(--ease);
}
.wcard:hover .wcard-bg img{transform:scale(1)}
/* This used to replace the photograph's hue outright at .62 — which is what
   turned the two audience cards mustard and indigo and drained every frame
   of its own colour. The tint now only unifies the set; the photograph is
   what you see. Saturation is nudged up to undo the flattening the dark
   gradient below causes. */
.wcard-bg i{position:absolute;inset:0;opacity:.16;mix-blend-mode:color}
.wcard-bg img{filter:saturate(1.14) contrast(1.03) brightness(1.1)}
.wcard-bg u{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,9,12,.9) 0%,rgba(6,9,12,.62) 34%,rgba(6,9,12,.22) 66%,rgba(6,9,12,0) 100%);
}
.wcard-num{
  position:absolute;z-index:2;inset-block-start:clamp(1.1rem,2vw,1.5rem);
  inset-inline-start:clamp(1.4rem,2.4vw,2rem);
  font-size:.74rem;letter-spacing:.28em;color:rgba(255,255,255,.75);direction:ltr;
}
.wcard h3{
  position:relative;z-index:2;margin:0;overflow:hidden;
  font-weight:800;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(1.35rem,2.4vw,1.85rem);
}
.wcard h3 b{
  display:block;font-weight:inherit;transform:translateY(110%);
  transition:transform .66s cubic-bezier(.22,1,.36,1);
}
.wcard.in h3 b{transform:none}
.wcard p{
  position:relative;z-index:2;margin:.75rem 0 0;max-width:38ch;
  font-size:clamp(.92rem,1.15vw,1rem);line-height:1.75;color:rgba(255,255,255,.82);
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s;
}
.wcard.in p{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .wcard h3 b{transform:none}.wcard p{opacity:1;transform:none}
}/* Eight-frame mosaic (marketing, conferences). Bands: 3+3 · 2+2+2 · 2+2+2.
   Phone: full-width at 1 and 4, pairs between. */
.gallery-grid.g8 figure:nth-child(n+6){grid-column:span 2;grid-row:span 2}
@media(max-width:900px){
  .gallery-grid.g8 figure:nth-child(n){grid-column:span 2;grid-row:span 2}
  .gallery-grid.g8 figure:nth-child(1),
  .gallery-grid.g8 figure:nth-child(4){grid-column:span 4;grid-row:span 3}
}