/* Elegant Massage / Codrops exact motion integration, scoped to Home only.
 * Sources MIT: Theo Plawinski Sticky Grid Scroll; Hiroki SVG Mask Transitions.
 * Original choreography preserved at all viewport widths with proportional motion.
 * Reduced-motion and short-landscape layouts keep an accessible static fallback. */
.intro{height:100svh;min-height:0}
.intro__sticky{height:100svh;min-height:0}
.at-grid{position:relative;z-index:2;background:var(--paper);color:var(--ink)}
.at-grid__wrapper{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:6rem var(--gutter)}
.at-grid__content{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70svh;max-width:min(1100px,100%);gap:1.3rem;pointer-events:none}
.at-grid__title{font:400 clamp(3.7rem,8.1vw,8.8rem)/.95 var(--serif);letter-spacing:-.05em}
.at-grid__description{max-width:30rem;color:var(--ink);font-size:clamp(.78rem,1.15vw,.95rem);text-transform:uppercase;letter-spacing:.12em;line-height:1.6}
.at-grid__button{display:inline-block;color:var(--garnet);font-size:.85rem;font-weight:700;border-bottom:1px solid var(--garnet);padding:10px 2px;pointer-events:auto}
.at-grid__gallery{width:min(55vw,750px);max-width:740px;margin:2rem auto 0;opacity:.95}
.at-grid__images{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.5vw,40px)}
.at-grid__item{aspect-ratio:1;overflow:hidden;background:var(--stone)}
.at-grid__image{width:100%;height:100%;object-fit:cover;display:block}
/* Source three-column reveal; separation remains within the viewport to avoid empty frames. */
@media(min-width:1024px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
 .at-grid-active .at-grid{height:275vh;height:275svh}
 .at-grid-active .at-grid__wrapper{position:sticky;top:0;height:100vh;min-height:0;padding:0 var(--gutter)}
 .at-grid-active .at-grid__content{height:100vh;min-height:0;width:100%;max-width:none;gap:0}
 .at-grid-active .at-grid__description{margin-top:24px}
 .at-grid-active .at-grid__button{margin-top:32px}
 .at-grid-active .at-grid__gallery{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);width:min(51vw,736px);max-width:none;margin:0;pointer-events:none}
 .at-grid-active .at-grid__images{gap:clamp(16px,2.3vw,40px);will-change:transform}
 .at-grid-active .at-grid__item{will-change:transform}
}
/* Original SVG masked image layers, five service panels. */
.at-mask-stage{position:relative}
.at-mask-layer{display:none}
.at-mask-progress{display:none}
@media(min-height:650px) and (prefers-reduced-motion:no-preference){
 .at-original-active .cinema-track{height:766.6667vh;height:766.6667svh;position:relative;isolation:auto;overflow:visible}
 .at-original-active .at-mask-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#171719;isolation:isolate}
 .at-original-active .chapter{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow:hidden;display:flex;align-items:flex-end;isolation:auto;clip-path:none!important;pointer-events:none}
 .at-original-active .chapter__image{display:none}
 .at-original-active .at-mask-layer{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
 /* The grade uses the same SVG mask as the photograph, so it opens with each blind. */
 .at-original-active .chapter__shade{display:none}
 .at-original-active .chapter__content{position:relative;z-index:2;pointer-events:none}
 .at-original-active .chapter__content a{pointer-events:auto}
 .at-original-active .at-mask-progress{display:flex;position:absolute;z-index:20;bottom:1rem;left:var(--gutter);right:var(--gutter);gap:10px;pointer-events:none}
 .at-mask-progress__segment{flex:1;height:2px;background:#ffffff40;overflow:hidden}
 .at-mask-progress__fill{display:block;height:100%;width:0;background:#f2cfd4}
}
@media(max-width:1023px), (max-height:649px), (prefers-reduced-motion:reduce){
 .at-grid__wrapper{padding:5.5rem var(--gutter) 5rem}
 .at-grid__content{min-height:0;gap:1rem}
 .at-grid__gallery{width:min(560px,100%);margin:3rem auto 0}
 .at-grid__images{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .at-grid__item:nth-child(n+7){display:none}
 .at-grid__title{font-size:clamp(3.9rem,10vw,7rem)}
 .chapter{position:relative!important;clip-path:none!important}
}
@media(max-width:700px){
 .intro{height:100svh}
 .at-grid__wrapper{min-height:0;padding:5.5rem 20px 4rem}
 .at-grid__content{padding:0;gap:1.15rem}
 .at-grid__title{font-size:clamp(3.7rem,12vw,5.5rem);max-width:95%}
 .at-grid__description{max-width:26rem;font-size:.76rem}
 .at-grid__gallery{width:min(420px,100%);margin:2rem auto 0}
 .at-grid__images{gap:8px}
}
/* Keep the wheel and keyboard journey native; no smooth-scroll double interpolation. */
html{scroll-behavior:auto}

/* Active source Sticky Grid across desktop, tablet and mobile. Only the visual
   timeline eases; wheel, trackpad, touch and keyboard remain entirely native. */
@media (min-height:540px) and (prefers-reduced-motion:no-preference) and (max-width:1023px) {
 .at-grid-active .at-grid{height:220vh;height:220svh}
 .at-grid-active .at-grid__wrapper{
   position:sticky;top:0;width:100%;height:100vh;height:100svh;min-height:0;
   display:grid;place-items:center;overflow:hidden;padding:0 var(--gutter)
 }
 .at-grid-active .at-grid__content{
   height:100vh;height:100svh;min-height:0;width:100%;max-width:none;gap:0;
   position:relative;z-index:3;pointer-events:none
 }
 .at-grid-active .at-grid__description{margin-top:18px}
 .at-grid-active .at-grid__gallery{
   position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);
   width:min(72vw,650px);max-width:none;margin:0;pointer-events:none
 }
 .at-grid-active .at-grid__images{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.45vw,18px);will-change:transform}
 .at-grid-active .at-grid__item{will-change:transform}
 .at-grid-active .at-grid__item:nth-child(n+7){display:block}
 .at-grid-active .at-grid__title{font-size:clamp(4.6rem,9vw,7rem)}
}
@media (min-height:540px) and (prefers-reduced-motion:no-preference) and (max-width:700px){
 .at-grid-active .at-grid{height:195vh;height:195svh}
 .at-grid-active .at-grid__wrapper{padding:0 12px}
 .at-grid-active .at-grid__content{padding:0 12px}
 .at-grid-active .at-grid__gallery{width:min(94vw,450px)}
 .at-grid-active .at-grid__images{gap:clamp(6px,1.8vw,9px)}
 .at-grid-active .at-grid__title{
   max-width:100%;font-size:clamp(3.65rem,12vw,5.5rem);
   line-height:.98;letter-spacing:-.055em
 }
 .at-grid-active .at-grid__description{font-size:.74rem;max-width:min(280px,85vw)}
 /* Keep the title legible as the twelve pictures approach the centre. */
 .at-grid-active .at-grid__content::before{
   content:"";position:absolute;z-index:-1;inset:20% -12px;
   background:radial-gradient(ellipse 70% 50% at 50% 50%,
     rgba(245,241,233,.94) 0%,rgba(245,241,233,.87) 52%,
     rgba(245,241,233,0) 100%);
   pointer-events:none
 }
}

/* Tablet editorial legibility: a narrow Paper veil behind the headline, while
   the surrounding photography remains fully visible and animated. */
@media (min-width:701px) and (max-width:1023px) and (min-height:540px) and (prefers-reduced-motion:no-preference){
 .at-grid-active .at-grid__content::before{
   content:"";position:absolute;z-index:-1;inset:27% -12px;
   background:linear-gradient(180deg,
      rgba(245,241,233,0) 0%,rgba(245,241,233,.93) 36%,
      rgba(245,241,233,.96) 56%,rgba(245,241,233,0) 100%);
   pointer-events:none;
 }
}