/* The pages beside the landing, on the house style's scales:
   Montserrat Bold headlines of 56, 42, 32, 20 and 16 px, Overpass body of 24, 18, 16, 14 and 12 px,
   spacing in steps of 4, 8, 16, 24, 32, 40, 56 and 64 px, and corners of 4, 8 or 16 px */
.page-top { position: relative; overflow: hidden; }
.page-top > :not(.glow) { position: relative; }
.page-head { padding: 56px 0 64px; }
.page-head h1 { max-width: 16em; margin-top: 16px; font-size: 56px; line-height: 68px; font-weight: 700; color: #fff; }
.page-head h1 em { font-style: normal; color: var(--magenta-hot); }
.page-head .lede { max-width: 32em; margin-top: 24px; font-size: 24px; line-height: 36px; color: var(--muted-on-dark); }
.page-head .language-note { display: inline-block; margin-top: 24px; padding: 8px 16px; border: 1px solid var(--line-on-dark); border-radius: 8px; font-size: 16px; line-height: 24px; color: var(--muted-on-dark); }
/* The legal pages' translations say the English text prevails; the English page itself needs no such line */
html[lang="en"] .translation-note { display: none; }
.nav-links a[aria-current="page"], .site-footer a[aria-current="page"] { color: #fff; }

.page .block { padding: 64px 0; }
.page .section-head { margin-bottom: 40px; }
.page .section-head h2 { margin-top: 8px; font-size: 42px; line-height: 52px; font-weight: 700; }
.page .section-head > p:not(.kicker) { margin-top: 16px; font-size: 18px; line-height: 28px; }
.page .tint .section-head h2 { margin-top: 0; }
.page .section-head h2 em { font-style: normal; color: var(--magenta); }

.card-icon { flex: none; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--blush); color: var(--magenta-deep); }
.card-icon .icon { width: 24px; height: 24px; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card-grid .house-card h3 { margin-top: 16px; font-size: 20px; line-height: 28px; }
.card-grid .house-card p { margin-top: 8px; }
.card-grid.plain .house-card { box-shadow: none; border: 1px solid var(--line); }
.tint .card-icon { background: var(--sky); color: var(--blue); }
.tint .card-grid .house-card h3 { color: var(--blue); }
/* Careers' values on the night, between two light sections: the same white cards, the headline's em in the hot pink of the site's dark sections */
.values.dark .card-icon { background: var(--sky); color: var(--blue); }
.values.dark .card-grid .house-card h3 { color: var(--blue); }
.page .dark .section-head h2 em { color: var(--magenta-hot); }

/* Legal texts: the contents beside the text on wide screens, above it on narrow ones */
.legal-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 760px); gap: 64px; align-items: start; }
.legal-grid.no-toc { grid-template-columns: minmax(0, 760px); }
/* Below the pinned bar */
.legal-toc { position: sticky; top: calc(var(--nav-height) + 24px); max-height: calc(100vh - var(--nav-height) - 48px); overflow-y: auto; overscroll-behavior: contain; }
.legal-toc h2 { padding: 0 8px; font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { display: grid; gap: 4px; margin-top: 8px; }
.legal-toc a { display: block; padding: 4px 8px; border-radius: 4px; font-size: 14px; line-height: 22px; color: var(--ink-soft); text-decoration: none; }
.legal-toc a:hover { background: var(--soft); color: var(--ink); }
.prose { font-size: 18px; line-height: 28px; color: var(--ink-soft); overflow-wrap: break-word; }
.prose h2 { margin-top: 56px; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 24px; }
.prose h3 { margin-top: 32px; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0; color: var(--ink); scroll-margin-top: 24px; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 16px; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: 8px; }
.prose ul { padding-left: 24px; list-style: disc; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--magenta); }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { font-weight: 600; color: var(--magenta-deep); }

