/* =========================================================================================
   Home — page-only composition (loaded after main.css). The components live in main.css;
   this file only sets how they sit on the home page. The bands, in the owner's order of Oct 7, 2026:
     1  hero ........ the slogan at the foot, over the lobby reel or the night skyline
     2  machines .... the row of coolers on Night (nothing page-specific: main.css §11.21)
     3  tap grab go . the four words, Tap. Grab. Close. Go. (nothing page-specific: main.css §11.15)
     4  promise ..... the offer in one line; three figures on a flight of steps (main.js §14)
     5  closing ..... the split band (nothing page-specific: main.css §11.12)
   (the mission statement and its growing scene moved to Our Approach: about.css VIII)
   ========================================================================================= */

/* 1 · hero: the slogan at the foot, left, at the size of every inner page's statement, over the lobby reel
   (in its own colors, with only the corner shade a foot statement has: main.css §10) or the night skyline.
   Its accent is gilt: a light tint of Saddle into a deeper one, clipped to the letters, and a light that crosses
   it once as the line rises in. The gilt is a background, so it paints only inside the word's own box: the box
   is widened on both sides (padding, taken back by the margin) for the italic's overhang, the tail of the p on
   the left above all, and the line masks leave the same room on the left for when the word starts a line. */
.hero--home .hero__title{max-width:none}
.hero--home.hero--clear .hero-bg::before{background:linear-gradient(20deg,color-mix(in srgb,var(--cabinet) 85%,transparent) 0%,color-mix(in srgb,var(--cabinet) 62%,transparent) 36%,transparent 69%)}
.hero--home .hero__title .line-mask{padding-left:.3em;margin-left:-.3em}
.hero--home .hero__title em{
  padding:0 .14em 0 .3em;margin:0 -.14em 0 -.3em;
  background:
    linear-gradient(100deg,transparent 40%,color-mix(in srgb,var(--limestone) 95%,transparent) 50%,transparent 60%) 120% 0/250% 100% no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--saddle) 42%,var(--limestone)) 10%,color-mix(in srgb,var(--saddle) 62%,var(--limestone)) 88%);   /* the deep end no deeper than 62%: at the headline's leading the word stands a little higher on the footage, and this keeps it 3:1 at its worst */
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .js .hero--home .hero__title .line-mask.is-in em{animation:gilt-shine 1.9s var(--ease-io) 1s both}
}
@keyframes gilt-shine{from{background-position:120% 0,0 0}to{background-position:-20% 0,0 0}}

/* 4 · promise: the offer in one line, then its three figures standing on a flight of steps that goes down to the
   right: each figure on its tread, a riser from one tread down to the next. A step is a third of the flight's width
   (a fifth at most under 800px, where the words reach on past their tread). main.js §14 marks each step as it comes up the
   screen (.is-in) and unmarks it when the page is scrolled back: the riser runs down, the tread runs out, the
   figure drops onto it and its number counts. Without JS, with reduced motion and in print the flight stands,
   every figure on its step. */
.promise .section-head{margin-bottom:clamp(2rem,4vw,3.6rem)}
/* the line stands on one line, centred, from 601px up (the owner's call): it is 21.5em long, so where the usual size
   would not fit it is sized to its column. On phones it takes two lines, still centred. */
