/* ==========================================================================
   Joanna Verbeeck - Portfolio
   Hand-written rebuild of the original Elementor site. No framework.
   Design tokens below are the exact values from the original Elementor kit.
   ========================================================================== */

/* Cinzel + Raleway, self-hosted, same woff2 files the original served */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptsg8zys_skggpnycg4qifqpfe.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptsg8zys_skggpnycg4syfqpfe.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptsg8zys_skggpnycg4qofqpfe.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptsg8zys_skggpnycg4q4fqpfe.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptsg8zys_skggpnycg4tyfq.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptug8zys_skggpnycait5lu.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptug8zys_skggpnyckit5lu.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptug8zys_skggpnyciit5lu.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptug8zys_skggpnycmit5lu.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-1ptug8zys_skggpnyc0itw.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/cinzel-8vij7ww63mvu7gt7-gt7lec.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/cinzel-8vij7ww63mvu7gt79mt7.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* colours */
  --c-primary: #f2f1ed;
  --c-secondary: #181818;
  --c-text: #262626;
  --c-accent: #eeece6;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-grey-cc: #cccccc;
  --c-grey-88: #888888;
  --c-grey-77: #777777;
  --c-grey-55: #555555;
  --c-grey-33: #333333;
  --c-rule: #88888842;      /* hairlines between sections */
  --c-rule-soft: #26262612; /* faint hairline on light panels */
  --c-eggshell: #ebe9e3;
  --c-panel: #f7f6f3;
  --c-panel-2: #f7f6f2;
  --c-ink-111: #111111;
  --c-white-24: rgba(255, 255, 255, 0.24);

  /* type scale - identical clamp() curves to the original */
  --f-body: 'Raleway', sans-serif;
  --f-display: 'Cinzel', serif;

  --t-body: clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem);
  --t-body-lh: 1.8em;

  --t-eyebrow: clamp(0.625rem, 0.5817rem + 0.1923vw, 0.8125rem);   /* 10 - 13px */
  --t-eyebrow-ls: 2px;

  --t-hero: clamp(3.375rem, 1.8173rem + 6.9231vw, 10.125rem);      /* 54 - 162px  Joanna / Verbeeck */
  --t-numeral: clamp(4.0625rem, -0.7692rem + 21.4744vw, 25rem);    /* 65 - 400px  01 02 03 ... */
  --t-title-xl: clamp(3.75rem, 3.0288rem + 3.2051vw, 6.875rem);    /* 60 - 110px  project H1 */
  --t-title-lg: clamp(3.125rem, 2.3462rem + 3.4615vw, 6.5rem);     /* 50 - 104px */
  --t-title-md: clamp(2.5625rem, 1.8846rem + 3.0128vw, 5.5rem);    /* 41 - 88px */
  --t-title-sm: clamp(2.125rem, 1.6779rem + 1.9872vw, 4.0625rem);  /* 34 - 65px */
  --t-title-xs: clamp(1.75rem, 1.5481rem + 0.8974vw, 2.625rem);    /* 28 - 42px */
  --t-serif-lg: clamp(1.375rem, 1.3173rem + 0.2564vw, 1.625rem);   /* 22 - 26px */
  --t-serif-md: 1.125rem;
  --t-serif-sm: 0.875rem;
  --t-lead: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);             /* italic lead */
  --t-strong: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem);
  --t-meta: clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem);
  --t-path: 22px;   /* SCROLL DOWN text path */
  --t-nav: 13px;

  /* rhythm */
  --gutter: 120px;
  --shell: 40px;
}

@media (max-width: 1024px) {
  :root { --gutter: 40px; --shell: 0px; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-grey-33);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: var(--c-grey-88); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto;
  clip: auto; margin: 0;
  padding: 12px 20px;
  background: var(--c-white);
  color: var(--c-text);
  z-index: 100000;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Header - transparent and lifted out of view at the top of the page,
   drops in as a fixed dark bar once the page is scrolled past 1px.
   (Sticky Header Effects behaviour from the original build.)
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 70px var(--gutter) 0;
  background: transparent;
  transform: translateY(-100%);
  transition:
    all 0.4s ease-in-out,
    height 0.4s ease-in-out,
    background-color 0.4s ease-in-out,
    top 0s;
}

.site-header.is-stuck {
  position: fixed;
  top: 0;
  transform: none;
  padding: 0 var(--gutter);
  background: var(--c-black);
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 auto;
  width: 30%;
  padding: 10px 0;
  min-height: 0;
}

.site-header__brand-text {
  font-family: var(--f-display);
  font-size: var(--t-serif-md);
  font-weight: 700;
  line-height: 1.6em;
  color: var(--c-white);
  white-space: nowrap;
}

.site-header.is-stuck .site-header__brand-text { color: var(--c-white); }

/* hamburger - three 2px rules, outer two 80% wide and right aligned */
.site-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 1 auto;
  width: 40px;
  min-height: 40px;
  padding: 10px 0;
  background: none;
}

.site-header__toggle span {
  display: block;
  height: 2px;
  background: var(--c-white);
  margin-left: auto;
  transition: width 0.3s ease-in-out;
}
.site-header__toggle span:nth-child(1),
.site-header__toggle span:nth-child(3) { width: 80%; }
.site-header__toggle span:nth-child(2)  { width: 100%; }
.site-header__toggle:hover span { width: 100%; }

@media (max-width: 1024px) {
  .site-header { gap: 20px; padding: 20px var(--gutter) 0; }
  .site-header__toggle { width: 36px; min-height: 36px; }
}
@media (max-width: 767px) {
  .site-header { padding: 10px var(--gutter) 0; }
  .site-header__brand { width: 30%; }
  .site-header__toggle { width: 36px; min-height: 36px; }
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  overflow: hidden;
  background: var(--c-text);
}

.hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(40vw - 120px));
  overflow: hidden;
  z-index: 10;
}

.hero__figure-inner { width: 100%; }
.hero__figure img {
  max-width: 100%;
  margin: 0 auto;
  filter: contrast(93%) saturate(0%);
}

.hero__wordmark {
  position: absolute;
  top: 80px;
  left: min(700px, calc(50vw - 140px));
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  width: auto;
}

.hero__word {
  display: block;
  width: auto;
  min-width: 0;
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.1em;
  color: var(--c-accent);
  white-space: nowrap;
}
.hero__word > span { display: block; }

.hero__word--first  { z-index: 5;  transform: translate(-96%, 150%); }
.hero__word--second { z-index: 15; transform: translate(-47%, 150%); }

/* scroll-down puck */
.hero__scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  z-index: 99;
}

.scroll-puck {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  padding: 25px;
  border: 1px solid var(--c-white-24);
  border-radius: 512px;
  transition: transform 0.3s, border-color 0.3s;
}
.scroll-puck:hover { transform: scale(1.05); border-color: var(--c-grey-cc); }

.scroll-puck__ring {
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  transform-origin: center;
}
.scroll-puck__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scroll-puck__ring path { fill: none; stroke: none; }
.scroll-puck__ring text {
  font-family: var(--f-body);
  font-size: var(--t-path);
  line-height: var(--t-path);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  fill: var(--c-white);
}
.scroll-puck__mouse { width: 48px; height: 48px; }

