/* ============================================================
   base.css - the neutral skeleton under all seven concepts.

   Loaded AFTER ../../styles.css, which supplies the REVL tokens, the
   Acier and Manrope faces, and the four components the concepts share
   unchanged (video placeholder, question deck, territory explorer,
   calendar, enquiry form fields).

   Everything here is deliberately plain. It holds the page up and
   enforces the rules that are not up for debate, and leaves the design
   to c1.css through c7.css:

     photographs dissolve into black, never a hard edge
     the floor plan PNGs blend on true page black
     every word sits above the pictures
     nothing that matters below the fold of a section at 1440x750
     no horizontal overflow at 390px
   ============================================================ */

:root{
  --gut:clamp(22px,6vw,90px);
  --pad:clamp(84px,11vh,150px);
  --measure:1180px;
}

/* section ids carry an s- prefix so nothing here collides with the
   live pages' own #hero / #book / #founders rules in styles.css */
.lp{ display:block; }
.lp *{ min-width:0; }

/* ---------- running chrome ---------- */
.lp-progress{ position:fixed; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.07); z-index:80; }
.lp-progress span{ display:block; height:100%; width:0; background:var(--beige);
  transition:width .2s linear; }

.lp-hdr{ position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px clamp(18px,4vw,30px);
  background:linear-gradient(180deg, rgba(10,10,10,.9), rgba(10,10,10,0)); }
.lp-hdr .lp-mark{ display:block; line-height:0; }
.lp-hdr img{ height:15px; opacity:.95; }
.lp-meta{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--warm); opacity:.85; }
.lp-meta b{ color:var(--white); font-weight:700; }

/* the section index. Off by default, switched on by the concepts that
   want a visible running order. */
.lp-rail{ display:none; }
.lp-rail a{ text-decoration:none; color:var(--grey); display:flex; gap:12px;
  align-items:baseline; padding:6px 0; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; transition:color .18s; }
.lp-rail a:hover, .lp-rail a.on{ color:var(--white); }
.lp-rail .rn{ font-variant-numeric:tabular-nums; opacity:.55; }

.lp-foot{ display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:44px var(--gut); border-top:1px solid var(--line2); }
.lp-foot img{ height:14px; opacity:.7; }
.lp-foot span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey); }

/* ---------- section shell ---------- */
.s{ position:relative; padding:var(--pad) var(--gut); }
.s .inr{ position:relative; z-index:2; width:100%; max-width:var(--measure);
  margin-inline:auto; }
.s .head{ position:relative; z-index:2; }
.kick{ display:flex; gap:12px; align-items:baseline; margin-bottom:20px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--warm); }
.kick .ch{ color:var(--beige); font-weight:700; }
h1.hl, h2.hl{ text-wrap:balance; }
h2.hl{ font-size:clamp(29px,4.4vw,58px); }
.p{ margin-top:22px; font-size:clamp(15px,1.4vw,18.5px); line-height:1.62;
  font-weight:300; color:var(--off); max-width:58ch; text-wrap:pretty; }
.p + .p{ margin-top:14px; }
.body{ margin-top:clamp(28px,3.6vw,48px); }

/* ---------- photography. Never a hard edge, never an abrupt join ---------- */
.shotbg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--black); }
.shotbg img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.55); }
.scrimbg{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.3) 38%, var(--black) 100%),
  linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 46%, rgba(10,10,10,.1) 100%); }

.shot{ position:relative; overflow:hidden; background:var(--black); }
.shot img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05) brightness(.78); }
/* the dissolve is what stops any photograph ending on a line */
.dissolve{ position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(180deg, var(--black) 0%, rgba(10,10,10,0) 24%, rgba(10,10,10,0) 60%, var(--black) 100%),
  linear-gradient(90deg, var(--black) 0%, rgba(10,10,10,0) 15%, rgba(10,10,10,0) 85%, var(--black) 100%); }

/* ---------- hero ---------- */
.s-hero{ min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding-bottom:clamp(64px,10vh,110px); }
.s-hero .mark{ height:28px; margin-bottom:24px; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); }
.eyebrow::before{ content:''; width:6px; height:6px; background:var(--beige); }
.s-hero h1.hl{ font-size:clamp(44px,7.6vw,108px); margin-bottom:18px; }
.sub{ font-size:clamp(15px,1.6vw,20px); color:var(--off); font-weight:300;
  max-width:48ch; line-height:1.5; }
