/* Layout for the rebuilt qpiltd.co.uk: the page, header, menus, sections, the
   layout grid and text blocks. It does the job Squarespace's own template
   stylesheet did, written from measurements of the live site on 21 Oct 2026.
   QPI's own styles are in qpi.css, which loads after this and wins where both
   set something.

   The class names (page-section, fe-block, sqs-block, header-nav-item...) are
   Squarespace's, kept because QPI's styles and code blocks are written against
   them. */

/* ---------------------------------------------------------------------------
   Settings, from the Squarespace site styles
   --------------------------------------------------------------------------- */

:root {
  /* Palette. Code blocks use these as hsla(var(--black-hsl), 1). */
  --white-hsl: 220, 1%, 44%;
  --lightAccent-hsl: 0, 0%, 93%;
  --accent-hsl: 204, 61%, 48%;
  --darkAccent-hsl: 204, 98%, 33%;
  --black-hsl: 214, 28%, 25%;
  --safeLightAccent-hsl: 220, 1%, 44%;
  --safeDarkAccent-hsl: 214, 28%, 25%;
  --safeInverseAccent-hsl: 214, 28%, 25%;
  --safeInverseLightAccent-hsl: 214, 28%, 25%;
  --safeInverseDarkAccent-hsl: 214, 28%, 25%;

  --sqs-site-gutter: 3vw;
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-max-width: 2400px;
  --maxPageWidth: 2400px;

  /* Proxima Nova is asked for but never loaded, as on the live site: every device
     uses the next font it has (decided with Dave, 21 Oct 2026). */
  --site-font: "proxima-nova", "Proxima Nova", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type sizes as multiples of 1rem. */
  --heading-1-size-value: 3.4;
  --heading-2-size-value: 2.4;
  --heading-3-size-value: 1.8;
  --heading-4-size-value: 1.2;
  --large-text-size-value: 1.2;
  --normal-text-size-value: .9;
  --small-text-size-value: .85;
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
}

/* Section colour themes. */
:root,
[data-section-theme="light"] {
  --siteBackgroundColor: hsla(var(--lightAccent-hsl), 1);
  --backgroundOverlayColor: hsla(var(--lightAccent-hsl), 1);
  --headingColor: hsla(var(--black-hsl), 1);
  --paragraphColor: hsla(var(--black-hsl), 1);
  --primaryButtonBackgroundColor: hsla(var(--black-hsl), 1);
  --primaryButtonTextColor: hsla(var(--black-hsl), 1);
}
[data-section-theme="white"] {
  --siteBackgroundColor: hsla(0, 0%, 80.39%, 1);
  --backgroundOverlayColor: hsla(var(--white-hsl), 1);
  --headingColor: hsla(var(--black-hsl), 1);
  --paragraphColor: hsla(var(--black-hsl), 1);
}
[data-section-theme="light-bold"] {
  --siteBackgroundColor: hsla(var(--lightAccent-hsl), 1);
  --backgroundOverlayColor: hsla(var(--lightAccent-hsl), 1);
  --headingColor: hsla(var(--safeDarkAccent-hsl), 1);
  --paragraphColor: hsla(var(--black-hsl), 1);
}
[data-section-theme="bright"] {
  --siteBackgroundColor: hsla(0, 0%, 10.196%, 1);
  --backgroundOverlayColor: hsla(0, 0%, 0%, 1);
  --headingColor: hsla(var(--lightAccent-hsl), 1);
  --paragraphColor: hsla(var(--lightAccent-hsl), 1);
  --primaryButtonBackgroundColor: hsla(var(--lightAccent-hsl), 1);
  --primaryButtonTextColor: hsla(var(--black-hsl), 1);
}
[data-section-theme="bright-inverse"] {
  --siteBackgroundColor: hsla(var(--black-hsl), 1);
  --backgroundOverlayColor: hsla(var(--safeInverseAccent-hsl), 1);
  --headingColor: hsla(var(--lightAccent-hsl), 1);
  --paragraphColor: hsla(var(--lightAccent-hsl), 1);
  --primaryButtonBackgroundColor: hsla(var(--accent-hsl), 1);
  --primaryButtonTextColor: hsla(var(--black-hsl), 1);
}
[data-section-theme="black"] {
  --siteBackgroundColor: hsla(var(--black-hsl), 1);
  --backgroundOverlayColor: hsla(var(--black-hsl), 1);
  --headingColor: hsla(var(--white-hsl), 1);
  --paragraphColor: hsla(var(--white-hsl), 1);
  --primaryButtonBackgroundColor: hsla(var(--white-hsl), 1);
  --primaryButtonTextColor: hsla(var(--black-hsl), 1);
}

