@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@200;300;400;500;600;700&display=swap');

/* =====================================
   HAUS Group global CSS

   Notes:
   - This file is organised for the HAUS Group corporate site.
   - Shared system classes can later be extracted into a brand base file.
   - Site-specific sections are kept here for staging stability.
===================================== */


/* =====================================
   01. Tokens / variables
===================================== */

:root {
  --haus-header-height: 72px;
  --haus-grid-gap: 24px;
}

/* =====================================
   02. Base
===================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zalando Sans", sans-serif;
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
}

.wp-site-blocks {
  overflow-x: clip;
  padding-top: 0 !important;
}

.wp-site-blocks > * {
  margin-block-start: 0;
}

.wp-site-blocks > .wp-block-template-part + main,
.wp-site-blocks > .wp-block-template-part + .wp-block-group,
.wp-site-blocks > header + main {
  margin-block-start: 0 !important;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* =====================================
   03. Typography
===================================== */

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select {
  font-family: "Zalando Sans", sans-serif;
}

h1 {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(36px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

h4 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
}

h5 {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
}

h6 {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.haus-kicker {
  font-size: 17px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.haus-italic-semibold {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-style: italic;
}

/* =====================================
   04. Layout / media
===================================== */

.haus-media-frame {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

.haus-media-frame img,
.haus-media-frame video {
  display: block;
  width: 100%;
}

.haus-grid-12 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--haus-grid-gap);
  row-gap: 10px;
}

.haus-grid-12 > * {
  min-width: 0;
  width: 100%;
}

/* =====================================
   05. Sections
===================================== */

.haus-section {
  padding-top: var(--wp--preset--spacing--120);
  padding-bottom: var(--wp--preset--spacing--120);
}

.haus-section-small {
  padding-top: var(--wp--preset--spacing--80);
  padding-bottom: var(--wp--preset--spacing--80);
}

/* Section colour utilities */
.haus-light-section {
  background: var(--wp--preset--color--haus-white);
  color: var(--wp--preset--color--charcoal);
}

.haus-dark-section {
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

.haus-dark-section h1,
.haus-dark-section h2,
.haus-dark-section h3,
.haus-dark-section h4,
.haus-dark-section h5,
.haus-dark-section h6,
.haus-dark-section p {
  color: inherit;
}

/* =====================================
   06. Grid utilities
===================================== */

.haus-start-1 { grid-column-start: 1; }
.haus-start-2 { grid-column-start: 2; }
.haus-start-3 { grid-column-start: 3; }
.haus-start-4 { grid-column-start: 4; }
.haus-start-5 { grid-column-start: 5; }
.haus-start-6 { grid-column-start: 6; }
.haus-start-7 { grid-column-start: 7; }
.haus-start-8 { grid-column-start: 8; }
.haus-start-9 { grid-column-start: 9; }
.haus-start-10 { grid-column-start: 10; }
.haus-start-11 { grid-column-start: 11; }
.haus-start-12 { grid-column-start: 12; }

.haus-span-1 { grid-column-end: span 1; }
.haus-span-2 { grid-column-end: span 2; }
.haus-span-3 { grid-column-end: span 3; }
.haus-span-4 { grid-column-end: span 4; }
.haus-span-5 { grid-column-end: span 5; }
.haus-span-6 { grid-column-end: span 6; }
.haus-span-7 { grid-column-end: span 7; }
.haus-span-8 { grid-column-end: span 8; }
.haus-span-9 { grid-column-end: span 9; }
.haus-span-10 { grid-column-end: span 10; }
.haus-span-11 { grid-column-end: span 11; }
.haus-span-12,
.haus-span-full {
  grid-column: 1 / -1;
}

.haus-row-next {
  grid-row-start: 2;
}

.haus-grid-12 .wp-block-image {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.haus-grid-12 .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* =====================================
   07. Alignment utilities
===================================== */

.haus-text-center {
  text-align: center;
}

.haus-text-center p {
  width: 80%;
}

.haus-text-center > * {
  margin-left: auto;
  margin-right: auto;
}

.haus-text-center .wp-block-buttons {
  justify-content: center;
}

.haus-text-center .wp-block-separator {
  margin-left: auto;
  margin-right: auto;
}

.haus-align-end {
  align-self: end;
}

.haus-align-end > * {
  margin-block-start: 0;
  margin-bottom: var(--wp--preset--spacing--20);
}
.haus-align-end .wp-font-awesome-icon,
.haus-align-end .wp-font-awesome-icon svg {
  display: block;
}

/* =====================================
   08. Spacing utilities
===================================== */

.haus-pt-20 {
  padding-top: var(--wp--preset--spacing--20);
}

.haus-pt-40 {
  padding-top: var(--wp--preset--spacing--40);
}

.haus-pt-60 {
  padding-top: var(--wp--preset--spacing--60);
}

.haus-pt-80 {
  padding-top: var(--wp--preset--spacing--80);
}

.haus-pt-120 {
  padding-top: var(--wp--preset--spacing--120);
}

.haus-pt-160 {
  padding-top: var(--wp--preset--spacing--160);
}

.haus-pb-20 {
  padding-bottom: var(--wp--preset--spacing--20);
}

.haus-pb-40 {
  padding-bottom: var(--wp--preset--spacing--40);
}

.haus-pb-60 {
  padding-bottom: var(--wp--preset--spacing--60);
}

.haus-pb-120 {
  padding-bottom: var(--wp--preset--spacing--120);
}

/* =====================================
   09. Dividers
===================================== */

/* Default short divider: left aligned */
.wp-block-separator.haus-divider-short {
  width: 30px !important;
  max-width: 30px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Centered short divider: desktop only */
.wp-block-separator.haus-divider-short.haus-divider-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero Cover video swap */

.haus-hero-cover {
  min-height: 90vh;
}

.haus-hero-cover-mobile {
  display: none;
}

/* homepage panel */
.haus-ecosystem-panel {
  border-bottom: 1px solid var(--wp--preset--color--charcoal);
}

.haus-ecosystem-panel:last-child {
  border-bottom: none;
}

/* =====================================
   10. Buttons
===================================== */

.haus-button-light .wp-block-button__link,
.haus-button-dark .wp-block-button__link {
  border-radius: 0;
  padding: 12px 20px;
  font-size: 18px;
  text-decoration: none;
  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
  line-height: 1.3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  text-align: left;
}

.haus-button-light .wp-font-awesome-icon,
.haus-button-dark .wp-font-awesome-icon {
  flex-shrink: 0;
}

/* Button used on light / ivory sections */
.haus-button-light .wp-block-button__link {
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
  border: 1px solid var(--wp--preset--color--charcoal);
  font-weight: 300;
}

.haus-button-light .wp-block-button__link:hover {
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal);
  font-weight: 300;
}

.haus-button-light .wp-block-button__link:active {
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

/* Button used on dark / charcoal sections */
.haus-button-dark .wp-block-button__link {
  background: var(--wp--preset--color--haus-grey);
  color: var(--wp--preset--color--ivory);
  border: 1px solid var(--wp--preset--color--ivory);
  font-weight: 200;
}

.haus-button-dark .wp-block-button__link:hover {
  background: transparent;
  color: var(--wp--preset--color--ivory);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--ivory);
  font-weight: 200;
}

.haus-button-dark .wp-block-button__link:active {
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
}

/* ----------------------------------------
   Button row
---------------------------------------- */

.wp-block-buttons.haus-button-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: var(--wp--preset--spacing--20);
  flex-wrap: wrap;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-buttons.haus-button-row > .wp-block-button {
  margin: 0 !important;
}

.wp-block-buttons.haus-button-row .wp-block-button__link {
  white-space: nowrap;
}

/* =====================================
   11. Reusable content components
===================================== */

/* ----------------------------------------
   Read More / Editorial Details
---------------------------------------- */

.haus-read-more {
  margin-top: var(--wp--preset--spacing--40);
  border-bottom: 1px solid currentColor;
  padding: 0;
}

.haus-read-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
}

.haus-read-more summary::-webkit-details-marker {
  display: none;
}

.haus-read-more summary::after {
  content: "+";
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
}

.haus-read-more[open] summary::after {
  content: "–";
}

.haus-read-more > *:not(summary) {
  margin-top: var(--wp--preset--spacing--20);
}

.haus-read-more[open] {
  padding-bottom: var(--wp--preset--spacing--40);
}

/* ----------------------------------------
   Principles row
---------------------------------------- */

.haus-principles-row {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  align-items: flex-start;
  border-top: 1px solid currentColor;
  padding-top: var(--wp--preset--spacing--20);
}


.haus-principle-item p {
  margin-top: 10px;
}

.haus-principles-row > .haus-principle-item {
  flex: 1 1 0;
  min-width: 0;
}

.haus-principle-item > *:first-child {
  margin-top: 0;
}

.haus-principle-item > *:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
   Card rail / horizontal cards
---------------------------------------- */

.haus-card-rail-section {
  overflow: hidden;
}

.haus-card-rail-wrap {
  margin-top: var(--wp--preset--spacing--20);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.haus-card-rail-wrap::-webkit-scrollbar {
  display: none;
}

.haus-card-rail {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  padding-left: max(
    var(--wp--preset--spacing--40),
    calc((100vw - var(--wp--style--global--wide-size)) / 2)
  );
  padding-right: var(--wp--preset--spacing--40);
  align-items: stretch;
}

.haus-card-rail::after {
  content: "";
  flex: 0 0 max(
    var(--wp--preset--spacing--80),
    calc((100vw - var(--wp--style--global--wide-size)) / 2)
  );
}

.haus-card-rail__card {
  flex: 0 0 clamp(300px, 26vw, 455px);
}

.haus-card-rail__card p {
  margin-top: 10px;
}

/* Card rail header / controls */
.haus-card-rail-header {
  align-items: end;
}

.haus-card-rail-controls {
  display: none !important;
  justify-content: flex-end;
  gap: 12px;
}

.haus-card-rail-section.has-card-rail-controls .haus-card-rail-controls {
  display: flex !important;
}

.haus-card-rail-controls .wp-block-button__link,
.haus-card-rail-controls button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 0;
  background: var(--wp--preset--color--haus-white);
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.haus-card-rail-controls .wp-block-button__link:hover,
.haus-card-rail-controls button:hover {
  box-shadow: inset 0 0 0 1px currentColor;
  background: var(--wp--preset--color--ivory);
}

/* Card rail controls inside dark sections */
.haus-dark-section .haus-card-rail-controls {
  color: var(--wp--preset--color--ivory);
}

.haus-dark-section .haus-card-rail-controls .wp-block-button__link,
.haus-dark-section .haus-card-rail-controls button {
  color: var(--wp--preset--color--ivory);
  border-color: var(--wp--preset--color--ivory);
  background: transparent;
}

.haus-dark-section .haus-card-rail-controls .wp-block-button__link:hover,
.haus-dark-section .haus-card-rail-controls button:hover {
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--ivory);
}

/* ----------------------------------------
   Team grid
---------------------------------------- */

.haus-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40);
  margin-top: 0;
}

.haus-team-grid > * {
  margin-block-start: 0;
}

.haus-team-card {
  min-width: 0;
}

.haus-team-card figure,
.haus-team-card .wp-block-image {
  margin: 0 0 var(--wp--preset--spacing--20);
}

.haus-team-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.haus-team-card h3,
.haus-team-card h4 {
  padding-bottom: 15px;
}

.haus-team-card p {
  margin-top: 0;
  margin-bottom: 0;
}

/* ----------------------------------------
   Hover media / image-to-video
---------------------------------------- */

.haus-hover-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: transparent;
}

