@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist WB";
  src: url("../fonts/urbanist-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Cairo WB";
  src: url("../fonts/cairo-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --wb-bone: #edeae3;
  --wb-paper: #f6f2e9;
  --wb-carbon: #151513;
  --wb-ink: #22211e;
  --wb-burgundy: #6b1825;
  --wb-brass: #a9895f;
  --wb-olive: #475044;
  --wb-page-bg: #151513;
  --wb-page-surface: #22211e;
  --wb-page-text: #edeae3;
  --wb-muted: #aaa79f;
  --wb-line: rgba(237, 234, 227, 0.18);
  --wb-nav-text: #edeae3;
  --wb-nav-dim: #aaa79f;
  --wb-nav-surface: #161411;
  --wb-nav-hover: #1f1d19;
  --wb-nav-line: #2c2a25;
  --wb-line-light: rgba(237, 234, 227, 0.26);
  --wb-pad: 24px;
  --wb-max: 1440px;
  --wb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --portfolio-acid: #c6f432;
  --portfolio-accent-text: var(--portfolio-acid);
  --portfolio-focus: var(--portfolio-acid);
  --portfolio-on-acid: #11110f;
  --wb-caption: #bdb9b0;
  --wb-nav-glass: rgb(22 20 17 / 0.88);
  --paper-rgb: 237 234 227;
  --wb-grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -1.65'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --wb-grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 1.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}

:root[data-theme="light"] {
  --wb-page-bg: #edeae3;
  --wb-page-surface: #f6f2e9;
  --wb-page-text: #22211e;
  --wb-muted: #6f6c65;
  --wb-line: rgba(34, 33, 30, 0.2);
  --wb-nav-text: #20221d;
  --wb-nav-dim: #51564a;
  --wb-nav-surface: #f0f1ed;
  --wb-nav-hover: #e7e9e2;
  --wb-nav-line: #cdd0c7;
  --portfolio-accent-text: #4b6500;
  --portfolio-focus: #4b6500;
  --wb-caption: #595a52;
  --wb-nav-glass: rgb(240 241 237 / 0.9);
  --paper-rgb: 32 34 29;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
main [id] { scroll-margin-top: 120px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.roll__out,
.roll__in {
  display: block;
  white-space: nowrap;
  will-change: transform;
}
.roll__in {
  position: absolute;
  inset: 0;
  transform: translateY(-100%);
}
body {
  margin: 0;
  color: var(--wb-page-text);
  background: var(--wb-page-bg);
  font-family: "Geist", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, blockquote, figure, dl, dd { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
::selection { color: var(--portfolio-on-acid); background: var(--portfolio-acid); }

h2,
h3,
.wb-home__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-stretch: 80%;
  letter-spacing: 0;
}

.field {
  position: fixed;
  z-index: 65;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}
.field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wb-grain {
  position: fixed;
  z-index: 70;
  inset: 0;
  pointer-events: none;
  background-image: var(--wb-grain-light), var(--wb-grain-dark);
  opacity: 0.11;
}

.wb-skip {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: var(--wb-carbon);
  background: var(--wb-bone);
  transform: translateY(-160%);
  transition: transform 180ms var(--wb-ease);
}
.wb-skip:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--portfolio-focus);
  outline-offset: 4px;
}

/* ---------- The shared top bar ----------
   The look lives in styles/bar.css (the body, nameplate, keys and dial). These
   are the base rules and tokens that main.css gives it on the other pages. */
.bar {
  --paper: var(--wb-nav-text);
  --paper-dim: var(--wb-nav-dim);
  --acid: var(--portfolio-acid);
  --accent-text: var(--portfolio-accent-text);
  --press: 90ms;
  --ease: var(--wb-ease);
  --f-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  position: fixed;
  z-index: 80;
  top: 24px;
  left: var(--wb-pad);
  right: var(--wb-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  font: 400 14px/24px var(--f-body);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar-brand {
  position: relative;
  display: grid;
  align-content: center;
  color: var(--paper);
  text-decoration: none;
}
.bar-brand::before {
  content: "";
  position: absolute;
  width: 3px;
  background: var(--acid);
}
.bar-brand__name { font: 600 18px/24px "Bricolage Grotesque", sans-serif; }
.bar-brand__role { color: var(--paper-dim); }
.bar-brand:hover .bar-brand__name { color: var(--accent-text); }
.bar-nav { position: relative; display: flex; align-items: center; }
.bar-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
@media (max-width: 767px) {
  .bar {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    min-height: 0;
    justify-content: center;
  }
  .bar-brand { position: fixed; top: 16px; left: var(--wb-pad); }
  .bar-nav { display: grid; width: 100%; }
}

/* (Old nav, no longer in the markup) Same nav as the home page: the name on its own, the links in a floating capsule */
.wb-nav {
  position: fixed;
  z-index: 80;
  top: 24px;
  left: var(--wb-pad);
  right: var(--wb-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  color: var(--wb-nav-text);
  font-size: 14px;
  pointer-events: none;
  transition:
    color 180ms var(--wb-ease),
    background-color 180ms var(--wb-ease),
    border-color 180ms var(--wb-ease),
    box-shadow 180ms var(--wb-ease);
}
.wb-nav > * { pointer-events: auto; }
.wb-home {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 48px;
  padding-left: 16px;
  color: var(--wb-nav-text);
  text-decoration: none;
}
.wb-home::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 0;
  width: 3px;
  background: var(--portfolio-acid);
}
.wb-home__name { font-size: 18px; line-height: 24px; font-weight: 650; }
.wb-home__role { color: var(--wb-nav-dim); font-size: 13px; line-height: 24px; }
.wb-home:hover .wb-home__name { color: var(--portfolio-accent-text); }
.wb-navlinks {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--wb-nav-line);
  border-radius: 999px;
  background: var(--wb-nav-glass);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.wb-navlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--wb-nav-dim);
  text-decoration: none;
  transition: color 90ms var(--wb-ease), background-color 90ms var(--wb-ease), border-color 90ms var(--wb-ease);
}
.wb-navlink:hover { color: var(--wb-nav-text); background: var(--wb-nav-hover); }
.wb-navlink--contact {
  margin-left: 8px;
  border-color: rgba(198, 244, 50, 0.3);
  background: rgba(198, 244, 50, 0.08);
  color: var(--portfolio-accent-text);
}
.wb-navlink--contact:hover { color: var(--portfolio-on-acid); background: var(--portfolio-acid); border-color: var(--portfolio-acid); }
.wb-navlink:active { color: var(--wb-nav-text); background: var(--wb-nav-line); }
/* The theme control is a real light switch. In the dark it sits down, with its little
   locator glowing so you can find it. In the light it is up and the locator goes out.
   The rocker follows the press at once; the room follows behind it. */
.theme-toggle {
  --plate-hi: #5d594f;
  --plate-lo: #3b3830;
  --rocker-lit: #79746a;
  --rocker-mid: #514d44;
  --rocker-dark: #2c2a24;
  --plate-edge: rgb(0 0 0 / 0.6);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}
[data-theme="light"] .theme-toggle {
  --plate-hi: #ffffff;
  --plate-lo: #e2e1d9;
  --rocker-lit: #ffffff;
  --rocker-mid: #f0efe9;
  --rocker-dark: #c9c7bd;
  --plate-edge: rgb(32 34 29 / 0.3);
}
.switch {
  position: relative;
  display: block;
  width: 24px;
  height: 36px;
  border-radius: 4px;
  background:
    radial-gradient(circle 1px at 50% 3px, rgb(0 0 0 / 0.45) 99%, transparent),
    radial-gradient(circle 1px at 50% calc(100% - 3px), rgb(0 0 0 / 0.45) 99%, transparent),
    linear-gradient(165deg, var(--plate-hi), var(--plate-lo));
  box-shadow:
    0 0 0 1px var(--plate-edge),
    0 2px 6px rgb(0 0 0 / 0.32),
    inset 0 1px 0 rgb(255 255 255 / 0.14);
  perspective: 44px;
  transition: filter 90ms cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-toggle:hover .switch { filter: brightness(1.14); }
.switch__rocker {
  position: absolute;
  inset: 7px 5px;
  overflow: hidden;
  border-radius: 2px;
  /* Off: the top stands proud and catches the light, the bottom is pressed in */
  background: linear-gradient(180deg, var(--rocker-lit), var(--rocker-mid) 48%, var(--rocker-dark) 52%, var(--rocker-mid));
  box-shadow: 0 0 0 1px var(--plate-edge);
  transform: rotateX(-20deg);
  transition: transform 90ms cubic-bezier(0.16, 1, 0.3, 1);
}
.switch__rocker::before {
  /* On: the same rocker, the other way up */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--rocker-mid), var(--rocker-dark) 48%, var(--rocker-lit) 52%, var(--rocker-mid));
  opacity: 0;
  transition: opacity 90ms linear;
}
.switch__locator {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #c6f432;
  box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.85);
  transition: background-color 90ms linear, box-shadow 90ms linear;
}
.theme-toggle[aria-checked="true"] .switch__rocker { transform: rotateX(20deg); }
.theme-toggle[aria-checked="true"] .switch__rocker::before { opacity: 1; }
.theme-toggle[aria-checked="true"] .switch__locator { background: rgb(32 34 29 / 0.22); box-shadow: none; }
.theme-toggle:active .switch__rocker { transform: rotateX(0deg); }
.wb-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 92svh;
  overflow: hidden;
  color: var(--wb-bone);
  background: var(--wb-carbon);
}
.wb-hero__image,
.wb-hero__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wb-hero__image { object-fit: cover; object-position: 50% 46%; }
.wb-hero__veil {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(21, 21, 19, 0.52), rgba(21, 21, 19, 0.1) 36%, rgba(21, 21, 19, 0.78) 82%, rgba(21, 21, 19, 0.94)),
    linear-gradient(90deg, rgba(21, 21, 19, 0.7), transparent 68%);
}
.wb-hero__content {
  position: relative;
  z-index: 2;
  align-self: end;
  width: min(920px, calc(100% - (var(--wb-pad) * 2)));
  margin: 0 var(--wb-pad) 56px;
}
.wb-hero h1 { width: min(760px, 100%); }
.wb-hero h1 img { width: 100%; height: auto; }
.wb-hero__line {
  max-width: 620px;
  margin-top: 24px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 550;
}