/* ---------------------------------------------------------------------------
   Page
   --------------------------------------------------------------------------- */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: hsla(var(--lightAccent-hsl), 1);
  color: hsla(var(--black-hsl), 1);
  font-family: var(--site-font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
}

/* Squarespace's fluid type: sizes grow with the window's width, or on a phone
   held upright with its height (capped at 900px). */
:root {
  --fluid-step: 1.2vw;
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --fluid-step: calc(.012 * min(100vh, 900px));
  }
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */

/* Squarespace's page wrapper: header, page and footer, but not the drop-down
   menus or the contact pill and drawer, which sit outside it. It sets the
   theme's body text, Arial; QPI's CSS puts its own font on headings, links and
   buttons only, so plain paragraphs on the live site are Arial. */
.site-wrapper {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc((var(--normal-text-size-value) - 1) * var(--fluid-step) + 1rem);
  line-height: calc(var(--body-line-height) * 1em);
  letter-spacing: 0;
}

.page-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--paragraphColor);
}

/* The theme colour is on both the border and the background: QPI's CSS fades
   some section backgrounds out with a mask, and the border's colour is what
   shows through. */
/* Squarespace's section height presets, a share of the window's height. */
.page-section.section-height--small:not(.gallery-section) {
  min-height: 33vh;
}
.page-section.section-height--medium:not(.gallery-section) {
  min-height: 66vh;
}
.page-section.section-height--large:not(.gallery-section) {
  min-height: 100vh;
}

.section-border {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--siteBackgroundColor);
}

/* After a section with a divider, the background reaches up behind the curve,
   so this section's colour is what shows beneath it. */
.page-section > .section-border {
  top: calc(-1 * var(--previous-divider-height, 0px));
}

.section-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--siteBackgroundColor);
}

.section-background-content {
  position: absolute;
  inset: 0;
}

.section-background img,
.section-background-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-background-video {
  position: absolute;
  inset: 0;
}

/* The tint over a section's photo is the theme's own colour; its strength is
   set on the element (style="opacity: ..."). */
.section-background-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--backgroundOverlayColor);
}

.content-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Dividers: a section's curved bottom edge. The section is padded by the
   divider's height and its background cut along the curve, which site.js draws
   into the section's own <svg> (Squarespace did the same with script). */
.section-divider-display {
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.section-divider-svg-clip {
  position: absolute;
  width: 0;
  height: 0;
}

.section-divider-svg-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.section-divider-stroke {
  fill: none;
  stroke: hsla(var(--black-hsl), 1);
  stroke-width: var(--stroke-thickness, 0);
  stroke-linecap: var(--stroke-linecap, square);
}

.section-divider-block {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

/* The project grid on /projects (Squarespace's portfolio list). Its columns and
   gaps are set on the element; spacing measured from the live site. */
.portfolio-grid-basic {
  display: grid;
  grid-template-columns: repeat(var(--portfolio-columns), minmax(0, 1fr));
  gap: var(--portfolio-vertical-gutter) var(--portfolio-horizontal-gutter);
  padding: 10vw var(--sqs-site-gutter);
}

.portfolio-grid-basic .grid-item {
  display: block;
}

.portfolio-grid-basic .grid-image-inner-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.portfolio-grid-basic .grid-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s ease;
}

.portfolio-grid-basic .grid-item:hover img {
  opacity: .8;
}

.portfolio-grid-basic .portfolio-text {
  margin-top: 20px;
}

.portfolio-grid-basic .portfolio-title {
  margin: 0 0 .5em;
  font-size: calc((var(--large-text-size-value) - 1) * var(--fluid-step) + 1rem);
  line-height: 1.2;
}

@media (max-width: 767px) {
  .portfolio-grid-basic {
    grid-template-columns: minmax(0, 1fr);
    padding: 10vw var(--sqs-mobile-site-gutter);
  }
}

/* Galleries, rebuilt from Squarespace's gallery sections as a plain grid. Gaps
   and edges measured from the live site at 1440px wide. */
.qpi-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
  gap: calc(var(--gallery-gutter) * .0486vw);
  padding: 0 calc(var(--gallery-gutter) * .0486vw);
}

