/* Let Studio read over the departing forest, before the pavilion arrives. */
body[data-page="home"].studio-before-transition .home-hero{
  height:calc(max(100svh,min(296.2686567164vw,140svh),min(100vw,160svh)) + var(--studio-hero-extra,0px));
}
body[data-page="home"].studio-before-transition .home-studio{
  --home-sections-drop:calc(clamp(448px,110svh,1320px) + clamp(96px,20svh,240px) + clamp(64px,10svh,120px));
  min-height:calc(100svh + var(--home-sections-drop));
  padding-block-end:calc(var(--approach-space) + var(--home-sections-drop));
  margin-bottom:calc(-1 * var(--studio-hero-extra,0px));
  scroll-margin-top:max(0px,calc(100svh - var(--home-sections-drop)),calc(var(--home-brand-clearance,148px) - var(--studio-label-top,0px) - var(--home-sections-drop)));
}
/* Reserve the same distance in the layout so the second section follows down. */
body[data-page="home"] .home-studio .approach-copy{
  --reading-copy-shift:calc(-1 * var(--approach-copy-rise));
  translate:0 var(--reading-copy-shift);
}
body[data-page="home"].studio-before-transition .home-studio .approach-copy{
  --reading-copy-shift:calc(var(--studio-copy-shift,calc(-1 * var(--approach-copy-rise))) + var(--home-sections-drop));
  translate:0 var(--reading-copy-shift);
}

/* Two feathered banks follow the incoming scene without changing its layout. */
body[data-page="home"] .home-studio>.scene-transition-clouds{
  --cloud-opacity:.62;inset:0 0 auto;height:clamp(220px,54svh,640px);
  transform:translate3d(0,calc(var(--transition-cloud-top,0px) - 50%),0);
  mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);
  z-index:1;
}
body[data-page="home"] .scene-transition-clouds .cloud-layer{
  left:-40%;top:-12%;width:180%;height:120%;opacity:.68;
  filter:blur(clamp(8px,1vw,16px));
}
body[data-page="home"] .scene-transition-clouds .cloud-layer-b{
  left:-60%;top:6%;width:200%;height:110%;opacity:.58;
}
/* Preserve the wisps' proportions in the much taller phone overlap. */
body[data-page="home"] .scene-transition-clouds .cloud-track img{object-fit:cover}
/* The cloud assets are already feathered; avoid a large live blur on phones. */
@media(max-width:767px),(hover:none),(pointer:coarse){
  body[data-page="home"] .scene-transition-clouds .cloud-layer{filter:none}
}
/* Cover the full departing sky on tall screens. Cloud B's dense lower pixels
   must sit inside the mask, above the incoming roof, rather than below it. */