.haus-hover-media > * {
  margin-block-start: 0 !important;
}

.haus-hover-media__image,
.haus-hover-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.haus-hover-media__image {
  z-index: 1;
}

.haus-hover-media__video {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.haus-hover-media__image img,
.haus-hover-media__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.haus-hover-media:hover .haus-hover-media__video,
.haus-hover-media.is-playing .haus-hover-media__video {
  opacity: 1;
}

.haus-hover-media__icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  color: var(--wp--preset--color--ivory);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease;
}

.haus-hover-media:hover .haus-hover-media__icon,
.haus-hover-media.is-playing .haus-hover-media__icon {
  transform: scale(1.12);
}

/* ----------------------------------------
   Advisory board list / info list / contact list
---------------------------------------- */

.haus-info-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--wp--preset--spacing--60);
  row-gap: var(--wp--preset--spacing--60);
  border-top: 1px solid currentColor;
  padding-top: var(--wp--preset--spacing--20);
}

.haus-info-list > * {
  margin-block-start: 0;
}

.haus-info-item {
  min-width: 0;
}

.haus-info-item > * {
  margin-top: 0;
}

.haus-info-item h3,
.haus-info-item h4 {
  padding-bottom: 15px;
}

.haus-info-item p {
  margin-top: 0;
  margin-bottom: 0;
}


.haus-info-list--contact .haus-info-item h3,
.haus-info-list--contact .haus-info-item h4 {
  padding-bottom: 0;
}

.haus-info-list--contact .haus-info-item p {
  margin-bottom: revert;
}

.haus-info-item .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--40);
}

/* ----------------------------------------
   Logo strip
---------------------------------------- */

.haus-logo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--60);
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
  padding-left: var(--wp--preset--spacing--60);
  padding-right: var(--wp--preset--spacing--60);
}

.haus-logo-strip > * {
  margin-block-start: 0;
}

.haus-logo-strip .wp-font-awesome-icon,
.haus-logo-strip .wp-font-awesome-icon svg {
  display: block;
}

/* ----------------------------------------
  Caption
---------------------------------------- */

.haus-image-caption {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--wp--preset--color--charcoal);
}

/* ----------------------------------------
   Highlight grid
---------------------------------------- */

.haus-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--wp--preset--spacing--60);
  row-gap: var(--wp--preset--spacing--40);
}

.haus-highlight-grid > * {
  margin-block-start: 0;
}

.haus-highlight-item {
  padding: var(--wp--preset--spacing--40);
  min-width: 0;
  background: var(--wp--preset--color--haus-white);
}

.haus-highlight-item > * {
  margin-top: 0;
}

.haus-highlight-item > *:last-child {
  margin-bottom: 0;
}

/* Icon */
.haus-highlight-item .wp-font-awesome-icon {
  display: block;
  margin-bottom: var(--wp--preset--spacing--20);
}

.haus-highlight-item .wp-font-awesome-icon svg,
.haus-highlight-item .svg-inline--fa,
.haus-highlight-item svg[data-prefix],
.haus-highlight-item svg.fa-kit {
  display: block;
  width: auto !important;
  height: 3rem !important;
}

.haus-highlight-item .wp-font-awesome-icon.haus-highlight-icon-lg svg,
.haus-highlight-item .haus-highlight-icon-lg svg.fa-kit,
.haus-highlight-item .haus-highlight-icon-lg .svg-inline--fa {
  height: 5rem !important;
}

/* Heading */
.haus-highlight-item h3,
.haus-highlight-item h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Paragraph */
.haus-highlight-item p {
  margin-top: 0;
}

/* 4-column highlight grid variant */
.haus-highlight-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Compact highlight grid variant */
.haus-highlight-grid--compact .haus-highlight-item {
  padding: var(--wp--preset--spacing--40);
}

.haus-highlight-grid--compact .haus-highlight-item .wp-font-awesome-icon {
  margin-bottom: var(--wp--preset--spacing--20);
}

/* ----------------------------------------
   Difference accordion
---------------------------------------- */

.haus-difference-accordion {
 background: transparent;
}

.haus-difference-accordion > * {
  margin-block-start: 0;
}

.haus-difference-detail {
  border-bottom: 1px solid currentColor;
  padding: 0;
}

.haus-difference-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--20) 0;
  cursor: pointer;
  list-style: none;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
}

.haus-difference-detail summary::-webkit-details-marker {
  display: none;
}

.haus-difference-detail summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.haus-difference-detail[open] summary::after {
  content: "–";
}

.haus-difference-detail > *:not(summary) {
  max-width: 42em;
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--20);
  padding-left: var(--wp--preset--spacing--20);
}

.haus-difference-detail > p:last-child {
  margin-bottom: var(--wp--preset--spacing--40);
}