.scroll-cue{ margin-top:36px; display:inline-flex; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm); opacity:.72; }
.sc-arrow{ display:block; width:11px; line-height:0; color:var(--beige); }
.sc-arrow svg{ display:block; width:100%; height:auto; }

/* the page two nameplate */
.plate{ width:100%; max-width:860px; }
.plate h1.hl{ font-size:clamp(30px,4.6vw,62px); }
.figs-plate{ margin-top:26px; }
.grow{ margin-top:16px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--beige); }
.rule{ height:1px; background:var(--line); margin:22px 0; }
.who{ display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; flex-wrap:wrap; }
.wn{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(17px,2vw,24px); line-height:1; }
.wr{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); }
.caveat{ margin-top:14px; font-size:10.5px; line-height:1.5; color:var(--grey);
  opacity:.75; max-width:52ch; }
.page-two .s-hero .sub{ margin-top:22px; }

/* ---------- primitives ---------- */

/* figures */
.figs{ display:grid; gap:1px; background:var(--line2); border:1px solid var(--line2); }
.figs-4{ grid-template-columns:repeat(4,1fr); }
.figs-plate{ grid-template-columns:repeat(4,1fr); }
.fig{ background:var(--black); padding:18px 16px; }
.fv{ font-family:'Acier',sans-serif; color:var(--white); line-height:1;
  font-size:clamp(24px,3.2vw,42px); }
.fl{ margin-top:9px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--warm); line-height:1.35; }

/* rows */
.rows{ display:grid; gap:1px; background:var(--line2); border:1px solid var(--line2); }
.rows-2{ grid-template-columns:1fr 1fr; }
.rows-3{ grid-template-columns:repeat(3,1fr); }
.rows-4{ grid-template-columns:repeat(4,1fr); }
.row{ background:var(--black); padding:20px 18px; display:block; }
.rn{ display:block; font-family:'Acier Out',sans-serif; font-size:12px;
  letter-spacing:.1em; color:var(--warm); opacity:.7; margin-bottom:12px; }
.rh{ display:block; font-family:'Acier',sans-serif; text-transform:uppercase;
  color:var(--white); font-size:clamp(14px,1.5vw,18px); line-height:1.15; }
.rd{ display:block; margin-top:9px; font-size:12.5px; line-height:1.55; color:var(--warm); }

/* two column split. Words first, always. */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,46px);
  align-items:start; }
.media{ margin-top:0; }
.media .video-ph{ margin-top:0; }

/* A film placeholder is REPLACED by a real <video> on first click (app.js,
   mountFilm). The only rule that ever styled that replacement was
   `.film-slot video` in styles.css, and .film-slot is a class off the
   original /book/ page which does not exist on these shells. With nothing
   sizing it the video fell back to its intrinsic 1280x720, burst out of the
   layout and pushed the page sideways. It takes the placeholder's frame
   instead; a concept that gave its placeholder a different aspect matches
   this to it.

   object-fit is the other half of it. A video defaults to `contain`, so
   the moment a concept gives its placeholder an aspect the film does not
   have, the film letterboxes inside it: the 42 second cut is 16:9, and the
   directory's 16:8.4 frame put 30px of black down each side. `cover` fills
   the frame whatever aspect the concept chose, and it is the same fit the
   poster image already uses, so pressing play changes nothing but motion. */
.lp video{ display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; margin-top:0; border:1px solid var(--line);
  border-radius:6px; background:var(--black2); }

/* founder facts */
.facts{ display:grid; gap:1px; background:var(--line2); border:1px solid var(--line2); }
.fact{ background:var(--black); padding:16px 18px; display:flex;
  justify-content:space-between; gap:16px; align-items:baseline; }
.fact .k{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); }
.fact .v{ font-size:13.5px; color:var(--off); text-align:right; }

/* why REVL pull quote */
.pull{ margin-top:26px; }
.pull q{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(18px,2.2vw,28px); line-height:1.14; quotes:none; }
.pull .who{ display:block; margin-top:13px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--warm); }

