/* ============================================================
   partner.css - five treatments of 03 The partnership.

   LOADS AFTER picked.css. The rules in picked.css are written as
   `.pk [data-type="support"] X`, which is the same weight as
   `.pk .pt-a X`, so these win on source order alone. Do not add
   specificity to fight it: move the link tag instead.

   Every treatment carries the identical content. Four support teams,
   the Academy film, and the six things building a REVL includes. The
   only thing that changes is the arrangement.
   ============================================================ */

/* ---------- A. STRIPPED BACK.  MACCA'S PICK, 30 Jul ----------
   The arrangement that exists, with all box chrome taken out. Four teams
   become hairline separated entries, the film keeps its place beside
   them, and the six includes run as three quiet columns underneath.

   The vertical rhythm was tuned after the pick: the heading and its lead
   sit lower off the section top, the gap under them closes by about the
   same amount so nothing below shifts, and what building a REVL includes
   comes up closer to the teams it belongs with. */
.pk .pt-a .head{ margin-top:clamp(16px,2.2vw,32px); }
.pk .pt-a .body{ margin-top:clamp(14px,1.6vw,20px); }
.pk .pt-a .rows{ background:none; border:0; gap:0; }
.pk .pt-a .row{ background:none; border:0; border-radius:0;
  border-top:1px solid var(--line2); padding:19px 0; }
.pk .pt-a .row:first-child{ border-top:0; padding-top:0; }
.pk .pt-a .rh{ font-size:18px; line-height:1.1; }
.pk .pt-a .rd{ font-size:13px; margin-top:9px; color:var(--grey); }
.pk .pt-a .duo{ align-items:center; }
/* The film rides a little above the centre line (Macca 30 Jul).

   NO `.pk.is-deck` reset here. There was one, and it did real damage: at
   four classes it matched picked.css's own deck rule exactly, and being in
   the later file it won, silently cancelling the deck's -38px and sitting
   the film back on the centre line. The deck sets its own value; this rule
   is three classes and loses to it there, which is all that was needed. */
.pk .pt-a .media{ position:relative; top:-22px; }
/* 16:9, so the film stands the same height as the four teams beside it
   (Macca 30 Jul). At 4:3.4 it was 489px against their 332px, which left
   the teams floating in the middle of it with dead air above and below,
   and made the film rather than the words the subject of the section. */
.pk .pt-a .media .video-ph{ min-height:0; height:auto; aspect-ratio:16/9; }
.pk .pt-a .incl{ margin-top:clamp(16px,1.9vw,26px); }
.pk .pt-a .incl-grid{ background:none; border:0;
  grid-template-columns:repeat(3,1fr); gap:0 clamp(22px,2.8vw,40px); }
.pk .pt-a .incitem{ background:none; padding:13px 0;
  border-bottom:1px solid var(--line2); font-size:13px; }

/* ---------- B. THE BAND ----------
   The Academy film goes full width across the top of the section, the
   four teams run as one row underneath it, and the includes sit under
   the lot. Nothing sits beside anything else, so nothing competes. */
.pk .pt-b .duo{ display:flex; flex-direction:column;
  gap:clamp(30px,3.8vw,50px); }
.pk .pt-b .col-b{ order:-1; }
.pk .pt-b .media .video-ph{ min-height:0; height:auto; aspect-ratio:16/6; }
.pk .pt-b .rows{ grid-template-columns:repeat(4,1fr); gap:1px; }
.pk .pt-b .row{ padding:20px 18px; }
.pk .pt-b .rh{ font-size:16px; line-height:1.1; }
.pk .pt-b .rd{ font-size:12.5px; margin-top:9px; }
.pk .pt-b .incl-grid{ background:none; border:0;
  grid-template-columns:repeat(3,1fr); gap:0 clamp(22px,2.8vw,40px); }
.pk .pt-b .incitem{ background:none; padding:13px 0;
  border-bottom:1px solid var(--line2); font-size:13px; }

/* ---------- C. THE LEDGER ----------
   The film comes out and the section becomes two columns of type: who
   supports you on the left, the six things you get as a numbered ledger
   on the right. partner.js moves the includes into the right column. */