.haus-difference-detail[open] > *:not(summary) {
  animation: haus-details-reveal 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* =====================================
   12. Projects
===================================== */

/* ----------------------------------------
   Project single
---------------------------------------- */

/* Logo row */
.haus-project-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--40);
}

.haus-project-logo-row > * {
  margin-block-start: 0 !important;
}

/* Brand logo */
.haus-project-logo--brand {
  display: flex;
  align-items: center;
}

/* Default brand logo size */
.haus-project-logo--brand .wp-font-awesome-icon,
.haus-project-logo--brand .wp-font-awesome-icon svg,
.haus-project-logo--brand svg,
.haus-project-logo--brand .svg-inline--fa,
.haus-project-logo--brand svg.fa-kit {
  display: block;
  width: auto !important;
  height: 40px !important;
}

/* Long narrow logos: Whispair, Spezialist */
.haus-project-logo--whispair .wp-font-awesome-icon,
.haus-project-logo--whispair .wp-font-awesome-icon svg,
.haus-project-logo--whispair svg,
.haus-project-logo--whispair .svg-inline--fa,
.haus-project-logo--whispair svg.fa-kit,
.haus-project-logo--spezialist .wp-font-awesome-icon,
.haus-project-logo--spezialist .wp-font-awesome-icon svg,
.haus-project-logo--spezialist svg,
.haus-project-logo--spezialist .svg-inline--fa,
.haus-project-logo--spezialist svg.fa-kit {
  height: 40px !important;
}

/* Stubby logos */
.haus-project-logo--pitt-cooking .wp-font-awesome-icon,
.haus-project-logo--pitt-cooking .wp-font-awesome-icon svg,
.haus-project-logo--pitt-cooking svg,
.haus-project-logo--pitt-cooking .svg-inline--fa,
.haus-project-logo--pitt-cooking svg.fa-kit {
  height: 60px !important;
}

.haus-project-logo--studio-haus .wp-font-awesome-icon,
.haus-project-logo--studio-haus .wp-font-awesome-icon svg,
.haus-project-logo--studio-haus svg,
.haus-project-logo--studio-haus .svg-inline--fa,
.haus-project-logo--studio-haus svg.fa-kit {
  height: 75px !important;
}

.haus-project-logo--haus-group .wp-font-awesome-icon,
.haus-project-logo--haus-group .wp-font-awesome-icon svg,
.haus-project-logo--haus-group svg,
.haus-project-logo--haus-group .svg-inline--fa,
.haus-project-logo--haus-group svg.fa-kit {
  height: 80px !important;
}

/* Plus sign */
.haus-project-logo-plus {
  margin: 0 !important;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* Collaborator logo */
.haus-project-logo--collaborator {
  display: flex !important;
  align-items: center;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.haus-project-logo--collaborator img {
  display: block;
  width: auto !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: 72px !important;
  object-fit: contain;
}

/* Collaborator text fallback */
.haus-project-collaborator-name {
  margin: 0 !important;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.1;
  text-align: left;
}

/* Hero image */
.haus-project-hero-image {
  margin: 0;
}

.haus-project-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Intro + meta */
.haus-project-intro-copy {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
}

.haus-project-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--20);
  border-top: 1px solid currentColor;
  font-size: 18px;
  line-height: 1.4;
}

.haus-project-meta > * {
  margin-block-start: 0;
}

.haus-project-meta-item {
  min-width: 0;
}

.haus-project-meta-item > * {
  margin: 0;
}

.haus-project-meta-item p:first-child {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.haus-project-meta-item p:last-child {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
}

/* Project meta links */
.haus-project-meta-links {
  grid-column: 1 / -1;
  margin-top: var(--wp--preset--spacing--40);
}

.haus-project-meta-links > p {
  margin: 0 0 0.5rem;
}

.haus-project-meta-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -0.5rem;
}

.haus-project-meta-links li {
  margin: 0;
  padding: 0;
}

.haus-project-meta-links li + li {
  margin-top: 0.35rem;
}

.haus-project-meta-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.35em;
  line-height: 1.3;
}

/* Hover / focus state */
.haus-project-meta-links a:hover,
.haus-project-meta-links a:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

/* Click / active state */
.haus-project-meta-links a:active {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}

/* Arrow icon */
.haus-project-meta-links a i {
  font-size: 0.8em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.haus-project-meta-links a:hover i,
.haus-project-meta-links a:focus-visible i {
  transform: translateX(4px);
}

.haus-project-meta-links a:active i {
  transform: translateX(2px);
}

/* Flexible gallery */
.haus-project-gallery-section {
  padding-bottom: var(--wp--preset--spacing--160);
}

.haus-project-gallery {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

.haus-project-gallery > * {
  margin: 0 !important;
}

.haus-project-gallery-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 1 image */
.haus-project-gallery--1 {
  grid-template-columns: 1fr;
}

/* 2 images */
.haus-project-gallery--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 images: two small on top, one wide below */
.haus-project-gallery--3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.haus-project-gallery--3 > :nth-child(3) {
  grid-column: 1 / -1;
}

/* 4 images */
.haus-project-gallery--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ----------------------------------------
   Project product collections
---------------------------------------- */

.haus-project-products-section {
  background: var(--wp--preset--color--haus-white);
}

.haus-project-products-shortcode-wrap {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}

.haus-project-products-shortcode-wrap .wp-block-shortcode {
  width: 100%;
  max-width: none;
  margin: 0;
}

.haus-project-products-inner {
  width: 100%;
  max-width: none;
}

.haus-project-products-heading {
  margin-bottom: 0;
}

.haus-project-products-heading > * {
  margin-top: 0;
}

/* Product grid */
.haus-project-product-grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start !important;
  gap: var(--wp--preset--spacing--40);
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide shortcode/block artefacts inside the product grid */
.haus-project-product-grid > :not(.haus-project-product-card) {
  display: none !important;
}

/* Product card */
.haus-project-product-card {
  display: block;
  flex: 0 0 calc((100% - (var(--wp--preset--spacing--40) * 2)) / 3);
  max-width: calc((100% - (var(--wp--preset--spacing--40) * 2)) / 3);
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  text-decoration: none !important;
}

.haus-project-product-card--linked {
  cursor: pointer;
}

.haus-project-product-card * {
  text-decoration: none !important;
}

/* Product image */
.haus-project-product-card .wp-block-image {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--wp--preset--color--ivory);
}

.haus-project-product-card img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Product card body */
.haus-project-product-card__body {
  font-size: 17px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 96px;
  padding: var(--wp--preset--spacing--20);
  border: 1px solid currentColor;
  background: transparent;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    color 180ms ease;
}

.haus-project-product-card__body > * {
  margin: 0;
}

.haus-project-product-card__body h3 {
  margin-bottom: 15px;
}

.haus-project-product-card__body p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 0;
}

.haus-project-product-arrow {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: var(--wp--preset--spacing--20);
  line-height: 1;
}

.haus-project-product-arrow i,
.haus-project-product-arrow svg {
  display: block;
  width: auto;
  height: 16px;
}

/* Product card hover / focus / active */
.haus-project-product-card--linked:hover .haus-project-product-card__body,
.haus-project-product-card--linked:focus-visible .haus-project-product-card__body {
  box-shadow: inset 0 0 0 1px currentColor;
  background-color: var(--wp--preset--color--ivory);
}

