/* ═══════════════════════════════════════════════════════════════
   DIRIGO — the signature mechanics.
   One per page, each pinned while its own scroll distance is spent on a
   single idea rather than on scrolling past a layout.
   ═══════════════════════════════════════════════════════════════ */

.sig{position:relative;background:var(--paper)}
.sig-plate{display:none}
.sig-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
.sig-copy{
  position:relative;z-index:6;width:var(--shell);margin-inline:auto;
  pointer-events:none;text-align:center;
}
.sig-copy .sec-eyebrow{justify-content:center}
/* `.sig-copy p` also matches this paragraph and outranks .sec-eyebrow, so the
   label kept the body colour and lost the blue the rest of the site now uses. */
.sig-copy p.sec-eyebrow{color:var(--blue)}
.sig-copy h1{
  font-weight:800;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(2.2rem,6vw,4.8rem);text-wrap:balance;
}
.sig-copy p{
  margin:1.6rem auto 0;max-width:48ch;
  font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.85;color:var(--ink-soft);
}
.sig-cue{
  position:absolute;inset-block-end:2rem;inset-inline:0;z-index:7;
  display:flex;justify-content:center;pointer-events:none;
}
.sig-cue i{
  width:1px;height:44px;transform-origin:top;
  background:linear-gradient(to bottom,var(--cyan),transparent);
  animation:rail 2.6s ease-in-out infinite;
}

/* ═══ 1 · ZOOM THROUGH THE TYPE (about) ══════════════════════════
   The word is the window: photography lives inside the letterforms and
   the whole thing scales until the picture is all that is left. */
.zoom-word{
  position:absolute;z-index:3;
  font-weight:800;letter-spacing:-.06em;line-height:1;
  font-size:clamp(4rem,17vw,15rem);
  background-image:url("../sig/about-zoom-w26.webp");
  background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:transform,opacity;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .zoom-word{color:var(--blue)}
}
/* The word grows into the page as you scroll; without a line saying so,
   people sat on it waiting for a click. Fades out on the first movement. */
.zoom-hint{
  position:absolute;inset-block-end:26%;z-index:5;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.82rem;letter-spacing:.22em;color:var(--ink-soft);
  transition:opacity .3s linear;pointer-events:none;
}
.zoom-hint i{
  width:1px;height:38px;transform-origin:top;
  background:linear-gradient(to bottom,var(--cyan),transparent);
  animation:rail 2.6s ease-in-out infinite;
}
.zoom-year{
  position:absolute;inset-block-end:12%;z-index:5;
  font-size:.86rem;letter-spacing:.34em;color:var(--ink-faint);direction:ltr;
}
.zoom-year b{color:var(--cyan);font-weight:600}
/* Held back until the word has passed over the viewer. */
.sig-zoom .sig-copy{opacity:0;transform:translateY(20px);will-change:opacity,transform}

/* ═══ 2 · THE DECK (company events) ══════════════════════════════
   Six frames stacked like a hand of cards, dealt into an arc. */
