/* ============================================================
   Round 2: five scroll variants. Photography carries the page.

   Macca 30 Jul: too much text, information overload, and we are selling
   franchises not teaching market theory. He wants people doing the class,
   the room full, people enjoying themselves.

   So: copy cut to roughly a third, a photograph in every section, and two
   sections that exist purely to show the room and the owners.
   Built on system.css (the funnel pages' own). Accent is beige.
   ============================================================ */

/* ---------- P: the poster section (variant A) ---------- */
.poster{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 var(--gutter) clamp(56px,9vh,110px); overflow:hidden; }
.poster > .pbg{ position:absolute; inset:0; z-index:0; }
.poster > .pbg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.44); }
.poster > .pscrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.2) 38%, rgba(10,10,10,.94) 100%); }
.poster > .wrap{ z-index:2; }
.poster h2{ max-width:20ch; }
.poster .lead{ max-width:48ch; }
.postermini{ min-height:auto; padding-top:clamp(80px,12vh,150px); }

/* ---------- H: the alternating half split (variant B) ---------- */
.halves{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:clamp(420px,64vh,680px); }
.halves > .hpic{ position:relative; overflow:hidden; min-height:300px; }
.halves > .hpic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.62); }
.halves > .htxt{ display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,6vw,88px) clamp(28px,5vw,80px); }
.halves.flip > .hpic{ order:2; }
@media (max-width:860px){
  .halves{ grid-template-columns:1fr; min-height:0; }
  .halves > .hpic{ aspect-ratio:4/3; min-height:0; }
  .halves.flip > .hpic{ order:0; }
}

/* ---------- T: the trio of photo cards (the difference, the streams) ---------- */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(32px,4vw,52px); }
@media (max-width:860px){ .trio{ grid-template-columns:1fr; } }
.tcard{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:rgba(255,255,255,.012);
  display:flex; flex-direction:column; }
.tcard .tpic{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.tcard .tpic img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.58); }
.tcard.mine .tpic img{ filter:contrast(1.04) brightness(.82); }
.tcard .tbody{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.tcard .tname{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(21px,2.3vw,27px); line-height:1; }
.tcard .tdays{ margin-top:11px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--beige); }
.tcard .tsay{ margin-top:13px; font-size:14.5px; line-height:1.55; color:var(--off); font-weight:300; }
.tcard.mine{ border-color:rgba(204,202,187,.45); }
.tcard.mine .tname{ color:var(--white); }

/* ---------- O: the owners ---------- */
.owners{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(32px,4vw,52px); }
@media (max-width:860px){ .owners{ grid-template-columns:1fr; } }
.owner{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:rgba(255,255,255,.012); }
.owner .opic{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.owner .opic img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.8); }
.owner .obody{ padding:20px 22px 24px; }
.owner .oname{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); font-size:19px; line-height:1; }
.owner .ostudio{ margin-top:9px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--beige); }
.owner .osay{ margin-top:14px; font-size:14px; line-height:1.55; color:var(--off); font-weight:300; }

/* ---------- S: the sticky photo scroll (variant E) ---------- */
.stickyrow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start;
  margin-top:clamp(30px,4vw,48px); }
.stickyrow > .spic{ position:sticky; top:clamp(90px,13vh,140px); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; aspect-ratio:4/5; }
.stickyrow > .spic img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.6); }
.stickyrow > .sbody > * + *{ margin-top:clamp(28px,4vh,52px); }
.sblock h3{ margin-bottom:12px; }
.sblock p{ font-size:15.5px; line-height:1.65; color:var(--off); font-weight:300; max-width:46ch; }
@media (max-width:900px){
  .stickyrow{ grid-template-columns:1fr; }
  .stickyrow > .spic{ position:static; aspect-ratio:16/10; }
}

/* ---------- C: the editorial collage (variant D) ---------- */
.collage{ display:grid; gap:14px; margin-top:clamp(32px,4vw,52px);
  grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(90px,auto); }
.collage figure{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:6px; margin:0; }
.collage figure img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.6); }
.collage .big{ grid-column:span 4; grid-row:span 3; }
.collage .tall{ grid-column:span 2; grid-row:span 3; }
.collage .wide{ grid-column:span 3; grid-row:span 2; }
.collage .sq{ grid-column:span 3; grid-row:span 2; }
.collage figcaption{ position:absolute; left:16px; right:16px; bottom:14px; font-size:12px; color:var(--off);
  text-shadow:0 1px 12px rgba(10,10,10,.9); }
@media (max-width:860px){
  .collage{ grid-template-columns:repeat(2,1fr); }
  .collage .big,.collage .tall,.collage .wide,.collage .sq{ grid-column:span 2; grid-row:span 2; }
}

/* ---------- shared trims ---------- */
.tightlead{ max-width:52ch; }
.oneline{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(24px,3.4vw,44px); line-height:1.02; max-width:26ch; }
.saysrc{ margin-top:18px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.8; }
.reasons3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(30px,4vw,48px);
  background:var(--line2); border:1px solid var(--line2); }
@media (max-width:860px){ .reasons3{ grid-template-columns:1fr; } }
.reason3{ background:var(--black); padding:26px 24px 30px; }
.reason3 .rn3{ font-family:'Acier Out',sans-serif; font-size:13px; color:var(--warm); opacity:.6; }
.reason3 p{ margin-top:14px; font-size:15.5px; line-height:1.55; color:var(--off); font-weight:300; }
.midband{ position:relative; height:clamp(340px,58vh,620px); overflow:hidden; }
.midband img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.5); }
.midband .mbs{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,.12) 45%, rgba(10,10,10,.9) 100%); }
.midband .mbc{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(28px,5vh,54px);
  max-width:var(--maxw); margin-inline:auto; }
.midband .mbc p{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(24px,4vw,56px); line-height:1; max-width:22ch; }
.midband .mbc span{ display:block; margin-top:14px; font-size:14px; color:var(--warm); }

/* ---------- honesty: the competitor columns carry no REVL photograph ---------- */
.tcard.typeonly{ justify-content:center; }
.tcard.typeonly .tbody{ padding:clamp(28px,3vw,40px) 24px; }
.tcard.typeonly .tname{ color:var(--warm); }
.tcard.typeonly .tsay{ color:var(--warm); }

/* ---------- face safe crops: these photographs have faces near the top ---------- */
.hpic img.faces, .tpic img.faces, .midband img.faces, .poster .pbg img.faces{ object-position:center 22%; }