/* Extracted from inline <style> blocks by W5.7.
   Loaded AFTER gp-ecom.webflow.css so precedence is unchanged — these
   rules previously sat inline in <head>, after the stylesheet links.
   The IX2 initial-state block stays inline on index.html: moving it to an
   external sheet would flash unstyled content before the sheet lands. */

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}
/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
	pointer-events: none;
}
/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}
/* Snippet enables you to add class of div-square which creates and maintains a 1:1 dimension of a div.*/
.div-square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
/*Hide focus outline for main content element*/
    main:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
/* Make sure containers never lose their center alignment*/
.container-medium, .container-small, .container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}
/*Reset selects, buttons, and links styles*/
.w-input, .w-select, a {
color: inherit;
text-decoration: inherit;
font-size: inherit;
}
/*Apply "..." after 3 lines of text */
.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Apply "..." at 100% width */
.truncate-width { 
		width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Removes native scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.no-scrollbar::-webkit-scrollbar {
    display: none; // Safari and Chrome
}
/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}
/* These classes are never overwritten */
.hide {
  display: none !important;
}
@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}
.margin-0 {
  margin: 0rem !important;
}
.padding-0 {
  padding: 0rem !important;
}
.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    }

/* remove form styles (the browser embedded craply designed arrows up and down next to quantity number) & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}

*:focus { outline: none; }

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}
.scroll {
  animation: scroll 30s linear infinite;
}

/* ── Job adverts: layout only (James, 28 Oct 2026) ─────────────────────────
   Structure for the Jobs page adverts. The copy is untouched, and every type
   size and colour is still the Webflow one in gp-ecom.webflow.css, except the
   salary, which James asked to be smaller and bold. Webflow's empty spacer
   paragraphs were removed from the markup; the gaps below replace them.
   Order inside .jobs-board_rich-textblock: facts, intro (company | role),
   cards (2 x 2), tagline, apply. One column below 768px. */
.info-block_salary-offer {
  font-size: var(--gp-size-label);
  font-weight: 700;
  white-space: nowrap;
  margin-left: 1rem;
}

/* Location or job type, top right above the salary. Same face and size as
   the salary, regular weight, in the board's existing brown. The title row
   aligns to the top so the job title starts level with that label. */
.info-block_title-wrapper {
  align-items: flex-start;
  /* Matches the 20px padding of .jobs-board_info-block, so the gap from the
     salary down to the rule equals the gap from the box edge to the title. */
  padding-bottom: 20px;
  margin-bottom: 0;
}

.info-block_title-meta {
  flex: 0 1 auto;
  margin-left: 1rem;
  text-align: right;
}

.info-block_title-meta .info-block_salary-offer {
  margin-left: 0;
}

.info-block_job-meta {
  color: var(--brown);
  font-family: SUI, sans-serif;
  font-size: var(--gp-size-label);
  font-weight: 400;
  margin-bottom: .2rem;
}

.jobs-board_rich-textblock {
  margin-bottom: 20px;
}

.jobs-board_rich-textblock > div + div {
  margin-top: 2rem;
}

.job-intro__col > :first-child,
.job-card > :first-child {
  margin-top: 0;
}

/* One rule between header and facts (the title row's), one under the facts,
   and 20px either side: the box's own padding, so the collapsed card has a
   single rhythm. Every fact has margin 0; Webflow's first-child reset used to
   zero only the first, which set Job Type a few pixels above the others. */
.job-facts {
  border-bottom: 1px solid var(--light-brown);
  padding: 20px 0;
}

.job-facts p {
  margin: 0;
}

.job-facts p + p {
  margin-top: .35rem;
}

