/* VIP Auto Customs · Commercial & Residential Window Film (commercial.html). Page rules on top of css/home.css, which is
   linked first. An honest referral page, the same short decision-page shape as finance.html: a ~70vh hero (a VIP install
   photo under a heavy wash) with the two hand-over buttons, one text-media row (tile parallax from js/home.js) with the
   six Modern Touch services as a hairline list, the three ways to reach Modern Touch on the page's one light band, the
   calm close back to cars.
   Red once per screen: the italic word in the hero (--red) and the close's mono label (--red-text, #EE2C35, the same red
   lifted a touch so 10px type holds 4.5:1 on the ground; #E3202A measures 4.4:1). The row kicker and the light band's
   label stay grey: the band is short enough that its label and the close's label share a 1080px screen. On the warm
   white: labels at 62% ink (5.4:1), body at 80%+ ink. */

:root{--red-text:#EE2C35;--paper:#F4F3EF;--ink:#0B0B0B;--red-ink:#CC1B25;--row-media:min(520px,37vw)}

.m-mono{font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.m-kicker{font:500 13px/1.5 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--red-text)}
.m-kicker--red{color:var(--red-text)}

/* ---------------------------------------------------------------- (1) hero: content sits at the bottom-left; the
   section grows with its content, so the two buttons never fall off a short screen */
.m-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(560px,calc(var(--screen) * .72),900px);
  padding:calc(var(--nav-h) + 48px) var(--gutter) clamp(48px,8vh,88px);overflow:hidden;background:var(--ground)}
.m-hero__media{position:absolute;inset:0}
.m-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.6) contrast(1.02)}
/* the heavy wash: the installer and his hand at the glass stay a presence on the right, the left half is near-ground */
.m-hero__wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,5,.95) 0%,rgba(5,5,5,.88) 34%,rgba(5,5,5,.64) 66%,rgba(5,5,5,.72) 100%),
    linear-gradient(180deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,0) 24%,rgba(5,5,5,0) 66%,var(--ground) 100%)}
.m-hero__head{position:relative;z-index:2;max-width:820px}
.m-hero__title{margin-top:20px;margin-left:-.03em;font:300 clamp(56px,min(6vw,11vh),112px)/1 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.025em;color:var(--text)}
.m-hero__title em{font-style:italic;color:var(--red)}
.m-hero__line{margin-top:24px;max-width:48ch;font:300 17px/1.55 var(--sans);color:rgba(242,241,237,.84)}
.m-hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vh,40px)}

/* ---------------------------------------------------------------- (2) the text-media row: kicker and title at the top,
   the body pinned to the bottom; a 4:5 photo with the tile parallax. About 700px tall at 1440+. */
.m-row{display:grid;grid-template-columns:minmax(0,1fr) var(--row-media);gap:clamp(48px,8vw,160px);align-items:stretch;
  max-width:1440px;margin:0 auto;padding:clamp(58px,7.2vh,80px) var(--gutter) clamp(72px,9vh,100px)}
.m-row__text{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-width:0;max-width:520px}
.m-row__title{margin-top:22px;font:300 clamp(42px,3.35vw,52px)/1.04 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--text)}
.m-row__body{max-width:46ch}
.m-row__body p{font:300 15px/1.7 var(--sans);color:rgba(242,241,237,.8)}
.m-row__btn{margin-top:32px}
.m-row .e-tile__media{background:var(--panel);aspect-ratio:5/4;width:100%;margin:0;align-self:center}  /* landscape: the Modern Touch van, whole */
/* the six services: Geist on hairlines, a small mono counter */
.m-list{margin-top:28px;border-bottom:1px solid var(--hair)}
.m-list li{display:flex;align-items:baseline;gap:20px;padding:11px 0;border-top:1px solid var(--hair);font:300 17px/1.45 var(--sans);color:var(--text)}
.m-list__n{flex:none;width:2.4em;font:400 13px/1 var(--sans);letter-spacing:.02em;color:var(--label)}

/* ---------------------------------------------------------------- (3) the light band: the three ways to reach Modern Touch */
.m-reach{--label:rgba(11,11,11,.62);--box:rgba(11,11,11,.42);--hair:rgba(11,11,11,.16);--text:var(--ink);
  padding:clamp(96px,13.5vh,152px) var(--gutter) clamp(96px,13.5vh,144px);background:var(--paper);color:var(--ink)}
.m-reach ::selection{background:var(--ink);color:var(--paper)}
.m-reach :focus-visible{outline-color:var(--ink)}
.m-reach__inner{max-width:1240px;margin:0 auto}
.m-reach__label{font:500 13px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--red-ink);text-align:center}
.m-reach__title{margin-top:26px;text-align:center;font:300 clamp(42px,4.05vw,66px)/1.02 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--ink)}
/* three detail pairs, contact.html's grid: a tracked label on a hairline over its value */
.m-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(32px,4vw,72px);margin-top:clamp(50px,8vh,88px)}
.m-way{min-width:0}
.m-way__label{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--hair);font:600 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.m-way dd{margin:0;font:300 16px/1.6 var(--sans);color:rgba(11,11,11,.86)}
.m-way address{font-style:normal}
.m-way a{color:var(--ink);text-decoration:none}
.m-way__big{display:inline-block;font:300 clamp(26px,2.2vw,34px)/1.15 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.015em;overflow-wrap:anywhere}
.m-way__big:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.m-way__link{display:inline-block;margin-top:14px}

/* ---------------------------------------------------------------- (4) the calm close, on the ground */

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width:1023px) and (min-width:768px){
  :root{--row-media:42vw}
  .m-row{gap:48px}
  .m-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .m-hero{min-height:calc(var(--screen) * .8);padding:calc(var(--nav-h) + 40px) 20px 40px}
  .m-hero__media img{object-position:50% 50%}
  .m-hero__wash{background:linear-gradient(180deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,.62) 30%,rgba(5,5,5,.88) 60%,var(--ground) 100%)}
  .m-hero__title{font-size:clamp(52px,15vw,64px)}
  .m-hero__line{font-size:16px}
  .m-row{grid-template-columns:1fr;gap:36px;padding:72px 20px 88px}
  .m-row__media{order:-1}
  .m-row__text{gap:32px;max-width:none}
  .m-row__title{font-size:44px}
  .m-reach{padding:88px 20px 96px}
  .m-reach__title{font-size:44px}
  .m-ways{grid-template-columns:1fr;gap:32px;margin-top:48px}
  .m-way__label{margin-bottom:12px;padding-bottom:10px}
  .m-way__big{font-size:28px}
}