.haus-project-product-card--linked:active .haus-project-product-card__body {
  transform: translateY(1px);
  background-color: var(--wp--preset--color--charcoal);
  border-color: var(--wp--preset--color--charcoal);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

/* ----------------------------------------
   Projects listing page
---------------------------------------- */

.haus-projects-listing-section {
  background: var(--wp--preset--color--ivory);
}

.haus-projects-listing-inner {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}

.haus-projects-listing-inner > * {
  margin-block-start: 0;
}

.haus-projects-listing-inner .wp-block-shortcode {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ----------------------------------------
   Project filters
---------------------------------------- */

body.haus-projects-hide-filters .haus-projects-filter-bar {
  display: none;
}

.haus-projects-filter-bar {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto auto 1fr auto;
  align-items: center;
  column-gap: var(--wp--preset--spacing--80);
  width: 100%;
  padding: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--haus-white);
  z-index: 20;
}

.haus-projects-filter-bar > * {
  margin: 0;
}

.haus-projects-filter-bar .wp-block-shortcode {
  width: auto;
  max-width: none;
  margin: 0;
}

/* Push filter icon to far right */
.haus-projects-filter-bar > *:last-child {
  grid-column: -1;
  justify-self: end;
}

.haus-projects-filter-bar > *:last-child i,
.haus-projects-filter-bar > *:last-child svg {
  display: block;
  width: auto;
  height: 18px;
}

/* Filter labels */
.haus-projects-filter-bar a,
.haus-projects-filter-dropdown summary {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.35em;
  cursor: pointer;
}

/* Hover / focus state */
.haus-projects-filter-bar a:hover,
.haus-projects-filter-bar a:focus-visible,
.haus-projects-filter-dropdown:hover summary,
.haus-projects-filter-dropdown summary:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

/* Click / active state */
.haus-projects-filter-bar a:active,
.haus-projects-filter-dropdown summary:active {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}

/* Dropdown */
.haus-projects-filter-dropdown {
  position: relative;
}

.haus-projects-filter-dropdown summary {
  display: inline-block;
  list-style: none;
}

.haus-projects-filter-dropdown summary::-webkit-details-marker {
  display: none;
}

.haus-projects-filter-dropdown.is-active summary {
  opacity: 0.6;
}

.haus-projects-filter-dropdown__panel {
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  background: var(--wp--preset--color--haus-white);
  z-index: 30;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    opacity 420ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 420ms ease;
}

.haus-projects-filter-dropdown__panel br {
  display: none !important;
}

/* Open by click/tap */
.haus-projects-filter-dropdown[open] .haus-projects-filter-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Open by hover on desktop */
@media (hover: hover) and (pointer: fine) {
  .haus-projects-filter-dropdown:hover .haus-projects-filter-dropdown__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Dropdown links */
.haus-projects-filter-dropdown__link {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-weight: 300;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.35em;
  white-space: nowrap;
}

.haus-projects-filter-dropdown__link + .haus-projects-filter-dropdown__link {
  margin-top: 8px;
}

.haus-projects-filter-dropdown__link:hover,
.haus-projects-filter-dropdown__link:focus-visible,
.haus-projects-filter-dropdown__link.is-active {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.haus-projects-filter-dropdown__link:active {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
}

/* ----------------------------------------
   Projects grid
---------------------------------------- */

.haus-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
}

/* Hide shortcode/block artefacts inside the projects grid */
.haus-projects-grid > :not(.haus-project-card) {
  display: none !important;
}


/* ----------------------------------------
   Project listing cards
---------------------------------------- */

.haus-project-card {
  display: block;
  color: inherit;
  text-decoration: none !important;
}

.haus-project-card * {
  text-decoration: none !important;
}

.haus-project-card__image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--ivory);
}

.haus-project-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional placeholder state, only used if PHP outputs this class */
.haus-project-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--haus-white);
}

.haus-project-card__image--placeholder::after {
  content: "HAUS";
  opacity: 0.18;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.haus-project-card__body {
  font-size: 17px;
  line-height: 1.4;
  position: relative;
  min-height: 120px;
  padding: var(--wp--preset--spacing--20);
  border: 1px solid currentColor;
  background: var(--wp--preset--color--haus-white);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    color 180ms ease;
}

.haus-project-card__body > * {
  margin: 0;
}

.haus-project-card__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wp--preset--spacing--20);
  width: 100%;
  margin-bottom: 0;
}

.haus-project-card__meta p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  font-weight: 600;
}

.haus-project-card__sector {
  justify-self: start;
  text-align: left;
}

.haus-project-card__location {
  justify-self: end;
  text-align: right;
}

.haus-project-card__credit {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  padding-right: var(--wp--preset--spacing--40);
}

.haus-project-card__arrow {
  position: absolute;
  right: var(--wp--preset--spacing--20);
  bottom: var(--wp--preset--spacing--20);
  line-height: 1;
}

.haus-project-card__arrow i,
.haus-project-card__arrow svg {
  display: block;
  width: auto;
  height: 16px;
}

/* Card hover / focus / active */
.haus-project-card:hover .haus-project-card__body,
.haus-project-card:focus-visible .haus-project-card__body {
  box-shadow: inset 0 0 0 1px currentColor;
  background-color: var(--wp--preset--color--ivory);
}

.haus-project-card:active .haus-project-card__body {
  transform: translateY(1px);
  background-color: var(--wp--preset--color--charcoal);
  border-color: var(--wp--preset--color--charcoal);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

/* ----------------------------------------
   Projects empty state
---------------------------------------- */

.haus-projects-empty {
  padding: var(--wp--preset--spacing--80);
  border: 1px solid currentColor;
  background: var(--wp--preset--color--haus-white);
  text-align: center;
}

.haus-projects-empty p {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--20);
}

.haus-projects-empty a {
  color: inherit;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

/* ----------------------------------------
   Projects pagination
---------------------------------------- */

.haus-projects-pagination {
  margin-top: var(--wp--preset--spacing--80);
}

.haus-projects-pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  list-style: none;
  margin: 0;
  padding: 0;
}

.haus-projects-pagination li {
  margin: 0;
  padding: 0;
}

.haus-projects-pagination a,
.haus-projects-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  color: inherit;
  text-decoration: none;
  font-weight: 300;
  line-height: 1;
}

.haus-projects-pagination a:hover,
.haus-projects-pagination a:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.haus-projects-pagination .current {
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.haus-projects-pagination .prev,
.haus-projects-pagination .next {
  min-width: auto;
}

/* =====================================
   13. Careers / contact page components
===================================== */

/* ----------------------------------------
   Job button grid
---------------------------------------- */

.haus-job-button-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40);
}

.haus-job-button-grid > * {
  margin-block-start: 0;
}

/* Job button card layout reset */
.wp-block-group.haus-job-button,
.haus-job-button.is-layout-flex,
.haus-job-button.is-content-justification-center {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  text-align: left !important;
}

.haus-job-button {
  min-height: 160px;
  padding: var(--wp--preset--spacing--40);
  border: 1px solid currentColor;
  gap: var(--wp--preset--spacing--20);
  text-decoration: none;
  cursor: pointer;
  background: var(--wp--preset--color--haus-white);
}

.haus-job-button > * {
  margin-top: 0 !important;
  margin-bottom: 0;
}

.haus-job-button h1,
.haus-job-button h2,
.haus-job-button h3,
.haus-job-button h4,
.haus-job-button h5,
.haus-job-button h6,
.haus-job-button p {
  text-align: left !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.haus-job-button .wp-font-awesome-icon {
  display: block;
  align-self: flex-end !important;
  margin-top: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.haus-job-button .wp-font-awesome-icon svg {
  display: block;
  width: auto;
  height: 16px;
}

.haus-job-button:hover {
  box-shadow: inset 0 0 0 1px currentColor;
  background: var(--wp--preset--color--ivory);
}

.haus-job-button:active {
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

/* ----------------------------------------
   Office grid
---------------------------------------- */

.haus-office-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40);
}

.haus-office-grid > * {
  margin-block-start: 0;
}

.haus-office-card {
  min-width: 0;
}

.haus-office-card > * {
  margin-top: 0;
}

.haus-office-card > *:last-child {
  margin-bottom: 0;
}

.haus-office-card .wp-block-image {
  margin-bottom: var(--wp--preset--spacing--20);
}

.haus-office-card img {
  display: block;
  width: 100%;
  height: auto;
}

.haus-office-card h3,
.haus-office-card h4 {
  margin-bottom: 15px;
}

.haus-office-card p {
  margin-top: 10px;
}
/* ------------------------------------------
  Studio Haus overlay
--------------------------------------------- */

.haus-studio-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;

  z-index: 10050;
  display: none;

  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.haus-studio-overlay.is-open {
  display: block !important;
}

.haus-studio-overlay__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(32, 32, 32, 0.72);
}

.haus-studio-overlay__panel {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  right: var(--wp--preset--spacing--40);
  bottom: var(--wp--preset--spacing--40);
  left: var(--wp--preset--spacing--40);
  z-index: 2;

  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
  overflow: hidden;
}

.haus-studio-overlay__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--wp--preset--color--ivory);
}

body.haus-studio-overlay-is-open {
  overflow: hidden;
}