@media (min-width:601px){
  .promise .section-head{container-type:inline-size}
  .promise .d2{white-space:nowrap;font-size:min(clamp(2.125rem,3.8vw,3.5rem),4.6cqi)}
}
.stairs{--run:33.333cqi;--lift:clamp(3rem,6.2vw,6.4rem);--stair:color-mix(in srgb,var(--em-small) 62%,transparent);list-style:none;margin:0;padding:0;container-type:inline-size}
.stair{position:relative;display:grid;gap:clamp(.55rem,.9vw,.9rem);align-content:start;margin-left:calc(var(--i) * var(--run));padding:clamp(1rem,1.8vw,1.8rem) 0 clamp(1.3rem,2.3vw,2.3rem)}
.stair:first-child{padding-top:0}
.stair:not(:first-child){padding-left:clamp(1.1rem,2.6vw,2.8rem);margin-top:calc(var(--lift) * -1)}   /* each step starts --lift above the tread before it: a rise shorter than the figure is tall */
.stair::after{content:'';position:absolute;left:0;bottom:0;width:var(--run);border-top:1px solid var(--stair);transform-origin:0 50%}                          /* the tread */
.stair:last-child::after{width:calc(100cqi - var(--i) * var(--run))}                                                                                              /* the last runs out to the edge */
.stair:not(:first-child)::before{content:'';position:absolute;left:0;top:calc(var(--lift) - 1px);bottom:0;border-left:1px solid var(--stair);transform-origin:50% 0}   /* the riser, from the tread before it down to its own */
.stair .promise__fig{font-size:clamp(3.4rem,9vw,9.4rem)}
/* each caption on one line (the owner's call, Oct 9). The longest, "Stocked, cleaned and fixed by us.", is 15.62em:
   across the flight a caption has its step less the step's inset, so where the usual size would not fit it is sized
   to that room (15.9 = the longest caption and a little air; change it if the captions change). Under 800px that
   would fall below 14px, so there the flight takes its narrow form, below */
.stair .promise__label{max-width:none;white-space:nowrap;font-size:min(clamp(1rem,1.25vw,1.2rem),calc((var(--run) - clamp(1.1rem,2.6vw,2.8rem)) / 15.9))}
/* the counted figures are set in tabular numerals (so they do not jitter while counting), which stand a little in
   from the left; drawn back so each figure lines up with the words under it */
.stair .promise__fig [data-count]{margin-left:-.045em}
.stair:last-child .promise__fig [data-count]{margin-left:-.1em}
.js .stairs.is-armed .stair::before{transform:scaleY(0);transition:transform .3s var(--ease)}
.js .stairs.is-armed .stair::after{transform:scaleX(0);transition:transform .3s var(--ease)}
.js .stairs.is-armed .stair :is(.promise__fig,.promise__label){opacity:0;transition:opacity .22s var(--ease),transform .3s var(--ease)}
.js .stairs.is-armed .stair .promise__fig{transform:translateY(-.42em)}
.js .stairs.is-armed .stair .promise__label{transform:translateY(-.5rem)}
.js .stairs.is-armed .stair.is-in::before{transform:none;transition:transform .45s var(--ease-out)}
.js .stairs.is-armed .stair.is-in::after{transform:none;transition:transform .55s var(--ease-out) .32s}
.js .stairs.is-armed .stair:first-child.is-in::after{transition-delay:0s}
.js .stairs.is-armed .stair.is-in .promise__fig{opacity:1;transform:none;transition:opacity .3s var(--ease) .3s,transform .72s cubic-bezier(.3,1.55,.5,1) .3s}
.js .stairs.is-armed .stair.is-in .promise__label{opacity:1;transform:none;transition:opacity .5s var(--ease) .6s,transform .6s var(--ease-out) .6s}
/* the narrow flight (phones, and tablets under 800px): the words reach past their tread, so no step starts above
   the one before it, and a step is as wide as the longest caption leaves room for: the third caption starts two
   steps and an inset in and must end inside the flight (a fifth of the flight at most, as it was; never under 8%).
   The captions go from 14px on the narrowest phone to 15px. */
@media (max-width:799.98px){
  .stairs{--cap:clamp(.875rem,3.9vw,.9375rem);--run:clamp(8cqi,calc((100cqi - 15.9 * var(--cap) - 1rem) / 2),20cqi);--lift:0px}
  .stair{padding-block:.9rem 1.1rem}
  .stair:not(:first-child){padding-left:.9rem}
  .stair .promise__fig{font-size:clamp(2.9rem,15vw,4.2rem)}
  .stair .promise__label{font-size:var(--cap)}
}
@media print{.stairs .stair :is(.promise__fig,.promise__label){opacity:1!important;transform:none!important}.stairs .stair::before,.stairs .stair::after{transform:none!important}}