/* About: the title beside the team photo and the founder story beside the office door */
.head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: center; }
.head-photo { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 56px -24px rgba(10, 7, 14, .7); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 64px; align-items: center; }
.story-grid .section-head { margin-bottom: 0; }
.story-grid .button { margin-top: 32px; }
.story-photo { width: 100%; height: auto; border-radius: 16px; }
.page .team.block { padding: 80px 0 48px; }
/* Meet our team as production has it: on the dark purple, three square photos edge to edge, white name, role, email and a round LinkedIn on its own line */
.page .team .section-head { margin-bottom: 80px; }
.page .team .section-head h2 { font-size: 42px; line-height: 58px; font-weight: 700; letter-spacing: 0; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 100px 20px; }
.member { display: flex; flex-direction: column; align-items: flex-start; color: #fff; }
.member img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.member h3 { margin-top: 36px; font-family: var(--font-body); font-size: 24px; line-height: 36px; font-weight: 700; letter-spacing: 0; color: #fff; }
.member p { margin-top: 28px; font-size: 18px; line-height: 32px; }
.member-links { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; margin-top: 28px; }
.member-links a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 18px; line-height: 32px; color: #fff; text-decoration: none; }
.member-mail span { overflow-wrap: anywhere; }
.member-mail .icon { flex: none; width: 20px; height: 20px; }
.member-mail:hover span { text-decoration: underline; }
.member-links .member-linkedin { justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background-color .2s; }
.member-linkedin .icon { width: 16px; height: 16px; }
.member-links .member-linkedin:hover { background: rgba(255, 255, 255, .22); }
.page-cta { padding: 64px 0; background: var(--aubergine); }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 32px 56px; }
.cta-row h2 { font-size: 32px; line-height: 40px; font-weight: 700; color: #fff; }
.cta-row p { margin-top: 8px; font-size: 18px; line-height: 28px; color: var(--muted-on-dark); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; border-radius: 16px; background: var(--soft); }
.contact-card h2 { margin-top: 8px; font-size: 32px; line-height: 40px; font-weight: 700; }
.contact-card p { max-width: 26em; font-size: 18px; line-height: 28px; color: var(--ink-soft); }
.contact-card .button { margin-top: 16px; }
.contact-list { display: grid; }
.contact-list li { display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { padding-top: 8px; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list h3 { font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-list a:not(.more), .contact-list address { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.contact-list a:not(.more):hover { color: var(--magenta-deep); }
.contact-list .more { margin-top: 8px; }
.contact-list .more, .visit-card .more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 16px; line-height: 24px; font-weight: 700; color: var(--magenta-deep); text-decoration: none; }
.contact-list .more .icon, .visit-card .more .icon { width: 16px; height: 16px; transition: transform .2s; }
.contact-list .more:hover .icon, .visit-card .more:hover .icon { transform: translateX(4px); }

.find-us { background: var(--aubergine); }
/* Find us: the office beside Google's map of Flight Forum, then the two photos of the way in */
.map-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; }
.visit-card { display: flex; flex-direction: column; gap: 24px; padding: 24px; border: 1px solid var(--line-on-dark); border-radius: 16px; background: var(--aubergine-light); }
.visit-card img { width: 100%; height: auto; border-radius: 8px; }
.visit-card h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: #fff; }
.visit-card address { margin-top: 8px; font-style: normal; font-size: 18px; line-height: 28px; color: var(--text-on-dark); }
.visit-card .more { margin-top: 16px; color: var(--magenta-hot); }
.map { position: relative; overflow: hidden; border: 1px solid var(--line-on-dark); border-radius: 16px; background: var(--aubergine); }
.map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
/* Pin and city centre fit side by side at zoom 12, and a phone's narrow map needs zoom 11 for the same area */
.map .map-phone { display: none; }
.route-head { margin-top: 40px; font-size: 20px; line-height: 28px; font-weight: 700; color: #fff; }
.route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.route img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* Careers */
/* Groups sit side by side, and a lone group takes the full width like the open application under it */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; }
.role-group h3 { font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.role-group ul { display: grid; gap: 16px; margin-top: 16px; }
/* A vacancy: a raised white card with the pink edge, the facts as chips, and the site's big pink call to action (the captain's pick, 6 October: pink edge with chips, no icon) */
.role { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 28px 28px 28px 38px; border: 1px solid rgba(39, 27, 54, .14); border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgba(39, 27, 54, .1), 0 14px 32px -16px rgba(39, 27, 54, .3); transition: transform .25s, border-color .25s, box-shadow .25s; }
.role::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--magenta); }
.role h4 { margin: 0; font-family: var(--font-heading); font-size: 24px; line-height: 32px; font-weight: 800; }
/* The title's link covers the card, so the whole card opens the vacancy and the button is only its cue */
.role h4 a { color: inherit; text-decoration: none; }
.role h4 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.role:hover { transform: translateY(-3px); border-color: rgba(226, 51, 107, .4); box-shadow: 0 1px 3px rgba(39, 27, 54, .1), 0 24px 44px -18px rgba(226, 51, 107, .45); }
.role:focus-within { outline: 3px solid var(--yellow); outline-offset: 3px; }
.role h4 a:focus-visible { outline: none; }
.role-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--soft); font-family: var(--font-heading); font-size: 13px; font-weight: 700; line-height: 18px; color: var(--ink-soft); }
.role-chip .icon { flex: none; width: 15px; height: 15px; color: var(--muted); }
.role-chip.role-team { background: rgba(226, 51, 107, .1); color: var(--magenta); }
.role-button { flex: none; min-height: 60px; padding: 0 10px 0 26px; font-size: 17px; pointer-events: none; }
.role-button .cta-arrow { width: 40px; height: 40px; border-radius: 11px; }
.role:hover .role-button { background-color: var(--magenta); box-shadow: 0 28px 52px -16px rgba(226, 51, 107, .95), 0 8px 18px -6px rgba(226, 51, 107, .6), inset 0 1px 0 rgba(255, 255, 255, .22); }
.role:hover .role-button .icon { transform: translateX(4px); }
.button-line-dark { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink); }
.button-line-dark:hover { border-color: var(--ink); }
/* The open application stands apart from the vacancies by the site's space before a block of its own, the closing note's 64 px, 40 px on a phone */
.open-application { display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; margin-top: 64px; padding: 32px 40px; border-radius: 16px; background: var(--aubergine); color: #fff; }
.open-application h3 { font-size: 32px; line-height: 40px; font-weight: 700; }
.open-application p { margin-top: 8px; font-size: 18px; line-height: 28px; color: var(--muted-on-dark); }


/* A vacancy: the way back, its title and facts and the button on the dark top, then the text, the dark band to apply and the way to our values */
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--magenta-hot); text-decoration: none; }
.back-link .icon { width: 22px; height: 22px; transition: transform .2s; }
.back-link:hover .icon { transform: translateX(-3px); }
.job-head h1 { max-width: 18em; margin-top: 24px; }
.job-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; font-size: 17px; line-height: 24px; color: var(--text-on-dark); }
.job-facts li { display: flex; align-items: center; gap: 10px; }
.job-facts .icon { flex: none; width: 22px; height: 22px; color: var(--magenta-hot); }
.job-head .button { margin-top: 36px; }
.job-text { max-width: 820px; }
.job-text > h2:first-child { margin-top: 0; }
.job-text h2 + p, .job-text h2 + ul { margin-top: 12px; }
.job-text ul + p { margin-top: 24px; }
.project { margin-top: 24px; padding: 24px 28px; border-radius: 16px; background: var(--soft); }
.prose .project h3 { margin-top: 0; font-size: 18px; line-height: 26px; color: var(--magenta-deep); }
.project p { margin-top: 12px; }
.prose .project .project-duration { margin-top: 16px; font-size: 16px; color: var(--muted); }
.job-apply h2, .job-values h2 { max-width: 22em; font-size: 40px; line-height: 50px; font-weight: 700; }
.job-apply h2 { color: #fff; }
.job-apply p { max-width: 36em; margin-top: 16px; font-size: 19px; line-height: 30px; color: var(--muted-on-dark); }
.job-apply .button, .job-values .button { margin-top: 32px; }
.job-values h2 { color: var(--ink); }
.job-values .button-line-dark { min-height: 56px; padding: 0 28px; border-color: var(--ink-soft); border-radius: 14px; font-size: 16px; }

@media (max-width: 1100px) {
  .legal-grid { grid-template-columns: minmax(0, 760px); gap: 40px; }
  /* In the flow it is not a scroller, so a wheel or swipe over it scrolls the page */
  .legal-toc { position: static; max-height: none; overflow-y: visible; overscroll-behavior: auto; padding: 24px 16px; border: 1px solid var(--line); border-radius: 16px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .head-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .head-photo { max-width: 640px; }
  .story-photo { max-width: 380px; }
  .map-grid { grid-template-columns: minmax(0, 1fr); }
  .visit-card { flex-direction: row; align-items: center; }
  .visit-card img { width: 240px; }
  .contact-grid, .roles { grid-template-columns: minmax(0, 1fr); }
  .cta-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .page-head { padding: 32px 0 56px; }
  /* The title follows the width on small phones, so a long word like Communication never runs off the edge */
  .page-head h1 { font-size: min(42px, 10.5vw); line-height: 1.24; }
  .page-head .lede { margin-top: 16px; font-size: 18px; line-height: 28px; }
  .page .block { padding: 56px 0; }
  .page .section-head { margin-bottom: 32px; }
  .page .section-head h2 { font-size: 32px; line-height: 40px; }
  /* On a phone one member to a row, the photo the full width, as production */
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .page .team .section-head { margin-bottom: 48px; }
  .page .team .section-head h2 { font-size: 34px; line-height: 44px; }
  .member p, .member-links a { font-size: 16px; line-height: 28px; }
  /* A thumb-sized target around each small link, reaching into the room around it without moving anything */
  .member-links a, .contact-list a, .visit-card .more { position: relative; }
  .member-links a::after, .contact-list a::after, .visit-card .more::after { content: ""; position: absolute; inset: -10px -4px; }
  .story-grid .button { width: 100%; }
  .story-photo { aspect-ratio: 3 / 2; object-fit: cover; }
  /* On a phone the map comes first, so where we are is the first thing seen, the building small beside the address */
  .map { order: -1; }
  .map .map-wide { display: none; }
  .map .map-phone { display: block; }
  .visit-card { align-items: flex-start; gap: 16px; padding: 16px; }
  .visit-card img { width: 112px; }
  .visit-card h3 { font-size: 16px; line-height: 24px; }
  .visit-card address { margin-top: 4px; font-size: 16px; line-height: 24px; }
  .visit-card .more { margin-top: 8px; font-size: 15px; white-space: nowrap; }
  .route { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .route-head { margin-top: 32px; }
  .page-cta { padding: 56px 0; }
  .job-head h1 { margin-top: 20px; }
  .job-facts { flex-direction: column; gap: 10px; margin-top: 24px; font-size: 16px; }
  .job-head .button, .job-apply .button, .job-values .button { width: 100%; }
  .project { padding: 20px; }
  .job-apply h2, .job-values h2 { font-size: 28px; line-height: 36px; }
  .job-apply p { font-size: 17px; line-height: 27px; }
  .cta-row h2 { font-size: 20px; line-height: 28px; }
  .cta-actions, .cta-actions .button { width: 100%; }
  .contact-card { padding: 24px; }
  .contact-card h2 { font-size: 20px; line-height: 28px; }
  .contact-list a:not(.more), .contact-list address { font-size: 16px; line-height: 24px; }
  .role { flex-direction: column; align-items: stretch; padding: 20px 20px 20px 26px; }
  .role h4 { font-size: 20px; line-height: 28px; }
  .role-button { justify-content: space-between; }
  .open-application { flex-direction: column; align-items: stretch; margin-top: 40px; padding: 24px; }
  .open-application h3 { font-size: 20px; line-height: 28px; }
}
/* Below 375 the address and the map link only fit beside a smaller building, and below 360 the link may take two lines */
@media (max-width: 374px) {
  .visit-card img { width: 80px; }
}
@media (max-width: 359px) {
  .visit-card .more { display: block; white-space: normal; }
  .visit-card .more .icon { display: inline-block; margin-left: 6px; vertical-align: -2px; }
}