.wb-details {
  color: var(--wb-bone);
  background: var(--wb-carbon);
}
.wb-details__grid {
  display: grid;
  width: min(100%, var(--wb-max));
  margin-inline: auto;
  padding: 0 var(--wb-pad);
}
.wb-details__grid div {
  padding: 28px 0;
}
.wb-details__grid dt {
  color: var(--wb-bone);
  font-size: 13px;
  font-weight: 750;
}
.wb-details__grid dd {
  margin-top: 6px;
  color: var(--wb-bone);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 560;
}

.wb-section {
  width: min(100%, var(--wb-max));
  margin-inline: auto;
  padding: 96px var(--wb-pad);
}
.wb-section h2,
.wb-position h2,
.wb-architecture h2,
.wb-quote h2 {
  font-size: 48px;
  line-height: 1.02;
  font-weight: 780;
}
.wb-origin__story p + p { margin-top: 22px; }

.wb-intro__body {
  display: grid;
  gap: 40px;
}
.wb-intro h2 { max-width: 760px; }

.wb-quote {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 680px;
  color: var(--wb-bone);
  background: var(--wb-burgundy);
}
.wb-quote__mark {
  position: absolute;
  width: 560px;
  right: -100px;
  bottom: -180px;
  opacity: 0.1;
}
.wb-quote__content {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(100%, var(--wb-max));
  margin-inline: auto;
  padding: 96px var(--wb-pad);
}
.wb-quote h2 { margin-top: 20px; }
.wb-quote blockquote {
  max-width: 920px;
  margin-top: 56px;
  font-family: "Cairo WB", sans-serif;
  font-size: 34px;
  line-height: 1.8;
  font-weight: 620;
}
.wb-quote__translation {
  max-width: 720px;
  margin-top: 32px;
  color: rgba(237, 234, 227, 0.7);
  font-size: 18px;
}

