/* Generated by scripts/build.mjs. Do not edit; edit src/components/*.css. */
/* portfolio-design-system 1.1.1 */

/* ==========================================================
   reset.css
   ========================================================== */
/* Reset and document defaults
   Lifted from portfolio 2.0 css/site.css at bdad858. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-snug);
}
a { color: inherit; text-decoration: none; }
/* Keyboard focus: visible on black and on the light mega-menu */
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  z-index: 300;
  background: var(--accent); color: var(--on-surface);
  padding: var(--space-12) var(--space-16);
  font-size: var(--type-14);
}
.skip-link:focus { top: 16px; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ==========================================================
   layout.css
   ========================================================== */
/* Container
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================
   type.css
   ========================================================== */
/* Type utilities
   Lifted from portfolio 2.0 css/site.css at bdad858. */

/* Utility text styles */
.eyebrow {
  font-size: var(--type-12);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--type-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.section-title {
  font-size: var(--type-44);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-64);
}

/* ==========================================================
   nav.css
   ========================================================== */
/* Nav, mega menu and mobile menu (markup injected by the site chrome)
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: var(--bg);
  color: var(--text);
  transition: background var(--dur-slow) ease, color var(--dur-slow) ease;
}
.nav__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: var(--weight-bold);
  font-size: var(--type-22);
  letter-spacing: var(--tracking-body);
}
.nav__logo svg { width: 26px; height: 26px; }
.logo-mark {
  display: inline-block;
  width: 26px; height: 27px;
  background: currentColor;
  -webkit-mask: url('/assets/site/logo-mask.webp') center / contain no-repeat;
  mask: url('/assets/site/logo-mask.webp') center / contain no-repeat;
}
.nav__links {
  display: flex;
  gap: 44px;
  font-size: var(--type-17);
  font-weight: var(--weight-regular);
}
.nav__links li { position: relative; }
.nav__links a, .nav__links button { padding: var(--space-12) 0; display: inline-block; min-height: 44px; }
.nav__utils {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-48);
  font-size: var(--type-17);
}
.nav__utils a, .nav__utils button { padding: var(--space-12) 0; min-height: 44px; display: inline-flex; align-items: center; }
.nav__utils .plus { margin-left: var(--space-8); font-weight: var(--weight-light); }
/* Mega menu */
.mega {
  position: absolute;
  top: var(--nav-h);
  left: 0; right: 0;
  background: linear-gradient(180deg, var(--surface-menu) 0%, var(--grey-150) 100%);
  color: var(--on-surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) ease, transform var(--dur-base) ease, visibility var(--dur-base);
  padding: 56px var(--gutter) var(--space-80);
}
.mega__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-40);
}
.mega__desc {
  margin-top: var(--space-40);
  font-size: var(--type-16);
  line-height: var(--leading-body);
  max-width: 430px;
}
.mega__list { margin-top: var(--space-36); }
.mega__list li { font-size: var(--type-20); margin-bottom: var(--space-12); }
.mega__list li::before { content: "+"; margin-right: var(--space-12); font-weight: var(--weight-light); }
.nav.is-open { background: var(--surface-menu); color: var(--on-surface); }
.nav.is-open .mega.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__links li.is-active > button {
  outline: 1px solid var(--black-35);
  outline-offset: 2px;
  color: var(--text-muted);
}
/* Mobile nav toggle */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  font-size: var(--type-24); line-height: var(--leading-none);
}
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  padding: var(--space-24) var(--gutter) var(--space-60);
  z-index: 99;
}
.nav__mobile.is-open { display: block; }
.nav__mobile-group { border-bottom: 1px solid var(--border); padding: var(--space-20) 0; }
.nav__mobile-group > a, .nav__mobile-group > button { font-size: var(--type-28); letter-spacing: var(--tracking-snug); display: block; text-align: left; }
.nav__mobile-group ul { margin-top: var(--space-12); }
.nav__mobile-group li { font-size: var(--type-17); color: var(--text-3); margin-bottom: var(--space-8); }
.nav__mobile-group li::before { content: "+"; margin-right: var(--space-10); }
/* Page blur when menu open */
main { transition: filter var(--dur-slow) ease; }
body.menu-open main { filter: blur(12px); }
@media (max-width: 768px) {
  .nav__links, .nav__utils, .nav__inner > nav { display: none; }
  .nav__toggle { display: flex; justify-self: end; }
  .nav__inner { grid-template-columns: 1fr auto auto; column-gap: var(--space-12); }
  .mega { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.menu-open main { filter: none; }
}

/* ==========================================================
   hero.css
   ========================================================== */
/* Hero, and the launch / ask buttons that sit in its meta row
   Lifted from portfolio 2.0 css/site.css at bdad858. */

/* Launch: the working app behind a case study. Sits in the hero meta row in
   the arrow's column, the one filled control on the page. */
.hero__action { justify-self: end; display: flex; gap: var(--space-12); flex-wrap: nowrap; }
.hero__launch, .hero__ask {
  display: inline-flex; align-items: center; gap: var(--space-10);
  min-height: 48px;
  padding: 0 var(--space-20);
  background: var(--accent); color: var(--on-surface);
  font-size: var(--type-15); font-weight: var(--weight-medium); line-height: var(--leading-none);
  white-space: nowrap;
  transition: background var(--dur-fast) ease;
}
.hero__launch-arrow { font-size: var(--type-17); line-height: var(--leading-none); transform: translateY(-1px); }
.hero__launch:hover { background: var(--accent-hover); }
.hero__launch:focus-visible { outline-color: var(--accent); }
/* Ask Nate: the outlined twin of the launch button; opens the drawer with this page's context */
.hero__ask {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
  font-family: inherit; cursor: pointer;
}
.hero__ask:hover { border-color: var(--white); }
.hero__ask:focus-visible { outline-color: var(--accent); }
.hero {
  padding-top: var(--nav-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero__title {
  font-size: var(--type-hero);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-crop);
  margin-top: clamp(120px, 18vh, 220px);
}
.hero__meta {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  column-gap: var(--space-40);
  align-items: start;
  margin-top: var(--space-60);
  margin-bottom: var(--space-60);
}
.hero__caption {
  font-size: var(--type-13);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  max-width: 500px;
}
.hero__arrow {
  justify-self: end;
  width: 28px; height: 28px;
}
.hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 120px 100%,
    linear-gradient(180deg, var(--grey-850), var(--grey-900));
  filter: grayscale(1) contrast(1.1);
  position: relative;
  overflow: hidden;
}
.hero__image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__image--placeholder::after {
  content: "HERO IMAGE";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--type-12);
  letter-spacing: var(--tracking-widest);
  color: var(--text-3);
}
@media (max-width: 768px) {
  .hero__title { font-size: var(--type-hero-sm); margin-top: var(--space-80); }
  .hero__meta { grid-template-columns: 1fr; gap: var(--space-24); }
  .hero__arrow { justify-self: start; }
  /* Wrap rather than widen: a nowrap pair of buttons set the column's minimum
     and pushed the page past a phone's width. */
  .hero__action { justify-self: start; flex-wrap: wrap; }
}