body[data-page="home"].forest-home .home-studio>.scene-transition-clouds{
  --cloud-opacity:.58;height:max(480px,110svh);
  transform:translate3d(0,calc(var(--transition-cloud-top,0px) - 62%),0);
  mask-image:linear-gradient(transparent,#000 22%,#000 74%,transparent);
}
body[data-page="home"].forest-home .scene-transition-clouds .cloud-layer-b{
  top:-62%;height:130%;opacity:.62;
}
/* Keep the wide ceiling's lower edge inside the mist while the images meet. */
@media(min-width:768px) and (hover:hover) and (pointer:fine){
  body[data-page="home"].forest-home .home-studio>.scene-transition-clouds{
    transform:translate3d(0,calc(var(--transition-cloud-top,0px) - 42%),0);
  }
  body[data-page="home"].forest-home .scene-transition-clouds .cloud-layer-b{top:-42%}
}
body[data-page="home"] .home-studio>.approach-copy{z-index:2}
/* A bounded mist bank sits in the breathing room between the reading blocks. */
body[data-page="home"] .home-offerings>.cloud-field{
  --cloud-opacity:.52;inset:var(--between-mist-top,0px) 0 auto;
  height:var(--between-mist-height,0px);transform:none;will-change:auto;
  mask-image:linear-gradient(transparent,#000 32%,#000 62%,transparent);
}
body[data-page="home"] .home-offerings .cloud-layer{
  left:-40%;top:-20%;width:180%;height:140%;opacity:.55;
}
body[data-page="home"] .home-offerings .cloud-layer-b{
  left:-60%;top:-60%;width:200%;height:150%;opacity:.5;
}
body[data-page="home"] .home-offerings .cloud-track img{object-fit:cover}
/* JavaScript supplies reversible visibility without shifting either bank. */
body[data-page="home"] :is(.scene-transition-clouds,.home-offerings>.cloud-field){
  opacity:calc(var(--cloud-opacity,.52) * var(--mist-visibility,0));
}
@media(forced-colors:active){body[data-page="home"] .cloud-field{display:none}}

/* Keep each section label in the same reading column as its heading. */
body[data-page="home"] :is(.home-studio,.home-offerings) h2.display{
  font-size:var(--display);line-height:1.2;letter-spacing:-.015em;
  font-kerning:normal;font-variant-ligatures:common-ligatures;
  white-space:nowrap;margin-bottom:0;
}
body[data-page="home"] :is(.approach-copy,.home-about-copy)>.home-section-label{
  position:relative;inset:auto;display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,1.5vw,22px);writing-mode:horizontal-tb;
  width:fit-content;max-width:100%;padding:0;
  margin:0 auto clamp(18px,1.6vw,26px);
  font-size:clamp(.875rem,1vw,1rem);line-height:1.4;letter-spacing:.14em;
  text-align:center;transform:none;translate:none;
}
body[data-page="home"] .home-section-label::before,
body[data-page="home"] .home-section-label::after{
  content:"";display:block;flex:none;width:clamp(24px,3vw,44px);height:1px;
  background:linear-gradient(90deg,transparent,currentColor);opacity:.46;
}
body[data-page="home"] .home-section-label::after{transform:scaleX(-1)}

/* A steady reading rhythm beneath the two equally weighted section titles. */
body[data-page="home"] :is(.approach-copy,.home-about-copy)>p:not(.home-section-label){
  max-width:48ch;margin:clamp(22px,2vw,32px) auto 0;
  font-size:clamp(1.125rem,1.25vw,1.25rem);line-height:1.85;
  letter-spacing:.01em;font-kerning:normal;text-wrap:balance;
}

/* Soft oval shading follows the reading blocks; the title uses a corner fade. */
:root[data-theme] body[data-page="home"] :is(.approach-copy,.home-about-copy)::before{
  mask-image:none;
  background:radial-gradient(ellipse closest-side at 50% 50%,
    rgb(var(--reading-shade)/.46) 0%,rgb(var(--reading-shade)/.43) 36%,
    rgb(var(--reading-shade)/.3) 58%,rgb(var(--reading-shade)/.12) 78%,
    rgb(var(--reading-shade)/.03) 91%,transparent 100%);
}

/* Keep the reading group within the open view beneath the Forest pavilion. */
body[data-page="home"] .home-offerings{--offerings-rise:min(8svh,96px)}
:root[data-theme="forest"] body[data-page="home"] .home-offerings{
  /* Wide scenes grow taller; remove that extra centering space from the copy. */
  --offerings-scene-balance:max(0px,calc((min(100vw,150svh) - 100svh) * .5));
  --offerings-rise:calc(min(32svh,384px) + var(--offerings-scene-balance));
  scroll-margin-top:calc(min(26svh,312px) + var(--offerings-scene-balance));
}
body[data-page="home"] .home-offerings .home-about-copy{
  --reading-copy-shift:calc(var(--contact-padding-balance) - var(--contact-center-lift) + var(--offerings-clearance-adjustment,0px) - var(--offerings-rise));
  width:min(calc(100% - 2*var(--gutter)),32rem);
  margin-inline:auto;
  translate:0 var(--reading-copy-shift);
}
@media(max-width:767px){
  html[lang="es"] body[data-page="home"] :is(.home-studio,.home-offerings) h2.display{
    font-size:min(var(--display),clamp(23px,7vw,40px));
  }
  body[data-page="home"] :is(.approach-copy,.home-about-copy)>.home-section-label{
    font-size:.875rem;
  }
  body[data-page="home"] .home-offerings{scroll-margin-top:clamp(144px,20svh,180px)}
  :root[data-theme="forest"] body[data-page="home"] .home-offerings{
    --offerings-rise:calc(min(26svh,312px) + var(--offerings-scene-balance));
    scroll-margin-top:calc(clamp(144px,20svh,180px) + min(24svh,288px) + var(--offerings-scene-balance));
  }
  body[data-page="home"] .home-offerings .home-about-copy{
    width:calc(100% - var(--copy-indent));max-width:38rem;margin-inline:auto;
  }
}
/* Alternate the desktop reading columns within the pavilion's open view. */
@media(min-width:1024px){
  body[data-page="home"]{--home-section-edge:max(14vw,calc((100vw - 110rem)/2))}
  body[data-page="home"] .home-studio .approach-copy,
  body[data-page="home"] .home-offerings .home-about-copy{
    width:min(36vw,34rem);text-align:center;
  }
  /* Studio's grid already includes a gutter; the second section spans the page. */
  body[data-page="home"] .home-studio .approach-copy{
    margin-inline:calc(var(--home-section-edge) - var(--gutter)) auto;
  }
  body[data-page="home"] .home-offerings .home-about-copy{
    margin-inline:auto var(--home-section-edge);
  }
}
/* Long narrow paragraphs exceed browsers' short-text balancing limit. */
@media(max-width:359px){
  body[data-page="home"].studio-before-transition .home-studio{padding-block-end:calc(var(--approach-space) + 144px + var(--home-sections-drop))}
  body[data-page="home"] :is(.approach-copy,.home-about-copy)>p:not(.home-section-label){text-wrap:pretty}
}
/* Static scenes meet directly; parallax normally covers this mobile inset. */
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  :root[data-theme="forest"] body[data-page="home"] .approach-background{top:0}
}
@media(forced-colors:active){
  body[data-page="home"] .home-section-label::before,
  body[data-page="home"] .home-section-label::after{display:none}
}