.wb-section__head {
  display: grid;
  gap: 24px;
}
.wb-process .wb-section__head { display: block; }
.wb-process__title {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: none;
}
.wb-process__title span:last-child { text-align: right; }
.wb-phases {
  display: grid;
  gap: 0;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wb-line);
}
.wb-phases li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid var(--wb-line);
}
.wb-phases h3 { font-size: 20px; line-height: 1.4; }
.wb-phases p { max-width: 560px; color: var(--wb-muted); }

.wb-position {
  display: grid;
  gap: 56px;
  padding: 112px var(--wb-pad);
  color: var(--wb-bone);
  background: var(--wb-carbon);
}
.wb-position__copy {
  width: min(100%, var(--wb-max));
  margin-inline: auto;
}
.wb-position h2 { max-width: 1120px; font-size: 64px; }
.wb-position__answer {
  max-width: 1120px;
  margin-top: 12px;
  color: var(--wb-brass);
  font-size: 64px;
  line-height: 1.02;
  font-weight: 780;
}
.wb-origin__grid { display: grid; gap: 48px; }
.wb-origin__story h2 { max-width: 760px; }
.wb-origin__story p { max-width: 680px; margin-top: 32px; font-size: 19px; }
.wb-origin__image img { width: 100%; height: auto; }
.wb-origin figcaption,
.wb-gallery figcaption,
.wb-system figcaption {
  margin-top: 10px;
  color: var(--wb-caption);
  font-size: 13px;
  line-height: 1.4;
}