.deck{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.deck-card{
  position:absolute;margin:0;overflow:hidden;border-radius:6px;
  width:clamp(150px,17vw,240px);aspect-ratio:31/42;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06);
  will-change:transform;
  transform-origin:50% 120%;
}
.deck-card img{width:100%;height:100%;object-fit:cover}
.sig-deck .sig-copy{mix-blend-mode:normal}
.sig-deck .sig-copy h1{
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ═══ 3 · THE RING (marketing events) ════════════════════════════
   Destinations on a carousel the reader turns by scrolling. */
.ring-stage{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  perspective:1400px;
}
.ring{
  position:relative;width:1px;height:1px;
  transform-style:preserve-3d;will-change:transform;
}
.ring figure{
  position:absolute;margin:0;overflow:hidden;border-radius:4px;
  width:clamp(140px,15vw,210px);aspect-ratio:5/7;
  inset-inline-start:calc(clamp(140px,15vw,210px) / -2);
  inset-block-start:calc(clamp(140px,15vw,210px) * 1.4 / -2);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.06);
  transform:rotateY(var(--a)) translateZ(var(--r));
  backface-visibility:hidden;
}
.ring figure img{width:100%;height:100%;object-fit:cover}
.ring-label{
  position:absolute;inset-block-end:16%;z-index:6;text-align:center;pointer-events:none;
}
.ring-label b{
  display:block;font-size:clamp(1.6rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ring-label span{
  display:block;margin-top:.4rem;
  font-size:.8rem;letter-spacing:.3em;color:var(--ink-faint);direction:ltr;
}

/* ═══ 4 · THE WALL (conferences) ═════════════════════════════════
   A dark hall whose screens come up one bank at a time. */
.sig-wall .sig-pin{background:#08090b}
.wall{
  position:absolute;inset:0;z-index:2;
  display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;
  gap:6px;padding:6px;
}
.wall figure{
  position:relative;margin:0;overflow:hidden;border-radius:3px;background:#0d0f12;
}
.wall figure img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.12);
  transition:opacity .7s var(--ease),transform 1.1s var(--ease);
}
.wall figure.lit img{opacity:1;transform:none}
/* Keeps the copy legible once the wall is fully up. */
.sig-wall .sig-pin::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(58% 48% at 50% 50%,rgba(8,9,11,.92) 0%,rgba(8,9,11,.66) 48%,rgba(8,9,11,.22) 78%);
}
.sig-wall .sig-copy h1{color:#fff}
.sig-wall .sig-copy p{color:rgba(255,255,255,.66)}
.sig-wall .sig-copy .sec-eyebrow{color:rgba(255,255,255,.5)}
.sig-wall .sig-cue i{background:linear-gradient(to bottom,var(--cyan),transparent)}

/* ═══ 5 · STACKING CASES (home) ══════════════════════════════════
   Each case parks under the one before it, so the reel builds up on
   screen instead of scrolling away. */
.stack{width:var(--shell);margin-inline:auto;padding-block-end:14vh}
.stack-card{
  position:sticky;top:calc(7rem + var(--i) * 1.5rem);
  margin:0 0 3.5rem;border-radius:6px;overflow:hidden;
  height:min(74vh,660px);
  box-shadow:0 40px 80px -46px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.07);
  background:#0b0c0e;
}
.stack-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.4s var(--ease);
}
.stack-card:hover img{transform:none}
.stack-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(8,9,11,.9) 0%,rgba(8,9,11,.62) 42%,rgba(8,9,11,.12) 78%);
}
.stack-body{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:2;
  padding:clamp(1.8rem,4vw,3.4rem);
  max-width:52ch;color:#fff;
}
.stack-body .num{
  margin:0 0 .9rem;font-size:.78rem;letter-spacing:.3em;color:var(--cyan);direction:ltr;text-align:right;
}
.stack-body h3{font-weight:800;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.03em;line-height:1.1}
.stack-body p{margin:1rem 0 0;color:rgba(255,255,255,.74);line-height:1.85;max-width:46ch}


@media(prefers-reduced-motion:reduce){
  .zoom-word{transform:none!important}
  .sig-zoom .sig-copy{opacity:1!important;transform:none!important}
  .deck-card,.ring{transform:none!important}
  .wall figure img{opacity:1;transform:none;transition:none}
  .sig-cue i{animation:none}
}

/* ── legibility ──────────────────────────────────────────────────
   The deck and the ring both fill the middle of the frame, so their copy
   is given its own row above the mechanic rather than a scrim fighting
   the photography underneath it. */
.sig-deck .sig-pin,.sig-ring .sig-pin{
  grid-template-rows:auto 1fr;align-content:start;place-items:stretch;
  padding-block:7.5rem 4.5rem;
}
.sig-deck .sig-copy,.sig-ring .sig-copy{grid-row:1;align-self:start}
.sig-deck .sig-copy::before,.sig-ring .sig-copy::before{
  content:"";position:absolute;inset:-2.5rem -3rem -3.5rem;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 130% at 50% 42%,var(--paper) 52%,rgba(255,255,255,0) 100%);
}
.sig-deck .sig-copy h1,.sig-ring .sig-copy h1{font-size:clamp(2rem,4.6vw,3.6rem)}
.sig-deck .sig-copy p,.sig-ring .sig-copy p{margin-top:1.1rem}
.sig-deck .deck,.sig-ring .ring-stage{
  grid-row:2;position:relative;inset:auto;align-self:center;width:100%;height:100%;
}
/* The label sits under the ring, so the ring needs to stop short of it. */
.sig-ring .ring-stage{padding-block-end:7rem}
.sig-ring .ring-label{inset-block-end:5%}

/* The wall keeps its overlay, tightened so the supporting line holds up. */
.sig-wall .sig-pin::after{
  background:radial-gradient(56% 46% at 50% 50%,rgba(8,9,11,.95) 0%,rgba(8,9,11,.8) 44%,rgba(8,9,11,.3) 76%);
}
/* ═══ PORTRAIT ══════════════════════════════════════════════════
   The first pass here was a title with a grid of photos under it, which is
   a fallback, not a design. This is a poster instead: one full-height
   graded frame with the whole text block anchored to the bottom edge.

   Anchoring to the bottom is the fix for the header covering the title —
   not more top padding. The fixed capsule lives at the top of the screen,
   so nothing that matters is put there.

   The frames that used to sit under the copy are gone: the page already
   carries a twelve-frame gallery further down, and repeating four of them
   at the top was the clutter. */