.qpi-gallery[data-width="inset"] {
  padding: var(--sqs-site-gutter);
}

.qpi-gallery figure {
  margin: 0;
}

.qpi-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--gallery-ratio);
  object-fit: cover;
}

/* A MASONRY GALLERY IS LAID OUT IN WHOLE PIXELS: Squarespace places its photos
   by script and rounds the gap down - 14px at 1440 wide, 3px rather than 3.8 on
   a phone. Where round() isn't supported the gap is a fraction wider. */
.qpi-gallery[data-layout="masonry"] {
  gap: round(down, calc(var(--gallery-gutter) * .0486vw), 1px);
}

@media (max-width: 767px) {
  .qpi-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* And on a phone an inset one takes the phone's wider margin, 6vw, where a
     grid gallery keeps the site's 3vw - measured on the live project pages. */
  .qpi-gallery[data-layout="masonry"][data-width="inset"] {
    padding: 6vw;
  }
}

.content {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Layout grid. Each section's own <style> places its blocks; these are the
   rules every block shares.
   --------------------------------------------------------------------------- */

.fe-block {
  position: relative;
}

.fe-block > .sqs-block {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Picture blocks. The photo is laid over a box that fills the cell, or, for
   "fit" blocks, takes the photo's own shape at the cell's height. The block's own
   <style> sets object-fit and the photo's proportions. */
.fluid-image-component-root,
.fluid-image-animation-wrapper {
  width: 100%;
  height: 100%;
}

/* Taken out of the flow so the photo can't stretch its grid row: the cell's
   size comes from the layout grid alone, as on Squarespace. */
.sqs-block-image .sqs-block-content {
  position: absolute;
  inset: 0;
}

.fluid-image-container,
.js-content-mode-element-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.fluid-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-component-container-fit .fluid-image-container {
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--image-component-native-aspect-ratio);
}
.image-component-container-fit.image-position-center .fluid-image-container {
  margin: 0 auto;
}
.image-component-container-fit.image-position-right .fluid-image-container {
  margin-left: auto;
}

.qpi-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Text. Site-wide and as light as a bare h2 {}, exactly as Squarespace did it:
   QPI's code blocks rely on these for headings they don't style themselves, and
   QPI's own CSS (e.g. h2 { font-weight: 300 }) must still win.
   --------------------------------------------------------------------------- */

body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  margin: 2rem 0;
  color: var(--headingColor);
  font-family: var(--site-font);
  font-weight: 500;
  letter-spacing: 0;
}

p {
  margin: 1rem 0;
}

h1 {
  font-size: calc((var(--heading-1-size-value) - 1) * var(--fluid-step) + 1rem);
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--heading-1-size-value)) / 25));
}
h2 {
  font-size: calc((var(--heading-2-size-value) - 1) * var(--fluid-step) + 1rem);
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--heading-2-size-value)) / 25));
}
h3 {
  font-size: calc((var(--heading-3-size-value) - 1) * var(--fluid-step) + 1rem);
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--heading-3-size-value)) / 25));
}
h4 {
  font-size: calc((var(--heading-4-size-value) - 1) * var(--fluid-step) + 1rem);
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--heading-4-size-value)) / 25));
}
.sqsrte-large {
  color: var(--paragraphColor);
  font-size: calc((var(--large-text-size-value) - 1) * var(--fluid-step) + 1rem);
}
.sqsrte-small {
  color: var(--paragraphColor);
  font-size: calc((var(--small-text-size-value) - 1) * var(--fluid-step) + 1rem);
}

/* Text blocks */

.sqs-html-content {
  position: relative;
}

:where(.sqs-html-content) :where(h1, h2, h3, h4, p) {
  white-space: pre-wrap;
}

/* An empty paragraph or heading the editor kept on purpose (a blank line) still
   takes up a line, as on Squarespace. */
:where(p, h1, h2, h3, h4)[data-rte-preserve-empty]:empty::before {
  content: '';
  display: inline-block;
}

