/* =========================================================
   LYFT v2 - SILVER LAYER
   Loads LAST, after every page stylesheet. Nothing here changes
   layout. It only does the three things that turn a grey site into
   a metal one:

     1. gives the 30% surfaces an actual lacquer sheen and a
        specular top edge, so "shining black" is not just "grey box"
     2. renders the 10% accent as a chrome ramp instead of a flat
        grey, because flat grey is not silver
     3. carries the per-word text emphasis system (see section 4)

   Discipline: running copy never goes silver. If it did, the accent
   would stop being 10% and the whole 60-30-10 split collapses.
   ========================================================= */

/* ---------------------------------------------------------
   1. LACQUER SURFACES (the 30%)
   A vertical sheen plus a 1px catch light on the top edge. The
   catch light is what sells "polished"; without it the panel just
   looks like a lighter rectangle.
   --------------------------------------------------------- */
.card,.temp,.split-media,.trainer,.stat,.info-card,.form-card,.cta-band,.panel,
.feat,.store,.sched,.plan,.acc-item,.bk-svc,.bk-done,.zone{
  background-color:var(--lacquer);
  background-image:var(--lacquer-sheen);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--specular),0 2px 5px rgba(0,0,0,.34);
}
.card:hover,.temp:hover,.trainer:hover,.stat:hover,.info-card:hover,
.feat:hover,.store:hover,.plan:hover,.bk-svc:hover{
  background-image:var(--lacquer-sheen-2);
  border-color:var(--line-2);
  box-shadow:inset 0 1px 0 var(--specular-2),0 10px 26px -10px rgba(0,0,0,.62);
}
/* photo tiles carry their own image, so only the edge treatment applies */
.split-media,.trainer,.zone{background-image:none}
.split-media,.trainer,.zone{box-shadow:inset 0 0 0 1px var(--specular),0 14px 34px -16px rgba(0,0,0,.7)}

/* recessed things read as cut INTO the lacquer, so the catch light
   moves to the bottom edge and the fill goes darker than the panel */
.field input,.field select,.field textarea,.bk-date,.bk-slot,.bk-consent{
  background-color:var(--lacquer-3);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.42),inset 0 -1px 0 var(--specular);
}

/* ---------------------------------------------------------
   2. SILVER AS METAL (the 10%)
   --------------------------------------------------------- */

/* chrome type. Restricted to display-size numerals only. Below about
   1.8rem a clipped gradient turns to mud, so small accents stay flat. */