@media (max-width: 1024px) {
  .hero { gap: 30px; padding: 80px 0 0; }
  .hero__stage { padding: 50px 0 200px; }
  .hero__figure { width: min(720px, calc(70vw - 120px)); padding: 0 40px; }
  .hero__figure img { transform: scale(1.1); }
  .hero__wordmark { top: 50px; left: calc(100% - 60px); }
  .hero__word--first  { transform: translate(-200%, 180%); }
  .hero__word--second { transform: translate(-150%, 180%); }
  .hero__scroll { bottom: 50px; padding: 0 40px; }
}
@media (max-width: 767px) {
  .hero { gap: 20px; padding: 140px 0 0; }
  .hero__stage { padding: 40px 0 200px; }
  .hero__figure { width: 60vw; padding: 0 20px; }
  .hero__wordmark { top: 40px; left: calc(100% - 40px); width: auto; }
  .hero__word--first  { transform: translate(-125%, 150%); }
  .hero__word--second { transform: translate(-160%, 150%); }
  .hero__scroll { bottom: 5%; }
  .scroll-puck { width: 80px; height: 80px; }
  .scroll-puck__ring { top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
}

/* --------------------------------------------------------------------------
   Home project list
   Rows alternate: odd rows put the photograph on the left with the caption
   right, even rows mirror it. The oversized cream numeral is anchored to the
   inner edge of the photograph and pushed outward with percentage transforms,
   so it scales with the fluid type.
   -------------------------------------------------------------------------- */
.projects {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 140px var(--shell);
}

.project-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.project-row:nth-child(even) { justify-content: flex-end; padding-top: 80px; }

.project-row__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(50vw - 120px));
  overflow: hidden;
  z-index: 10;
}
.project-row__figure-inner { width: 100%; }
.project-row__figure img { max-width: 100%; margin: 0 auto; }

.project-row__numeral {
  position: absolute;
  top: 80px;
  left: min(700px, calc(50vw - 140px));
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  width: auto;
}
.project-row:nth-child(even) .project-row__numeral {
  left: auto;
  right: min(700px, calc(50vw - 140px));
}

.project-row__digit {
  display: block;
  width: auto;
  min-width: 0;
  font-family: var(--f-display);
  font-size: var(--t-numeral);
  font-weight: 400;
  line-height: 0.8em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.project-row__digit--first  { z-index: 5;  transform: translate(-200%, -50%); }
.project-row__digit--second { z-index: 15; transform: translate(-300%, -50%); }
.project-row:nth-child(even) .project-row__digit--first  { transform: translate(200%, -50%); }
.project-row:nth-child(even) .project-row__digit--second { transform: translate(230%, -50%); }
.project-row:nth-child(3) .project-row__digit--second { transform: translate(-230%, -50%); }
.project-row:nth-child(4) .project-row__digit--second { transform: translate(200%, -50%); }
.project-row:nth-child(5) .project-row__digit--second { transform: translate(-240%, -50%); }
.project-row:nth-child(6) .project-row__digit--second { transform: translate(200%, -50%); }

.project-row__caption {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 20;
}
.project-row__inner {
  display: flex;
  justify-content: flex-end;
  gap: 50px;
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 80px;
}
.project-row:nth-child(even) .project-row__inner { justify-content: flex-start; }
.project-row:nth-child(4) .project-row__inner,
.project-row:nth-child(6) .project-row__inner { padding-top: 0; }

.project-row__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 55%;
  gap: 50px;
}
/* widgets shrink-wrap but never push past the column, as in the original */
.project-row__body > * { min-width: 0; max-width: 100%; }

.project-row__years {
  font-family: var(--f-body);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: var(--c-grey-cc);
}

/* the em here resolves against the inherited body size, exactly as the
   original widget wrapper did - not against the 128px display size */
.project-row__name-wrap { margin: -1.5em 0 -1.3em; }
.project-row__name {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.1em;
  text-align: center;
  color: var(--c-grey-55);
}

@media (max-width: 1024px) {
  .projects { gap: 30px; padding: 140px 0; }
  .project-row,
  .project-row:nth-child(even) { padding: 50px 0 200px; }
  .project-row__figure { width: 100%; padding: 0 40px; }
  .project-row__figure img { transform: scale(1.1); }
  .project-row__numeral { top: 50px; left: calc(100% - 60px); right: auto; width: auto; }
  .project-row:nth-child(even) .project-row__numeral { left: auto; right: calc(100% - 60px); }
  .project-row__caption { top: 75%; padding: 0 80px; }
  .project-row:nth-child(4) .project-row__caption { top: 65%; }
  .project-row:nth-child(6) .project-row__caption { top: 70%; }
  .project-row__inner,
  .project-row:nth-child(4) .project-row__inner,
  .project-row:nth-child(6) .project-row__inner { gap: 30px; padding-top: 50px; }
  .project-row__body { gap: 30px; padding: 50px 80px 0; }
  .project-row__name-wrap { margin: -1em 0 -0.6em; }
}
@media (max-width: 767px) {
  .projects { gap: 20px; padding: 80px 0 0; }
  .project-row,
  .project-row:nth-child(even) { padding: 40px 0 200px; justify-content: flex-start; }
  .project-row__figure { padding: 0 20px; }
  .project-row__numeral,
  .project-row:nth-child(even) .project-row__numeral { top: 40px; }
  .project-row__digit--second { transform: translate(-150%, -50%); }
  .project-row:nth-child(even) .project-row__digit--second { transform: translate(200%, -50%); }
  .project-row:nth-child(3) .project-row__digit--second { transform: translate(-180%, -50%); }
  .project-row:nth-child(5) .project-row__digit--second { transform: translate(-200%, -50%); }
  .project-row__caption { top: 60%; padding: 0 40px; }
  .project-row:nth-child(4) .project-row__caption { top: 55%; }
  .project-row:nth-child(6) .project-row__caption { top: 50%; }
  .project-row__inner,
  .project-row:nth-child(4) .project-row__inner,
  .project-row:nth-child(6) .project-row__inner { gap: 20px; padding-top: 40px; justify-content: flex-start; }
  .project-row__body { width: auto; gap: 20px; padding: 40px 40px 0 0; }
  .project-row__name-wrap { margin: -0.6em 0 -0.4em; }
}

/* --------------------------------------------------------------------------
   Underlined "Explore Project" style button
   -------------------------------------------------------------------------- */
.link-btn {
  display: inline-block;
  padding: 17px 0 5px;
  border-bottom: 1px solid var(--c-text);
  background: transparent;
  font-family: var(--f-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--c-text);
  transition: border-color 0.3s, color 0.3s;
}
.link-btn:hover, .link-btn:focus { color: var(--c-text); border-color: var(--c-accent); }

/* pill button (popup "Get in touch", form submit) */
.pill-btn {
  display: inline-block;
  padding: 14px 30px;
  border: 2px solid var(--c-text);
  border-radius: 80px;
  background: transparent;
  font-family: var(--f-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--c-text);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.pill-btn--light {
  border-color: var(--c-white);
  color: var(--c-white);
}
.pill-btn--light:hover { background: var(--c-white); color: var(--c-text); }
.pill-btn:hover { background: var(--c-text); color: var(--c-white); }

/* --------------------------------------------------------------------------
   Project pages
   -------------------------------------------------------------------------- */

/* ---- shared type roles ---- */
.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--c-grey-88);
}
.eyebrow-wrap { margin: 0 0 -0.3em; }

