/* ==========================================================================
   hero.css — "Hanan at work" hero as NATURALLY SCROLLING scenes.
   No pin/sticky: the page always moves as you scroll (never feels stuck).
   Wow comes from a gentle layered parallax: the image drifts slower than the
   text as each scene passes through the viewport (differential motion = depth).
   RTL: in each scene the text (first DOM child) sits on the RIGHT, image LEFT.
   Rhythm: scene 1 light, scene 2 dark statement band, scene 3 light.
   ========================================================================== */

.hero2{position:relative}

/* ==========================================================================
   THE GRID. Every other section on this site puts its content in a 1200px
   .wrap, which leaves a 1148px inner column. The hero used to be the only
   thing spanning the whole viewport (grid-template-columns:1.12fr .88fr), so
   at 2000px its two columns grew to 1088 and 855 and the content drifted to
   opposite edges with 376px of dead air in the middle. At 2560 that gap hit
   656px. Nothing in the hero lined up with anything below it.

   Fixed with four columns: two elastic side columns swallow the excess and
   two fixed middle columns hold the content, so the background still bleeds
   edge to edge (scene 2 needs that) while the content locks to the site grid.
   --hero-media + --hero-gap + --hero-text = 1148, the exact inner width of
   .wrap, so the photo's outer edge lands on the same vertical line as the
   section headings underneath.
   ========================================================================== */
.hero2{--hero-media:608px;--hero-gap:64px;--hero-text:476px}

.hero-scene{
  position:relative;display:grid;align-items:stretch;      /* columns share one height so image and text align */
  grid-template-columns:
    minmax(var(--gutter,26px),1fr)
    minmax(0,var(--hero-text))
    var(--hero-gap)
    minmax(0,var(--hero-media))
    minmax(var(--gutter,26px),1fr);                         /* RTL => text right, media left */
  gap:0;
  min-height:clamp(480px,66vh,680px);
  padding:72px 0;                                           /* was 44, out of step with the 104 the rest of the site uses */
  overflow:hidden
}
.scene-text{grid-column:2}
.scene-media{grid-column:4}