@media(max-width:900px){
  .sig{
    position:relative;height:100svh;min-height:34rem;
    overflow:hidden;isolation:isolate;
    background:linear-gradient(160deg,#1e97cc 0%,#1786b8 46%,#0f6a94 100%);
  }
  .sig-plate{display:none}
  /* Each mechanic sets its own dark pin ground with a two-class selector,
     which outranks a bare .sig-pin — so the override has to match it. */
  .sig-wall .sig-pin,.sig-deck .sig-pin,.sig-ring .sig-pin,.sig-zoom .sig-pin{
    background:none;grid-template-rows:none;padding-block:0;
  }
  /* The wall's dark vignette exists to let copy sit over a lit grid; with no
     grid here it is just a black blob in the middle of the panel. */
  .sig-wall .sig-pin::after{display:none}
  /* A single soft light keeps the flat ground from reading as a swatch. */
  .sig::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(78% 52% at 78% 18%,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 70%);
  }
  /* Heavy at the foot, clear at the head: the copy always has ground. */
  .sig::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom,rgba(4,40,58,0) 40%,rgba(4,40,58,.28) 78%,rgba(4,40,58,.5) 100%);
  }

  .sig-pin{
    position:relative;z-index:4;height:100svh;min-height:34rem;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 0 clamp(3.6rem,9vh,5.2rem);background:none;
  }
  .sig-copy{
    order:-1;width:var(--shell);margin-inline:auto;
    text-align:start;padding-inline:0;opacity:1!important;transform:none!important;
    display:flex;flex-direction:column;gap:1rem;
  }
  /* Matches the p.sec-eyebrow selector that puts brand blue on light pages —
     on the cyan panel that blue all but disappears, so white has to outrank it. */
  .sig .sig-copy p.sec-eyebrow{
    justify-content:flex-start;margin:0;color:rgba(255,255,255,.94);
    font-size:.78rem;letter-spacing:.3em;
  }
  .sig-copy .sec-eyebrow::before{background:#fff;width:26px}
  /* The headline wipes up out of its own mask, as in the hero. */
  .sig-copy h1{
    margin:0;color:#fff;background:none;-webkit-text-fill-color:#fff;
    font-size:clamp(2.5rem,11.5vw,3.8rem);line-height:.96;letter-spacing:-.04em;
  }
  .sig-copy p{
    margin:0;max-width:34ch;color:rgba(255,255,255,.92);
    font-size:1rem;line-height:1.75;
  }

  /* A numbered rule on the reading edge, so the entry is a composition */
  .sig-pin::after{
    content:attr(data-mark);position:absolute;z-index:5;
    inset-block-end:clamp(1.4rem,4vh,2.2rem);
    inset-inline:max(4vw,calc((100vw - var(--shell)) / 2));
    display:block;padding-block-start:.7rem;
    border-block-start:1px solid rgba(255,255,255,.28);
    font-size:.7rem;letter-spacing:.28em;color:rgba(255,255,255,.75);direction:ltr;
  }

  /* Everything the desktop mechanics needed is noise at this width. */
  .deck,.ring,.ring-stage,.ring-label,.wall,.zoom-word,.zoom-year,.sig-cue{display:none!important}
}
@keyframes sigdrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(0,-1.6%,0)}}