.display-1 {
  font-family: var(--f-display);
  font-size: var(--t-title-md);
  font-weight: 400;
  line-height: 1.13em;
  color: var(--c-text);
}
.display-2 {
  font-family: var(--f-display);
  font-size: var(--t-title-sm);
  font-weight: 400;
  line-height: 1.31em;
  color: var(--c-text);
}
.display-wrap { margin: -1em 0; }

.rule {
  width: 120px;
  height: 0;
  border-top: 1px solid var(--c-grey-77);
  margin: 0 auto;
  padding: 2px 0;
}
.rule--left { margin: 0; }
.rule--short { width: 100px; }
.rule--light { border-top-color: var(--c-white); }
@media (max-width: 1024px) { .rule { width: 80px; } }

.prose { color: var(--c-text); }
.prose p { margin: 0 0 0.9rem; }
.prose strong { font-weight: 700; }

/* the Elementor drop cap: 50px Cinzel, floated, 25px gutter */
.prose--dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 50px;
  line-height: 1;
  font-weight: 400;
  margin-inline-end: 25px;
  color: var(--c-ink-111);
}

/* ---- centred page hero ---- */
.page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 200px var(--gutter) 120px;
}
.page-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}
.page-hero__lede {
  width: 100%;
  max-width: 720px;
}
@media (max-width: 1024px) {
  .page-hero { gap: 20px; padding: 120px var(--gutter) 80px; }
}
@media (max-width: 767px) {
  .page-hero { padding: 120px var(--gutter) 60px; }
}

/* ---- full-bleed parallax band ---- */
.band {
  position: relative;
  min-height: 800px;
  overflow: hidden;
}
.band--spaced { margin: 160px 0; }
.band__layer {
  position: absolute;
  top: -12%;
  left: 0;
  right: 0;
  height: 124%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}
@media (max-width: 1024px) {
  .band { min-height: 70vh; }
  .band--spaced { margin: 80px 0; }
}

/* ---- 50 / 50 split rows ---- */
.split {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.split--spaced { margin: 160px 0; }
.split > * { width: 50%; min-width: 0; }

.split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 160px var(--gutter);
}
.split__text > * { min-width: 0; max-width: 100%; }
.split__text--center { align-items: center; justify-content: center; text-align: center; }

.split__media {
  position: relative;
  min-height: 50vw;
  overflow: hidden;
}
.split__media .band__layer { top: -12%; height: 124%; }

.split__figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--gutter) 90px;
  background: var(--c-white);
  overflow: hidden;
}
.split__figure img { max-width: 100%; margin: 0 auto; }

@media (max-width: 1024px) {
  .split--spaced { margin: 80px 0; }
  .split > * { width: 100%; }
  .split__text { padding: 80px var(--gutter); }
  .split__media { min-height: 70vw; }
  .split__figure { padding: 80px var(--gutter); }
}

/* ---- fact list (Role / Company / Period / Website) ---- */
.facts { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.fact__label {
  font-family: var(--f-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--c-grey-77);
}
.fact__value-wrap { margin: -0.5em 0; }
.fact__value {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--t-body-lh);
  color: var(--c-text);
}
.fact__value a { color: var(--c-text); }
.fact__value a:hover { color: var(--c-grey-88); }

/* facts laid out as an evenly spaced row (weave, unique, kids, anataka) */
.factbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 70px;
  padding: 100px var(--gutter);
}
.factbar__item { display: flex; flex-direction: column; gap: 15px; }
@media (max-width: 1024px) {
  .factbar { gap: 40px; padding: 60px var(--gutter); }
}

/* ---- headed note block ---- */
.note { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.note > * { min-width: 0; max-width: 100%; }
@media (max-width: 1024px) { .note { gap: 30px; } }

/* ---- image pair / grid rows ---- */
.pair {
  display: flex;
  flex-wrap: wrap;
  min-height: 70vh;
}
.pair > figure {
  width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8%;
}
.pair img { max-width: 100%; }
@media (max-width: 1024px) {
  .pair { min-height: 0; gap: 20px; padding: 80px var(--gutter); }
  .pair > figure { width: 100%; padding: 0; }
}
@media (max-width: 767px) {
  .pair { padding: 60px var(--gutter); }
}

/* a wrapped grid of images: two half-width, one full, two half-width */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 120px;
  padding: 120px;
}
.grid__cell { width: calc(50% - 60px); min-width: 0; }
.grid__cell--wide { width: 100%; }
.grid img { max-width: 100%; margin: 0 auto; }
@media (max-width: 1024px) {
  .grid { gap: 60px; padding: 60px var(--gutter); }
  .grid__cell { width: 100%; }
}

/* a simple centred stack of images */
.stack { display: flex; flex-direction: column; gap: 40px; padding: 100px 0; max-width: 1140px; margin: 0 auto; }
.stack--row { flex-direction: row; flex-wrap: wrap; }
.stack--row > * { flex: 1 1 0; min-width: 0; }
.stack img { max-width: 100%; margin: 0 auto; }
@media (max-width: 1024px) {
  .stack { padding: 60px var(--gutter); gap: 30px; }
  .stack--row { flex-direction: column; }
}

/* ---- slider (replaces the Elementor Slides widget) ---- */
.slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.slider__slide {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.slider__slide.is-active { opacity: 1; }

.slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--c-text);
  opacity: 0.2;
  transition: opacity 0.3s;
}
.slider__dot.is-active { opacity: 1; }

/* ---- key responsibilities ---- */
.keypoints {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 160px 20px 150px;
}
.keypoints__head { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.keypoints__list { display: flex; flex-direction: column; gap: 50px; }
.keypoint { display: flex; flex-wrap: wrap; gap: 40px; }
.keypoint__term,
.keypoint__desc { flex: 1 0 40%; min-width: 0; }
.keypoint__term {
  font-family: var(--f-display);
  font-size: var(--t-serif-lg);
  font-weight: 700;
  line-height: 1.62em;
  color: var(--c-text);
}
.keypoint__desc {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--t-body-lh);
  color: var(--c-text);
}
@media (max-width: 1024px) {
  .keypoints { gap: 40px; padding: 80px 40px 70px; }
  .keypoints__head { gap: 30px; }
  .keypoints__list { gap: 30px; }
  .keypoint { gap: 30px; }
}
@media (max-width: 767px) {
  .keypoints { gap: 30px; padding: 60px 20px 50px; }
  .keypoints__head { gap: 20px; }
  .keypoints__list { gap: 20px; }
  .keypoint { gap: 10px; }
  .keypoint__term, .keypoint__desc { flex: 1 0 100%; }
}