/* ------------------------------------------ 
  Studio Haus overlay close button
--------------------------------------------- */

.haus-studio-overlay__close {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  right: var(--wp--preset--spacing--40);
  z-index: 3;

  width: 44px;
  height: 44px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0;
  border: 1px solid var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--haus-white);
  color: var(--wp--preset--color--charcoal);

  font-family: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.haus-studio-overlay__close:hover {
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal);
}

.haus-studio-overlay__close:active {
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

.haus-studio-overlay__close:focus-visible {
  outline: 1px solid var(--wp--preset--color--charcoal);
  outline-offset: 4px;
}

/* ------------------------------------------ 
  Studio Haus page close-style button
--------------------------------------------- */

.haus-close-button .wp-block-button__link {
  width: 44px;
  height: 44px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0;
  text-align: center;

  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

/* ------------------------------------------
  Hide Studio Haus page chrome when loaded inside overlay
--------------------------------------------- */

body.haus-is-studio-overlay-content header,
body.haus-is-studio-overlay-content footer,
body.haus-is-studio-overlay-content .haus-close-button {
  display: none;
}

/* =====================================
   14. Forms / Fluent Forms
===================================== */

.haus-form-wrap .fluentform {
  width: 100%;
}

.haus-form-wrap .ff-el-group {
  margin-bottom: var(--wp--preset--spacing--40);
}

.haus-form-wrap label,
.haus-form-wrap .ff-el-input--label label {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--wp--preset--color--charcoal);
}

.haus-form-wrap input,
.haus-form-wrap textarea,
.haus-form-wrap select {
  width: 100%;
  border-radius: 0 !important;
  border: 1px solid var(--wp--preset--color--charcoal) !important;
  background: var(--wp--preset--color--haus-white) !important;
  color: var(--wp--preset--color--charcoal) !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

.haus-form-wrap textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.5 !important;
}

.haus-form-wrap input:focus,
.haus-form-wrap textarea:focus,
.haus-form-wrap select:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal) !important;
}

.haus-form-wrap .ff-btn-submit {
  width: 100%;
  border-radius: 0 !important;
  border: 1px solid var(--wp--preset--color--charcoal) !important;
  background: var(--wp--preset--color--ivory) !important;
  color: var(--wp--preset--color--charcoal) !important;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
  padding: 12px 20px !important;
  text-align: left;
  cursor: pointer;
  transition:
    color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.haus-form-wrap .ff-btn-submit:hover {
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal) !important;
  background: var(--wp--preset--color--ivory);
}

.haus-form-wrap .ff-btn-submit:active {
  background: var(--wp--preset--color--charcoal) !important;
  color: var(--wp--preset--color--ivory) !important;
}

/* =====================================
   Fluent Forms refinements
===================================== */

/* Give select/dropdown arrow breathing room */
.haus-form-wrap select {
  padding-right: 48px !important;
}

/* Fix checkbox alignment */
.haus-form-wrap .ff-el-form-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
}

.haus-form-wrap .ff-el-form-check input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
}

.haus-form-wrap .ff-el-form-check label {
  margin: 0 !important;
}

/* Fluent Forms submit button */
.haus-form-wrap .ff-btn-submit {
  width: auto !important;
  min-width: 220px;
  display: inline-flex !important;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.haus-form-wrap .ff-btn-submit i {
  flex-shrink: 0;
  line-height: 1;
}

/* =====================================
   Form overlay content mode
===================================== */

body.haus-is-form-overlay-content header,
body.haus-is-form-overlay-content footer {
  display: none;
}

body.haus-is-form-overlay-content .haus-close-button {
  display: none;
}

body.haus-is-form-overlay-content main {
  margin-top: 0;
  padding-top: 0;
}

/* =====================================
   Form overlay
===================================== */

.haus-form-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;

  z-index: 10050;
  display: none;

  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.haus-form-overlay.is-open {
  display: block !important;
}

.haus-form-overlay__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(32, 32, 32, 0.72);
}

.haus-form-overlay__panel {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  right: var(--wp--preset--spacing--40);
  bottom: var(--wp--preset--spacing--40);
  left: var(--wp--preset--spacing--40);
  z-index: 2;

  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
  overflow: hidden;
}

.haus-form-overlay__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--wp--preset--color--ivory);
}

body.haus-form-overlay-is-open {
  overflow: hidden;
}

/* ------------------------------------------ 
   Form overlay close button
--------------------------------------------- */

.haus-form-overlay__close {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  right: var(--wp--preset--spacing--40);
  z-index: 3;

  width: 44px;
  height: 44px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0;
  border: 1px solid var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--haus-white);
  color: var(--wp--preset--color--charcoal);

  font-family: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.haus-form-overlay__close:hover {
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal);
  background: var(--wp--preset--color--ivory);
}

.haus-form-overlay__close:active {
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

/* =====================================
   Fluent Forms confirmation
===================================== */

.haus-form-confirmation p {
  margin-top: 0;
}

.haus-form-confirmation__button {
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;

  min-width: 240px;
  padding: 12px 20px;

  border: 1px solid var(--wp--preset--color--charcoal);
  border-radius: 0;
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);

  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
  text-decoration: none;

  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.haus-form-confirmation__button:hover {
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal);
}

.haus-form-confirmation__button:active {
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
}

.haus-form-confirmation__button i {
  flex-shrink: 0;
  line-height: 1;
}

/* =====================================
   15. Effects
===================================== */

.dynamic-blend-text { 
  mix-blend-mode: difference; 
  color: var(--wp--preset--color--ivory);
}

/* =====================================
   16. Header
===================================== */

/* Hide WooCommerce header icons on HAUS Corporate main site */
.haus-site-header .wp-block-woocommerce-customer-account,
.haus-site-header .wc-block-customer-account,
.haus-site-header .wp-block-woocommerce-mini-cart,
.haus-site-header .wc-block-mini-cart {
  display: none !important;
}

/* Sticky WordPress header template part */
.wp-block-template-part:has(.haus-site-header) {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Header colour defaults */
.haus-site-header {
  --haus-header-bg: var(--wp--preset--color--ivory);
  --haus-header-text: var(--wp--preset--color--charcoal);

  position: relative;
  width: 100%;
  max-width: none !important;

  background: var(--haus-header-bg);
  color: var(--haus-header-text);
}

/* Pages that start with dark sections (13 - for partners, 17 - markets) */
body.page-id-13 .haus-site-header,
body.page-id-17 .haus-site-header {
  --haus-header-bg: var(--wp--preset--color--charcoal);
  --haus-header-text: var(--wp--preset--color--ivory);
}

/* Header inner bar */
.haus-site-header__bar,
.haus-site-header__bar.is-layout-flex,
.haus-site-header__bar.is-layout-constrained {
  width: min(100% - 48px, var(--wp--style--global--wide-size));
  max-width: var(--wp--style--global--wide-size) !important;
  min-height: 96px;

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 16px 0;

  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);

  background: transparent !important;
  color: inherit;
}

/* Brand area: full logo and submark layered */
.haus-site-header__brand {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 72px;
  width: 72px;
  min-height: 56px;
}

/* Shared logo positioning */
.haus-site-header__logo {
  color: currentColor;
  line-height: 1;
}

.haus-site-header__logo--full {
  position: absolute;
  left: 0;
  top: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);
  transform-origin: left center;
}

.haus-site-header__logo--mark {
  position: absolute;
  left: 0;
  top: 10%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);
  transform-origin: left center;
}

/* Initial desktop logo state */
.haus-site-header__logo--full {
  pointer-events: auto;
}

.haus-site-header__logo--mark {
  pointer-events: none;
}

/* Logo SVG/icon sizing */
.haus-site-header__logo .wp-font-awesome-icon,
.haus-site-header__logo svg {
  display: block;
  color: currentColor;
  fill: currentColor;
  line-height: 1;
  margin: 0 !important;
}

.haus-site-header__logo--full .wp-font-awesome-icon,
.haus-site-header__logo--full svg {
  width: auto !important;
  height: 70px !important;
}

.haus-site-header__logo--mark .wp-font-awesome-icon,
.haus-site-header__logo--mark svg {
  width: auto !important;
  height: 30px !important;
}