/* ==========================================================
   tabs.css
   ========================================================== */
/* Capabilities section and its tab strip
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.capabilities { padding-top: var(--space-160); padding-bottom: var(--space-120); }
.tabs {
  display: flex;
  gap: var(--space-36);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-40);
}
.tab {
  padding: var(--space-12) 0 var(--space-20);
  font-size: var(--type-17);
  color: var(--text-3);
  position: relative;
  transition: color var(--dur-base);
}
.tab.is-active { color: var(--text); }
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
}
@media (max-width: 768px) {
  .tabs { overflow-x: auto; }
  .tab { white-space: nowrap; }
}

/* ==========================================================
   slides.css
   ========================================================== */
/* Slide panels behind the tabs
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.slides { position: relative; }
.slides .slide { display: none; }
.slides .slide.is-active { display: grid; }
.slide {
  background: var(--surface-2);
  color: var(--on-surface);
  display: grid;
  grid-template-columns: 1fr 2.5fr 2fr;
  gap: var(--space-40);
  padding: var(--space-36);
  min-height: 400px;
}
.slide__counter { font-size: var(--type-13); font-weight: var(--weight-medium); }
.slide__num {
  font-size: var(--type-140);
  font-weight: var(--weight-regular);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-tightest);
  margin-top: auto;
  align-self: flex-start;
}
.slide__col { display: flex; flex-direction: column; }
.slide__desc {
  font-size: var(--type-24);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  margin-top: var(--space-24);
  max-width: 600px;
}
.slide__media {
  background: var(--grey-500);
  aspect-ratio: 16 / 9;
  align-self: start;
  display: grid; place-items: center;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--type-11);
  letter-spacing: var(--tracking-widest);
  color: var(--lime);
}
.slide__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) {
  .slide { grid-template-columns: 1fr; }
  .slide__num { font-size: var(--type-96); margin-top: var(--space-40); }
}

/* ==========================================================
   prose.css
   ========================================================== */