/* ---- previous / next project ---- */
.pagenav { display: flex; flex-wrap: wrap; }
.pagenav__link {
  width: calc(50% - 0.5px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 160px var(--gutter);
  transition: background-color 0.3s;
}
.pagenav__link > * { min-width: 0; max-width: 100%; }
.pagenav__link--prev { text-align: right; }
.pagenav__link--next { text-align: left; }
.pagenav__link:hover .pagenav__name { color: var(--c-grey-55); }
.pagenav__divider { width: 1px; background: var(--c-rule); }
.pagenav__label { color: var(--c-grey-88); }
.pagenav__name {
  font-family: var(--f-display);
  font-size: var(--t-title-sm);
  font-weight: 400;
  line-height: 1.31em;
  color: var(--c-ink-111);
  transition: color 0.3s;
}

.hairline {
  height: 1px;
  margin: 0 var(--gutter);
  background: var(--c-rule);
}

@media (max-width: 1024px) {
  .pagenav__link { gap: 20px; padding: 120px 20px 120px 40px; }
  .pagenav__link--next { padding: 120px 40px 120px 20px; }
}
@media (max-width: 767px) {
  .pagenav__link,
  .pagenav__link--next { padding: 100px 0; }
}

/* --------------------------------------------------------------------------
   Footer
   Four equal 22% columns that grow to fill the 1200px content band, exactly
   as the original container did.
   -------------------------------------------------------------------------- */
.site-footer { padding: 0 var(--gutter); }

.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 60px 0;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  flex: 1 0 22%;
  min-width: 0;
  gap: 20px;
}
.site-footer__col--links { gap: 10px; }

.site-footer__heading {
  font-family: var(--f-body);
  font-size: var(--t-strong);
  font-weight: 700;
  line-height: 1.1em;
  letter-spacing: 0;
  color: var(--c-text);
}

.site-footer__line { margin: -0.5em 0; }
.site-footer__line--last { margin: -0.5em 0 0; }

.site-footer__col p,
.site-footer__col a { color: var(--c-grey-88); }
.site-footer__col a:hover { color: var(--c-text); }

.site-footer__menu { display: flex; flex-direction: column; gap: 5px; }
.site-footer__menu a { display: block; padding: 0.1em 0; color: var(--c-grey-77); }
.site-footer__menu a:hover { color: var(--c-text); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  border-top: 1px solid var(--c-rule);
}
.site-footer__copy {
  flex: 1 0 auto;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--t-body-lh);
  color: var(--c-grey-88);
  text-align: center;
}

@media (max-width: 1024px) {
  .site-footer__cols { gap: 30px; padding: 35px 0 30px; }
  .site-footer__col { flex: 1 0 40%; }
}
@media (max-width: 767px) {
  .site-footer__cols { gap: 25px; padding: 40px 0 30px; }
  .site-footer__col { flex: 1 1 100%; }
  .site-footer__col--spacer { display: none; }
  .site-footer__bar { flex-direction: column; gap: 30px; }
}

/* --------------------------------------------------------------------------
   Popups (menu + contact)
   Entrance slideInUp / exit slideOutDown at 0.6s, matching the Elementor
   popup settings on the original (ids 36 and 33).
   -------------------------------------------------------------------------- */
.popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.popup.is-open,
.popup.is-closing { visibility: visible; }
.popup.is-open { pointer-events: auto; }

.popup__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}
.menu-popup .popup__panel { background: var(--c-black); }
.form-popup .popup__panel { background: var(--c-ink-111); }
.popup.is-open .popup__panel { animation-name: slideInUp; }
.popup.is-closing .popup__panel { animation-name: slideOutDown; }

@keyframes slideInUp {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes slideOutDown {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 100%, 0); }
}

/* close cross: two 37px rules crossed inside a 50px hit area, 80px from the
   top and 120px from the right */
.popup__close {
  position: absolute;
  top: 80px;
  right: 120px;
  width: 50px;
  height: 50px;
  z-index: 5;
}
.popup__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 37px;
  height: 1px;
  margin: -1px 0 0 -18.5px;
  background: var(--c-white);
  transition: background-color 0.3s;
}
.popup__close span:nth-child(1) { transform: rotate(45deg); }
.popup__close span:nth-child(2) { transform: rotate(-45deg); }
.popup__close:hover span { background: var(--c-grey-cc); }

@media (max-width: 1024px) {
  .popup__close { top: 40px; right: 40px; width: 44px; height: 44px; }
}
@media (max-width: 767px) {
  .popup__close { top: 20px; right: 20px; width: 40px; height: 40px; }
  .popup__close span { width: 30px; margin-left: -15px; }
}

/* ---- menu overlay ---- */
.menu-popup__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 20px;
}
.menu-popup__lists {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.menu-popup__list { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 10px; }
.menu-popup__list a {
  display: block;
  padding: 0.5em 0;
  font-family: var(--f-display);
  font-size: var(--t-title-sm);
  font-weight: 400;
  line-height: 20px;
  color: var(--c-grey-88);
  transition: color 0.3s;
}
.menu-popup__list a:hover { color: var(--c-white); }

.menu-popup__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: auto;
}
.menu-popup__foot .rule { flex: 1 0 100%; padding: 0; }
.menu-popup__foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  gap: 20px;
}
.menu-popup__foot-title { color: var(--c-white); }
.menu-popup__foot-col p {
  margin-bottom: 15px;
  font-size: var(--t-body);
  line-height: 1.5em;
  color: var(--c-grey-88);
}
.menu-popup__foot-col a { color: var(--c-grey-88); }
.menu-popup__foot-col a:hover { color: var(--c-white); }
.menu-popup__cta { padding-top: 10px; }
.menu-popup__cta .pill-btn { padding: 12px 24px; border-width: 1px; }

@media (max-width: 1024px) {
  .menu-popup__body { padding: 100px 40px 60px; }
  .menu-popup__lists { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .menu-popup__body { padding: 80px 20px 40px; }
  .menu-popup__lists { flex-direction: column; padding: 0; }
  .menu-popup__foot { gap: 30px; }
  .menu-popup__foot-col { flex: 1 1 100%; }
}

/* ---- contact overlay ---- */
.form-popup__body {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 140px 20px 200px;
}
.form-popup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.form-popup__title-wrap { margin: -0.72em 0; }
.form-popup__title {
  font-family: var(--f-display);
  font-size: var(--t-title-sm);
  font-weight: 400;
  line-height: 1.31em;
  color: var(--c-white);
}
.form-popup__card-row { display: flex; justify-content: center; }
.form-popup__card {
  width: 100%;
  max-width: 798px;
  padding: 60px;
  background: var(--c-white);
}

.contact-form {
  display: flex;
  flex-wrap: wrap;
  row-gap: 17px;
  margin: 0 -20px;
}
.contact-form__field { display: flex; flex-direction: column; width: 50%; min-width: 0; padding: 0 20px; }
.contact-form__field--full { width: 100%; }
.contact-form label {
  padding-bottom: 4px;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--t-body-lh);
  color: var(--c-grey-88);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--c-rule-soft);
  border-radius: 0;
  background: var(--c-white);
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--c-text);
}
.contact-form input { height: 47px; }
.contact-form textarea { height: 220px; padding: 8px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 0; border-color: var(--c-text); }
.contact-form__hp { position: absolute; left: -9999px; }
.contact-form__actions { width: 100%; padding: 0 20px; margin-top: 16px; }
.contact-form__submit {
  width: 100%;
  padding: 20px 45px;
  border: 1px solid var(--c-text);
  border-radius: 80px;
  background: transparent;
  font-family: var(--f-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--c-text);
  transition: background-color 0.3s, color 0.3s;
}
.contact-form__submit:hover { background: var(--c-text); color: var(--c-white); }
.contact-form__submit[disabled] { opacity: 0.5; cursor: default; }
.contact-form__msg { width: 100%; padding: 0 20px; margin: 0; color: var(--c-text); }