:where(.sqs-html-content) > :first-child {
  margin-top: 0;
}

:where(.sqs-html-content) > :last-child {
  margin-bottom: 0;
}

.sqsrte-text-color--lightAccent {
  color: hsla(var(--lightAccent-hsl), 1);
}

/* "Scaled" text is sized to fill its block's width exactly: site.js sets the
   font size. One line, never wrapped. */
.sqsrte-scaled-text,
.sqsrte-scaled-text * {
  white-space: nowrap !important;
}
.sqsrte-scaled-text > * {
  margin: 0;
  font-size: inherit;
}

/* ---------------------------------------------------------------------------
   Header. The grey bar and blue bar's colours and spacing come from QPI's
   Custom CSS in qpi.css; this is the layout.
   --------------------------------------------------------------------------- */

#header {
  position: relative;
  z-index: 10001;
}

.sqs-announcement-bar p {
  margin: 0;
}

.sqs-announcement-bar-close {
  display: none;
}

.header-inner {
  display: flex;
  align-items: center;
}

.header-title-logo a {
  display: block;
}

.header-title-logo img {
  display: block;
  width: auto;
  height: 45px;
}

.header-nav-list {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.header-nav-item > a {
  color: hsla(var(--lightAccent-hsl), 1);
  font-size: 16px;
  line-height: 26px;
  text-decoration: none;
}

/* The section you're in (only Projects is marked, as on the live site). */
.header-nav-item--active > a {
  text-decoration: underline !important;
}
.header-nav-item--active > a::after {
  transform: scaleX(1) !important;
}

.header-actions--right {
  margin-left: auto;
}

.header-burger-btn {
  display: none;
}

.header-menu {
  display: none;
}

@media (max-width: 767px) {
  .header-nav-list,
  .header-actions--right {
    display: none;
  }

  .header-title-logo img {
    height: 30px;
  }

  /* Sizes and line positions measured from the live site's menu button. */
  .header-burger-btn {
    position: relative;
    display: block;
    width: 47px;
    height: 37px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: hsla(var(--lightAccent-hsl), 1);
    cursor: pointer;
  }

  .header-burger-btn span {
    position: absolute;
    right: 6px;
    height: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .25s ease, width .25s ease;
  }
  .header-burger-btn .top-bun { top: 8px; width: 35px; }
  .header-burger-btn .patty { top: 17.5px; width: 17.5px; }
  .header-burger-btn .bottom-bun { top: 27px; width: 35px; }

  .header--menu-open .header-burger-btn { color: hsla(var(--black-hsl), 1); }
  .header--menu-open .header-burger-btn .top-bun { top: 17.5px; right: 9.5px; width: 28px; transform: rotate(45deg); }
  .header--menu-open .header-burger-btn .patty { opacity: 0; }
  .header--menu-open .header-burger-btn .bottom-bun { top: 17.5px; right: 9.5px; width: 28px; transform: rotate(-45deg); }

  .header-menu {
    position: fixed;
    top: var(--header-bottom, 67px);
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    background: #fff;
  }

  .header--menu-open .header-menu {
    display: block;
  }

  .header--menu-open {
    overflow: hidden;
  }

  .header-menu-nav-item a {
    text-decoration: none;
  }
}

/* ---------------------------------------------------------------------------
   Drop-down menus. Each panel holds the sections of one of the Squarespace
   "omm-page" menu pages. Desktop: under the header on hover. Phone: slides in
   over the phone menu, with a Back bar.
   --------------------------------------------------------------------------- */

.om-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.om-menu {
  position: fixed;
  top: var(--header-bottom, 152px);
  left: 0;
  width: 100%;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.menu-is-open .om-menu-overlay,
.om-menu.is-active {
  opacity: 1;
  visibility: visible;
}

.om-menu.is-active {
  pointer-events: auto;
  transform: translateY(0);
}

.header-nav-item > a.is-active {
  opacity: .7;
}

.om-menu__mobile-topbar {
  display: none;
}

@media (max-width: 767px) {
  .om-menu {
    bottom: 0;
    z-index: 10050;
    overflow-y: auto;
    background: #fff;
    transform: translateX(100%);
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease;
  }

  .om-menu.is-active {
    transform: translateX(0);
  }

  .om-menu__mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 24px;
    background: hsla(var(--black-hsl), 1);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .om-menu__mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    font: inherit;
    font-size: clamp(22px, 5vw, 34px);
    line-height: 1;
    cursor: pointer;
  }

  .om-menu__mobile-back svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    stroke-width: 1.8;
  }

  .menu-is-open .om-menu-overlay {
    display: none;
  }
}