.wb-concept {
  overflow: hidden;
  background: var(--wb-page-surface);
}
.wb-concept__visible,
.wb-concept__under {
  padding: 72px var(--wb-pad);
}
.wb-concept__visible {
  display: grid;
  gap: 40px;
  width: min(100%, var(--wb-max));
  margin-inline: auto;
  align-items: center;
}
.wb-concept__copy h2 { font-size: 56px; line-height: 1.02; }
.wb-concept__visible > img {
  width: 100%;
  height: clamp(420px, 42vw, 620px);
  object-fit: cover;
  object-position: 50% 58%;
}
.wb-concept__under {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
  color: var(--wb-bone);
  background: var(--wb-carbon);
}
.wb-concept__under > *:first-child { justify-self: end; }
.wb-concept__under img { width: 180px; height: 180px; object-fit: contain; }
.wb-concept__under h3 { color: var(--wb-brass); font-size: 36px; line-height: 1.1; }

.wb-system { background: var(--wb-page-bg); }
.wb-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 240px;
  margin-top: 64px;
}
.wb-swatch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 18px;
  border-right: 1px solid rgba(237, 234, 227, 0.2);
}
.wb-swatch span { font-weight: 700; }
.wb-swatch b { font-size: 13px; font-weight: 500; }
.wb-swatch--bone { color: var(--wb-carbon); background: var(--wb-bone); border: 1px solid var(--wb-line); }
.wb-swatch--carbon { color: var(--wb-bone); background: var(--wb-carbon); }
.wb-swatch--burgundy { color: var(--wb-bone); background: var(--wb-burgundy); }
.wb-swatch--brass { color: var(--wb-carbon); background: var(--wb-brass); }
.wb-swatch--olive { color: var(--wb-bone); background: var(--wb-olive); }
.wb-system__images { display: grid; gap: 32px; margin-top: 80px; }
.wb-system__images figure { min-width: 0; }
.wb-system__images img { width: 100%; height: auto; background: var(--wb-paper); }
.wb-type { margin-top: 112px; padding-top: 64px; border-top: 1px solid var(--wb-line); }
.wb-type__head { display: grid; gap: 20px; max-width: 820px; }
.wb-type__head h3 { font-size: 44px; line-height: 1.05; }
.wb-type__head p { max-width: 680px; color: var(--wb-muted); font-size: 19px; }
.wb-type__grid { display: grid; gap: 32px; margin-top: 56px; }
.wb-type__grid figure { min-width: 0; }
.wb-type__grid img { width: 100%; height: auto; background: #e9e6df; }
.wb-type__grid figcaption { display: flex; justify-content: space-between; gap: 20px; }
.wb-type__grid figcaption span { color: var(--wb-muted); }
.wb-type__grid figcaption strong { font-weight: 700; }

.wb-architecture {
  padding: 104px var(--wb-pad);
  color: var(--wb-bone);
  background: var(--wb-burgundy);
}
.wb-architecture__head,
.wb-roles { width: min(100%, var(--wb-max)); margin-inline: auto; }
.wb-architecture h2 { max-width: 880px; }
.wb-roles { display: grid; gap: 36px; margin-top: 72px; }
.wb-roles article { padding: 28px 0; }
.wb-roles h3 { font-size: 32px; line-height: 1.1; }
.wb-roles p { max-width: 420px; margin-top: 16px; color: rgba(237, 234, 227, 0.72); }

.wb-gallery { display: grid; gap: 32px; margin-top: 64px; }
.wb-gallery figure { min-width: 0; }
.wb-gallery img { width: 100%; height: auto; background: #ddd7cb; }

.wb-outcome {
  display: grid;
  gap: 48px;
  padding: 112px var(--wb-pad);
  color: var(--wb-bone);
  background: var(--wb-olive);
}
.wb-testimonial {
  width: min(100%, var(--wb-max));
  margin-inline: auto;
}
.wb-testimonial blockquote {
  max-width: 1050px;
  color: var(--wb-bone);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.16;
}
.wb-testimonial figcaption {
  margin-top: 28px;
  color: rgba(237, 234, 227, 0.68);
  font-size: 15px;
}

.wb-footer {
  display: grid;
  gap: 20px;
  padding: 48px var(--wb-pad);
  color: var(--wb-bone);
  background: var(--wb-carbon);
  font-size: 14px;
}
.wb-footer a:not(.cta) { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-bottom: 1px solid var(--wb-line-light); }
.wb-footer a:not(.cta):hover { color: var(--portfolio-acid); border-color: var(--portfolio-acid); }
.wb-footer p { color: rgba(237, 234, 227, 0.48); }
.wb-footer__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(237, 234, 227, 0.72);
}
.wb-footer__contact a:not(.cta) { min-height: 44px; }
.wb-footer .cta { width: fit-content; }

.theme-pixels {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  pointer-events: none;
}
.theme-pixels > div { background: var(--portfolio-acid); opacity: 0; }

.js .wb-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 520ms var(--wb-ease), transform 520ms var(--wb-ease);
}
.js .wb-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 768px) {
  :root { --wb-pad: 48px; }
  .field {
    -webkit-mask-image: linear-gradient(90deg, transparent 0 28%, rgb(0 0 0 / 0.4) 55%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0 28%, rgb(0 0 0 / 0.4) 55%, #000 100%);
  }
  /* The nav does not change with the scroll: the capsule is its only container */
  .wb-nav {
    --wb-nav-text: #edeae3;
    --wb-nav-dim: #c1bdb3;
    --wb-nav-hover: rgb(237 234 227 / 0.12);
    --wb-nav-line: rgb(237 234 227 / 0.34);
    --portfolio-accent-text: #c6f432;
    color: var(--wb-nav-text);
  }
  .wb-hero__content { margin-bottom: 64px; }
  .wb-hero__line { font-size: 32px; }
  .wb-details__grid { grid-template-columns: 1.2fr 0.7fr 1fr; }
  .wb-details__grid div {
    min-width: 0;
    padding: 36px 32px;
    border-top: 0;
  }
  .wb-details__grid div:first-child {
    padding-left: 0;
  }
  .wb-section { padding-top: 120px; padding-bottom: 120px; }
  .wb-section h2,
  .wb-architecture h2,
  .wb-quote h2 { font-size: 64px; }
  .wb-intro__body,
  .wb-section__head { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); align-items: start; }
  .wb-phases { grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--wb-line); }
  .wb-phases li { grid-template-columns: 1fr; align-content: start; padding: 28px; border-right: 1px solid var(--wb-line); }
  .wb-position { padding-top: 144px; padding-bottom: 144px; }
  .wb-position h2,
  .wb-position__answer { font-size: 88px; }
  .wb-origin__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .wb-concept__visible { grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr); }
  .wb-concept__under { grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr); }
  .wb-type__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-roles { grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 6vw, 96px); }
  .wb-roles article { padding: 32px 0; }
  .wb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-gallery__wide { grid-column: 1 / -1; }
  .wb-gallery__tall { grid-row: span 2; }
  .wb-gallery__tall img { aspect-ratio: 2 / 3; object-fit: cover; }
  .wb-outcome { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr); }
  .wb-testimonial { grid-column: 1 / -1; }
  .wb-footer { grid-template-columns: 1fr 1fr; align-items: center; }
  .wb-footer > a:nth-of-type(2) { grid-column: 2; grid-row: 1; justify-self: end; }
  .wb-footer__contact { grid-column: 1 / -1; justify-self: center; }
  .wb-footer p { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .wb-footer { grid-template-columns: 1fr auto 1fr; }
  .wb-footer > a:nth-of-type(2) { grid-column: 3; }
  .wb-footer__contact { grid-column: auto; }
  .wb-footer p { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  :root { --wb-pad: 72px; }
  body { font-size: 18px; }
  .wb-hero__content { margin-left: 72px; margin-bottom: 72px; }
  .wb-section { padding-top: 144px; padding-bottom: 144px; }
  .wb-section h2,
  .wb-architecture h2,
  .wb-quote h2 { font-size: 72px; }
  .wb-quote blockquote { font-size: 42px; }
  .wb-phases { grid-template-columns: repeat(4, 1fr); }
  .wb-phases li { grid-template-columns: 1fr; min-height: 290px; }
  .wb-phases li p { grid-column: auto; }
  .wb-position h2,
  .wb-position__answer { font-size: 104px; }
  .wb-concept__visible,
  .wb-concept__under { padding: 96px 72px; }
  .wb-concept__copy h2 { font-size: 72px; }
  .wb-concept__under img { width: 220px; height: 220px; }
  .wb-system__images { gap: 48px; }
  .wb-gallery { grid-template-columns: repeat(12, 1fr); gap: 40px; }
  .wb-gallery figure { grid-column: span 6; }
  .wb-gallery__wide { grid-column: span 12 !important; }
  .wb-gallery__tall { grid-column: span 4 !important; grid-row: span 2; }
  .wb-gallery__tall + .wb-gallery__wide { grid-column: span 8 !important; }
  .wb-footer { padding-inline: 72px; }
}

@media (max-width: 767px) {
  :root { --wb-pad: 24px; --wb-mobile-gutter: 16px; }
  .wb-nav {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    min-height: 0;
    padding: 8px;
    border: 1px solid var(--wb-nav-line);
    border-radius: 4px;
    background: var(--wb-nav-surface);
  }
  .wb-home {
    position: fixed;
    top: 16px;
    left: var(--wb-pad);
  }
  .wb-navlinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 48px;
    width: 100%;
  }
  .wb-navlink { padding-inline: 8px; }
  .wb-navlink--contact { margin-left: 0; }
  .wb-home__name { font-size: 16px; }
  .wb-home__role { font-size: 12px; }
  .wb-hero { min-height: 100svh; }
  .wb-hero__image { object-position: 58% 50%; }
  .wb-hero__content { margin-bottom: 120px; }
  .wb-hero__line { font-size: 23px; }
  .wb-details__grid,
  .wb-phases,
  .wb-origin__grid,
  .wb-concept__visible,
  .wb-palette,
  .wb-system__images,
  .wb-type__grid,
  .wb-roles,
  .wb-gallery,
  .wb-footer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--wb-mobile-gutter);
  }
  .wb-details__grid { row-gap: 8px; }
  .wb-details__grid div { min-width: 0; padding-block: 24px; }
  .wb-details__grid div:nth-child(1),
  .wb-details__grid div:nth-child(2) { grid-column: span 2; }
  .wb-details__grid div:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
  .wb-details__grid dd { font-size: 17px; }
  .wb-section h2,
  .wb-architecture h2,
  .wb-quote h2 { font-size: 44px; }
  .wb-quote { min-height: 720px; }
  .wb-quote blockquote { font-size: 27px; line-height: 1.8; }
  .wb-phases {
    gap: 40px 16px;
    margin-top: 48px;
    border-top: 0;
  }
  .wb-phases li {
    grid-column: span 2;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
  }
  .wb-phases h3 { font-size: 19px; }
  .wb-phases p { font-size: 14px; line-height: 1.45; }
  .wb-position h2,
  .wb-position__answer { font-size: 48px; }
  .wb-origin__grid { row-gap: 40px; }
  .wb-origin__story { grid-column: 1 / -1; }
  .wb-origin__image { grid-column: 1 / -1; }
  .wb-concept__visible,
  .wb-concept__under { padding-top: 64px; padding-bottom: 64px; }
  .wb-concept__visible { gap: 16px; align-items: stretch; }
  .wb-concept__copy { grid-column: span 2; align-self: center; }
  .wb-concept__copy h2 { font-size: 44px; }
  .wb-concept__visible > img {
    grid-column: span 2;
    height: 280px;
  }
  .wb-concept__under {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .wb-concept__under > *:first-child { grid-column: span 1; justify-self: start; }
  .wb-concept__under > div { grid-column: 2 / -1; align-self: center; }
  .wb-concept__under img { width: 100%; height: auto; }
  .wb-concept__under h3 { font-size: 28px; }
  .wb-palette { row-gap: 16px; }
  .wb-swatch {
    grid-column: span 2;
    min-height: 112px;
    padding: 14px;
    border: 0;
  }
  .wb-swatch:last-child { grid-column: 1 / -1; min-height: 88px; flex-direction: row; align-items: flex-end; }
  .wb-system__images { row-gap: 16px; margin-top: 64px; }
  .wb-system__images figure { grid-column: span 2; }
  .wb-system__images figcaption { font-size: 11px; }
  .wb-type { margin-top: 80px; padding-top: 0; border-top: 0; }
  .wb-type__head h3 { font-size: 38px; }
  .wb-type__head p { font-size: 16px; }
  .wb-type__grid { row-gap: 32px; }
  .wb-type__grid figure { grid-column: span 2; }
  .wb-type__grid figcaption { display: grid; gap: 2px; font-size: 11px; }
  .wb-roles { row-gap: 40px; }
  .wb-roles article { grid-column: span 2; padding: 0; }
  .wb-roles article:last-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
  }
  .wb-roles article:last-child h3 { grid-column: span 2; }
  .wb-roles article:last-child p { grid-column: span 2; margin-top: 0; }
  .wb-roles h3 { font-size: 26px; }
  .wb-roles p { margin-top: 12px; font-size: 14px; line-height: 1.5; }
  .wb-gallery { row-gap: 40px; }
  .wb-gallery figure { grid-column: span 2; }
  .wb-gallery__wide { grid-column: 1 / -1 !important; }
  .wb-gallery figure:not(.wb-gallery__wide) img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .wb-gallery .wb-gallery__totes { grid-column: 1 / -1; }
  .wb-gallery figure.wb-gallery__totes img {
    aspect-ratio: 3508 / 2480;
    object-fit: contain;
  }
  .wb-gallery figcaption { font-size: 11px; }
  .wb-footer {
    row-gap: 24px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
  /* The keys are wider than the old text links, so on phones each gets its own row */
  .wb-footer > a:first-of-type { grid-column: 1 / -1; grid-row: 1; }
  .wb-footer__contact { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .wb-footer > a:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .wb-footer p { grid-column: 1 / -1; grid-row: 4; }
}


/* Scroll-scrubbed entrances (scripts/scrub.js): the scroll moves these
   directly, so no transition of their own may lag behind it */
.has-scrub [data-scrub] { transition: none !important; will-change: transform, opacity; }
/* what slides in from the edge never widens the page */
.has-scrub main { overflow-x: clip; }