@media (max-width: 1024px) {
  .form-popup__body { padding: 120px 40px 120px; gap: 40px; }
  .form-popup__card { padding: 40px; }
}
@media (max-width: 767px) {
  .form-popup__body { padding: 100px 20px 80px; gap: 30px; }
  .form-popup__card { padding: 24px; }
  .contact-form__field { width: 100%; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.error404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 70vh;
  padding: 240px var(--gutter) 160px;
  text-align: center;
}
.error404__title {
  font-family: var(--f-display);
  font-size: var(--t-title-md);
  font-weight: 400;
  line-height: 1.13em;
  color: var(--c-text);
}
.error404__text { max-width: 560px; color: var(--c-grey-55); }

/* --------------------------------------------------------------------------
   Entrance animations - the fadeIn / zoomIn the original used inside popups
   -------------------------------------------------------------------------- */
.anim { opacity: 0; }
.anim.is-in { animation-duration: 1.25s; animation-fill-mode: both; opacity: 1; }
.anim[data-anim='fadeIn'].is-in  { animation-name: fadeIn; }
.anim[data-anim='zoomIn'].is-in  { animation-name: zoomIn; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50%  { opacity: 1; }
  to   { transform: scale3d(1, 1, 1); }
}

/* motion effects - matched to Elementor's own 100ms smoothing */
.mfx { will-change: transform; transition: transform 100ms linear; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mfx { transition: none; transform: none !important; }
  .anim { opacity: 1; }
  .anim.is-in { animation: none; }
  .popup__panel { animation: none !important; }
}

/* ==========================================================================
   Page-specific components
   Contributed alongside each project page; measured from the original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Weave project page
   Boxed 1140 rows the original built out of Elementor containers.
   -------------------------------------------------------------------------- */

/* the divider widgets on the project pages have no vertical padding */
.rule--flush { padding: 0; }

/* hero whose lower half is a boxed 1140 x 800 parallax photograph */
.page-hero--media { gap: 160px; padding: 200px var(--gutter) 0; }
.page-hero--media > * { width: 100%; max-width: 1140px; }
.page-hero--media .page-hero__head { gap: 40px; }
@media (max-width: 1024px) {
  .page-hero--media { gap: 80px; padding: 120px var(--gutter) 0; }
  .page-hero--media .page-hero__head { gap: 30px; max-width: 500px; }
}
@media (max-width: 767px) {
  .page-hero--media { gap: 60px; padding: 110px var(--gutter) 0; }
}

/* two-column intro: heading + rule on the left, drop-cap prose on the right */
.intro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 160px 0;
}
.intro-row > * { flex: 1 1 0; min-width: 0; }
/* the original keeps Elementor's 0.9rem paragraph rhythm, trailing margin and all */
.intro-row .prose p,
.intro-row .prose p:last-child { margin: 0 0 0.9rem; }
@media (max-width: 1024px) { .intro-row { gap: 20px; padding: 80px var(--gutter) 70px; } }
@media (max-width: 767px) {
  .intro-row { padding: 60px var(--gutter) 40px; }
  .intro-row > * { flex: 1 1 100%; }
}

/* weave and unique-by-fh: four equal columns that grow to share the row,
   and 160px of air before the first photograph */
.factbar--even .factbar__item { flex: 1 0 20%; }
.factbar--tail { margin-bottom: 160px; }
@media (max-width: 767px) { .factbar--tail { margin-bottom: 80px; } }

/* boxed two-up photograph row: one cell runs the full column width, the other
   is inset by 140px, and the shorter cell is centred against the taller one */
.duo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1140px;
  margin: 0 auto;
}
.duo--tail { padding-bottom: 160px; }
.duo__cell {
  display: flex;
  flex-direction: column;
  width: 550px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.duo__cell--tall { min-height: 800px; }
.duo__cell--inset { min-height: 400px; padding: 140px; }
@media (max-width: 1024px) {
  .duo { gap: 40px; padding: 0 var(--gutter); }
  .duo--tail { padding-bottom: 80px; }
  .duo__cell { width: calc(50% - 20px); }
  .duo__cell--tall { min-height: 0; }
  .duo__cell--inset { min-height: 0; padding: 0; }
}
@media (max-width: 767px) {
  .duo { gap: 30px; }
  .duo__cell { width: 100%; }
}

/* a single photograph, gutter to gutter */
.plate { padding: 160px var(--gutter); overflow: hidden; }
.plate img { width: 100%; }
@media (max-width: 1024px) { .plate { padding: 80px var(--gutter); } }
@media (max-width: 767px) { .plate { padding: 30px var(--gutter); } }

/* three photographs edge to edge inside the 1140 band */
.trio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 100px 0;
}
.trio > * { flex: 1 1 0; min-width: 0; overflow: hidden; }
@media (max-width: 1024px) { .trio { padding: 80px var(--gutter); } }
@media (max-width: 767px) {
  .trio { padding: 60px var(--gutter); gap: 20px; }
  .trio > * { flex: 1 1 100%; }
}

/* the weave slider is square and keeps its dots in the 30px below it */
.slider--square { aspect-ratio: 1 / 1; margin-bottom: 30px; }

/* weave keeps the closing grid two-up on tablet, it only stacks below 768 */
@media (max-width: 1024px) and (min-width: 768px) {
  .grid--pairs { gap: 40px; padding: 0 var(--gutter) 80px; }
  .grid--pairs .grid__cell { width: calc(50% - 20px); }
  .grid--pairs .grid__cell--wide { width: 100%; }
}
@media (max-width: 767px) {
  .grid--pairs { gap: 30px; padding: 0 var(--gutter) 60px; }
}

/* ---- hero variant: centred title over a boxed 1140 parallax band ---- */
.page-hero--band { gap: 160px; padding-bottom: 0; }
.page-hero--band .page-hero__head { gap: 40px; max-width: 1140px; }
.page-hero__band { width: 100%; max-width: 1140px; }
@media (max-width: 1024px) {
  .page-hero--band { gap: 80px; padding-bottom: 0; }
  /* the original narrows the title block to 500px on tablet */
  .page-hero--band .page-hero__head { gap: 30px; max-width: 500px; }
}
@media (max-width: 767px) {
  .page-hero--band { gap: 60px; padding: 110px var(--gutter) 0; }
  .page-hero--band .page-hero__head { max-width: none; }
  .page-hero__band { min-height: 50vh; }
}

/* ---- Elementor renders the divider widget 1px tall, with no padding ---- */
.rule--flush { padding: 0; }

/* ---- the Elementor drop cap is the h1 size (73.5px at 1440), not 50px ---- */
.prose--dropcap > p:first-of-type::first-letter { font-size: var(--t-title-md); line-height: 1.13em; }

/* ---- tighter leading on the intro subtitle (1.1em, not 1.31em) ---- */
.display-2--tight { line-height: 1.1em; }

