/* GreekReel audience gateway — first decision in one glance.
   Four real customer groups, not four service disciplines. */
.gr-home .audience-gateway{
  background:#000;color:#f3f3f4;padding-top:clamp(24px,3.6vw,54px);
  padding-bottom:clamp(18px,3vw,38px);overflow:visible;
}
.gr-home .gateway-intro{
  display:flex;align-items:end;justify-content:space-between;
  gap:24px;margin:0 0 24px;
}
.gr-home .gateway-eyebrow{margin:0 0 10px;font:700 .68rem/1.4 Commissioner,Arial,sans-serif;letter-spacing:.16em;color:#f991a0;}
.gr-home .gateway-intro h1{font:750 clamp(2rem,4.15vw,4.25rem)/1.04 Commissioner,Arial,sans-serif;letter-spacing:-.065em;max-width:16ch;}
.gr-home .gateway-intro h1 em{font-style:normal;color:#fb8292;display:inline;}
.gr-home .gateway-intro p.gateway-description{max-width:350px;line-height:1.55;font-size:.89rem;color:#dad2d3;}
.gr-home .gateway-grid{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
}
.gr-home .gateway-card{
 position:relative;display:block;height:clamp(365px,39vw,565px);
 min-width:0;overflow:hidden;background:#100408;color:white;
 border:1px solid #292427;isolation:isolate;outline-offset:4px;
 transition:border-color .25s ease,background .25s ease;
}
.gr-home .gateway-card:focus-visible{outline:3px solid #fb8292;}
.gr-home .gateway-card .gateway-media,.gr-home .gateway-card .gateway-media img,
.gr-home .gateway-card .gateway-media video{
 position:absolute;inset:0;width:100%;height:100%;
}
.gr-home .gateway-card .gateway-media{z-index:0;overflow:hidden;opacity:1;transition:opacity .42s ease;}
.gr-home .gateway-card .gateway-media img,
.gr-home .gateway-card .gateway-media video{
 object-fit:cover;object-position:center;
 opacity:0;transition:opacity 1.15s ease,transform 8.5s linear;
 transform:scale(1.13);filter:brightness(.88) saturate(.88) contrast(1.08);
}
.gr-home .gateway-card .gateway-media img.is-active,
.gr-home .gateway-card .gateway-media video.is-active{
 opacity:1;transform:scale(1.24);
}
.gr-home .gateway-card .gateway-media img[data-gallery-frame]{
 image-rendering:auto; /* never render a resized source in place of the original */
}
.gr-home .gateway-card .gateway-shade{
 position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.23) 43%,rgba(0,0,0,.15) 100%);
 opacity:1;transition:opacity .35s ease;
}
.gr-home .gateway-card .gateway-number{
 position:absolute;top:20px;left:20px;z-index:2;
 font:750 .7rem/1.2 Commissioner,Arial,sans-serif;letter-spacing:.1em;
 color:#fff;transition:opacity .28s ease;
}
.gr-home .gateway-card .gateway-title{
 position:absolute;bottom:62px;left:19px;right:19px;z-index:3;
 font:750 clamp(1.32rem,2.08vw,2.6rem)/1.06 Commissioner,Arial,sans-serif;
 letter-spacing:-.045em;text-wrap:balance;
 transition:bottom .38s ease,transform .38s ease,font-size .38s ease;
}
.gr-home .gateway-card .gateway-purpose{
 position:absolute;bottom:24px;left:20px;right:35px;z-index:2;
 font-size:.76rem;line-height:1.3;font-weight:550;color:#f6e7e8;
 transition:opacity .2s ease;
}
.gr-home .gateway-card .gateway-arrow{
 position:absolute;bottom:18px;right:19px;z-index:2;color:#ff8b9b;
 font-size:1.28rem;transition:opacity .2s ease;
}
@media(hover:hover) and (pointer:fine){
 .gr-home .gateway-card:hover{background:#19050a;border-color:#d62842}
 .gr-home .gateway-card:hover .gateway-media{opacity:0}
 .gr-home .gateway-card:hover .gateway-shade{opacity:0}
 .gr-home .gateway-card:hover .gateway-number,
 .gr-home .gateway-card:hover .gateway-purpose,
 .gr-home .gateway-card:hover .gateway-arrow{opacity:0}
 .gr-home .gateway-card:hover .gateway-title{
  bottom:50%;transform:translateY(50%);
 }
}
.gr-home .gateway-card:focus-visible{background:#19050a;border-color:#fa7a8d}
.gr-home .gateway-card:focus-visible .gateway-media,.gr-home .gateway-card:focus-visible .gateway-shade{opacity:0}
.gr-home .gateway-card:focus-visible .gateway-number,.gr-home .gateway-card:focus-visible .gateway-purpose,.gr-home .gateway-card:focus-visible .gateway-arrow{opacity:0}
.gr-home .gateway-card:focus-visible .gateway-title{bottom:50%;transform:translateY(50%)}
.gr-home .gateway-quicklinks{
 display:flex;gap:18px 25px;align-items:center;flex-wrap:wrap;
 padding:19px 0 0;font-size:.81rem;color:#ddd;
}
.gr-home .gateway-quicklinks a{text-decoration:underline;text-underline-offset:5px;}
.gr-home .gateway-quicklinks a:hover{color:#fb8292;}
.gr-home .booking-path{margin-top:0}
@media(max-width:1050px){
 .gr-home .gateway-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gr-home .gateway-card{height:clamp(290px,45vw,460px)}
 .gr-home .gateway-card .gateway-title{font-size:clamp(1.35rem,3.2vw,2.35rem)}
}
@media(max-width:650px){
 .gr-home .audience-gateway{padding-top:24px;padding-bottom:18px}
 .gr-home .gateway-intro{display:block;margin-bottom:20px}
 .gr-home .gateway-intro h1{font-size:clamp(2rem,8vw,2.8rem);max-width:100%}
 .gr-home .gateway-intro p.gateway-description{margin-top:12px;max-width:37ch}
 .gr-home .gateway-grid{gap:8px}
 .gr-home .gateway-card{height:clamp(232px,67vw,350px)}
 .gr-home .gateway-card .gateway-number{top:13px;left:12px;font-size:.6rem}
 .gr-home .gateway-card .gateway-title{left:12px;right:8px;bottom:50px;font-size:clamp(1.04rem,4.45vw,1.55rem)}
 .gr-home .gateway-card .gateway-purpose{bottom:13px;left:12px;right:10px;font-size:.64rem}
 .gr-home .gateway-card .gateway-arrow{display:none}
 .gr-home .gateway-quicklinks{gap:12px 20px;font-size:.76rem}
}
@media(max-width:355px){
 .gr-home .gateway-card{height:205px}
 .gr-home .gateway-card .gateway-title{font-size:1rem;bottom:46px}
 .gr-home .gateway-card .gateway-purpose{font-size:.57rem}
}
@media(prefers-reduced-motion:reduce){
 .gr-home .gateway-card .gateway-media,
 .gr-home .gateway-card .gateway-media img,
 .gr-home .gateway-card .gateway-media video,
 .gr-home .gateway-card .gateway-title,
 .gr-home .gateway-card .gateway-shade{transition:none!important;transform:none!important;}
}

/* Short portfolio proof strip replaces the older large duplicate project gallery. */
.gr-home .gateway-work{border-top:1px solid #333337;border-bottom:1px solid #333337;background:#050505;color:#f3f3f4;padding:clamp(32px,4.3vw,70px) 0;}
.gr-home .gateway-work-head{display:grid;grid-template-columns:minmax(120px,.45fr) 1.1fr 1fr;gap:22px;align-items:start;}
.gr-home .gateway-work-head .eyebrow{font-size:.71rem;color:#fb8292}
.gr-home .gateway-work-head h2{font:750 clamp(1.5rem,2.5vw,2.4rem)/1.08 Commissioner,Arial,sans-serif;letter-spacing:-.04em}
.gr-home .gateway-work-head p:not(.eyebrow){color:#c9c3c5;font-size:.86rem;line-height:1.6}
.gr-home .gateway-credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:center;gap:16px;margin-top:26px}
.gr-home .gateway-credits article{border-top:1px solid #4a3033;padding:16px 0;display:grid;gap:5px}
.gr-home .gateway-credits article span{font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;color:#fb8292;font-weight:700}
.gr-home .gateway-credits article strong{font-size:1rem}
.gr-home .gateway-credits article small{color:#c2bcc0;font-size:.75rem}
.gr-home .gateway-credits>a{color:#fa8c9e;font-weight:650;text-decoration:underline;text-underline-offset:5px;font-size:.8rem}
@media(max-width:850px){.gr-home .gateway-work-head{grid-template-columns:1fr 2fr}.gr-home .gateway-work-head p:not(.eyebrow){grid-column:2}.gr-home .gateway-credits{grid-template-columns:1fr 1fr}.gr-home .gateway-credits>a{grid-column:1/-1}}
@media(max-width:600px){.gr-home .gateway-work-head{display:block}.gr-home .gateway-work-head h2{margin-top:12px}.gr-home .gateway-work-head p:not(.eyebrow){margin-top:12px}.gr-home .gateway-credits{grid-template-columns:1fr;gap:4px;margin-top:14px}.gr-home .gateway-credits>a{grid-column:1;padding-top:10px}}

/* Closer cinematic crops, native original image files remain intact. */
.gr-home .gateway-card .gateway-media img[data-gallery-frame]{transform-origin:center 38%;}
.gr-home .gateway-card .gateway-media img[data-gallery-frame]:nth-child(3n){transform-origin:52% 43%;}
.gr-home .gateway-card .gateway-media img[data-visual-family="stage"]{object-position:center 42%;}
@media(prefers-reduced-motion:reduce){.gr-home .gateway-card .gateway-media img[data-gallery-frame]{transform:none!important;}}

/* GreekReel portrait face locks: fixed framing instead of animated zoom.
   Photo/video pixels remain native; only visual cropping is adjusted. */
.gr-home .gateway-card .gateway-media img[data-face-lock],
.gr-home .gateway-card .gateway-media img[data-face-lock].is-active,
.gr-home .gateway-card .gateway-media video[data-face-lock],
.gr-home .gateway-card .gateway-media video[data-face-lock].is-active {
 transform:translate(var(--face-shift-x,0%),var(--face-shift-y,0%)) scale(var(--face-scale,1.25));
 transform-origin:center center;
 transition:opacity 1.15s ease;
}
.gr-home .gateway-card .gateway-media img[data-scene-lock],
.gr-home .gateway-card .gateway-media img[data-scene-lock].is-active {
 transform:scale(1.06);
 transition:opacity 1.15s ease;
}
@media(prefers-reduced-motion:reduce) {
 .gr-home .gateway-card .gateway-media img[data-face-lock],
 .gr-home .gateway-card .gateway-media img[data-scene-lock],
 .gr-home .gateway-card .gateway-media video[data-face-lock] {
  transform:none!important;transition:none!important;
 }
}
/* End portrait face locks */


/* AllTogether is complete edited art footage, not a face-locked portrait.
   Preserve its own motion and full original frame while the movie plays. */
.gr-home .gateway-card .gateway-media video[data-art-montage],
.gr-home .gateway-card .gateway-media video[data-art-montage].is-active {
  transform:scale(1);
  object-fit:cover;
  object-position:center center;
  transition:opacity 1.15s ease;
}
.gr-home .gateway-card .gateway-media img[data-art-poster],
.gr-home .gateway-card .gateway-media img[data-art-poster].is-active {
  transform:scale(1.02);
  transition:opacity 1.15s ease;
}


/* The graded Hiwell portrait should remain visibly bright.
   Earlier global gateway filters (brightness .88 + low saturation) hid the correction.
   Scope this override to the film only: the original Hiwell photographs stay untouched. */
.gr-home .gateway-card[data-gateway-sequence="still-film-still"] .gateway-media video[data-face-lock] {
  filter:brightness(1.07) saturate(1.02) contrast(1.01);
}


/* Still photos: 8 seconds total, including an overlapping 700ms fade.
   1.0 to 1.1 zoom lasts eight seconds before the 700ms crossfade; videos are untouched. */
@keyframes gr-still-kenburns{
 from{transform:translate3d(0,0,0) scale(1)}
 to{transform:translate3d(var(--face-pan-x,0%),var(--face-pan-y,0%),0) scale(1.1)}
}
.gr-home .gateway-card .gateway-media img[data-preview-zoom]{
 transform:scale(1);transform-origin:var(--focus-x,50%) var(--focus-y,42%);
 object-position:var(--focus-x,50%) var(--focus-y,42%);
 z-index:0;opacity:0;animation:none;transition:opacity .7s ease;
 filter:brightness(.96) saturate(.97) contrast(1.02);
}
.gr-home .gateway-card .gateway-media img[data-preview-zoom].is-active,
.gr-home .gateway-card .gateway-media img[data-preview-zoom].is-exiting{
 animation:gr-still-kenburns 8s linear both;
}
.gr-home .gateway-card .gateway-media img[data-preview-zoom].is-active{opacity:1;z-index:1}
.gr-home .gateway-card .gateway-media img[data-preview-zoom].is-exiting{opacity:0;z-index:2}
.gr-home .gateway-card[data-full-montage] .gateway-media img[data-preview-zoom].is-active{
 animation-iteration-count:infinite;animation-direction:alternate;
}
.gr-home .gateway-card .gateway-media video{animation:none!important}
@media(prefers-reduced-motion:reduce){
 .gr-home .gateway-card .gateway-media img[data-preview-zoom]{animation:none!important;transform:none!important;transition:none!important}
}

/* A cover becomes visible only after its original image has decoded.
   JS marks covers in reading order. No-JS fallback stays unchanged. */
.gr-home.gr-gateway-sequencing .gateway-card:not(.is-cover-ready)
 .gateway-media img[data-gallery-frame].is-active{opacity:0!important}
.gr-home.gr-gateway-sequencing .gateway-card.is-cover-ready
 .gateway-media img[data-gallery-frame].is-active{opacity:1}

/* Do not spend the first photo's eight-second zoom before it is decoded. */
.gr-home.gr-gateway-sequencing .gateway-card:not(.is-cover-ready)
 .gateway-media img[data-preview-zoom].is-active{animation-play-state:paused!important}


/* Refinement: neutral portfolio chrome, no redundant scarlet ornaments. */
.gr-home .gateway-card .gateway-number,
.gr-home .gateway-card .gateway-arrow{display:none}
.gr-home .gateway-card .gateway-shade{
  background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.12) 38%,transparent 74%)!important;
}
.gr-home .gateway-card:hover{border-color:rgba(255,255,255,.48)!important}
.gr-home .gateway-eyebrow,.gr-home .gateway-work-head .eyebrow,
.gr-home .gateway-credits article span{color:#d1c8cb}
.gr-home .gateway-credits article{border-color:rgba(255,255,255,.14)}
/* One-second dissolve completes at the eight-second slot boundary. */
.gr-home .gateway-card .gateway-media img[data-preview-zoom].is-active,
.gr-home .gateway-card .gateway-media img[data-preview-zoom].is-exiting{
  animation:gr-still-kenburns 8s linear both;
}
.gr-home .gateway-card:not(.gr-media-started) .gateway-media img[data-preview-zoom].is-active,
.gr-home .gateway-card.gr-media-paused .gateway-media img[data-preview-zoom]{
  animation-play-state:paused!important;
}
.gr-home .gateway-card .gateway-media :is(img,video){transition-duration:.7s}
.gr-home .gateway-card .gateway-media video{
  transform:scale(1)!important;
  animation:none!important;
}
.gr-home .gateway-card .gateway-media video.is-active{
  opacity:1;z-index:3;
}
.gr-home .gateway-card .gateway-media img[data-preview-zoom].is-exiting{z-index:2}
@media(prefers-reduced-motion:reduce){
 .gr-home .gateway-card .gateway-media img[data-preview-zoom]{animation:none!important}
}


/* Responsive media aperture, 2026-10-10.
   Always fill every card on window resize, independent of the intrinsic
   dimensions of the original photograph/movie. Never stretch the image. */
.gr-home .gateway-card .gateway-media{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 min-width:0;
 min-height:0;
 overflow:hidden;
}
.gr-home .gateway-card .gateway-media :is(img,video){
 position:absolute!important;
 inset:0!important;
 display:block!important;
 width:100%!important;
 height:100%!important;
 min-width:100%;
 min-height:100%;
 max-width:none!important;
 max-height:none!important;
 object-fit:cover!important;
 /* Respect authored actor and stage focus points. */
}
/* ALLTOGETHER is portrait footage embedded inside a wider source frame.
   Zoom the video/picture aperture to remove intrinsic dark sidebars, based on
   the live card aspect ratio from the ResizeObserver. Do not distort pixels. */
.gr-home .gateway-card[data-full-montage] .gateway-media :is(img,video){
 transform-origin:50% 50%!important;
}
.gr-home .gateway-card[data-full-montage] .gateway-media video[data-art-montage],
.gr-home .gateway-card[data-full-montage] .gateway-media video[data-art-montage].is-active{
 transform:scale(var(--gr-art-fill,1.04))!important;
 object-fit:cover!important;
 object-position:center center!important;
}
@keyframes gr-artist-full-bleed{
 from{transform:translate3d(0,0,0) scale(var(--gr-art-fill,1.04))}
 to{transform:translate3d(0,0,0) scale(calc(var(--gr-art-fill,1.04) * 1.1))}
}
.gr-home .gateway-card[data-full-montage] .gateway-media img[data-preview-zoom]{
 transform:scale(var(--gr-art-fill,1.04));
 object-fit:cover!important;
 object-position:center center!important;
}
.gr-home .gateway-card[data-full-montage] .gateway-media img[data-preview-zoom].is-active,
.gr-home .gateway-card[data-full-montage] .gateway-media img[data-preview-zoom].is-exiting{
 animation-name:gr-artist-full-bleed;
 animation-duration:8s;
 animation-timing-function:linear;
 animation-fill-mode:both;
}
/* Reduced motion removes kinetic zoom, not the necessary pillarbox crop. */
@media(prefers-reduced-motion:reduce){
 .gr-home .gateway-card[data-full-montage] .gateway-media img[data-preview-zoom]{
  animation:none!important;
  transform:scale(var(--gr-art-fill,1.04))!important;
 }
}


/* GreekReel first-paint safety: a photographed 1280px base is visible
   immediately, independent of JS, the HD decode, and network timeouts. */
.gr-home .gateway-card .gateway-media img[data-cover-fallback]{
 z-index:0!important;opacity:1!important;
 transform:scale(1);
 animation:none!important;transition:none!important;
 filter:brightness(.96) saturate(.97) contrast(1.02);
 object-fit:cover!important;
 object-position:var(--focus-x,50%) var(--focus-y,42%);
}
.gr-home .gateway-card .gateway-media img[data-gallery-frame].is-active{z-index:1}
.gr-home .gateway-card .gateway-media img[data-gallery-frame].is-active:not(.is-frame-ready){
 opacity:0!important;
}
.gr-home .gateway-card .gateway-media img[data-gallery-frame].is-active.is-frame-ready{
 opacity:1!important;
}
.gr-home .gateway-card .gateway-media img[data-gallery-frame].is-exiting{z-index:2}
.gr-home.gr-gateway-sequencing .gateway-card.is-cover-ready
 .gateway-media img[data-gallery-frame].is-active:not(.is-frame-ready){opacity:0!important}


/* The first Artists still contains a portrait within a widescreen file.
   Apply the same responsive aperture crop to its immediate base photo. */
.gr-home .gateway-card[data-full-montage] .gateway-media img[data-cover-fallback]{
 transform:scale(var(--gr-art-fill,1.04));
 transform-origin:center center!important;
 object-position:center center!important;
}


/* Initial left-to-right reveal remains legible before all network requests:
   all cards have actual photographic pixels; each lights to full strength
   on its pre-existing 820ms reveal cue instead of flashing in from black. */
.gr-home.gr-gateway-sequencing .gateway-card:not(.is-cover-ready)
 .gateway-media img[data-cover-fallback]{
 filter:brightness(.61) saturate(.84) contrast(1.02)!important;
}
.gr-home.gr-gateway-sequencing .gateway-card.is-cover-ready
 .gateway-media img[data-cover-fallback]{
 filter:brightness(.96) saturate(.97) contrast(1.02)!important;
 transition:filter .7s ease!important;
}


/* One stable photographic base per card, no mid-animation bitmap upgrades.
   The base zooms once on the first 8-second display, then stays underneath
   later gallery slides as a safety net. */
.gr-home .gateway-card.is-cover-ready .gateway-media img[data-cover-fallback]{
 animation:gr-still-kenburns 8s linear both!important;
 transform-origin:50% 42%;
}
.gr-home .gateway-card.gr-first-advanced .gateway-media img[data-cover-fallback]{
 animation:none!important;
 transform:scale(1.1)!important;
}
.gr-home .gateway-card[data-full-montage].is-cover-ready .gateway-media img[data-cover-fallback]{
 animation:gr-artist-full-bleed 8s linear both!important;
 transform-origin:center center;
}
.gr-home .gateway-card[data-full-montage].gr-first-advanced .gateway-media img[data-cover-fallback]{
 animation:none!important;
 transform:scale(calc(var(--gr-art-fill,1.04) * 1.1))!important;
}
/* Hover is unmistakably intentional; a recognizable trace of the work
   remains, instead of an empty black rectangle. */
@media(hover:hover) and (pointer:fine){
 .gr-home .gateway-card:hover .gateway-media{opacity:.22}
}
.gr-home .gateway-card:focus-visible .gateway-media{opacity:.22}
@media(prefers-reduced-motion:reduce){
 .gr-home .gateway-card .gateway-media img[data-cover-fallback]{
  animation:none!important;
 }
}


/* Artist photos must NEVER reverse their zoom. An old alternating infinite
   animation made a still shrink back towards 1×, which looked like a rewind. */
.gr-home .gateway-card[data-full-montage] .gateway-media img[data-preview-zoom].is-active{
 animation-iteration-count:1!important;
 animation-direction:normal!important;
}

/* 2026-10-11: Real 1→2→3→4 first-paint reveal.
   Earlier CSS always rendered every photographic base at opacity 1; that
   defeated the timed reveal even though JavaScript fired correctly. Head
   installs gr-js-gateway before paint; without JS all covers remain visible. */
html.gr-js-gateway body.gr-home .gateway-card:not(.is-cover-ready)
 .gateway-media img[data-cover-fallback],
html.gr-js-gateway body.gr-home .gateway-card:not(.is-cover-ready)
 .gateway-media img[data-gallery-frame],
html.gr-js-gateway body.gr-home .gateway-card:not(.is-cover-ready)
 .gateway-media video{
  opacity:0!important;
}
html.gr-js-gateway body.gr-home .gateway-card.is-cover-ready
 .gateway-media img[data-cover-fallback]{
  opacity:1!important;
  transition:opacity .7s ease,filter .7s ease!important;
}
@media(prefers-reduced-motion:reduce){
 html.gr-js-gateway body.gr-home .gateway-card.is-cover-ready
  .gateway-media img[data-cover-fallback]{transition:none!important}
}

/* Approved-preview corrections, 11 October 2026.
   Short landscape viewports: keep each label INSIDE its media card.
   Taller screens retain the previously approved card proportions. */
@media (min-width:1051px) and (max-height:790px){
 .gr-home .audience-gateway{padding-top:clamp(14px,2.5vh,26px)}
 .gr-home .gateway-intro{margin-bottom:clamp(12px,2.5vh,22px)}
 .gr-home .gateway-intro h1{font-size:clamp(1.9rem,3.4vw,3.2rem)}
 .gr-home .gateway-card{height:clamp(310px,49svh,440px)}
 .gr-home .gateway-card .gateway-title{font-size:clamp(1.3rem,1.8vw,2.2rem)}
}
@media (min-width:651px) and (max-width:1050px) and (max-height:650px){
 .gr-home .gateway-card{height:clamp(255px,46svh,340px)}
}
@media (max-width:650px) and (max-height:690px){
 .gr-home .gateway-card{height:clamp(205px,51svh,285px)}
 .gr-home .gateway-card .gateway-title{bottom:42px;line-height:1.08}
 .gr-home .gateway-card .gateway-purpose{bottom:10px}
}
/* Section links land below the sticky desktop header; the GreekReel logo
   itself instead points to #top and never scrolls the hero under the header. */
.gr-home :is(#main,#scope,#contact,#find-service){scroll-margin-top:110px}

/* Strict five-beat opening: each card gets a 500ms cue. Later portfolio
   transitions dissolve over 1000ms, starting 7s into each 8s slot. */
html.gr-js-gateway body.gr-home .gateway-card.is-cover-ready
 .gateway-media img[data-cover-fallback]{
 transition:opacity .32s ease,filter .32s ease!important;
}
html.gr-js-gateway body.gr-home .gateway-card.is-cover-ready
 .gateway-media img[data-gallery-frame].is-active:not(.is-frame-ready){
 opacity:0!important;
}

/* Keep Pagliacci 1080p on its own compositing surface. Avoid per-frame
   brightness/saturation filters which burden continuous hardware decoding. */
.gr-home .gateway-card:last-child .gateway-media video[data-gateway-film]{
 filter:none!important;
 backface-visibility:hidden;
 transform:translateZ(0)!important;
}

/* 2026-10-11 pool editorial update: a Barrio montage is ONE VIDEO item only.
   Its embedded portrait needs black-pillar crop, but opera photographs must
   use their own native framing and independent face focal points. */
.gr-home .gateway-card[data-pool-id="artists"] .gateway-media video[data-art-montage],
.gr-home .gateway-card[data-pool-id="artists"] .gateway-media video[data-art-montage].is-active{
 transform:scale(var(--gr-art-fill,1.04))!important;
 object-fit:cover!important;
 object-position:center center!important;
 filter:none!important;
 backface-visibility:hidden;
}


/* One half-second cue per card; ease-in-out fades without a brightness jump. */
html.gr-js-gateway body.gr-home .gateway-card:is(.is-cover-ready,:not(.is-cover-ready)) .gateway-media img[data-cover-fallback]{
 filter:brightness(.96) saturate(.97) contrast(1.02)!important;
 transition:opacity .45s cubic-bezier(.4,0,.2,1)!important;
}
/* Incoming media dissolves over an opaque outgoing frame, preserving luminance. */
.gr-home .gateway-card .gateway-media :is(img,video).gr-dissolve-in{
 z-index:5!important;
 transition:opacity 1s cubic-bezier(.4,0,.2,1)!important;
}
.gr-home .gateway-card .gateway-media :is(img,video).gr-dissolve-out{
 z-index:4!important;opacity:1!important;
 transition:none!important;
}
.gr-home .gateway-card .gateway-media{transition:opacity .6s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){
 html.gr-js-gateway body.gr-home .gateway-card:is(.is-cover-ready,:not(.is-cover-ready)) .gateway-media img[data-cover-fallback],
 .gr-home .gateway-card .gateway-media :is(img,video).gr-dissolve-in{transition:none!important}
}

/* Homepage headline: one compositor-only fade; no per-frame JS/layout animation. */
.gr-home .gateway-intro h1 .gateway-headline-dynamic{
 display:block;min-height:1.04em;white-space:nowrap;
 transition:opacity .18s ease,transform .18s ease;
}
.gr-home .gateway-intro h1 .gateway-headline-dynamic.is-switching{
 opacity:.25;transform:translate3d(0,2px,0);
}
@media(max-width:355px){
 .gr-home .gateway-intro h1 .gateway-headline-dynamic{white-space:normal;min-height:2.08em}
}
@media(prefers-reduced-motion:reduce){
 .gr-home .gateway-intro h1 .gateway-headline-dynamic{transition:none!important;transform:none!important}
}

/* Opt-in ?fade=transparent: reveal the actual NASA background between
   ready photographs. Only the media layer fades (opacity on compositor).
   Standard 1-second crossfade remains unchanged without this URL flag. */
.gr-home.gr-transparent-preview .gateway-card.gr-preview-dim .gateway-media{
 opacity:0!important;transition:opacity .45s ease-in!important;
}
.gr-home.gr-transparent-preview .gateway-card.gr-preview-recover .gateway-media{
 opacity:1!important;transition:opacity .55s ease-out!important;
}
@media(hover:hover) and (pointer:fine){
 .gr-home.gr-transparent-preview .gateway-card.gr-preview-recover:hover .gateway-media{opacity:.22!important}
}
.gr-home.gr-transparent-preview .gateway-card.gr-preview-recover:focus-visible .gateway-media{opacity:.22!important}
@media(prefers-reduced-motion:reduce){
 .gr-home.gr-transparent-preview .gateway-card .gateway-media{transition:none!important}
}

/* Homepage service previews and category pages share content/audiences.json. */
.gr-home .gateway-card .gateway-hover-details{
 position:absolute;inset:0;z-index:4;pointer-events:none;
 display:flex;flex-direction:column;align-items:stretch;justify-content:center;
 gap:clamp(13px,2.2vh,23px);padding:clamp(15px,1.8vw,28px);
 background:rgba(7,5,8,.65);
 visibility:hidden;opacity:0;transform:translate3d(0,8px,0);
 transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.gr-home .gateway-card .gateway-hover-heading{
 font:750 clamp(1.28rem,1.72vw,2.15rem)/1.08 Commissioner,Arial,sans-serif;
 letter-spacing:-.045em;color:#fff;
}
.gr-home .gateway-card .gateway-hover-list{
 display:flex;flex-direction:column;gap:clamp(8px,1.3vh,15px);
}
.gr-home .gateway-card .gateway-hover-service{
 display:block;min-width:0;padding-left:11px;border-left:2px solid #fb8292;
 font:550 clamp(.78rem,.92vw,1.06rem)/1.33 Commissioner,Arial,sans-serif;
 color:#f5f2ec;overflow-wrap:break-word;
}
.gr-home .gateway-card .gateway-title{transition:bottom .38s ease,transform .38s ease,font-size .38s ease,opacity .18s ease}
@media(hover:hover) and (pointer:fine){
 .gr-home .gateway-card:hover .gateway-title{opacity:0}
 .gr-home .gateway-card:hover .gateway-hover-details{
  visibility:visible;opacity:1;transform:none;transition-delay:0s;
 }
}
.gr-home .gateway-card:is(:focus,:focus-visible) .gateway-title{opacity:0}
.gr-home .gateway-card:is(:focus,:focus-visible) .gateway-hover-details{
 visibility:visible;opacity:1;transform:none;transition-delay:0s;
}
@media(max-width:650px){
 .gr-home .gateway-card .gateway-hover-details{padding:11px;gap:8px}
 .gr-home .gateway-card .gateway-hover-heading{font-size:clamp(.98rem,3.6vw,1.22rem)}
 .gr-home .gateway-card .gateway-hover-list{gap:6px}
 .gr-home .gateway-card .gateway-hover-service{font-size:clamp(.66rem,2.6vw,.79rem);line-height:1.2;padding-left:7px}
}
@media(max-width:355px){
 .gr-home .gateway-card .gateway-hover-details{padding:7px;gap:5px}
 .gr-home .gateway-card .gateway-hover-heading{font-size:.84rem}
 .gr-home .gateway-card .gateway-hover-list{gap:4px}
 .gr-home .gateway-card .gateway-hover-service{font-size:.59rem;padding-left:5px}
}
@media(prefers-reduced-motion:reduce){
 .gr-home .gateway-card .gateway-hover-details{transition:none!important;transform:none!important}
}

/* Prevent the Greek/English first headline line from breaking while the
   Commissioner variable font replaces its fallback during a hard refresh.
   Allow normal natural wrapping on narrow phones. */
@media(min-width:651px){
 .gr-home .gateway-intro h1{max-width:none}
 .gr-home .gateway-intro h1 .gateway-headline-static{
  display:block;white-space:nowrap;
 }
}
@media(max-width:650px){
 .gr-home .gateway-intro h1 .gateway-headline-static{white-space:normal}
}