/* text column: centered inside its full-height column, comfortable reading measure */
.scene-text{align-self:center;padding:0;max-width:none}
.hero2 .eyebrow{letter-spacing:1.4px}   /* 2.5px made the line wrap and orphan "1996" */
.hero2 h1{font-size:clamp(2.3rem,4.6vw,3.5rem);line-height:1.1;max-width:15ch;text-wrap:balance}
.hero2 h2{font-size:clamp(2rem,4vw,3.05rem);line-height:1.12;max-width:16ch;text-wrap:balance}
.hero2 .sub{color:var(--muted,#5f646b);font-size:clamp(1.05rem,1.5vw,1.22rem);margin-top:24px;line-height:1.75;max-width:46ch}
.hero2 .quote{max-width:44ch}
.hero2 .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}

/* Marker underline: a sign-painter stroke used EXACTLY ONCE on the whole site,
   on the main h1. Repeating it across headings turned a hand-made mark into a
   template, which is the opposite of what it is for. Do not add a second one. */
.mark{position:relative;display:inline-block}
.mark svg{position:absolute;inset-inline:0;bottom:-.16em;width:100%;height:.22em;color:var(--accent,#e0005a);pointer-events:none}

/* live arrow inside the accent CTA */
.btn .ar{display:inline-block;transition:transform .2s ease}
.btn:hover .ar{transform:translateX(-4px)}

/* scroll cue under scene 1: a visible, clickable invitation (no hidden gestures) */
.scroll-cue{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  color:var(--muted,#5f646b);font-size:.92rem;font-weight:600;text-decoration:none;
  transition:opacity .4s ease
}
.scroll-cue .sc-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line,#e3e5e9);
  font-size:1rem;animation:cueBob 2.4s ease-in-out infinite
}
.scroll-cue:hover{color:var(--ink,#0b0c0f)}
.scroll-cue.gone{opacity:0;pointer-events:none}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (min-height:1400px){.scroll-cue{display:none}}  /* nothing left to hint at on very tall screens */

/* media column: offset accent frame behind, clipped image above, real-work tag on top.
   Every hero photo is a tall 4:5 shot, so the frame takes the photo's own shape
   and shows the full height. Forcing them into a landscape frame was throwing
   away 38% of each picture on desktop and 29% on phones. */
.scene-media{
  position:relative;
  align-self:center;
  /* 760 = 608 / 0.8, so at a normal window the photo fills the media column
     exactly. Driven by height so a short window narrows it instead of
     cropping it. Scenes 2 and 3 grow from 560 to 592 wide; nothing shrinks. */
  height:min(760px,80vh);
  width:auto;max-width:100%;
  aspect-ratio:1120/1400;
  min-height:0;
  margin-inline-start:auto;margin-inline-end:0   /* RTL: pin the photo's left edge to the site line */
}
/* the offset pink frame was removed: on the dark band it read as a stray line,
   and it was one more repeat of the same accent stroke. Shadow carries depth. */
.media-clip{
  position:absolute;inset:0;overflow:hidden;z-index:1;
  border-start-start-radius:clamp(16px,2vw,26px);           /* round only the corners facing the text (RTL inline-start) */
  border-end-start-radius:clamp(16px,2vw,26px);
  box-shadow:0 30px 60px -30px rgba(8,9,12,.35)
}
.media-clip .ph{
  /* a real <img> (not a background) so it gets native lazy loading, srcset and
     fetchpriority. The frame now matches the photo's ratio, so this fills it
     exactly and crops nothing. The old 124%-tall overflow existed only to give
     the scroll parallax room to drift, and it cost more of the picture than the
     motion was worth. */
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  transform:none
}
.ph-tag{
  position:absolute;bottom:18px;inset-inline-start:18px;z-index:2;
  background:#fff;color:#0b0c0f;font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:999px;box-shadow:0 8px 20px rgba(8,9,12,.22);
  white-space:nowrap
}

/* ==========================================================================
   SHOWCASE (scene 1 only). The opening photo is a tall shot: the domed
   ceiling at the top, Hanan working at the head of the scaffold, and his van
   framed in the doorway below. Cropping it to a landscape strip threw all of
   that away, so here the frame takes the photo's own 4:5 shape and the image
   is contained, never cropped. It sits on a dark stage so the full picture
   reads like a framed print instead of a background texture. This treatment
   is deliberately used nowhere else on the site.
   ========================================================================== */
/* drive the frame from its HEIGHT and let the width follow the photo's shape,
   so the print is always whole and always inside the column (never bleeding
   off the viewport edge the way a cropped cover image could) */
.hero-showcase{padding-top:96px}   /* clears the 81px fixed header with room to breathe */
.hero-showcase .scene-media{
  align-self:center;
  height:min(760px,80vh);
  width:auto;max-width:100%;
  aspect-ratio:1120/1400;          /* the photo's real proportions */
  min-height:0;
  margin-inline-start:auto;margin-inline-end:0;
}
.hero-showcase .media-clip{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#15171c 0%,#0b0c0f 55%,#101216 100%);
  border-radius:clamp(18px,2vw,28px);
  box-shadow:0 44px 90px -44px rgba(8,9,12,.6), 0 0 0 1px rgba(224,0,90,.2);
  overflow:hidden;
  animation:showcaseRise 1.15s cubic-bezier(.16,.84,.3,1) both;
}
/* the mat: a visible dark border all around, so "the whole photo" reads as a
   deliberate framed print rather than an image that failed to fill its box */
.hero-showcase .media-clip{--mat:clamp(10px,1.3vw,17px)}
.hero-showcase .ph{
  /* size explicitly. An absolutely positioned <img> is a REPLACED element, so
     width:auto means its intrinsic width, not "stretch to the insets"; combined
     with the global img{max-width:100%} it filled the frame and hung past the
     bottom edge, where overflow:hidden quietly cut the photo. */
  position:absolute;top:var(--mat);inset-inline:var(--mat);
  width:calc(100% - 2*var(--mat));
  height:calc(100% - 2*var(--mat));
  object-fit:contain;object-position:50% 50%;   /* contain = the whole photo, always */
  transform:none;                                 /* the scroll parallax would expose the mat */
  border-radius:clamp(8px,1vw,12px)
}
/* hairline accent rule inside the mat, the way a gallery print is framed */
.hero-showcase .media-clip::after{
  content:"";position:absolute;pointer-events:none;
  inset:clamp(5px,.7vw,9px);
  border:1px solid rgba(224,0,90,.32);
  border-radius:clamp(12px,1.5vw,20px)
}
/* soft accent halo so the dark stage glows on the light page */
.hero-showcase .scene-media::before{
  content:"";position:absolute;inset:6% -6% -8% -6%;z-index:-1;
  background:radial-gradient(60% 50% at 50% 60%,rgba(224,0,90,.28),rgba(224,0,90,0) 70%);
  filter:blur(26px);
  animation:showcaseGlow 7s ease-in-out infinite alternate;
  border:0;border-radius:0
}
@keyframes showcaseRise{
  from{clip-path:inset(100% 0 0 0);opacity:0}   /* reveals upward, following the scaffold */
  to{clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes showcaseGlow{from{opacity:.55}to{opacity:1}}

/* dark statement band (scene 2): same dark as the Hanan section, bright accent tones */
.hero-scene.hero-dark{background:#0b0c0f}
/* rhythm fix: white, dark, warm, dark. Scene 3 used to be white, wedged
   between the dark statement band and the dark proof band. */
.hero-scene.hero-warm{background:var(--bg-2,#f6f5f1)}
.hero-dark h2{color:rgba(255,255,255,.95)}
.hero-dark .sub{color:rgba(255,255,255,.78)}
.hero-dark .eyebrow{color:rgba(255,255,255,.6)}
/* SCENE 2 signature: an oversized quotation mark behind the words. Typography
   as graphic, so this scene's wow is a different technique from every other. */
.hero-dark .quote{color:#fff;position:relative;isolation:isolate}
.hero-dark .quote::before{
  content:"\201D";position:absolute;z-index:-1;
  top:-.06em;inset-inline-start:-.12em;
  font-family:var(--display);font-weight:800;font-size:6em;line-height:1;
  color:#ff2e74;opacity:.16;pointer-events:none
}
/* SCENE 3 signature: the buttons land last, so the eye finishes on the action */
.hero-warm .scene-text.reveal>*:nth-child(4){transition-delay:.46s}
.hero-dark .quote span{color:#ff2e74}                       /* bright tone: 5.49:1 on this dark, passes for large text */
.hero-dark .scene-media::before{border-color:rgba(255,46,116,.35)}
.hero-dark .ph-tag{box-shadow:0 8px 20px rgba(0,0,0,.5)}

/* staggered entrance. Scene 1 (no .reveal) plays on load; scenes 2-3 on their
   existing .reveal -> .in flip. Children cascade at ~120ms steps. */
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .hero-scene:first-of-type .scene-text>*{animation:heroIn .7s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
.js .hero-scene:first-of-type .scene-text>*:nth-child(2){animation-delay:.12s}
.js .hero-scene:first-of-type .scene-text>*:nth-child(3){animation-delay:.24s}
.js .hero-scene:first-of-type .scene-text>*:nth-child(4){animation-delay:.32s}
.js .hero-scene:first-of-type .scene-text>*:nth-child(5){animation-delay:.4s}
.js .hero-scene:first-of-type .scene-text>*:nth-child(6){animation-delay:.48s}

.js .scene-text.reveal{opacity:1;transform:none}            /* the parent stops fading; its children take over */
.js .scene-text.reveal>*{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease,cubic-bezier(.2,.7,.2,1)),transform .7s var(--ease,cubic-bezier(.2,.7,.2,1));
  animation:revealSafety 0s linear 3s forwards               /* same net as the gallery: JS failure never hides text */
}
.js .scene-text.reveal>*:nth-child(2){transition-delay:.12s}
.js .scene-text.reveal>*:nth-child(3){transition-delay:.24s}
.js .scene-text.reveal>*:nth-child(4){transition-delay:.32s}
.js .scene-text.reveal.in>*{opacity:1;transform:none}

/* ==========================================================================
   Mobile: image on top, text below. Still scrolls naturally with parallax.
   ========================================================================== */
@media (max-width:860px){
  .hero-scene{grid-template-columns:1fr;min-height:auto;gap:0;padding:0 0 clamp(18px,6vw,34px)}
  .scene-text,.scene-media{grid-column:1}   /* undo the desktop column assignment */
  .scene-media{order:-1;height:auto;width:100%;max-width:none;aspect-ratio:1120/1400;min-height:0}
  .scene-media::before{display:none}                        /* too tight for the offset frame; shadow carries the depth */
  .media-clip{border-start-start-radius:0;
    border-end-start-radius:clamp(16px,4vw,22px);border-end-end-radius:clamp(16px,4vw,22px)}  /* round the bottom, toward the text below */
  .ph-tag{font-size:12px;padding:7px 12px;bottom:14px;inset-inline-start:14px}
  .scene-text{padding:clamp(22px,6vw,34px) var(--gutter,26px);max-width:100%}
  .hero2 h1{font-size:clamp(1.9rem,7vw,2.45rem);max-width:20ch}
  .hero2 h2{font-size:clamp(1.7rem,6.2vw,2.2rem);max-width:20ch}
  .hero2 .sub{max-width:100%}
  .scroll-cue{display:none}                                  /* on phones the next scene already peeks in */

  /* showcase on phones: the full photo as a framed card, still never cropped */
  .hero-showcase{padding-top:clamp(64px,9vh,78px)}    /* mobile header is shorter */
  .hero-showcase .scene-media{
    height:auto;aspect-ratio:1120/1400;
    width:calc(100% - 2*var(--gutter,26px));max-width:none;
    margin:clamp(6px,2vw,14px) auto 0
  }
  .hero-showcase .scene-media::before{display:block;inset:8% -4% -6% -4%}
  .hero-showcase .media-clip{border-radius:clamp(16px,4vw,22px)}
}

/* reduced motion: hold every image still, no bobbing, no staggering */
@media (prefers-reduced-motion:reduce){
  .media-clip .ph{transform:none!important}
  .hero-showcase .media-clip{animation:none;clip-path:none;opacity:1}
  .hero-showcase .scene-media::before{animation:none;opacity:.8}
  .scroll-cue .sc-ic{animation:none}
  .js .hero-scene:first-of-type .scene-text>*{animation:none}
  .js .scene-text.reveal>*{opacity:1;transform:none;transition:none;animation:none}
}