/* SCROLL-IN ANIMATION, as the live site has it (Squarespace's site styles:
   animations on, slide, ease, 0.6s). Headings rise 0.3em as they fade in,
   paragraphs fade, and the header's logo and links slide in as the page opens.
   site.js marks each one .is-in when it is scrolled to, with a delay staggered
   down the page. Until then it is held back, and only while html.qpi-anim is
   set: the page's head adds it and takes it off again after 3s if site.js never
   runs, so nothing can stay hidden. Held back with :not(.is-in) rather than
   undone afterwards, so QPI's own opacity and transforms apply once it is in.
   Photos, links and buttons don't move, as on live. In the footer each of the
   five blocks also slides in whole, as Squarespace did there and nowhere else.

   TWO STAGES. Until site.js has started (html.qpi-anim-on), things are held back
   by what they are, so nothing shows and then vanishes. From then on only what
   site.js marked (.qpi-pre-slide, .qpi-pre-fade) is held back. Anything QPI's
   code adds afterwards - the project cards it builds from projects.json - shows
   at once: held back by what it is, it stayed hidden for good. */
@media screen {
  html.qpi-anim:not(.qpi-anim-on) :is(main, footer) :is(h1, h2, h3, h4),
  html.qpi-anim:not(.qpi-anim-on) footer .sqs-block-content,
  html.qpi-anim:not(.qpi-anim-on) .header-title-logo,
  html.qpi-anim:not(.qpi-anim-on) .header-nav-item > a,
  html.qpi-anim:not(.qpi-anim-on) .header-burger-btn,
  html.qpi-anim .qpi-pre-slide:not(.is-in) {
    opacity: 0;
    transform: translateY(.3em);
  }

  html.qpi-anim:not(.qpi-anim-on) :is(main, footer) p,
  html.qpi-anim .qpi-pre-fade:not(.is-in) {
    opacity: 0;
  }
}

/* THE PAGE-NOT-FOUND PAGE - site/404.html, made by build_not_found() in
   tools/convert-page.php. New: the live site has none, and shows the homepage
   instead. A dark band like the homepage's help section, with the logo mark
   faintly behind it, in QPI's own type scale and buttons. !important where
   QPI's site-wide rules set type with !important (qpi.css). */
.qpi-not-found {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 70vh;
  padding: clamp(62px, 6vw, 90px) clamp(24px, 3vw, 78px);
  background: #161616;
  color: #ededed;
}

.qpi-not-found::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/images/qpi-white-logo-only-26-3331cde2-1000.webp") no-repeat right -120px center / clamp(520px, 48vw, 980px);
  opacity: .03;
  pointer-events: none;
}

.qpi-not-found__inner {
  width: 100%;
  max-width: 1400px;
}

.qpi-not-found__eyebrow {
  margin: 0 0 18px;
  color: #ededed;
  font-size: clamp(11px, .75vw, 13px) !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em !important;
}

.qpi-not-found__title {
  max-width: 16ch;
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 3vw, 88px) !important;
  font-weight: 600;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
}

.qpi-not-found__lead {
  max-width: 34em;
  margin: clamp(18px, 1.6vw, 28px) 0 0;
  color: #ededed;
  font-size: clamp(18px, 1.2vw, 26px) !important;
  line-height: 1.35;
  letter-spacing: -.02em !important;
}

.qpi-not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 2.6vw, 44px);
}

.qpi-not-found__actions .qpi-btn {
  box-sizing: border-box;
  min-width: 160px;
  min-height: 56px;
  padding: 0 30px;
  font-size: 15px !important;
  font-weight: 700;
}

.qpi-not-found__contact {
  margin: clamp(24px, 2vw, 36px) 0 0;
  color: rgba(237, 237, 237, .8);
  font-size: clamp(14px, .95vw, 17px) !important;
  line-height: 1.6;
}

.qpi-not-found__contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .qpi-not-found__actions .qpi-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 0 16px;
  }
}