/* Reset Gutenberg button styling when logo is inside a Button block */
.haus-site-header__brand .wp-block-button,
.haus-site-header__brand .wp-block-button__link {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1;
}

.haus-site-header__brand .wp-block-button__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Desktop navigation */
.haus-site-header__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.haus-site-header .wp-block-navigation {
  gap: var(--wp--preset--spacing--40);
}

.haus-site-header .wp-block-navigation a,
.haus-site-header .wp-block-navigation .wp-block-navigation-item__content {
  color: currentColor;
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.haus-site-header .wp-block-navigation a:hover,
.haus-site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.haus-site-header .wp-block-navigation .current-menu-item > a,
.haus-site-header .wp-block-navigation .current-menu-ancestor > a,
.haus-site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.haus-site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  text-decoration: underline;
}

/* Hamburger hidden on desktop */
.haus-site-header__menu-toggle {
  display: none;
  color: currentColor;
  line-height: 1;
  cursor: pointer;
}

.haus-site-header__menu-toggle *,
.haus-site-header__menu-toggle svg {
  cursor: pointer;
}

/* =====================================
   17. Mobile menu overlay
===================================== */

.haus-mobile-menu {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;

  z-index: 10000;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  overflow: hidden !important;
  max-width: 100vw;

  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: transparent;
  color: var(--wp--preset--color--ivory);

  transition:
    opacity .3s ease,
    visibility 0s linear .3s;
}

/* Step 1: make overlay visible */
.haus-mobile-menu.is-visible {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10000 !important;

  transition:
    opacity .3s ease,
    visibility 0s linear 0s;
}

.haus-mobile-menu__inner {
  width: min(100% - 32px, var(--wp--style--global--wide-size));
  min-height: 100vh;
  max-width: 100%;

  margin-left: auto;
  margin-right: auto;
  padding: 24px 22px 48px;

  display: flex;
  flex-direction: column;

  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);

  transform: translateX(100%);
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* Step 2: slide drawer in */
.haus-mobile-menu.is-open .haus-mobile-menu__inner {
  transform: translateX(0) !important;
}

.haus-mobile-menu__close {
  align-self: flex-end;

  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: currentColor;

  font-family: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.haus-mobile-menu__nav {
  margin-top: 80px;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

.haus-mobile-menu__nav a {
  color: currentColor;
  text-decoration: none;

  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
}

.haus-mobile-menu__nav a:hover,
.haus-mobile-menu__nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.haus-site-header__menu-toggle,
.haus-site-header__menu-toggle *,
.haus-mobile-menu__close {
  cursor: pointer;
}

@media (min-width: 782px) {
  .haus-mobile-menu {
    display: none !important;
  }

  body.haus-mobile-menu-is-open {
    overflow: auto;
  }
}

/* Lock page scroll while mobile menu is open */
body.haus-mobile-menu-is-open {
  overflow: hidden;
}

/* Keep the mobile menu viewport-sized */
.haus-mobile-menu.is-visible {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Allow the menu links area to scroll only if needed */
.haus-mobile-menu__inner {
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* =====================================
   18. Footer
===================================== */

.haus-footer {
  width: 100%;
  padding-top: var(--wp--preset--spacing--80);
  padding-bottom: var(--wp--preset--spacing--80);
  background: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--ivory);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}

/* Main footer grid */
.haus-footer__inner {
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
  align-items: end;
}

/* Footer links */
.haus-footer a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.haus-footer a:hover {
  text-decoration: underline;
}

.haus-footer a:active {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}

/* =====================================
   18.1 Footer desktop layout
===================================== */

/* Identity / logo area */
.haus-footer__identity {
  align-self: end;
}

.haus-footer__identity .wp-font-awesome-icon {
  margin-bottom: var(--wp--preset--spacing--40);
}

.haus-footer__identity p {
  margin: 0;
}

/* Directory wrapper */
.haus-footer__directory {
  width: 100%;
  max-width: none !important;
}

/* Prevent Gutenberg constrained layout from narrowing footer rows */
.haus-footer__directory > * {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Directory rows */
.haus-footer__row,
.haus-footer__row.is-layout-flex,
.haus-footer__row.is-layout-constrained {
  width: 100%;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--wp--preset--spacing--80);
  align-items: center;
  padding-top: 5px;
  padding-bottom: 20px;
  border-bottom: 1px solid currentColor;
}

/* Directory cells */
.haus-footer__row > * {
  min-width: 0;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* First cell / row label */
.haus-footer__row > *:first-child {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
}

/* Remove default paragraph margins inside rows */
.haus-footer__row p {
  margin: 0;
}

/* Footer info / acknowledgement */
.haus-footer__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--wp--preset--spacing--80);
}

.haus-footer__info .haus-footer__contact,
.haus-footer__info .haus-footer__acknowledgement {
  margin: 0 !important;
}

/* Mobile footer content hidden on desktop */
.haus-footer__mobile-menu,
.haus-footer__mobile-info {
  display: none;
}

/* =====================================
   18.2 Footer legal bar
===================================== */

.haus-footer-legal {
  width: 100%;
  background: var(--wp--preset--color--ivory);
  color: var(--wp--preset--color--charcoal);
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}

.haus-footer-legal__inner,
.haus-footer-legal__inner.is-layout-flex,
.haus-footer-legal__inner.is-layout-constrained {
  width: min(100% - 48px, var(--wp--style--global--wide-size));
  max-width: var(--wp--style--global--wide-size) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: var(--wp--preset--spacing--40);
}

.haus-footer-legal p {
  margin: 0;
}

.haus-footer-legal__links {
  margin-left: auto;
  text-align: right;
}

.haus-footer-legal a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.haus-footer-legal a:hover {
  text-decoration: underline;
}

/* =====================================
   19. 404 page
===================================== */

.error404 .haus-404-cover {
  min-height: 100vh;
  padding: 0;
  align-items: flex-end;
}

.error404 .haus-404-cover .wp-block-cover__inner-container {
  width: 100%;
}

/* Ivory panel */
.error404 .haus-404-panel {
  position: relative;
  overflow: hidden;

  width: calc(100% - 64px);
  max-width: none;

  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--wp--preset--spacing--40);

  padding-top: var(--wp--preset--spacing--80);
  padding-right: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--80);
  padding-left: var(--wp--preset--spacing--40);

  background: transparent !important;
  color: var(--wp--preset--color--charcoal);
}

/* Transparent ivory background only */
.error404 .haus-404-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: var(--wp--preset--color--ivory);
  opacity: 0.88;
}

/* Keep panel content solid */
.error404 .haus-404-panel > * {
  position: relative;
  z-index: 1;
}

/* Text column */
.error404 .haus-404-column {
  width: min(100%, 540px);
  margin-left: auto;
  margin-right: auto;
}

.error404 .haus-404-column > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Small 404 label */
.error404 .haus-404-column p:first-child {
  margin-top: 0;
  margin-bottom: 8px;

  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}

/* Heading */
.error404 .haus-404-column h1,
.error404 .haus-404-column h2 {
  margin-top: 0;
  margin-bottom: 16px;
}

/* Button wrapper */
.error404 .haus-404-column .wp-block-buttons {
  display: flex !important;
  justify-content: flex-start !important;

  margin-top: var(--wp--preset--spacing--40);
  margin-left: 0 !important;
  margin-right: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/* Button block */
.error404 .haus-404-column .wp-block-button {
  margin-left: 0 !important;
  margin-right: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/* Actual button */
.error404 .haus-404-column .wp-block-button__link {
  display: inline-flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;

  min-width: 220px;
  padding: 12px 20px !important;

  border: 1px solid var(--wp--preset--color--charcoal) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wp--preset--color--charcoal) !important;

  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
  text-decoration: none !important;

  visibility: visible !important;
  opacity: 1 !important;
}

.error404 .haus-404-column .wp-block-button__link:hover {
  background: transparent !important;
  color: var(--wp--preset--color--charcoal) !important;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--charcoal);
}

.error404 .haus-404-column .wp-block-button__link:active {
  background: var(--wp--preset--color--charcoal) !important;
  color: var(--wp--preset--color--ivory) !important;
}

/* =====================================
   20. Responsive
===================================== */

