/* Careers (11 Sep 2026) – on top of ../page.css */
.work,.perks{padding:100px var(--pad) 40px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Perks only (Nuo, 13 Sep 2026, two passes): the copy starts level with the photograph's top and the induction-day film
   ends level with its bottom. Both grid items stretch to the row; the column is a flex column and the card takes the
   spare height as margin-top:auto (padding-top is the minimum gap under the list when there is none). The photograph
   is height:100% with the 4/5 ratio as its floor, so at widths where the COLUMN is the taller one (measured live:
   1100px and below) the picture grows to meet the card's foot instead of ending above it. Work With Us keeps its
   centred pair. The heading's cap tops sit 3.9px under the picture's edge (measured live in Graphik at 40px, canvas
   metrics); if that reads as a misalignment the lever is a negative margin-top on .perks h2. */
/* THREE GRID CHILDREN, PLACED BY AREA (14 Sep 2026) - see the note in careers.js. The desktop result is exactly
   what the flex column gave on 13 Sep: the copy top-left, the photograph down the right spanning both rows, and
   the induction card at the bottom of the left column ending level with the photograph's bottom. The photograph
   spans both rows, so the rows grow to fit it and align-self:end puts the card on the grid's bottom edge - which
   is what margin-top:auto did inside the old flex column. The phone reorders to txt / pic / card, which `order`
   could never have done while the card lived inside another element. */
.perks .grid{align-items:stretch;grid-template-areas:"txt pic" "card pic"}
.perks .grid > .reveal{display:flex;flex-direction:column}
.perks .pcopy{grid-area:txt}   /* its own class, not :first-child on .reveal: the areas must not depend on the motion layer's class or on DOM order */
.perks .pic{grid-area:pic}
.perks .vcard{grid-area:card;align-self:end;padding-top:28px}   /* its .player takes the shared 16px radius - the photograph's corners */
.perks .vhead{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:14px}
.perks .vhead h3{margin:0}
/* the LinkedIn card (third pass, 13 Sep 2026): a white card, our header, LinkedIn's compact player flush to its sides.
   The in-bug is the footer's white artwork inverted to black, and sits 18px from the card's edge - LinkedIn's own header
   puts its wordmark 9px in, which Nuo read as too close (measured on the Private Hire card, where it cannot be moved). */
.perks .licard{background:#fff;border-radius:16px;overflow:hidden}
.perks .lihead{display:flex;align-items:center;gap:12px;padding:14px 18px 14px 16px}
.perks .liav{flex:0 0 48px;width:48px;height:48px;border-radius:8px;background:var(--sand);display:grid;place-items:center}
.perks .liav img{width:38px;height:auto;display:block}
.perks .liwho{display:flex;flex-direction:column;gap:2px;min-width:0}
.perks .liwho b{font-family:var(--head);font-weight:500;font-size:15px;letter-spacing:-0.01em;color:#111;line-height:1.2}
.perks .liwho span{font-size:13px;line-height:1.2;color:#5b5652}
.perks .limark{margin-left:auto;display:block;width:26px;height:26px;flex:0 0 26px}
.perks .limark img{width:100%;height:100%;display:block;filter:invert(1);opacity:.85;transition:opacity .2s}
@media (hover:hover){.perks .limark:hover img{opacity:1}}
.perks .licard .player{border-radius:0}
.work .pill.big{margin-top:10px}
.cv{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39;margin-top:14px}
.film{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.team{padding:60px var(--pad) 40px}
.list{list-style:none;columns:2;column-gap:32px}
.list li{break-inside:avoid;font-size:clamp(16px,1.2vw,19px);line-height:1.4;color:#2b2926;padding:10px 0;border-top:1px solid rgba(0,0,0,.12)}
/* the perks photograph as it was: a 4/5 portrait crop (Nuo, 10 Sep 2026 – "bring back the perks photo") */
.perks .pic img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block}
.list li{hyphens:auto;-webkit-hyphens:auto}
/* the social events box (11 Sep 2026): one dark card - player left, copy right, a swipeable rail of the other films
   along the foot. Dark because a video player sits in a dark frame everywhere else a guest has seen one, and because
   the perks section above and the roles below are both light, so the box reads as its own thing. */
.social{padding:20px var(--pad) 40px}
.social .box{background:#111;color:var(--sand);border-radius:20px;padding:28px;display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:center}
/* .player and .facade are shared by the films box and the induction-day card in the perks column (13 Sep 2026): one
   set of rules, so the two play marks cannot drift apart. The box overrides the radius to 14px below. */
.player{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.social .player{border-radius:14px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:#000;cursor:pointer;display:block}
.facade img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .9s var(--ease),opacity .3s}
@media (hover:hover){.facade:hover img{transform:scale(1.04);opacity:1}}
.facade .mark{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:999px;background:rgba(242,236,233,.92);box-shadow:0 12px 40px rgba(0,0,0,.45);transition:transform .3s var(--ease),background .3s}
.facade .mark::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #111}
@media (hover:hover){.facade:hover .mark{transform:scale(1.08);background:#fff}}
.facade:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.social .side .k{color:var(--sand);opacity:.7;margin-bottom:10px}
.social .side h2{font-size:clamp(26px,2.4vw,36px);margin-bottom:14px;text-wrap:balance}
.social .side p.body{color:rgba(242,236,233,.82);font-size:15px;line-height:1.55;margin-bottom:18px;text-wrap:pretty}
.social .now{font-family:var(--head);font-size:14px;letter-spacing:-0.01em;margin-bottom:16px;min-height:1.4em}
.social .ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social .arrow{width:42px;height:42px;border-radius:999px;border:1.5px solid rgba(242,236,233,.5);background:transparent;color:var(--sand);font-size:22px;line-height:1;display:grid;place-items:center;transition:background .2s,border-color .2s}
@media (hover:hover){.social .arrow:hover{background:var(--sand);color:#111;border-color:var(--sand)}}
.social .pill.sm{border-color:rgba(242,236,233,.5);color:var(--sand);padding:9px 16px;font-size:13px;margin-left:auto}
@media (hover:hover){.social .pill.sm:hover{background:var(--sand);color:#111;border-color:var(--sand)}}
/* the rail: scroll-snap, swipes on touch, the scrollbar hidden but the content still scrollable by wheel and by keys */
/* no side padding and scroll-padding 0: the first film lines up with the player's left edge above it, and the mandatory
   snap has nothing to overshoot (Nuo, 11 Sep 2026: the first card left-aligns with the title, everywhere) */
.social .rail{grid-column:1/-1;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0;scrollbar-width:none;padding:4px 0 2px;-webkit-overflow-scrolling:touch}
.social .rail::-webkit-scrollbar{display:none}
.social .vt{flex:0 0 clamp(150px,16vw,210px);scroll-snap-align:start;border:0;padding:0;background:transparent;color:var(--sand);text-align:left;cursor:pointer;border-radius:10px}
.social .vt img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;opacity:.55;transition:opacity .25s,transform .4s var(--ease);border:2px solid transparent}
@media (hover:hover){.social .vt:hover img{opacity:.9}}
.social .vt.on img{opacity:1;border-color:var(--sand)}
.social .vt span{display:block;font-size:12px;line-height:1.35;padding:8px 2px 0;opacity:.75;font-family:var(--head)}
.social .vt.on span{opacity:1}
.social .vt:focus-visible{outline:3px solid #fff;outline-offset:2px}
.roles{padding:60px var(--pad) 110px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* a column, so the two Apply pills sit on one line at the foot of both cards whatever the role count - Front of House
   lists ten roles, Back of House seven, and the pills were 200px apart (Nuo, 11 Sep 2026: "bottom align the apply now
   buttons"). The list takes the spare height; the pill and the CV line stay where they were, only lower. */
.role{background:#fff;border-radius:20px;padding:0 0 32px;overflow:hidden;display:flex;flex-direction:column}
.role img{width:100%;aspect-ratio:16/10;object-fit:cover}
.role h2{margin:26px 32px 14px;font-size:clamp(28px,2.8vw,40px)}
.role .list{columns:1;margin:0 32px 22px;flex:1 0 auto}
.role .pill{align-self:flex-start}
.role .pill{margin-left:32px}
.role .cv{margin-left:32px}
@media (max-width:860px){
  /* CAREERS is one short word, so the Apply pill sits beside it at the lower right, not under it (Nuo, 11 Sep 2026) –
     page.css stacks .copy as a column on a phone for the pages whose heading fills the width */
  .hero .copy{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px}
  .work,.perks{padding:56px var(--pad) 24px}.grid{grid-template-columns:1fr;gap:28px}.perks .vcard{padding-top:20px}
  /* PHONE ORDER (Nuo, 14 Sep 2026): the perks, then the photograph with the dog, then the LinkedIn induction card. */
  .perks .grid{grid-template-areas:"txt" "pic" "card"}
  .list li{font-size:16px}
  .list{columns:1}.two{grid-template-columns:1fr}
  .role h2,.role .list,.role .pill,.role .cv{margin-left:20px;margin-right:20px}
  .social{padding:8px var(--pad) 24px}.social .box{grid-template-columns:1fr;padding:16px;gap:18px;border-radius:16px}
  .social .side h2{font-size:24px}.social .pill.sm{margin-left:0}.social .vt{flex-basis:150px}
}

/* ===== PRUE'S REBUILD (review of 19 Oct 2026, built 20 Oct): the roles as tiles, first; the film and the induction card gone ===== */
.ladder{padding:100px var(--pad) 40px}
.ladder > h2{margin:0 0 28px}
.ladder .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ladder .col h3{margin:0 0 14px;font-family:var(--head);font-weight:400;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.ladder ol.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid rgba(0,0,0,.14)}
.ladder ol.tiles li{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px 0;border-bottom:1px solid rgba(0,0,0,.14)}
.ladder ol.tiles li b{font-family:var(--head);font-weight:400;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.ladder ol.tiles li span{font-size:14px;line-height:1.45;color:#4a4642}
.ladder .acts{display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap;margin-top:32px}
.ladder .intern{margin:0;font-size:15px;color:#3f3c39}
.work.solo .grid{grid-template-columns:1fr}
.perks.solo .grid{grid-template-areas:"txt pic"}
@media (max-width:860px){.ladder{padding:56px var(--pad) 24px}.ladder .cols{grid-template-columns:1fr;gap:32px}.ladder ol.tiles{grid-template-columns:1fr}.perks.solo .grid{grid-template-areas:"txt" "pic"}}

/* == 6 NOV 2026 (Nuo) == Work With Us sits above the Roles and runs the full page width ("use full page width"); the perks are ONE
   column that fills the photograph's height ("show the perks in one column, fill the empty space"): the list grows to the column and
   each perk takes an equal share, set larger. A phone keeps its stacked list. */
.work.solo{padding-left:var(--pad);padding-right:var(--pad)}
.work.solo .grid,.work.solo .grid > div{max-width:none;width:100%}
.work.solo p.body{max-width:none}
.perks.solo .pcopy{display:flex;flex-direction:column}
.perks.solo .list{columns:1;display:flex;flex-direction:column;flex:1 1 auto;margin:0;padding:0}
.perks.solo .list li{flex:1 1 0;display:flex;align-items:center;font-size:clamp(19px,1.6vw,26px);line-height:1.3;padding:14px 0;hyphens:manual;-webkit-hyphens:manual}
.perks.solo .list li:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
@media (max-width:860px){.perks.solo .list li{flex:none;font-size:18px}}
.hero img.bg{object-position:63% 30%}   /* the 6 Nov 2026 hero (3:2, nearly the whole frame on a desktop): keep her face when a tall screen crops the sides */
.work.solo p.body{hyphens:manual;-webkit-hyphens:manual}
html body .work.solo .grid{max-width:none!important;margin-inline:0!important}
/* the whole tray on a phone (Nuo, 6 Nov 2026, 23:12: "Move this image bit to the left so the full tray is visible on mobile"): at 390x844
   47% puts the tray's left rim inside the frame and keeps her face (measured 42-63%; at 50% the rim is cut) */
@media (max-width:860px) and (orientation:portrait){.hero img.bg{object-position:47% 30%}}

/* WORK WITH US: THE WORDS AND A PHOTOGRAPH SIDE BY SIDE (Nuo, 7 Nov 2026: "find a suitable image to put to the right of this text? make it look
   super professional"). Two equal columns on a desktop, the picture a 4:3 crop the height of a short paragraph block, square corners like every
   photograph on the site, its middle on the words' middle; on a phone the photograph follows the Apply button, full width. */
html body .work.solo .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:center}
.work .wpic{margin:0;aspect-ratio:4/3;overflow:hidden;background:#e6ddd7}
.work .wpic img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
@media (max-width:860px){html body .work.solo .grid{grid-template-columns:1fr;gap:28px}}