.job-intro__col + .job-intro__col {
  border-top: 1px solid var(--light-brown);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.job-cards {
  display: grid;
  gap: 1rem;
}

.job-card {
  border: 1px solid var(--light-brown);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.job-card h4 {
  border-bottom: 1px solid var(--light-brown);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
}

.job-card p {
  margin-top: 1rem;
}

.job-tagline {
  border-top: 1px solid var(--light-brown);
  border-bottom: 1px solid var(--light-brown);
  padding: 1rem 0;
}

.job-tagline h5 {
  margin: .25rem 0;
}

.job-apply {
  border-left: 3px solid var(--red);
  padding: .25rem 0 .25rem 1rem;
}

.job-apply p {
  margin: .35rem 0;
}

/* See more: each advert shows its header and key facts; the rest sits in a
   native <details>, so it opens without JavaScript, from the keyboard, and
   for find-in-page. The toggle borrows .jobs-board_lean-more (ABOUT US) for
   its look. Where the browser supports ::details-content the panel slides
   open; elsewhere it opens instantly. */
.jobs-board_rich-textblock > .job-more {
  margin-top: 1.5rem;
}

.job-more__toggle {
  cursor: pointer;
  display: block;
  list-style: none;
  margin: 0 auto;
  width: max-content;
}

.job-more__toggle::-webkit-details-marker {
  display: none;
}

.job-more__toggle::marker {
  content: "";
}

.job-more__open,
.job-more[open] .job-more__closed {
  display: none;
}

.job-more[open] .job-more__open {
  display: inline;
}

.job-more__body {
  padding-top: 2rem;
}

.job-more__body > div + div {
  margin-top: 2rem;
}

.job-more {
  interpolate-size: allow-keywords;
}

/* With js/jobs-see-more.js running, the button row follows the advert's
   state: collapsed shows ABOUT US + a red SEE MORE (.job-row--closed),
   expanded shows SEE LESS + the red APPLY button(s) (.job-row--open). The
   <summary> above is the no-JavaScript fallback, and without JavaScript
   ABOUT US and APPLY stay visible. scroll-margin keeps a re-scrolled advert
   clear of the sticky header. */
.job-more--js:not(.is-open) .job-row--open,
.job-more--js.is-open .job-row--closed {
  display: none;
}

.job-more--js .job-more__toggle {
  display: none;
}

.job-more--js .jobs-board_rich-textblock > .job-more {
  margin-top: 0;
}

.jobs-board_info-block {
  scroll-margin-top: 6rem;
}

.job-more__more,
.job-more__less {
  cursor: pointer;
}

/* .w-button sets display: inline-block, which beats the browser's own
   [hidden] rule, so without this the no-JavaScript fallback would show
   buttons that do nothing. */
.job-more__more[hidden],
.job-more__less[hidden] {
  display: none;
}

.job-more::details-content {
  height: 0;
  overflow: clip;
  transition: height .35s ease, content-visibility .35s allow-discrete;
}

.job-more[open]::details-content {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .job-more::details-content {
    transition: none;
  }
}

@media screen and (min-width: 768px) {
  .job-facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
  }

  .job-facts p,
  .job-facts p + p {
    margin: 0;
    padding: 0 1.25rem;
  }

  .job-facts p:first-child {
    padding-left: 0;
  }

  .job-facts p + p {
    border-left: 1px solid var(--light-brown);
  }

  .job-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .job-intro__col {
    padding-right: 2rem;
  }

  .job-intro__col + .job-intro__col {
    border-top: 0;
    border-left: 1px solid var(--light-brown);
    margin-top: 0;
    padding: 0 0 0 2rem;
  }

  .job-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .info-block_salary-offer,
  .info-block_job-meta {
    font-size: var(--gp-size-caption);
  }

  /* The title keeps one line; the location label wraps in what is left
     (about 118px at 375px: HIGHGATE AVENUE & / WEST HAMPSTEAD). */
  .info-block_job-title {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .info-block_title-meta {
    flex: 1 1 auto;
    margin-left: 12px;
    min-width: 0;
  }

  /* Three buttons (SEE MORE, APPLY HIGHGATE, APPLY HAMPSTEAD) need 331px on
     one line at Webflow's 15px side padding; the row has 296px at 375px.
     7px padding and an 8px gap bring them to ~277px: one line from 360px up. */
  .info-block_button-wrapper {
    column-gap: .5rem;
  }

  .info-block_button-wrapper .w-button {
    flex: 1 1 auto;
    padding-left: 7px;
    padding-right: 7px;
    text-align: center;
  }
}

/* Below 360px a one-line title would crush the label; let it wrap again. */
@media screen and (max-width: 359px) {
  .info-block_job-title {
    flex: 0 1 auto;
    white-space: normal;
  }
}