/* Narrative blocks between sections
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.prose {
  padding-top: var(--space-40);
  padding-bottom: var(--space-120);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-40);
}
.prose__label { font-size: var(--type-13); }
.prose__body { max-width: 72ch; font-size: var(--type-18); line-height: var(--leading-copy); }
.prose__body p + p { margin-top: 1.2em; }
.prose__body h3 {
  font-size: var(--type-22);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
  margin: 2em 0 0.6em;
}
.prose__body ul { padding-left: 1.2em; list-style: disc; }
.prose__body li { margin-bottom: 0.4em; }
.prose__body a { text-decoration: underline; text-underline-offset: 3px; }
.prose--light { background: var(--surface); color: var(--on-surface); }
@media (max-width: 768px) {
  .prose { grid-template-columns: 1fr; gap: var(--space-16); }
}

/* ==========================================================
   gallery.css
   ========================================================== */
/* Image grid, captions and the header row above a strip
   Lifted from portfolio 2.0 css/site.css at bdad858. */

/* Gallery (simple responsive image grid) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); /* min(): one column under a 320px container instead of overflowing */
  gap: var(--space-20);
  padding-bottom: var(--space-120);
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-800); }
.gallery figure.gallery--square img { aspect-ratio: 1 / 1; }
.gallery video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg); display: block; }
.gallery figcaption {
  font-family: var(--font-mono);
  font-size: var(--type-11);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: var(--space-10);
}
/* Gallery header row: project name + link above a strip of tiles */
.gallery__head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: var(--space-20);
  margin-top: var(--space-20);
}
.gallery__head h2 { font-size: var(--type-28); font-weight: var(--weight-regular); letter-spacing: var(--tracking-snug); }
.gallery__head a.eyebrow { color: var(--text-3); }
.gallery__head a.eyebrow:hover { color: var(--text); }
.gallery--work { padding-bottom: var(--space-40); }
.gallery--work:last-of-type { padding-bottom: var(--space-120); }

/* ==========================================================
   embed.css
   ========================================================== */
/* Click-to-load embed: a live app in a hairline frame
   Lifted from portfolio 2.0 css/site.css at bdad858. */

/* Click-to-load embed: a phone-sized live app in a hairline frame */
.embed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-40);
  align-items: center;
  padding-bottom: var(--space-120);
}
.embed__phone {
  position: relative;
  width: 390px;
  max-width: 100%;
  aspect-ratio: 390 / 844;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-phone);
  overflow: hidden;
  background: var(--bg);
}
.embed__phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.embed__load {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--scrim);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--type-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  cursor: pointer;
}
.embed__load:hover { background: var(--scrim-hover); }
.embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--accent); }
.embed__copy p { color: var(--text-2); font-size: var(--type-16); line-height: var(--leading-loose); max-width: 46ch; }
.embed__copy p + p { margin-top: var(--space-16); }
.embed__copy .eyebrow { display: inline-block; margin-top: var(--space-24); }
/* Wide variant for desktop apps: the frame is 16:9 and spans the row; copy sits below */
.embed--wide { grid-template-columns: 1fr; gap: var(--space-32); }
.embed--wide .embed__phone { width: 100%; max-width: none; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
.embed--wide .embed__copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); align-items: start; }
.embed--wide .embed__copy p { max-width: none; }
/* minmax(0, 1fr), not 1fr: a 1fr track grows to the 390px phone frame before
   its max-width: 100% can apply, which pushed the page past a phone's width. */
@media (max-width: 768px) { .embed { grid-template-columns: minmax(0, 1fr); } .embed--wide .embed__copy { grid-template-columns: 1fr; } }

/* ==========================================================
   pager.css
   ========================================================== */
/* Previous / next pager
   Lifted from portfolio 2.0 css/site.css at bdad858. */

