/* One full-bleed scene: city and greeting lead, Tarique sits back near the window. */
.hero .casual-scene { display:none!important; }
.hero .gathering-video { height:94%;object-position:50% 0%; }
.hero .hero-copy,.hero .hero-bottom { z-index:5; }

/* The foreground is deliberately left open to establish distance to the subject. */
.hero .seated-floor {
  position:absolute;inset:auto 0 0;height:24%;z-index:2;pointer-events:none;
  clip-path:polygon(0 58%,100% 0,100% 100%,0 100%);
  background:radial-gradient(ellipse at 81% 0%,#d7e1ec20,transparent 53%),linear-gradient(180deg,#22293722,#151c2855),url('assets/smoked-oak-floor.webp');
  background-size:100% 100%,100% 100%,100% 165%;background-position:center,center,center 65%;
  border:0;box-shadow:none;
}
.hero .seated-floor:before {
  content:"";position:absolute;top:0;left:0;right:0;height:10px;
  background:linear-gradient(#0d141dbb,#92949144 35%,#171f2944 65%,transparent);
  transform:rotate(-2deg);transform-origin:right;
}
.hero .seated-floor:after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#10182066,transparent 65%),linear-gradient(180deg,#11182088 0,transparent 5%);
}

/* Intrinsic aspect ratio keeps contact shadows registered to hips and soles. */
.hero .seated-portrait {
  position:absolute!important;top:auto!important;bottom:4%!important;right:4.5%!important;
  width:min(30vw,44svh)!important;height:auto!important;aspect-ratio:1142/1377;
  max-width:none!important;max-height:none!important;margin:0!important;
  z-index:4;isolation:isolate;transform:none!important;overflow:visible!important;mask-image:none!important;
}
.hero .seated-portrait:before,.hero .seated-portrait:after { display:none; }
.hero .seated-portrait img {
  display:block;position:relative;z-index:1;width:100%;height:auto;max-height:none;
  object-fit:fill;border-radius:0;filter:saturate(.84) brightness(.9) contrast(.96);
  mask-image:none!important;transform:none!important;
}
.hero .seated-contact {position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none;}

/* Short desktop windows need room for the Toronto card below the fixed menu. */
@media(min-width:761px) and (max-height:760px){.hero{min-height:850px}}

@media(max-width:760px) {
  .hero {min-height:800px!important;height:100svh!important;max-height:none!important;}
  .hero .hero-copy {position:absolute!important;top:102px!important;left:24px!important;right:24px!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;}
  .hero .hero-copy h1 {font-size:clamp(64px,17vw,83px)!important;line-height:.94!important;letter-spacing:-.065em!important;margin:0 0 23px!important;}
  .hero .intro {font-size:14px!important;line-height:1.55!important;width:94%!important;max-width:370px!important;margin:0!important;}
  .hero .hero-bottom {bottom:24px!important;}
  .hero .seated-portrait {width:min(80%,max(320px,40svh))!important;right:1.5%!important;bottom:16px!important;}
  .hero .seated-floor {height:20%;clip-path:polygon(0 20%,100% 0,100% 100%,0 100%);background-size:100% 100%,100% 100%,auto 155%;background-position:center,center,62% 70%;}
  .hero .gathering-video {height:88%;object-position:28% top!important;}
}

/* Quiet window sheen; the matte timber receives soft light, not a mirror image. */
.hero .glass-layer:after {content:"";position:absolute;inset:0;background:linear-gradient(113deg,transparent 48%,#eaf0fb03 56%,#eaf0fb09 63%,transparent 69%);pointer-events:none;}


/* Return to the original dusk city, retaining the quieter seated composition. */
.hero .seated-floor:after{background:linear-gradient(90deg,#10182066,transparent 65%),linear-gradient(0deg,#11182045,transparent 52%),linear-gradient(180deg,#11182088 0,transparent 5%)}
@media(max-width:760px){
 .hero:after{background:linear-gradient(180deg,#11172060 0%,#11172080 42%,transparent 65%)}
 .hero .motion-toggle{top:77px;right:20px}
}

/* Broad glazing and a shallow floor establish an office-sized room. */
.hero .office-window-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.office-window-frame .frame-edge{fill:none;stroke:#14202b;stroke-opacity:.85;stroke-width:8;vector-effect:non-scaling-stroke}
.office-window-frame .frame-light{fill:none;stroke:#a0a9b1;stroke-opacity:.3;stroke-width:1;vector-effect:non-scaling-stroke}
.office-window-frame .window-mobile{display:none}
.hero .glass-layer{background:linear-gradient(108deg,transparent 34%,#dce6f10d 43%,transparent 53%),repeating-linear-gradient(90deg,#ffffff01 0px,#ffffff07 3px,#101a2009 6px,transparent 11px,transparent 19px,#ffffff04 23px);backdrop-filter:blur(.18px)}
.hero .seated-floor:before{display:none}
/* The figure crosses the rule; keep the rule from drawing across his shoes. */
.hero .hero-bottom{border-top:0}
.hero .hero-bottom:before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid #ffffff40;z-index:-1}
@media(max-width:760px){
 .office-window-frame .window-desktop{display:none}
 .office-window-frame .window-mobile{display:block}
 .office-window-frame .frame-edge{stroke-width:6}
 .hero .hero-bottom:before{right:46%}
 .hero .glass-layer{backdrop-filter:blur(.15px)}
}
@media(min-width:761px){.hero .hero-bottom:before{right:24%}}

/* Material pass: an aluminium face, a dark glazing seal and a narrow sill. */
.office-window-frame path{fill:none;vector-effect:non-scaling-stroke}
.office-window-frame .frame-edge{stroke:#0c141e;stroke-opacity:.9;stroke-width:12}
.office-window-frame .frame-face{stroke:#3b4651;stroke-opacity:.94;stroke-width:7}
.office-window-frame .frame-light{stroke:#a7b3bf;stroke-opacity:.48;stroke-width:1}
.office-window-frame .frame-seam{stroke:#0a111a;stroke-opacity:.75;stroke-width:1.2}
.office-window-frame .sill-face{stroke:#17202b;stroke-opacity:.95;stroke-width:8}
.office-window-frame .sill-top{stroke:#7d8994;stroke-opacity:.68;stroke-width:2.2}
.office-window-frame .sill-gasket{stroke:#0c1520;stroke-opacity:.85;stroke-width:2}
.office-window-frame .frame-cast{stroke:#070c13;stroke-opacity:.32;stroke-width:10;filter:url(#window-contact-shadow)}
.hero .glass-layer:after{background:linear-gradient(113deg,transparent 48%,#eaf0fb03 56%,#eaf0fb07 63%,transparent 69%),linear-gradient(90deg,transparent 52%,#d9e6f008 53.5%,transparent 54%)}
.hero .seated-floor{background-image:radial-gradient(ellipse at 84% 4%,#dde8f526,transparent 57%),linear-gradient(180deg,#222b3a33,#151c2855),url('assets/smoked-oak-floor.webp')}
.hero .seated-floor:after{background:linear-gradient(90deg,#10182066,transparent 65%),linear-gradient(0deg,#11182050,transparent 55%),linear-gradient(180deg,#10172199 0,transparent 10%)}
@media(max-width:760px){
 .office-window-frame .frame-edge{stroke-width:9}
 .office-window-frame .frame-face{stroke-width:5}
 .office-window-frame .sill-face{stroke-width:6}
 .office-window-frame .sill-top{stroke-width:1.6}
 .office-window-frame .sill-gasket{stroke-width:1.4}
 .hero .glass-layer:after{background:linear-gradient(110deg,transparent 58%,#eaf0fb04 77%,transparent 89%),linear-gradient(90deg,transparent 90%,#d9e6f009 96%,transparent 98%)}
}

/* Small screens use a shallow floor and a separate left-hand navigation space. */
@media(max-width:760px){
 .hero .hero-bottom{position:absolute;left:24px;right:auto;width:118px;bottom:24px!important;display:block;box-sizing:border-box;margin:0;padding:14px 0 0}
 .hero .hero-bottom:before{right:0}
 .hero .next-story{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:118px;font-size:14px;line-height:1.3}
 .hero .next-story>span:first-child{max-width:118px}
 .hero .round-arrow{width:40px;height:40px;flex:none}
 .hero .chapter-count{display:block;position:absolute;left:54px;right:auto;bottom:12px;font-size:11px}
}

/* Final mobile finishing: the window track is the visual divider. */
@media(max-width:760px){
 .hero .hero-bottom:before{display:none}
 .office-window-frame .frame-light{stroke-opacity:.36}
 .office-window-frame .sill-top{stroke-opacity:.56}
 .hero .seated-contact .seat-contact-tight{opacity:.78}
 .hero .next-story:focus-visible{outline:2px solid #f4f2ed;outline-offset:6px}
}


/* Shared dusk light: preserve the photograph, soften the cast shadow and metal. */
.hero .seated-portrait img{filter:saturate(.9) brightness(.88) contrast(.98)}
.office-window-frame .frame-face{stroke:url(#window-metal-face)}
.office-window-frame .frame-light{stroke-opacity:.38}
.office-window-frame .sill-top{stroke-opacity:.5}
.hero .seated-floor{background-image:radial-gradient(ellipse at 84% 4%,#dde8f52b,transparent 57%),linear-gradient(180deg,#222b3a33,#151c283b),url('assets/smoked-oak-floor.webp')}
@media(max-width:760px){
 .office-window-frame .frame-light{stroke-opacity:.28}
 .office-window-frame .sill-top{stroke-opacity:.44}
 .hero .seat-shadow-cast{opacity:.12}
}

/* Matte floor: a single quiet surface, with subtle grain rather than plank bands. */
.hero .seated-floor{isolation:isolate;background-color:#615d57;background-image:radial-gradient(ellipse at 80% 0%,#dce4f01c,transparent 68%);background-size:100% 100%;background-position:center}
.hero .seated-floor:before{display:block;inset:0;height:auto;transform:none;background:url('assets/matte-floor-grain.svg') 0 0 / 256px 256px repeat;filter:none;mix-blend-mode:normal;opacity:.045}
.hero .seated-floor:after{background:linear-gradient(90deg,#10182028,transparent 68%),linear-gradient(0deg,#11182020,transparent 65%)}
/* Keep photographic skin and fabric detail; grade lightly into the dusk scene. */
.hero .seated-portrait img{filter:saturate(.96) brightness(.96) contrast(.99)}
/* Frosting belongs to the glass, ending at the sill. */
.hero .glass-layer{clip-path:polygon(0 0,100% 0,100% 76%,0 89.9%);background:linear-gradient(108deg,transparent 34%,#dce6f108 43%,transparent 53%),repeating-linear-gradient(90deg,#ffffff01 0,#ffffff04 3px,#101a2004 6px,transparent 11px,transparent 19px,#ffffff02 23px);-webkit-backdrop-filter:blur(.35px);backdrop-filter:blur(.35px)}
@media(max-width:760px){.hero .glass-layer{clip-path:polygon(0 0,100% 0,100% 80%,0 84%);-webkit-backdrop-filter:blur(.25px);backdrop-filter:blur(.25px)}}

/* Ground the seated weight and soles within one floor plane. */
.hero .seated-portrait{bottom:2.8%!important}
.hero .seated-contact{mix-blend-mode:multiply}
@media(max-width:760px){.hero .seated-portrait{bottom:12px!important}}

/* Keep the work link and chapter count clear of the shoes on narrow phones. */
@media(max-width:370px){
 .hero .hero-bottom,.hero .next-story{width:84px}
 .hero .next-story>span:first-child{max-width:84px}
 .hero .chapter-count{position:static;margin-top:12px}
}

/* Mobile copy and portrait share normal flow so longer text can grow the scene. */
@media (max-width:760px) {
  .hero {
    height:auto!important;
    min-height:max(800px,100svh)!important;
    max-height:none!important;
    padding:102px 0 12px!important;
    justify-content:flex-start;
    gap:24px;
  }
  .hero .hero-copy {
    position:relative!important;
    inset:auto!important;
    flex:none;
    align-self:stretch;
    margin:0 24px!important;
  }
  .hero .seated-portrait {
    position:relative!important;
    inset:auto!important;
    flex:none;
    align-self:flex-end;
    margin: auto 1.5% 0 0!important;
  }
}
/* On small phones, keep the pause target above the location/time row. */
@media (max-width:370px){.hero{padding-top:134px!important}}