@media (max-width: 1444px) {
  .haus-card-rail {
    padding-left: var(--wp--preset--spacing--20);
    padding-right: var(--wp--preset--spacing--20);
  }

  .haus-card-rail::after {
    flex-basis: var(--wp--preset--spacing--20);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .haus-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .haus-advisory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .haus-logo-strip {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .haus-logo-strip > * {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--40));
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }

  .haus-logo-strip .wp-font-awesome-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .haus-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .haus-highlight-grid,
  .haus-highlight-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--wp--preset--spacing--40);
  }

  .haus-job-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40);
  }

  .haus-project-intro-copy {
    grid-column: 1 / -1;
    max-width: 760px;
  }

  .haus-project-meta {
    grid-column: 1 / -1;
  }

  .haus-project-product-card {
    flex-basis: calc((100% - var(--wp--preset--spacing--40)) / 2);
    max-width: calc((100% - var(--wp--preset--spacing--40)) / 2);
  }

  .haus-projects-filter-bar {
    column-gap: var(--wp--preset--spacing--40);
  }

  .haus-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .haus-job-button {
    min-height: 150px;
  }

}

@media (max-width: 1180px) {
  .haus-site-header__nav {
    display: none !important;
  }

  .haus-site-header__menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    line-height: 1;
    cursor: pointer;
  }
}