/* Prev / next pager */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  padding-bottom: var(--space-120);
}
.pager a {
  padding: var(--space-40) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.pager a:last-child { text-align: right; border-left: 1px solid var(--border); padding-left: var(--space-40); }
.pager a:first-child { padding-right: var(--space-40); }
.pager__label { font-size: var(--type-13); color: var(--text-3); text-transform: uppercase; }
.pager__title { font-size: var(--type-28); letter-spacing: var(--tracking-snug); }
/* Pager with only a "next": keep it on the right */
.pager > span:empty { display: block; }
@media (max-width: 768px) {
  .pager { grid-template-columns: 1fr; }
  .pager a:last-child { text-align: left; border-left: 0; border-top: 1px solid var(--border); padding-left: 0; }
}

/* ==========================================================
   statement.css
   ========================================================== */
/* Full-width statement
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.statement {
  padding-top: var(--space-160);
  padding-bottom: var(--space-200);
  text-align: center;
}
.statement h2 {
  font-size: var(--type-statement);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-crop);
}
@media (max-width: 768px) {
  .statement h2 { font-size: var(--type-statement-sm); }
}

/* ==========================================================
   cards.css
   ========================================================== */
/* Product cards, spec rows and the pixel grid
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.products { padding-bottom: var(--space-160); }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}
.card {
  background: var(--surface);
  color: var(--on-surface);
  padding: var(--space-36);
  min-height: 790px;
  display: flex;
  flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
}
.card__title {
  font-size: var(--type-28);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}
.card__media {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-40) 0;
}
.card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-height: none;
}
.pixels {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  grid-auto-rows: 36px;
}
.pixels span { background: var(--p, transparent); }
.specs { border-top: 1px solid var(--on-surface-2); }
.spec {
  border-bottom: 1px solid var(--on-surface-2);
  padding: var(--space-10) 0 var(--space-12);
}
.spec__label {
  font-size: var(--type-13);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.spec__bar {
  height: 18px;
  background: var(--redact);
  width: var(--w, 40%);
}
.spec__value {
  font-size: var(--type-15);
  line-height: var(--leading-snug);
}
.card__body {
  font-size: var(--type-15);
  line-height: var(--leading-copy);
  padding: var(--space-24) 0 var(--space-32);
}
.card__body p + p { margin-top: var(--space-12); }
@media (max-width: 1100px) {
  .cards { grid-template-columns: 1fr; }
  .card { min-height: auto; }
}
@media (max-width: 768px) {
  .pixels { grid-template-columns: repeat(7, 26px); grid-auto-rows: 26px; }
}
/* Stat rows: number large, meaning small */
.spec--stat .spec__label {
  font-size: var(--type-40);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
  text-transform: none;
  margin-bottom: 6px;
}
.spec--stat .spec__value { font-size: var(--type-13); color: var(--text-muted); }
/* Four project cards on the home page */
.cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1360px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .cards--4 { grid-template-columns: 1fr; } }
.cards--8, .cards--9 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1360px) { .cards--8, .cards--9 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .cards--8, .cards--9 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .cards--8, .cards--9 { grid-template-columns: 1fr; } }

/* ==========================================================
   accordion.css
   ========================================================== */