/* ---------------------------------------------------------------------------
   Portrait: the cyan world panels were an empty field above the copy. Rather
   than invent a new idiom, borrow the hero's: real event photos as tilted
   cards. Three frames read as a fan; the rest stay hidden. Each of the four
   mechanics keeps its own markup, so the fan is expressed once over all of
   their card containers.

   Two traps handled here:
   · The drivers run once at p=1 below the breakpoint to settle their finished
     state, which writes inline `transform` on deck cards and the ring stage.
     Inline wins, and `transform` is a separate property from `translate`, so
     the fan's own placement would sit on top of a stale rotation. Hence the
     !important resets — they are undoing inline styles, not other rules.
   · Centering is physical (left/translate), not logical: inset-inline-start
     in RTL anchors the right edge and throws the fan off the left of screen.
--------------------------------------------------------------------------- */
@media(max-width:900px){
  /* The lane wrappers carry desktop geometry that does not survive being
     re-purposed (.ring is a 1px pivot, .deck collapses to zero height), and
     the cards would then measure their percentage offsets against it.
     Dissolving the wrappers hands the cards straight to .sig-pin, so all four
     mechanics place their fan against the same 100svh box. */
  .sig-wall .wall,.sig-deck .deck,.sig-ring .ring-stage,.sig-ring .ring{
    display:contents!important;
  }
  .sig-wall .wall figure,.sig-deck .deck figure,.sig-ring .ring figure{display:none}

  .sig-wall .wall figure:nth-child(-n+3),
  .sig-deck .deck figure:nth-child(-n+3),
  .sig-ring .ring figure:nth-child(-n+3),
  .sig-zoom .sig-plate{
    display:block;position:absolute;margin:0;overflow:hidden;
    top:34%;left:50%;transform:none!important;
    aspect-ratio:3/4;border-radius:1rem;
    border:1px solid rgba(255,255,255,.34);
    box-shadow:0 2.4rem 4.4rem -1.4rem rgba(3,32,48,.55);
    background:#0d5f85;filter:none;
  }
  .sig-wall .wall figure:nth-child(-n+3) img,
  .sig-deck .deck figure:nth-child(-n+3) img,
  .sig-ring .ring figure:nth-child(-n+3) img,
  .sig-zoom .sig-plate img{
    width:100%;height:100%;object-fit:cover;display:block;
    opacity:1;transform:none;transition:none;animation:none;
    /* Held back just enough to sit on the cyan ground — .66 read as colourless. */
    filter:saturate(.95) contrast(1.05);
  }
  /* The hero card is first in the DOM, so paint order would bury it under the
     other two — it needs the z-index source order does not give it. */
  .sig-wall .wall figure:nth-child(2),
  .sig-deck .deck figure:nth-child(2),
  .sig-ring .ring figure:nth-child(2){
    height:27svh;width:auto;translate:-100% -54%;rotate:-9deg;z-index:1!important;
  }
  .sig-wall .wall figure:nth-child(3),
  .sig-deck .deck figure:nth-child(3),
  .sig-ring .ring figure:nth-child(3){
    height:27svh;width:auto;translate:0% -46%;rotate:8deg;z-index:1!important;
  }
  .sig-wall .wall figure:nth-child(1),
  .sig-deck .deck figure:nth-child(1),
  .sig-ring .ring figure:nth-child(1){
    height:36svh;width:auto;translate:-50% -50%;rotate:-2.5deg;z-index:2!important;
    border-color:rgba(255,255,255,.55);
    box-shadow:0 3.2rem 6rem -1.6rem rgba(3,32,48,.62);
  }
  /* A cyan veil sets the back pair behind the hero card in depth, not just
     in stacking order. */
  .sig-wall .wall figure:nth-child(2)::after,
  .sig-wall .wall figure:nth-child(3)::after,
  .sig-deck .deck figure:nth-child(2)::after,
  .sig-deck .deck figure:nth-child(3)::after,
  .sig-ring .ring figure:nth-child(2)::after,
  .sig-ring .ring figure:nth-child(3)::after{
    content:"";position:absolute;inset:0;
    background:rgba(20,124,172,.34);
  }
  /* About has no card set of its own — its plate photo becomes the one card. */
  .sig-zoom .sig-plate{
    height:36svh;width:auto;translate:-50% -50%;rotate:-2.5deg;z-index:2;
    border-color:rgba(255,255,255,.55);
    box-shadow:0 3.2rem 6rem -1.6rem rgba(3,32,48,.62);
  }
  /* The plate's tint layer carries each world's old accent inline; the panel
     supplies the hue now, so the layer only muddies the photograph. */
  .sig-zoom .sig-plate i{display:none}

  /* Copy sits above the fan, and clears the numbered rule at the foot. */
  .sig-copy{position:relative;z-index:5}
  /* The per-mechanic pin resets above are two-class selectors, so a bare
     .sig-pin here would lose to them and the copy would sit on the rule. */
  .sig-wall .sig-pin,.sig-deck .sig-pin,.sig-ring .sig-pin,.sig-zoom .sig-pin{
    padding-block-end:clamp(5.2rem,13vh,7.4rem);
  }
  .sig-copy p:not(.sec-eyebrow){font-size:1.02rem;line-height:1.55}

  /* The desktop legibility glow is a paper-white ellipse behind the copy;
     on the cyan panel it is a white blob that swallows the white text. */
  .sig-deck .sig-copy::before,.sig-ring .sig-copy::before{display:none}
  /* Its two-class headline size would otherwise shrink the poster title. */
  .sig-deck .sig-copy h1,.sig-ring .sig-copy h1{font-size:clamp(2.5rem,11.5vw,3.8rem)}
  .sig-deck .sig-copy p,.sig-ring .sig-copy p{margin-top:0}
  /* The ring's inset-inline-start is `right` in RTL; with left:50% both edges
     are pinned, width stops following aspect-ratio and the photo stretches. */
  .sig-wall .wall figure:nth-child(-n+3),
  .sig-deck .deck figure:nth-child(-n+3),
  .sig-ring .ring figure:nth-child(-n+3){right:auto;bottom:auto}
}