/* ---- fact bar: four equal columns, 160px of air below ---- */
.factbar--even .factbar__item { flex: 1 1 0; min-width: 0; }
.factbar--spaced { margin-bottom: 160px; }

/* ---- boxed 1140 rows that keep two columns down to tablet ---- */
@media (max-width: 1024px) { .stack--keep-row { flex-direction: row; } }
@media (max-width: 767px) { .stack--keep-row { flex-direction: column; } }

/* intro row: subtitle + rule beside the lede paragraph */
.stack--lede { gap: 40px; padding-top: 160px; padding-bottom: 160px; }
@media (max-width: 1024px) {
  .stack--lede { gap: 20px; padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 767px) {
  .stack--lede { padding-top: 60px; padding-bottom: 60px; }
}

/* image rows: one cell runs the full column, the other sits inside 140px of air */
.stack--imgrow { align-items: center; gap: 40px; padding-top: 0; padding-bottom: 0; }
/* the inset cell's 140px padding is a hard floor under flex-basis:0, so size
   the two cells explicitly instead of letting them share the free space */
.stack--imgrow > * { flex: 0 0 auto; width: calc(50% - 20px); }
.stack--imgrow.stack--tail { padding-bottom: 160px; }
.stack__cell { position: relative; overflow: hidden; }
.stack__cell--tall { min-height: 800px; }
.stack__cell--inset { min-height: 400px; padding: 140px; }
@media (max-width: 1024px) {
  .stack--imgrow.stack--tail { padding-bottom: 80px; }
  .stack__cell--tall { min-height: 0; }
  .stack__cell--inset { padding: 0; }
}
@media (max-width: 767px) {
  .stack--imgrow { gap: 30px; }
  .stack--imgrow.stack--tail { padding-bottom: 0; }
  .stack--imgrow > * { flex: 0 0 auto; width: 100%; }
  .stack__cell--tall { min-height: 500px; }
}

/* ---- full-bleed single image with 160px of air above and below ---- */
.grid--tall { padding: 160px var(--gutter); }
.grid--tall .grid__cell { overflow: hidden; }
@media (max-width: 1024px) { .grid--tall { padding: 80px var(--gutter); } }
@media (max-width: 767px) { .grid--tall { padding: 30px var(--gutter); } }

/* ==========================================================================
   CSS requested by templates/mistimal.html
   Verified against jv-mirror/full-mistimal-1440.json: with sections A + B in
   place the rebuild's document height and every top-level section rect match
   the original exactly at 1440 (docH 7188 = 7188).
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. New classes. Purely additive, nothing else in style.css changes.
   -------------------------------------------------------------------------- */

/* mistimal centres its lede; ochnik's is left aligned, so this is a modifier */
.page-hero__lede--center { text-align: center; }

/* the 120px page-hero and Key Responsibilities dividers carry no vertical
   padding - only the 100px .rule--short inside .note does */
.rule--flat { padding: 0; }

/* one label + value pair inside .facts */
.fact { display: flex; flex: 1 1 auto; flex-direction: column; gap: 15px; }

/* the Elementor text editor keeps the theme's 0.9rem trailing paragraph
   margin, and the vertically centred .note block's height depends on it */
.prose--tail { margin-bottom: 0.9rem; }

/* mistimal spaces two of its split rows 120px apart, not the usual 160px */
.split--spaced-120 { margin: 120px 0; }

/* boxed 1140px row: white slider panel beside a full-height still image
   (section 6d107a7 - 50% panel, calc(50% - 20px) image, space-between) */
.boxrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1140px;
  margin: 0 auto;
}
.boxrow > .split__figure { width: 50%; }
.boxrow__media {
  display: flex;
  flex-direction: column;
  width: calc(50% - 20px);
  min-height: 800px;
  overflow: hidden;
}
.boxrow__media img { width: 100%; }
@media (max-width: 1024px) {
  .boxrow { gap: 40px; padding: 0 var(--gutter) 80px; }
  .boxrow__media { width: 40%; flex-grow: 1; min-height: 0; }
}
@media (max-width: 767px) {
  .boxrow { gap: 30px; padding: 0 var(--gutter); }
  .boxrow > .split__figure { order: 2; width: 100%; }
  .boxrow__media { order: 1; width: 100%; min-height: 50vh; }
}

/* REQUIRED - the hero head stacks eyebrow / title / rule with a 40px gap.
   Measured identically on ochnik, weave, unique-by-fh and mistimal:
   head is 140px tall = 11 + 40 + 48 + 40 + 1. Without this the three
   elements collapse together (64px instead of 140px). */
.page-hero__head { gap: 40px; }

/* REQUIRED - a fact row stacks its label and value with a 15px gap.
   Without it .fact__value-wrap's -0.5em top margin pulls the value up over
   the label. (The template currently also carries .factbar__item on each row
   so it renders correctly before this rule lands; that extra class can be
   dropped once .fact exists.) */
.fact { display: flex; flex-direction: column; gap: 15px; }

/* REQUIRED - sliders that sit inside a half-width .split__figure.
   The original slide height is calc(50vw - 240px), which at desktop equals
   the slide width (480px at 1440), so a 1:1 box is exact there; tablet and
   mobile use different formulas. The 30px bottom margin reserves the strip
   the pagination dots sit in, which is what makes the figure's content box
   510px tall and the whole row 720px, as measured on the original.
   The base .slider aspect-ratio of 3/4 matches no page in the mirror: with
   it the ochnik rows render 850px tall instead of 720px. Folding these
   values into .slider itself instead is also correct - weave uses the same
   calc(50vw - 240px) - in which case .slider--half becomes a no-op. */
.slider--half { aspect-ratio: 1 / 1; margin-bottom: 30px; }
@media (max-width: 1024px) { .slider--half { aspect-ratio: auto; height: calc(50vw - 80px); } }
@media (max-width: 767px) { .slider--half { aspect-ratio: 1 / 1; height: auto; } }

/* --------------------------------------------------------------------------
   Split project hero - parallax plate on one half, cream fact panel on the
   other. Anataka uses it; the original section is 100vh with a 50/50 split
   that only stacks on phones.
   -------------------------------------------------------------------------- */
.hero-split {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}
.hero-split > * { width: 50%; min-width: 0; }

.hero-split__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 120px;
  overflow: hidden;
}

/* the plate carries its own 60% black scrim, exactly as the original overlay did */
.hero-split__layer { background-position: top center; }
.hero-split__layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-black);
  opacity: 0.6;
}

.hero-split__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  text-align: right;
}
.hero-split__eyebrow,
.hero-split__title { color: var(--c-accent); }
.hero-split__rule {
  margin-inline: auto 0;
  border-top-color: var(--c-accent);
}
.hero-split__scroll { position: absolute; right: 120px; bottom: 40px; }

.hero-split__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  gap: 70px;
  padding: 160px 120px 80px;
  background: var(--c-accent);
}
.hero-split__fact {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1024px) {
  .hero-split { min-height: 0; }
  .hero-split__media { min-height: 50vh; padding: 160px 40px 60px; }
  .hero-split__scroll { right: 40px; bottom: 50px; }
  .hero-split__panel { gap: 40px; padding: 0 40px 40px; }
}
@media (max-width: 767px) {
  .hero-split > * { width: 100%; }
  .hero-split__media { padding: 120px 20px 60px; }
  .hero-split__head { text-align: center; }
  .hero-split__rule { width: 60px; margin-inline: auto; }
  .hero-split__scroll { display: none; }
  .hero-split__panel { gap: 30px; padding: 40px 20px; }
  .hero-split__fact { flex: 1 0 40%; width: auto; }
}