.pk .pt-c .duo{ grid-template-columns:1fr 1fr;
  gap:clamp(36px,5.2vw,74px); align-items:start; }
.pk .pt-c .col-b .video-ph{ display:none; }
.pk .pt-c .rows{ background:none; border:0; gap:0; }
.pk .pt-c .row{ background:none; border:0; border-radius:0;
  border-top:1px solid var(--line2); padding:17px 0; }
.pk .pt-c .row:first-child{ border-top:0; padding-top:0; }
.pk .pt-c .rh{ font-size:18px; line-height:1.1; }
.pk .pt-c .rd{ font-size:13px; margin-top:9px; color:var(--grey); }
.pk .pt-c .incl{ margin-top:0; }
.pk .pt-c .incl-t{ text-align:left; margin-bottom:4px; }
.pk .pt-c .incl-grid{ background:none; border:0; grid-template-columns:1fr;
  gap:0; counter-reset:inc; }
.pk .pt-c .incitem{ background:none; padding:14px 0;
  border-bottom:1px solid var(--line2); font-size:13.5px;
  display:flex; gap:16px; align-items:baseline; counter-increment:inc; }
.pk .pt-c .incitem::before{
  content:counter(inc,decimal-leading-zero);
  flex:0 0 auto; font-family:'Acier',sans-serif; font-size:11px;
  color:var(--beige); letter-spacing:.06em; }

/* ---------- D. THE RAIL ----------
   Left is the support, right is what lands. The film keeps its place at
   the top of the right column and the six includes read as a checked
   list directly under it, so the column answers one question. */
.pk .pt-d .duo{ grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.2vw,58px); align-items:start; }
.pk .pt-d .rows{ gap:1px; }
.pk .pt-d .row{ padding:15px 17px; }
.pk .pt-d .rh{ font-size:16px; line-height:1.1; }
.pk .pt-d .rd{ font-size:12.5px; margin-top:7px; }
.pk .pt-d .media .video-ph{ min-height:0; height:auto; aspect-ratio:16/9; }
.pk .pt-d .incl{ margin-top:clamp(20px,2.4vw,30px); }
.pk .pt-d .incl-t{ text-align:left; margin-bottom:4px; }
.pk .pt-d .incl-grid{ background:none; border:0; grid-template-columns:1fr;
  gap:0; }
.pk .pt-d .incitem{ background:none; padding:11px 0;
  border-bottom:1px solid var(--line2); font-size:13px;
  display:flex; gap:13px; align-items:flex-start; }
.pk .pt-d .incitem::before{ content:''; flex:0 0 auto; width:5px; height:10px;
  margin-top:4px; border-right:1px solid var(--beige);
  border-bottom:1px solid var(--beige); transform:rotate(45deg); }

/* ---------- E. CENTRED, FILM OUT ----------
   The film is a placeholder and it is the biggest object in the section.
   With it gone the section is no longer two sided, so by the page's own
   rule it belongs on the centre axis with everything else that is not. */
.pk .pt-e{ text-align:center; }
.pk .pt-e .head{ display:flex; flex-direction:column; align-items:center; }
.pk .pt-e .kick{ justify-content:center; }
.pk .pt-e .p{ margin-inline:auto; text-align:center; }
.pk .pt-e h2.hl{ max-width:20ch; }
.pk .pt-e .duo{ grid-template-columns:1fr; }
.pk .pt-e .col-b{ display:none; }
.pk .pt-e .rows{ background:none; border:0;
  grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,32px); }
.pk .pt-e .row{ background:none; border:0; border-radius:0;
  border-top:1px solid var(--line); padding:19px 0 0; text-align:center; }
.pk .pt-e .rh{ font-size:16px; line-height:1.1; }
.pk .pt-e .rd{ font-size:12.5px; margin-top:9px; color:var(--grey); }
.pk .pt-e .incl{ margin-top:clamp(34px,4.2vw,52px); }
.pk .pt-e .incl-t{ text-align:center; }
.pk .pt-e .incl-grid{ background:none; border:0;
  grid-template-columns:repeat(3,1fr); gap:0 clamp(22px,2.8vw,40px);
  max-width:920px; margin-inline:auto; }