/* the term sheet */
.terms{ border-top:1px solid var(--line); }
.trow{ display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--line2); }
.tl{ font-size:13.5px; color:var(--warm); line-height:1.45; }
.tv{ font-family:'Acier',sans-serif; color:var(--white); line-height:1;
  font-size:clamp(19px,2.3vw,29px); white-space:nowrap; }
.incl{ margin-top:34px; }
.incl-t{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--beige); margin-bottom:16px; }
.incl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line2); border:1px solid var(--line2); }
.incitem{ background:var(--black); padding:15px 16px; font-size:13px;
  line-height:1.45; color:var(--off); }
.flagline{ margin-top:16px; font-size:11px; line-height:1.5; color:var(--grey);
  opacity:.75; font-style:italic; }

/* the network */
.voices{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,32px); }
.vitem{ display:flex; flex-direction:column; margin:0; }
.vp{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--black); }
.vp img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05) brightness(.8); }
.vq{ margin:18px 0 0; font-size:13.5px; line-height:1.6; color:var(--off); }
/* Curly quotes around every testimonial, so they read as the owner speaking
   rather than as description written about them. Escaped in the CSS rather
   than typed into content.js, because the brand guard blocks non-ASCII in
   anything client facing and this way the marks live with the component. */
.vq::before{ content:'\201C'; }
.vq::after{ content:'\201D'; }
.vn{ margin-top:14px; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--beige); }

/* how you launch */
.track{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line2); border:1px solid var(--line2); }
.node{ background:var(--black); padding:20px 16px; position:relative; }
.node .dot{ display:block; width:7px; height:7px; border:1px solid var(--beige);
  margin-bottom:14px; }
.node.first .dot{ background:var(--beige); }
.nw{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); }
.nt{ margin-top:9px; font-family:'Acier',sans-serif; text-transform:uppercase;
  color:var(--white); font-size:14px; line-height:1.15; }
.nd{ margin-top:8px; font-size:12px; line-height:1.5; color:var(--grey); }

/* book a call */
.expect{ display:grid; gap:1px; background:var(--line2); border:1px solid var(--line2); }
.bxi{ background:var(--black); padding:14px 16px; font-size:13px; line-height:1.5;
  color:var(--warm); }
.bk-inline{ background:var(--midblack); border:1px solid var(--line); padding:22px; }

/* the form */
.unlocks{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line2); border:1px solid var(--line2); margin-bottom:30px; }
.unlocks span{ background:var(--black); padding:15px 16px; font-size:12.5px;
  line-height:1.45; color:var(--warm); }

/* the studio model */
.fmt-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line2); border:1px solid var(--line2); }
.fmt-tabs button{ background:var(--black); border:0; color:var(--grey);
  padding:13px 14px; text-align:left; transition:background .18s, color .18s; }
.fmt-tabs .fn{ display:block; font-family:'Acier',sans-serif; text-transform:uppercase;
  font-size:15px; line-height:1; }
.fmt-tabs .fs{ display:block; margin-top:7px; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.75; }
.fmt-tabs button[aria-selected="true"]{ background:var(--beige); color:var(--midblack); }
.fmt-tabs button:hover:not([aria-selected="true"]){ color:var(--white); }
.fmt-pane[hidden]{ display:none; }
.fmt-facts{ margin-top:24px; padding-bottom:22px; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.fmt-facts .k{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
.fmt-facts .v{ margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--off); }
.fmt-band{ margin-top:24px; display:grid; grid-template-columns:1.72fr .78fr;
  background:var(--black); }
/* the plans are white line art on transparent. They only read on true page
   black, and the container must carry that black itself because the blend
   is isolated by the stacking context around it. */
.fmt-plan{ position:relative; overflow:hidden; background:var(--black);
  aspect-ratio:16/9; }
.fmt-plan img{ width:100%; height:100%; object-fit:contain; display:block;
  mix-blend-mode:screen; }
.fmt-shot{ position:relative; overflow:hidden; background:var(--black); }
.fmt-shot img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.86); }