/* Accordion rows
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.partners { padding-bottom: var(--space-200); }
.partners__intro {
  font-size: var(--type-18);
  line-height: var(--leading-snug);
  max-width: 900px;
  margin: -20px 0 140px;
}
.accordion { border-top: 1px solid var(--border); }
.acc {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-base), color var(--dur-base);
}
.acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: 18% 16% 1fr auto;
  grid-auto-flow: dense;
  align-items: center;
  padding: 34px 0;
  text-align: left;
}
.acc__plus {
  justify-self: center;
  font-size: var(--type-34);
  font-weight: var(--weight-extralight);
  line-height: var(--leading-none);
  transition: transform var(--dur-base);
}
.acc__plus { grid-column: 1; }
.acc__name { grid-column: 3; font-size: var(--type-22); letter-spacing: var(--tracking-snug); }
.acc__logo { grid-column: 4; }
.acc__logo {
  justify-self: end;
  font-size: var(--type-22);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-logo);
  text-transform: uppercase;
  padding-right: var(--space-40);
  white-space: nowrap;
}
.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) ease;
}
.acc__body > div { overflow: hidden; }
.acc__content {
  padding: 0 var(--space-40) var(--space-40) 34%;
  font-size: var(--type-16);
  line-height: var(--leading-copy);
  max-width: 900px;
}
.acc.is-open { background: var(--accent); color: var(--on-surface); }
.acc.is-open .acc__plus { transform: rotate(45deg); }
.acc.is-open .acc__body { grid-template-rows: 1fr; }
/* Lists and tables inside accordion rows */
.acc__content ul { padding-left: 1.2em; list-style: disc; margin: var(--space-12) 0; }
.acc__content li { margin-bottom: var(--space-4); }
.acc__content p + p { margin-top: var(--space-12); }
.acc__content table { width: 100%; border-collapse: collapse; margin: var(--space-16) 0; font-size: var(--type-14); }
.acc__content th, .acc__content td { text-align: left; vertical-align: top; padding: var(--space-10) var(--space-16) var(--space-10) 0; border-bottom: 1px solid var(--hairline); }
.acc__content th { font-size: var(--type-12); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
@media (max-width: 1100px) {
  .acc__head { grid-template-columns: 80px 0 1fr auto; }
  .acc__content { padding: 0 var(--space-40) var(--space-32) var(--space-80); }
}
@media (max-width: 768px) {
  .acc__head { grid-template-columns: 48px 0 1fr auto; }
  .acc__logo { display: none; }
  .acc__content { padding: 0 var(--space-48) var(--space-32); }
}

/* ==========================================================
   footer.css
   ========================================================== */
/* Footer
   Lifted from portfolio 2.0 css/site.css at bdad858. */

.footer {
  padding: var(--space-80) 0 var(--space-60);
  background: var(--bg);
  color: var(--text);
}
.footer__top {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  align-items: start;
  margin-bottom: var(--space-120);
}
.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: var(--weight-bold);
  font-size: var(--type-22);
}
.footer__logo svg { width: 26px; height: 26px; }
.footer__logo .logo-mark { width: 26px; height: 27px; }
.footer__col h4 {
  font-size: var(--type-13);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 52px;
}
.footer__col li { font-size: var(--type-20); margin-bottom: var(--space-8); }
.footer__bottom {
  display: grid;
  grid-template-columns: 5fr 1fr;
}
.footer__legal p {
  font-size: var(--type-13);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--space-20);
}
.footer__legal li {
  font-size: var(--type-13);
  color: var(--grey-100);
  margin-bottom: 2px;
}
.footer__contact h4 {
  font-size: var(--type-13);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-40);
}
.footer__contact a { font-size: var(--type-20); }
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-48); }
}
@media (max-width: 768px) {
  .footer__top, .footer__bottom { grid-template-columns: 1fr; gap: var(--space-48); }
}

/* ==========================================================
   lightbox.css
   ========================================================== */
/* Lightbox carousel (markup injected by the site chrome)
   Lifted from portfolio 2.0 css/site.css at bdad858. */

[data-lightbox] { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--overlay);
  display: none;
  grid-template-rows: auto 1fr auto;
  color: var(--text);
}
.lightbox.is-open { display: grid; }
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px var(--gutter);
}
.lightbox__counter { font-family: var(--font-mono); font-size: var(--type-12); letter-spacing: var(--tracking-caps); }
.lightbox__close { font-size: var(--type-32); line-height: var(--leading-none); font-weight: var(--weight-extralight); padding: 0 var(--space-8); }
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  min-height: 0;
}
.lightbox__img {
  max-width: min(100%, 1600px);
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}
.lightbox__img.is-square { aspect-ratio: 1 / 1; }
.lightbox__nav {
  position: absolute; top: 0; bottom: 0;
  width: 25%;
  display: flex; align-items: center;
  font-size: var(--type-40); font-weight: var(--weight-extralight);
  opacity: 0; transition: opacity var(--dur-base);
  padding: 0 var(--gutter);
}
.lightbox__nav:hover, .lightbox__nav:focus-visible { opacity: 1; }
.lightbox__nav--prev { left: 0; justify-content: flex-start; cursor: w-resize; }
.lightbox__nav--next { right: 0; justify-content: flex-end; cursor: e-resize; }
.lightbox__caption {
  padding: var(--space-24) var(--gutter) var(--space-36);
  font-family: var(--font-mono);
  font-size: var(--type-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  min-height: 72px;
}
body.lightbox-open { overflow: hidden; }
@media (max-width: 768px) {
  .lightbox__nav { opacity: 1; width: 20%; font-size: var(--type-28); }
  .lightbox__bar { padding: var(--space-16) var(--gutter); }
}

/* ==========================================================
   utilities.css
   ========================================================== */
/* Inline triggers that read as links
   Lifted from portfolio 2.0 css/site.css at bdad858. */

/* Inline triggers that read as links inside copy and spec rows */
.spec__action, .inline-action {
  text-decoration: underline; text-underline-offset: 0.2em;
  min-height: 44px; display: inline-flex; align-items: center;
}
.spec__action { font-size: inherit; }
.inline-action { min-height: 0; font: inherit; }