.pk .pt-e .incitem{ background:none; padding:13px 0;
  border-bottom:1px solid var(--line2); font-size:13px; text-align:left; }

/* ---------- the deck ----------
   A is the live design now, so it has to land inside a fixed window as
   well as run down a scroller. Two things pushed the partnership slide
   29px past its window: the 4:3.4 film, and the extra air above the
   heading that the scroller wants. Both come back on a slide. */
.pk.is-deck .pt-a .head{ margin-top:0; }
.pk.is-deck .pt-a .media .video-ph{ aspect-ratio:16/10; }

/* ---------- responsive ----------
   Same rule as the rest of the page: two columns before one, and nothing
   keeps a desktop column count on a phone. These sit last in the file so
   they are not outranked by the equal-weight rules above. */
@media (max-width:1000px){
  .pk .pt-c .duo,
  .pk .pt-d .duo{ grid-template-columns:1fr; }
  .pk .pt-b .rows{ grid-template-columns:1fr 1fr; }
  .pk .pt-e .rows{ grid-template-columns:1fr 1fr; row-gap:clamp(20px,3vw,30px); }
  .pk .pt-a .media .video-ph{ aspect-ratio:16/9; }
}
@media (max-width:620px){
  .pk .pt-a .incl-grid,
  .pk .pt-b .incl-grid,
  .pk .pt-e .incl-grid{ grid-template-columns:1fr; }
  .pk .pt-b .rows,
  .pk .pt-e .rows{ grid-template-columns:1fr; }
  .pk .pt-b .media .video-ph{ aspect-ratio:16/10; }
}

/* ============================================================
   THE COMPARE PAGE. /lp/partnership/ only.
   Five copies of the one section, labelled, with the page's own
   chrome around them. Nothing here loads on the real page.
   ============================================================ */
.pcmp .pc-intro{ padding:clamp(96px,13vh,150px) var(--gut) clamp(30px,4vh,50px); }
.pcmp .pc-intro .inr{ max-width:var(--measure); margin-inline:auto; }
.pcmp .pc-intro .kick{ margin-bottom:20px; }
.pcmp .pc-intro h1{ font-family:'Acier',sans-serif; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,58px); line-height:1; color:var(--white);
  text-wrap:balance; }
.pcmp .pc-intro .p{ margin-top:22px; }
.pcmp .pc-intro .pc-jump{ display:flex; flex-wrap:wrap; gap:10px;
  margin-top:clamp(26px,3.2vw,38px); }
.pcmp .pc-jump a{ display:inline-flex; align-items:baseline; gap:9px;
  padding:11px 17px; border:1px solid var(--line); color:var(--chalk);
  text-decoration:none; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; transition:border-color .18s, color .18s; }
.pcmp .pc-jump a:hover{ border-color:var(--chalk); color:var(--white); }
.pcmp .pc-jump b{ font-family:'Acier',sans-serif; color:var(--beige);
  font-weight:400; }

.pcmp .pcase{ border-top:1px solid var(--line2); scroll-margin-top:0; }
.pcmp .pc-lab{ padding:clamp(40px,5.5vh,64px) var(--gut) 0; }
.pcmp .pc-lab .inr{ max-width:var(--measure); margin-inline:auto; }
.pcmp .pc-tag{ display:flex; align-items:baseline; gap:14px; }
.pcmp .pc-tag b{ font-family:'Acier',sans-serif; font-size:22px;
  color:var(--beige); font-weight:400; line-height:1; }
.pcmp .pc-tag span{ font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--white); font-weight:700; }
.pcmp .pc-note{ margin-top:14px; font-size:13.5px; line-height:1.6;
  color:var(--grey); font-weight:300; max-width:74ch; }
.pcmp .pc-see{ display:inline-block; margin-top:16px; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--beige);
  text-decoration:none; border-bottom:1px solid rgba(204,203,188,.4);
  padding-bottom:3px; }
.pcmp .pc-see:hover{ color:var(--white); border-bottom-color:var(--chalk); }
/* the section keeps its own top pad, so the label only needs to clear it */
.pcmp .pcase .s{ padding-top:clamp(30px,4vh,46px); }