/* ============================================================
   short.css - the SHORT EDITION of page one, layout only.

   Loads AFTER styles.css and changes nothing page one relies on. It exists
   for one reason: page one's hero is a full-height photograph with the
   headline pinned to the bottom, and this page has to put the enquiry form
   in the same screen as the headline. Everything below the fold is page
   one's own CSS, untouched.

   Two states, one breakpoint at 980px.

   DESKTOP, above 980. Two columns over the photograph, headline left and
   form right. The headline column is sticky so it holds while ten questions
   are answered; the form column is the wider of the two because .frow.three
   puts three selects across and they need the room.

   PHONE, 980 and below. The photograph is capped to a band at the top, the
   columns stack, and the form lands on the black ground directly under the
   headline. The band is short on purpose: the form has to be reachable in
   one flick.
   ============================================================ */

/* NO SECTION-PADDING OVERRIDE HERE, and that is deliberate.

   The obvious way to shorten this page is to tighten --sectionpad. It was
   tried and reverted. styles.css sets that token on :root inside three
   media queries keyed on VIEWPORT HEIGHT (1000px, 900px, 820px), which are
   the measured fix for a 13 inch laptop getting desktop type in two thirds
   the height (Macca, 2026-09-01, "the mission is at the very top of the
   screen, the button is on the very, very bottom"). A token set on the
   sections themselves beats an inherited :root value at every one of those
   breakpoints, so the override silently switched that adaptation off and,
   at 1280x900 where page one is already down to 43.2px, made this page
   LONGER: 4465px to 4678px.

   The length comes from carrying five sections instead of ten. It does not
   come from the rhythm, and the rhythm is not ours to retune. */

/* Page one's hero is 100svh with its content pinned to the bottom. Neither
   is right here: this section is as tall as the form inside it. *//* Page one's hero is 100svh with its content pinned to the bottom. Neither
   is right here: this section is as tall as the form inside it. */
#hero.top{
  min-height:0;
  display:block;
  padding-top:clamp(104px,13vh,164px);
  padding-bottom:clamp(72px,10vh,116px);
}

/* THE PHOTOGRAPH IS A BAND, NOT THE GROUND. This section runs to about
   1180px at 1440 because the form is inside it. Left as the section's
   background, object-fit:cover scales the picture up by half and the crop
   stops being the one that was chosen. Capping the band at the viewport
   height puts the box back near the picture's own ratio. Below the band the
   page is simply black, which is the right ground for the form panel. */
#hero.top .bleed,
#hero.top .scrim{ inset:0 0 auto 0; height:min(100svh,880px); }

/* nb-studio-34.jpg is a genuinely dark photograph, not a bright one shot at
   night. styles.css knocks every bleed image down to brightness(.55), which
   was set for the shopfront; applied to this one the studio disappears and
   the band reads as flat grey. Lifted here, and only here. */
#hero.top .bleed img{ filter:grayscale(1) contrast(1.05) brightness(.92); }

/* Page one's hero gradient, lightened to match, with the bottom taken all
   the way to solid so the capped band meets the black page with no edge. */
#hero.top .scrim{
  background:
    linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.4) 40%, rgba(10,10,10,.14) 74%, rgba(10,10,10,.3) 100%),
    linear-gradient(180deg, rgba(10,10,10,.3) 0%, rgba(10,10,10,.12) 40%, rgba(10,10,10,.82) 84%, rgba(10,10,10,1) 100%);
}

.topgrid{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(32px,4.5vw,68px);
  align-items:start;
}

/* Sticky so the headline and the proof line stay with a visitor working
   down ten questions. 104px clears the fixed header and its gradient. */
.topsay{ position:sticky; top:104px; }

/* The display size is page one's clamp(40px,7vw,101px), drawn for a
   full-width hero. In a 42 percent column at 1440 that sets YOUR CITY. wider
   than the column, so the ceiling comes down. NHG Display Pro 75 Bold sets
   1.155x wider than the Acier this page was originally drawn in, which is
   the same reason page one's sizes carry a 0.87 factor. */
#hero.top h1{ font-size:clamp(38px,4.4vw,64px); margin-bottom:0; }
#hero.top .lead{ max-width:44ch; }
#hero.top .scrollcue{ margin-top:34px; }

/* The form panel. Two inherited spacings have to go, because on page one
   this is a full section and here it is a column.

   styles.css line 219 puts padding-block:clamp(72px,9vh,120px) on #enquire,
   which is 81px at a 900 tall window. That was section padding; here it just
   pushed the panel 81px below the headline it is supposed to sit level with.
   And .gate carries margin-top:44px for following a paragraph, which it no
   longer does. */
/* The selector needs the id: styles.css sets that padding on #enquire, and
   a class alone loses to it. */
#hero.top .topask{ padding-block:0; }

.topask .gate{ margin-top:0; }

/* ---------- phone and small tablet ---------- */
@media (max-width:980px){
  #hero.top{ padding-top:0; padding-bottom:clamp(56px,8vh,80px); }

  /* The band has to be TALLER than the headline block, not shorter. At 338px
     against a 433px block the photograph stopped halfway down the copy and
     the edge read as a mistake. These two clamps are set against each other:
     the block measures about 395px at 390x667 and 416px at 390x844, so the
     band clears it at every size and the form panel's top edge overlaps the
     photograph, which is the join looking deliberate. */
  #hero.top .bleed,
  #hero.top .scrim{ height:clamp(430px,54svh,500px); }
  #hero.top .scrim{
    background:linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.28) 45%, rgba(10,10,10,.96) 100%);
  }

  .topgrid{ grid-template-columns:1fr; gap:30px; }

  /* Sticky is wrong on a phone: it would hold the headline over the form. */
  .topsay{
    position:static;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-top:clamp(78px,12vh,110px);
    padding-bottom:26px;
  }
  #hero.top h1{ font-size:clamp(33.1px,8.4vw,46px); }
  #hero.top .lead{ max-width:none; }

  /* The cue points at what is next. Here the next thing is the form and it
     is already on screen, so the cue would be pointing at nothing. */
  #hero.top .scrollcue{ display:none; }
}

/* ---------- the support network is NOT on this page ----------
   Its four rows were built here and then cut. Two reasons, and the second is
   the one that decided it: it dwelt 3.0s on page one, the same as feeling,
   difference and ecosystem which were all cut on that number; and its whole
   subject is answered by FAQ five, "What support do I receive as a REVL
   franchisee?", which is REVL's own wording and is still on the page. On a
   page this short, saying it twice is the thing that makes it long.

   If it comes back, it needs .snw-rows.wide on the row wrapper plus a
   190px label column above 881px, and #support .cta-btn reset to width:auto,
   because page one stretches that button to fill a narrow column. */