/* ---------- the deck shell ---------- */
body.is-deck{ overflow:hidden; }
.lp-deck{ height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.deck-view{ flex:1 1 auto; overflow:hidden; position:relative; }
.deck-track{ display:flex; height:100%; will-change:transform;
  transition:transform .58s cubic-bezier(.62,.02,.2,1); }
.slide{ flex:0 0 100%; width:100%; height:100%; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; }
.slide .s{ min-height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(78px,9vh,104px) var(--gut) clamp(44px,6vh,66px); }
.slide .s-hero{ justify-content:flex-end; }

/* A slide is one window. Holding the section to exactly that height is what
   makes the pictures shrink into the room the words leave, instead of the
   words being pushed off the top of the window. */
.is-deck .slide .s{ height:100%; }
/* The enquiry form is the exception: its controls have a floor, so it keeps
   its natural height and that one slide scrolls. */
.is-deck .slide .s[data-type="form"]{ height:auto; justify-content:flex-start; }

/* the form runs tighter on a slide than it does down a page */
.is-deck .form{ margin-top:18px; }
.is-deck .frow{ gap:11px; margin-bottom:11px; }
.is-deck .ffield span{ font-size:12px; margin-bottom:5px; }
.is-deck .ffield input, .is-deck .ffield select{ padding:10px 12px; font-size:14px; }
.is-deck .flab{ font-size:11px; margin:17px 0 9px; padding-bottom:6px; }
.is-deck .sorter{ gap:8px; }
.is-deck .sopt{ padding:11px 13px; font-size:13px; }
.is-deck .seg button{ padding:10px 0; font-size:13px; }
.is-deck .form .cta-btn{ margin-top:16px; padding:13px 24px; font-size:13.5px; }
.is-deck .fnote{ margin-top:9px; font-size:11px; }
.is-deck .gate .unlocks span{ font-size:13px; }

.deck-bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:0 clamp(18px,4vw,30px); height:62px;
  border-top:1px solid var(--line2); background:var(--black); }
.deck-count{ display:flex; gap:6px; align-items:baseline; font-size:11px;
  letter-spacing:.18em; color:var(--grey); font-variant-numeric:tabular-nums; }
.deck-count b{ color:var(--white); font-weight:700; }
.deck-dots{ display:flex; gap:6px; flex:1 1 auto; justify-content:center;
  flex-wrap:wrap; }
.deck-dots .dot{ width:22px; height:2px; border:0; padding:0;
  background:rgba(255,255,255,.18); transition:background .2s; }
.deck-dots .dot.on{ background:var(--beige); }
.deck-nav{ display:flex; gap:8px; }
.dk-btn{ width:38px; height:34px; background:var(--black);
  border:1px solid var(--line); color:var(--off); display:grid; place-items:center;
  transition:border-color .18s, color .18s; }
.dk-btn svg{ width:12px; height:auto; }
.dk-btn:hover:not([disabled]){ border-color:var(--white); color:var(--white); }
.dk-btn[disabled]{ opacity:.3; cursor:default; }
#dkPrev svg{ transform:rotate(90deg); }
#dkNext svg{ transform:rotate(-90deg); }

@media (prefers-reduced-motion:reduce){
  .deck-track{ transition:none; }
}

/* ---------- responsive. Nothing may overflow at 390px ---------- */
@media (max-width:1000px){
  .duo{ grid-template-columns:1fr; }
  .figs-4, .figs-plate, .rows-4{ grid-template-columns:1fr 1fr; }
  .track{ grid-template-columns:1fr 1fr 1fr; }
  .voices{ grid-template-columns:1fr; }
  .incl-grid{ grid-template-columns:1fr 1fr; }
  .unlocks{ grid-template-columns:1fr 1fr; }
  .fmt-facts{ grid-template-columns:1fr 1fr; }
  .fmt-band{ grid-template-columns:1fr; }
  .fmt-shot{ aspect-ratio:16/10; }
}
@media (max-width:620px){
  .rows-2, .rows-3, .rows-4{ grid-template-columns:1fr; }
  .figs-4, .figs-plate{ grid-template-columns:1fr 1fr; }
  .track{ grid-template-columns:1fr; }
  .incl-grid, .unlocks{ grid-template-columns:1fr; }
  .fmt-facts{ grid-template-columns:1fr; }
  .fmt-tabs{ grid-template-columns:1fr; }
  .trow{ gap:12px; }
  .tv{ font-size:19px; }
  .bk-inline{ padding:16px; }
  .deck-dots{ display:none; }
}