/* --------------------------------------------------------------------------
   Boxed 1140 content band - the Elementor "boxed" container used between the
   full-bleed rows on the project pages (100px 0 desktop, 80px tablet,
   60px phone, 40px / 20px gap).
   -------------------------------------------------------------------------- */
.band-boxed {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 100px 0;
}
.band-boxed__col { flex: 1 1 0; min-width: 0; }

/* a single image column, 40% of the band and centred */
.band-boxed__figure {
  flex: 0 0 40%;
  min-width: 0;
  margin-inline: auto;
  overflow: hidden;
}
.band-boxed__figure img { max-width: 100%; }

@media (max-width: 1024px) {
  .band-boxed { gap: 20px; margin: 0 var(--gutter); padding: 80px 0; }
}
@media (max-width: 767px) {
  .band-boxed { padding: 60px 0; }
  .band-boxed__col,
  .band-boxed__figure { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   Three equal full-height plates inside a boxed band (anataka).
   -------------------------------------------------------------------------- */
.triptych {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.triptych__plate {
  flex: 1 0 30%;
  min-width: 0;
  min-height: 86vh;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .triptych__plate { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   Image frame inside a .pair cell - clips the parallax slide, and grows to the
   row height the way the Elementor container did.
   -------------------------------------------------------------------------- */
.pair__frame { width: 100%; flex: 1 1 auto; overflow: hidden; }
/* some rows run one half edge to edge with no padding at all */
.pair > .pair__cell--bleed { padding: 0; }

/* --------------------------------------------------------------------------
   Prev / next hover reveal
   The original layers an absolutely positioned box over each half, the size
   of the half, carrying the target project's photo at 50% width anchored to
   the centre divider. It fades in on hover (0.3s) and, driven by an Elementor
   mouse-track motion effect, slides after the cursor - see main.js. The lag
   is this transition, copied from Elementor's own
   .elementor-motion-effects-element rule: 1s, cubic-bezier(0, .33, .07, 1.03).
   Nothing clips it: the original leaves overflow visible, so the photo runs
   past the edges of its half, and it paints over the label and project name.
   -------------------------------------------------------------------------- */
.pagenav__link { position: relative; }
.pagenav__reveal {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 50% auto;
  opacity: 0;
  transition: opacity 0.3s, transform 1s cubic-bezier(0, 0.33, 0.07, 1.03);
}
.pagenav__link--prev .pagenav__reveal { background-position: center right; }
.pagenav__link--next .pagenav__reveal { background-position: center left; }
/* The original triggers on the sliding layer itself, not on the half. */
.pagenav__reveal:hover { opacity: 1; }
@media (max-width: 767px) {
  .pagenav__reveal { background-position: center center; }
}

/* ---- split hero: copy on one half, an inset image on the other ---- */
.split--hero { min-height: 900px; }
.split--hero .split__text {
  position: relative;
  align-items: flex-end;
  justify-content: center;
  padding: 120px;
  text-align: center;
}
.split__head { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.split--hero .split__media {
  display: flex;
  min-height: 0;
  padding: 160px 120px 120px;
  background: var(--c-white);
}
.split__image {
  flex: 1 1 auto;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 1024px) {
  .split--hero { min-height: 0; }
  .split--hero .split__text { padding: 160px 40px 60px; text-align: right; }
  .split--hero .split__text .rule { margin-right: 0; }
  .split--hero .split__media { padding: 0; }
  .split--hero .split__image { min-height: calc(100vw - 80px); }
  .split--hero .hero__scroll { display: none; }
}
@media (max-width: 767px) {
  .split--hero .split__text { padding: 120px 20px 60px; text-align: center; }
  .split--hero .split__text .rule { margin: 0 auto; }
  .split--hero .split__image { min-height: 100vw; }
}

/* the scroll puck on a light half: rule-grey ring instead of white */
.scroll-puck--dark { border-color: var(--c-rule); }
.scroll-puck--dark .scroll-puck__ring text { fill: var(--c-grey-88); }

/* Elementor's "boxed" container: a 1140px content band centred inside the gutter */
.boxed { max-width: calc(1140px + var(--gutter) * 2); margin-inline: auto; }

/* a centred 900px column: rule + intro paragraph */
.lede {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  padding: 160px 0;
}
@media (max-width: 1024px) { .lede { gap: 30px; padding: 80px var(--gutter); } }
@media (max-width: 767px)  { .lede { gap: 20px; padding: 60px var(--gutter); } }

/* a band whose PNG sits at its own size instead of covering */
.band__layer--natural { background-size: auto; }

/* the second half of a pair as a photo panel instead of a figure */
.pair__media {
  width: 50%;
  min-width: 0;
  overflow: hidden;
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Corrections found while measuring the project pages against the original.
   These override the base rules above and apply to every page.
   ========================================================================== */

/* Elementor's dividers carry no vertical padding; only the 100px note rule on
   the project pages has a 2px gap, and that one opts in with .rule--pad. */
.rule { padding: 0; }
.rule--pad { padding: 2px 0; }
.rule--flush,
.rule--flat { padding: 0; }

/* Hello Elementor's paragraph rhythm is 0.9rem (14.4px), not 1.5em, and the
   last paragraph keeps its trailing margin too, which is 14px of every lede. */
.prose p { margin: 0 0 0.9rem; }

/* The drop cap letter inherits the h1 typography (73.5px Cinzel at 1440),
   not the 50px Elementor default. */
.prose--dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: var(--t-title-md);
  line-height: 1.13em;
  font-weight: 400;
  margin-inline-end: 25px;
  color: var(--c-ink-111);
}

/* An Elementor heading widget is a block, so the eyebrow must not inherit the
   31px body line box. */
.eyebrow { display: block; }

/* The parallax layer starts flush with the top of its frame and travels down. */
.band__layer { top: 0; height: 124%; }
.split__media .band__layer { top: 0; height: 124%; }

/* The page hero stacks eyebrow / title / rule on a 40px rhythm. */
.page-hero__head { gap: 40px; }

/* The Key Responsibilities heading is a full-width centred block. */
.keypoints__head > .display-wrap { width: 100%; }
.keypoints__title { width: 100%; text-align: center; }
.page-hero__lede--center { margin: 0 auto; }

/* A fact row: label over value, 15px apart. The rows grow to share the column
   content box rather than clustering, which is how the original spaces them. */
.fact { display: flex; flex-direction: column; gap: 15px; }
.facts { flex: 1 1 auto; gap: 0; }
.facts > .fact { flex: 1 0 auto; }
.facts--fill { flex: 1 1 auto; gap: 0; }

/* Every slider sits in a half-width figure: the original slide height is
   calc(50vw - 240px), which equals its width at desktop, plus a 30px strip
   for the pagination dots. */
.slider,
.slider--half,
.slider--square {
  aspect-ratio: auto;
  height: calc(50vw - 240px);
  margin-bottom: 30px;
}
@media (max-width: 1024px) {
  .slider, .slider--half, .slider--square { height: calc(50vw - 80px); }
}
@media (max-width: 767px) {
  .slider, .slider--half, .slider--square { height: calc(100vw - 40px); }
}

/* Elementor bullets are 5px on a 17px pitch, 10px below the slide. */
.slider__dots { bottom: -15px; gap: 12px; }
.slider__dot { width: 5px; height: 5px; }

/* Prev / next: 40px of air beside the centre divider, 20px at the screen edge,
   and the two halves stack on phones with Next first. */
@media (max-width: 1024px) {
  .pagenav__link { padding: 120px 40px 120px 20px; }
  .pagenav__link--next { padding: 120px 20px 120px 40px; }
}
@media (max-width: 767px) {
  .pagenav { padding: 0 var(--gutter); }
  .pagenav__link,
  .pagenav__link--next { width: 100%; padding: 100px 0; }
  .pagenav__link--prev { order: 3; }
  .pagenav__link--next { order: 1; }
  .pagenav__divider { order: 2; width: 100%; min-height: 1px; }
}

/* The image pair keeps two halves and its 8% inset down to 768. */
@media (max-width: 1024px) {
  .pair { min-height: 70vh; gap: 0; padding: 0; }
  .pair > figure { width: 50%; padding: 8%; }
}
@media (max-width: 767px) {
  .pair { min-height: 0; padding: 60px var(--gutter); gap: 20px; }
  .pair > figure { width: 100%; padding: 0; }
}

/* ---- project-page header: white bar with dark type on scroll -------------- */
.site-header__brand { flex: 0 1 auto; width: 30%; }
.site-header__brand-text {
  font-size: var(--t-serif-lg);
  line-height: 1.62em;
  color: var(--c-text);
}
.site-header--light.is-stuck { background: var(--c-white); }
.site-header--light .site-header__toggle span { background: var(--c-black); }

/* ---- tablet and mobile: the original keeps more of the desktop shape ------ */
@media (max-width: 1024px) {
  .split > * { width: 50%; }
  .split__figure { padding: 40px var(--gutter) 20px; }
  .split__media { min-height: 50vw; }
}
@media (max-width: 767px) {
  .split > * { width: 100%; }
  .split__figure { order: 2; }
  .split__media { min-height: 100vw; }
  .band { min-height: 50vh; }
  .rule { width: 60px; }
}

/* ---- last-mile box shapes, so the measured boxes match too ---------------- */
/* Elementor's heading widgets sit at the top of their row and never stretch. */
.keypoint > * { align-self: flex-start; }
.keypoint__desc { margin: 0; }
/* the prev / next name is a block, so its line box is the heading's, not the
   inherited body strut */
.pagenav__name { display: block; }
/* the copyright shrink-wraps and is centred by the bar, as in the original */
.site-footer__copy { flex: 0 1 auto; }

/* Four fact columns go two-up on a phone rather than crushing to 75px. */
@media (max-width: 767px) {
  .factbar--even { gap: 30px; padding: 40px var(--gutter); }
  .factbar--even .factbar__item { flex: 1 1 calc(50% - 15px); }
}

/* The stuck-header wordmark stays dark on the white project-page bar. */
.site-header--light.is-stuck .site-header__brand-text { color: var(--c-text); }

/* Elementor heading widgets are blocks; an inline label inherits the 31px
   body strut and makes every prev/next block 16px too tall. */
.pagenav__label,
.pagenav__name { display: block; }

/* A stacked .stack--row must not keep flex-basis 0, or every cell collapses. */
@media (max-width: 1024px) {
  .stack--row > * { flex: 0 1 auto; }
}

/* The negative heading margins relax to -0.5em below 1024 on the original. */
@media (max-width: 1024px) {
  .display-wrap { margin: -0.5em 0; }
}

/* Two-up image grids hold their 40% columns down to 768. */
@media (max-width: 1024px) {
  .grid__cell { width: calc(50% - 30px); }
  .grid__cell--wide { width: 100%; }
}
@media (max-width: 767px) {
  .grid { gap: 30px; padding: 0 var(--gutter) 60px; }
  .grid__cell,
  .grid__cell--wide { width: 100%; }
  .page-hero { padding: 110px var(--gutter) 50px; }
}

/* The pagination dots sit in the 30px strip below the slide, so the slider
   frame must not clip them; the slides are absolutely positioned anyway. */
.slider { overflow: visible; }
.slider__slide { overflow: hidden; }

/* The panel takes focus when a popup opens so keyboard users land inside it;
   it is a programmatic focus, so it should not paint a ring. */
.popup__panel:focus { outline: none; }

/* The Turnstile widget is interaction-only, so it usually renders nothing;
   give it the same 20px gutter as the form fields when it does appear. */
.cf-turnstile { width: 100%; padding: 0 20px; }
.cf-turnstile:empty { display: none; }

/* ==== OUTSTANDING kids CSS requests (the rest is already merged) ==== */

/* The kids hero stacks at tablet. Has to out-specify the later
   `@media (max-width:1024px){ .split > * { width: 50% } }`. */
@media (max-width: 1024px) {
  .split.split--hero > * { width: 100%; }
}

/* The photo panel keeps its half down to 768, like .pair > figure, then it
   absorbs whatever height is left inside the 70vh row. */
@media (max-width: 1024px) { .pair__media { width: 50%; min-height: 0; } }
@media (max-width: 767px)  { .pair__media { width: 100%; flex: 1 1 auto; min-height: 0; } }

/* Both kids pairs keep the 8% inset and the 70vh floor on phones. */
@media (max-width: 767px) {
  .pair--inset { min-height: 70vh; }
  .pair--inset > figure { padding: 8%; }
}

/* REPLACES the merged .stack--uneven block. A percentage gutter holds the
   original 45.307 / 8.893 / rest split at every width; the row only stacks
   below 768. The :last-child rule is needed because a later shared rule sets
   `.stack--row > * { flex: 0 1 auto }` at tablet. */
.stack--uneven { gap: 8.893%; }
.stack--uneven > :first-child { flex: 0 0 45.307%; }
.stack--uneven > :last-child { flex: 1 1 0; min-width: 0; }
@media (max-width: 1024px) {
  .stack--uneven { flex-direction: row; gap: 8.893%; padding: 80px var(--gutter); }
  .stack--uneven > :first-child { flex: 0 0 45.307%; }
  .stack--uneven > :last-child { flex: 1 1 0; }
}
@media (max-width: 767px) {
  .stack--uneven { flex-direction: column; gap: 0; padding: 60px var(--gutter); }
  .stack--uneven > :first-child,
  .stack--uneven > :last-child { flex: 0 1 auto; }
}

/* kids factbar: three uneven columns that become two 40% rows on phones */
.factbar__item--a { width: 19.078%; }
.factbar__item--b { width: 40.953%; }
.factbar__item--c { width: 20%; flex-grow: 1; }
@media (max-width: 1024px) { .factbar { padding: 80px var(--gutter); } }
@media (max-width: 767px) {
  .factbar { gap: 30px; padding: 40px var(--gutter); }
  .factbar__item--a,
  .factbar__item--b,
  .factbar__item--c { width: 40%; flex: 1 0 auto; }
}