@media (min-width: 782px) and (max-width: 1180px) {

  .haus-grid-12 > .haus-tablet-span-4 {
    grid-column-end: span 4 !important;
  }

    .haus-grid-12 > .haus-tablet-span-6 {
    grid-column-end: span 6 !important;
  }

  .haus-grid-12 > .haus-tablet-start-1 {
    grid-column-start: 1 !important;
  }

  .haus-section .haus-pt-160, 
  .haus-section .haus-pt-80, 
  .haus-section .haus-pt-120 {
    padding-top: var(--wp--preset--spacing--40);
  }

  .haus-project-single .haus-pt-120 {
    padding-top: 0;
  }

  /* Tighten meta spacing */
  .haus-project-single .haus-project-hero {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .haus-project-single .haus-project-gallery-section {
    padding-bottom: 0;
    margin-bottom: 0;
  }

/* =====================================
   20.1 Header mobile
===================================== */

  .haus-site-header__bar,
  .haus-site-header__bar.is-layout-flex,
  .haus-site-header__bar.is-layout-constrained {
    width: min(100% - 32px, var(--wp--style--global--wide-size));
    min-height: 64px;
    padding: 12px 0;

    display: flex !important;
    align-items: center !important;
  }

  .haus-site-header__brand {
    flex: 0 0 56px;
    width: 56px;
    min-height: 48px;
    display: flex !important;
    align-items: center !important;
  }

  .haus-site-header__logo--full,
  .haus-site-header__logo--mark {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .haus-site-header__logo--full .wp-font-awesome-icon,
  .haus-site-header__logo--full svg {
    width: auto !important;
    height: 60px !important;
    margin: 0 !important;
  }

  .haus-site-header__logo--mark .wp-font-awesome-icon,
  .haus-site-header__logo--mark svg {
    width: auto !important;
    height: 30px !important;
    margin: 0 !important;
  }

  .haus-site-header__logo--mark {
    transform: translateY(-50%) translateY(-10px) !important;
  }

  .haus-site-header__nav {
    display: none !important;
  }

  .haus-site-header__menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    line-height: 1;
    cursor: pointer;
  }

  .haus-site-header__menu-toggle .wp-font-awesome-icon,
  .haus-site-header__menu-toggle svg {
    display: block;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    color: currentColor;
    fill: currentColor;
  }

  /* Prevent hidden off-canvas menu from creating horizontal scroll */
  .haus-mobile-menu {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  .haus-mobile-menu__inner {
    max-width: 100%;
  }
}

@media (max-width: 781px) {

  /* Typography */
  h1 {
    font-size: 14px;
  }

  h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
  }

  h3 {
    font-size: 18px;
  }

  h4,
  h5 {
    font-size: 24px;
    font-weight: 600;
  }

  h6 {
    font-size: 30px;
    font-weight: 200;
  }

  .wp-block-post-content p,
  .wp-block-post-content li {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 300;
  }

  /* Layout */
  .haus-section {
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--40);
  }

  .haus-section-small {
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--60);
  }

  .haus-grid-12 {
    grid-template-columns: 1fr;
  }

  .haus-grid-12 > * {
    grid-column: 1 / -1 !important;
  }

  /* Mobile spacing utilities */
  .haus-mobile-padding-none {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .haus-mobile-padding-small {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .haus-mobile-padding-medium {
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--40) !important;
  }

  .haus-mobile-padding-large {
    padding-top: var(--wp--preset--spacing--60) !important;
    padding-bottom: var(--wp--preset--spacing--60) !important;
  }

  /* Spacing utilities */
  .haus-pt-40 {
    padding-top: var(--wp--preset--spacing--20);
  }

  .haus-pt-60 {
    padding-top: 30px;
  }

  .haus-pt-80 {
    padding-top: var(--wp--preset--spacing--40);
  }

  .haus-pt-120 {
    padding-top: var(--wp--preset--spacing--60);
  }

  .haus-pt-160 {
    padding-top: var(--wp--preset--spacing--80);
  }

  /* Center text to left align */
  .haus-text-center {
    text-align: left;
  }

  .haus-text-center p {
    width: 100%;
  }

  .haus-text-center > * {
    margin-left: 0;
    margin-right: 0;
  }

  .haus-text-center .wp-block-buttons {
    justify-content: flex-start;
  }

  /* Mobile divider spacing */
  .wp-block-separator.haus-divider-short {
    margin-top: var(--wp--preset--spacing--40) !important;
    margin-bottom: var(--wp--preset--spacing--40) !important;
  }

  /* Centered dividers inside centered text become left aligned on mobile */
  .haus-text-center .wp-block-separator.haus-divider-short.haus-divider-center {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Mobile image ratio utilities */

  .haus-mobile-square img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* hero cover block */ 
  .haus-hero-cover-desktop {
    display: none;
  }

  .haus-hero-cover-mobile {
    display: flex;
    min-height: min(70vh, 620px);
  }

  .haus-read-more summary {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.4;
  }

  .haus-ecosystem-panel {
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--40) !important;
  }

  /* mobile */
   .wp-block-buttons {
    width: 100%;
  }

  .wp-block-button {
    width: 100%;
  }

  .haus-button-light .wp-block-button__link,
  .haus-button-dark .wp-block-button__link {
    width: 100%;
    box-sizing: border-box;
  }

  .haus-studio-page .haus-close-button {
    display: none;
  }

    /* Bottom rows */
  .wp-block-buttons.haus-button-row {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .wp-block-buttons.haus-button-row > .wp-block-button {
    width: 100%;
    margin: 0 !important;
  }

  .wp-block-buttons.haus-button-row .wp-block-button__link {
    width: 100%;
    justify-content: space-between;
  }

  .haus-project-product-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  /* Dark section with 3 small columns */
  .haus-principles-row {
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
  }

  .haus-principles-row > .haus-principle-item {
    width: 100%;
  }

  /* Card rail */
    .haus-card-rail {
    gap: var(--wp--preset--spacing--40);
    padding-left: var(--wp--preset--spacing--20);
    padding-right: var(--wp--preset--spacing--20);
  }

  .haus-card-rail__card {
    flex-basis: 78vw;
  }

  .haus-card-rail::after {
    flex-basis: var(--wp--preset--spacing--20);
  }

  .haus-card-rail-controls {
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;

    gap: 12px !important;
    column-gap: 12px !important;

    margin-top: var(--wp--preset--spacing--40);
    margin-bottom: var(--wp--preset--spacing--40);
  }

  .haus-card-rail-controls > .wp-block-button,
  .haus-card-rail-controls .haus-card-rail-prev,
  .haus-card-rail-controls .haus-card-rail-next {
    width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
  }

  .haus-card-rail-controls .wp-block-button__link {
    width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Team grid */
  .haus-team-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--60);
  }

  /* Advisory list */
  .haus-advisory-list {
    grid-template-columns: 1fr;
    row-gap: var(--wp--preset--spacing--40);
  }

  /* logo strip */
  .haus-logo-strip {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .haus-logo-strip > * {
    flex: 0 0 auto;
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }

  .haus-logo-strip .wp-font-awesome-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* highlight grid */
  .haus-highlight-grid {
    grid-template-columns: 1fr;
    row-gap: var(--wp--preset--spacing--20);
  }

  .haus-highlight-grid,
  .haus-highlight-grid--4 {
    grid-template-columns: 1fr;
    row-gap: var(--wp--preset--spacing--40);
  }

  /* Single Project page */
  .haus-project-logo-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--20);
    text-align: center;
  }

  .haus-project-logo-row > * {
    margin: 0 !important;
  }

  .haus-project-logo--brand,
  .haus-project-logo--collaborator {
    justify-content: center;
  }

  /* Default mobile brand logo size */
  .haus-project-logo--brand .wp-font-awesome-icon,
  .haus-project-logo--brand .wp-font-awesome-icon svg,
  .haus-project-logo--brand svg,
  .haus-project-logo--brand .svg-inline--fa,
  .haus-project-logo--brand svg.fa-kit {
    height: 35px !important;
    width: auto !important;
  }

  /* Long narrow logos: Whispair, Spezialist */
  .haus-project-logo--whispair .wp-font-awesome-icon,
  .haus-project-logo--whispair .wp-font-awesome-icon svg,
  .haus-project-logo--whispair svg,
  .haus-project-logo--whispair .svg-inline--fa,
  .haus-project-logo--whispair svg.fa-kit,
  .haus-project-logo--spezialist .wp-font-awesome-icon,
  .haus-project-logo--spezialist .wp-font-awesome-icon svg,
  .haus-project-logo--spezialist svg,
  .haus-project-logo--spezialist .svg-inline--fa,
  .haus-project-logo--spezialist svg.fa-kit {
    height: 35px !important;
  }

  /* Stubby logos */
  .haus-project-logo--pitt-cooking .wp-font-awesome-icon,
  .haus-project-logo--pitt-cooking .wp-font-awesome-icon svg,
  .haus-project-logo--pitt-cooking svg,
  .haus-project-logo--pitt-cooking .svg-inline--fa,
  .haus-project-logo--pitt-cooking svg.fa-kit {
    height: 48px !important;
  }

  .haus-project-logo--studio-haus .wp-font-awesome-icon,
  .haus-project-logo--studio-haus .wp-font-awesome-icon svg,
  .haus-project-logo--studio-haus svg,
  .haus-project-logo--studio-haus .svg-inline--fa,
  .haus-project-logo--studio-haus svg.fa-kit {
    height: 58px !important;
  }

  .haus-project-logo--haus-group .wp-font-awesome-icon,
  .haus-project-logo--haus-group .wp-font-awesome-icon svg,
  .haus-project-logo--haus-group svg,
  .haus-project-logo--haus-group .svg-inline--fa,
  .haus-project-logo--haus-group svg.fa-kit {
    height: 70px !important;
  }

  .haus-project-logo-plus {
    font-size: 36px;
    line-height: 1;
  }

  .haus-project-logo--collaborator img {
    max-width: 300px !important;
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }

  .haus-project-collaborator-name {
    font-size: 30px;
    text-align: center;
  }

  .haus-project-meta {
    grid-template-columns: 1fr;
    row-gap: var(--wp--preset--spacing--20);
    font-size: 18px;;
  }

  .haus-project-meta-item p:first-child,
  .haus-project-meta-item p:last-child {
    font-size: 18px;
  }
  
  .haus-project-gallery-section {
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--40);
  }

  .haus-project-gallery,
  .haus-project-gallery--1,
  .haus-project-gallery--2,
  .haus-project-gallery--3,
  .haus-project-gallery--4 {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--20);
  }

  .haus-project-gallery > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  .haus-project-gallery--3 > :nth-child(3) {
    grid-column: auto;
  }

  .haus-project-gallery-image,
  .haus-project-gallery--1 .haus-project-gallery-image,
  .haus-project-gallery--3 > :nth-child(3) {
    aspect-ratio: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;
  }

  .haus-project-gallery-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .haus-project-product-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  /* Project listing page filter bar */
  .haus-projects-filter-bar {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: var(--wp--preset--spacing--40);
  }

  .haus-projects-filter-bar > * {
    width: 100%;
  }

  .haus-projects-filter-bar > *:last-child {
    order: -1;
    grid-column: auto;
    justify-self: start;
  }

  .haus-projects-filter-bar > *:last-child i,
  .haus-projects-filter-bar > *:last-child svg {
    height: 18px;
  }

  .haus-projects-filter-dropdown {
    width: 100%;
  }

  .haus-projects-filter-dropdown summary {
    display: block;
    width: 100%;
  }

  .haus-projects-filter-dropdown__panel {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 12px;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid currentColor;
    background: transparent;
  }

  .haus-projects-filter-dropdown[open] .haus-projects-filter-dropdown__panel {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .haus-projects-filter-dropdown__link + .haus-projects-filter-dropdown__link {
    margin-top: 10px;
  }

  .haus-projects-grid {
    grid-template-columns: 1fr;
  }

    /* job button */
  .haus-job-button-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--20);
  }

  .haus-job-button {
    min-height: auto;
    padding: var(--wp--preset--spacing--40);
  }

  .haus-job-button .wp-font-awesome-icon {
    margin-top: var(--wp--preset--spacing--40) !important;
  }

  /* contact page info list */
  .haus-info-list {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--wp--preset--spacing--60);
  }

  .haus-info-item {
    width: 100%;
  }

  .haus-office-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--wp--preset--spacing--60);
  }

  .haus-office-card {
    width: 100%;
  }

  .haus-form-overlay {
    display: none !important;
  }

  body.haus-form-overlay-is-open {
    overflow: auto;
  }

  .haus-form-wrap .ff-btn-submit {
    width: 100% !important;
  }

  .haus-form-page .haus-close-button {
    display: none !important;
  }

  .haus-form-confirmation__button {
    width: 100%;
  }

  /* Footer */
  .haus-footer {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--80);
  }

  /* Footer paragraph spacing */
  .haus-footer p {
    margin-top: 0;
    margin-bottom: 0;
  }

  .haus-footer p + p {
    margin-top: 10px;
  }

  .haus-footer__directory--desktop,
  .haus-footer__identity,
  .haus-footer__info {
    display: none;
  }

  .haus-footer__mobile-menu,
  .haus-footer__mobile-info {
    display: block;
  }

  .haus-footer__mobile-menu details {
    border-bottom: 1px solid currentColor;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .haus-footer__mobile-menu summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
  }

  .haus-footer__mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .haus-footer__mobile-menu summary::after {
    content: "+";
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
  }

  .haus-footer__mobile-menu details[open] summary::after {
    content: "–";
  }

  .haus-footer__mobile-menu details > *:not(summary) {
    margin-top: 16px;
  }

  .haus-footer__mobile-menu a {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .haus-footer__mobile-info {
    margin-top: var(--wp--preset--spacing--60);
  }

  .haus-footer__mobile-info p {
    margin-top: 0;
  }

  .haus-footer__mobile-info .wp-font-awesome-icon {
    margin-bottom: var(--wp--preset--spacing--40);
  }

  .haus-footer__mobile-info .wp-block-separator {
    margin-top: var(--wp--preset--spacing--40);
    margin-bottom: var(--wp--preset--spacing--40);
  }

  .haus-footer-social {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .haus-footer-social .wp-block-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .haus-footer-social .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  /* Footer legal */
  .haus-footer-legal__inner,
  .haus-footer-legal__inner.is-layout-flex,
  .haus-footer-legal__inner.is-layout-constrained {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 8px;
  }

  .haus-footer-legal__links {
    margin-left: 0;
    text-align: left;
  }

  /* 404 Mobile */
  .error404 .haus-404-cover {
    min-height: 100vh;
  }

  .error404 .haus-404-panel {
    width: calc(100% - 32px);
    margin-bottom: 16px;

    padding-top: var(--wp--preset--spacing--40);
    padding-right: 24px;
    padding-bottom: var(--wp--preset--spacing--40);
    padding-left: 24px;
  }

  .error404 .haus-404-column {
    width: 100%;
  }

  .error404 .haus-404-column .wp-block-button__link {
    width: 100%;
  }
}