.floor-num,.plan .price,.stat b,.chrome{
  background-image:var(--silver-grad-t);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* children of a clipped element inherit the transparent fill and would
   vanish, so hand them their colour back explicitly */
.plan .price small{-webkit-text-fill-color:var(--muted);color:var(--muted)}
.stat b .u{-webkit-text-fill-color:var(--silver);color:var(--silver)}

/* hairline rules: a real one has a bright centre and fades at both ends */
.rule,.footer::before,.nav.scrolled::after{
  content:"";display:block;height:1px;border:0;
  background-image:var(--silver-rule);
}
.footer{position:relative}
.footer::before{position:absolute;left:0;right:0;top:0;opacity:.42}
.nav.scrolled::after{position:absolute;left:0;right:0;bottom:0;opacity:.34}

/* small accents stay flat silver, never clipped */
.eyebrow,.marquee span i,.brand b i,.pre-logo i,.sched-row .tm,.text-accent,.text-lime{
  color:var(--silver);
}

/* preloader progress reads as a strip of polished metal filling up */
.pre-bar span{background-image:var(--silver-grad);box-shadow:0 0 16px var(--accent-glow)}

/* the building GLB ships warm baked textures (timber, tan floors). Relighting
   cannot neutralise a baked albedo, so the rendered frame is graded to match
   the photo treatment. Same numbers as #tower-canvas on navigate.html. */
.tower-stage #homeTower{filter:grayscale(.30) saturate(.72) contrast(1.06) brightness(.96)}

/* selection, focus, scrollbar */
::selection{background:var(--silver);color:var(--on-silver)}
:focus-visible{outline:2px solid var(--silver);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar-thumb{background:var(--lacquer-2)}
::-webkit-scrollbar-thumb:hover{background:var(--silver-lo)}

/* ---------------------------------------------------------
   3. THE CTA
   The primary button is defined once, in tokens.css (--btn-*), and consumed
   by both style.css and premium.css. It is a milled silver plate: a flat
   brushed vertical ramp, a 1px specular hairline on the top edge, a 3px
   radius, and nothing else.

   What used to live here was a specular band that swept across the face on
   hover. It is gone on purpose. Stacked on top of the chrome fill, the 55%
   white inset, the 6px slab and the silver glow, it was the fifth effect on a
   130px object, and five effects on one small thing is how a page stops
   reading as expensive. The plate earns its polish from the material, not
   from an animation playing over it.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   4. TEXT EMPHASIS (per-word colour coding)

   A headline in one flat near-white reads as a block. These two
   classes give it internal rhythm. They are NOT interchangeable:

     .hl-silver   the ONE word that names something you cannot get
                  anywhere else in Vizag. Promotes.
     .hl-dim      a contiguous supporting phrase: a leading article,
                  or the qualifying half of a two-part headline.
                  Demotes.

   THE THREE RULES. Break any one and this reads as a ransom note.

     1. One .hl-silver per headline, MAXIMUM. Most headlines get
        zero, and that is the correct result, not an omission. Across
        the whole site silver should land on fewer than ten words.
        A multi-word proper noun ("Tony&Guy Essensuals") is one word
        for this purpose.
     2. Never more than TWO colours in one headline. Which two does
        not matter (default+dim, default+silver and dim+silver are all
        fine). Three is what makes it a ransom note.
        One exception, and only one: a display:block sub-line nested
        inside a heading counts as its own heading for this rule,
        because that is what it is visually. On this site that is the
        hero's .lime subline and nothing else.
     3. .hl-dim wraps a CONTIGUOUS phrase, never scattered single
        words. "All under one" is one span, not three.

   Body copy is never marked. It already sits on the --muted ramp,
   and the moment paragraphs take an accent the 10% budget is gone.
   --------------------------------------------------------- */
/* On a dark ground you cannot promote a word by making it brighter than
   near-white, and flat silver is DARKER than the default heading colour,
   so on its own it reads as a demotion. The promotion has to come from
   texture instead: at display size the word takes the chrome ramp, so it
   carries a specular band brighter than the surrounding white and lows
   darker than it. The word looks like polished metal; the rest looks like
   paint. That difference is legible, a 2-step luminance drop is not.

   Below roughly 1.5rem a clipped gradient turns to mud, so the ramp is
   scoped to the heading classes that are guaranteed big enough and
   everything smaller keeps the flat fill. Same self-enforcing gate as
   the deep grey below. */
.hl-silver{color:var(--silver)}
h1 .hl-silver,
.h-hero .hl-silver,
.h-xxl .hl-silver,
.h-xl .hl-silver,
.h-lg .hl-silver{
  background-image:var(--silver-grad-t);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* the hero subline is ~13px inside an h1, far below the mud threshold */
.hero-copy h1 .lime .hl-silver{
  background-image:none;-webkit-text-fill-color:var(--silver);color:var(--silver)}

/* #8A9198 is 4.67:1 on the matte ground, so it is legal at ANY size.
   This is the default and the safe one. */
.hl-dim{color:#8A9198}

/* A deeper grey reads better at display scale, but #6E757D is only
   3.9:1, which is AA-Large: legal at 24px+ regular or 19px+ bold and
   illegal below that. Rather than leave that as a rule someone has to
   remember, it is scoped to the heading classes that are GUARANTEED
   to be display size (smallest clamp minimum here is 1.8rem = 28.8px).
   Nest it anywhere smaller and you simply get the safe grey back. */
h1 .hl-dim,
.h-hero .hl-dim,
.h-xxl .hl-dim,
.h-xl .hl-dim,
.hero-copy h1 .hl-dim{color:var(--muted-2)}

/* .hero-copy h1 .lite hard-sets #fff at higher specificity than the gate
   above, so a span carrying both classes would ignore the mark. Name the
   collision rather than quietly dropping .lite from the markup. */
.hero-copy h1 .lite.hl-dim{color:var(--muted-2)}
.hero-copy h1 .lite.hl-silver{
  background-image:var(--silver-grad-t);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ...with one hole worth naming: a span inside a display heading can
   shrink its own font-size, and the gate above would still hand it the
   AA-Large-only grey at a size where that is illegal. The hero subline
   (.lime, 0.33em of the h1, so ~13px) is the one place this happens.
   Put the safe grey back. */
.hero-copy h1 .lime .hl-dim,.hero-sub .hl-dim{color:#8A9198}

/* Chrome-clipped elements (.stat b, .plan .price, .floor-num) hand
   their children a transparent text-fill. A marked span inside one
   would vanish, so give it its colour back explicitly. */
.chrome .hl-dim,.stat b .hl-dim,.plan .price .hl-dim{
  -webkit-text-fill-color:var(--muted-2);color:var(--muted-2)}
.chrome .hl-silver,.stat b .hl-silver,.plan .price .hl-silver{
  -webkit-text-fill-color:var(--silver);color:var(--silver)}