/* Let touch scrolling pin the intact photograph natively within its scene. */
body[data-page="home"] .home-backdrop-track{display:contents}
body[data-page="home"].sticky-home-backdrop .home-backdrop-track{
  display:block;position:absolute;inset:var(--backdrop-track-top,0px) auto auto 0;width:100%;
  height:var(--backdrop-track-height,100%);z-index:-1;pointer-events:none;
}
body[data-page="home"].sticky-home-backdrop .home-backdrop-track>.approach-background{
  position:sticky;top:var(--backdrop-sticky-top,0px);left:0;
  transform:none!important;will-change:auto;
}

/* Section copy fades at both viewport edges; other text keeps its top cutoff. */
body[data-page="home"] .reading-clearance-text{
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--title-fade-start,-24px),#000 var(--title-fade-end,0px),#000 var(--reading-fade-start,100%),transparent var(--reading-fade-end,100%));
  mask-image:linear-gradient(to bottom,transparent var(--title-fade-start,-24px),#000 var(--title-fade-end,0px),#000 var(--reading-fade-start,100%),transparent var(--reading-fade-end,100%));
}
@media(forced-colors:active){body[data-page="home"] .reading-clearance-text{
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--title-fade-end,0px),#000 var(--title-fade-end,0px),#000 var(--reading-fade-end,100%),transparent var(--reading-fade-end,100%));
  mask-image:linear-gradient(to bottom,transparent var(--title-fade-end,0px),#000 var(--title-fade-end,0px),#000 var(--reading-fade-end,100%),transparent var(--reading-fade-end,100%));
}}
/* Native fades follow each text line without waiting for scroll events. */
body[data-page="home"] .reading-word{display:inline}
body[data-page="home"].native-reading-clearance .reading-word{display:inline-block}
body[data-page="home"].native-reading-clearance :is(.home-studio .approach-copy,.home-offerings .home-about-copy)>:is(h2,p){
  -webkit-mask-image:none;mask-image:none;
}
@keyframes reading-clearance{
  from{opacity:1}
  to{opacity:0}
}
@keyframes reading-entry-clearance{
  from{filter:opacity(0)}
  to{filter:opacity(1)}
}
body[data-page="home"].native-reading-clearance :is(.home-studio .approach-copy,.home-offerings .home-about-copy)>:is(h2,.home-section-label),
body[data-page="home"].native-reading-clearance .reading-word{
  animation:reading-clearance linear both,reading-entry-clearance linear both;
  animation-duration:auto;
  /* View timelines ignore transforms: move both viewport edges into the
     copy's layout coordinates, preserving the viewport's tracking height. */
  animation-timeline:
    view(block calc(var(--reading-cutoff) - var(--reading-copy-shift,0px)) var(--reading-copy-shift,0px)),
    view(block calc(-1 * var(--reading-copy-shift,0px)) calc(var(--reading-bottom-inset,96px) + var(--reading-copy-shift,0px)));
  animation-range:
    exit-crossing calc(100% - 40px) exit-crossing 100%,
    entry-crossing 0px entry-crossing var(--reading-bottom-fade,40px);
}