/* ============================================================================
   OBSIDIAN REALTORS
   Black ground, Italiana display caps, Poppins body.
   Editorial spacing in the Kamani register, with Obsidian's own identity.
   ========================================================================== */

:root {
  --black:      #000000;
  --panel:      #0B0B0B;
  --panel-2:    #101010;
  --raise:      #151515;

  --white:      #FFFFFF;
  --text:       #D8D8D8;   /* body, 12.6:1 on black */
  --text-dim:   #A8A8A8;   /* secondary, 7.4:1 */
  --text-faint: #8C8C8C;   /* tertiary, 5.1:1 */

  --line:       rgba(255,255,255,.16);
  --line-soft:  rgba(255,255,255,.09);
  --line-hard:  rgba(255,255,255,.38);

  --display: "Italiana", "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(22px, 4.3vw, 62px);
  --maxw: 1456px;
  --section: clamp(66px, 10vh, 132px);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-btn: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 84px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
figure { margin: 0; }
::selection { background: rgba(255,255,255,.2); }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #fff; color: #000; padding: 12px 18px;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 1020px; }
.wrap--mid { max-width: 1300px; }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 7vh, 92px); }
.center { text-align: center; }

.split-2 { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(24px, 4vw, 62px); align-items: start; }
.split-2--wide { grid-template-columns: 1fr 1fr; }

/* ------------------------------------------------------------ typography -- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.display-xl, .display-l, .display-m {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .19em;
  line-height: 1.24;
  color: var(--white);
  text-wrap: balance;
}
.display-xl { font-size: clamp(1.75rem, 3.9vw, 3.1rem); }
.display-l  { font-size: clamp(1.5rem, 2.9vw, 2.3rem); }
.display-m  { font-size: clamp(1.18rem, 1.8vw, 1.55rem); letter-spacing: .17em; }

.eyebrow {
  font-size: .75rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 16px;
}

.sub { color: var(--text); font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.72; margin: 0; }
.sub--wide { max-width: 72ch; }
.shead--center .sub--wide, .center .sub--wide { margin-inline: auto; }

.prose p { color: var(--text); margin: 0; max-width: 68ch; font-size: 1.02rem; }
.prose p + p { margin-top: 1.2em; }
.prose strong { color: var(--white); font-weight: 400; }
.prose h2 + p { margin-top: .8em; }
.prose__flag { color: var(--text-faint); font-size: .9rem; margin-top: 1.2em; }

.notice {
  margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--line-hard);
  color: var(--text-dim); font-size: .92rem; line-height: 1.6; max-width: 52ch;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 12px 26px;
  border: 1px solid var(--line-hard); border-radius: var(--radius-btn);
  background: transparent; color: var(--white);
  font-size: .9375rem; font-weight: 300; line-height: 1.2; text-align: center;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--white); color: #000; border-color: var(--white); }
.btn--solid { background: var(--white); color: #000; border-color: var(--white); }
.btn--solid:hover { background: transparent; color: var(--white); border-color: var(--line-hard); }
.btn--wide { width: 100%; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .875rem; }
.btn--ghost { border-color: var(--line); }
.btn svg { width: 16px; height: 16px; flex: none; }

.textlink {
  color: var(--text); font-size: 1rem;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.textlink:hover { color: var(--white); border-color: var(--white); }

.ctarow { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- header -- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.header.is-stuck {
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 24px; position: relative;
}

.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand__logo { width: clamp(126px, 10.5vw, 152px); height: auto; }
.footer .brand__logo { width: clamp(122px, 10vw, 146px); }

.nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(16px, 2.6vw, 42px);
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 12px 6px;
  font-size: 1rem; font-weight: 300; color: var(--white);
  opacity: .9; transition: opacity .3s var(--ease);
}
.nav__link:hover, .nav__item:hover .nav__link, .nav__link[aria-current="page"] { opacity: 1; }
.nav__caret { width: 9px; height: 6px; transition: transform .3s var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 246px;
  background: rgba(11,11,11,.98);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav__panel a {
  display: block; padding: 11px 14px; border-radius: 6px;
  font-size: .9375rem; color: var(--text);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.nav__panel a:hover { color: var(--white); background: rgba(255,255,255,.07); }
.nav__panel span { display: block; font-size: .78rem; color: var(--text-faint); margin-top: 2px; }

.header__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.burger {
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: none; cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 14px; width: 18px; height: 1px; background: var(--white);
  transition: transform .35s var(--ease);
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--black);
  padding: calc(var(--header-h) + 20px) var(--gutter) 40px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.drawer[hidden] { display: block; }          /* animated, not display-toggled */
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__group { border-top: 1px solid var(--line-soft); padding: 16px 0; }
.drawer__group:last-of-type { border-bottom: 1px solid var(--line-soft); }
.drawer__title {
  font-family: var(--sans); font-size: .75rem; font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px;
}
.drawer__group a {
  display: flex; align-items: center; font-size: 1.3rem; line-height: 1.6;
  color: var(--white); min-height: 48px;
}
.drawer__foot { margin-top: 28px; display: grid; gap: 12px; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden; background: var(--black);
  padding: 0;
}
.hero__frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; overflow: hidden; background: #060606;
}
.hero__video, .hero__frame img {
  width: 100%; height: 100%; object-fit: cover; background: #060606;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(66% 58% at 50% 48%, rgba(0,0,0,.72), rgba(0,0,0,.40) 66%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.3) 45%, rgba(0,0,0,.62));
}
/* The tagline is drawn into the artwork at exactly the wordmark's width, so
   there is nothing here for the browser to align and nothing that can drift when
   a webfont loads late. See hero_lockup.py. */
.hero__mark {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(64vw, 400px);
}
/* the lockup keeps its own restrained size; only the line beneath it is allowed
   the full width, so the tagline never breaks a word onto its own line */
/* One tight shadow that hugs the glyph edges. The pair of wide, heavy shadows
   that used to be here blurred the lockup's spread out ink into a soft dark
   rectangle, which read as a box sitting behind the logo on a bright frame. */
.hero__mark img { width: 100%; height: auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }

.hero__cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  display: grid; justify-items: center; gap: 10px; margin: 0;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.hero__cue i { width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,.7), transparent);
  animation: cue 2.6s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .35; }
                 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__cue i { animation: none; } }

/* page hero */
.phero { padding-top: calc(var(--header-h) + clamp(40px, 7vh, 84px)); }
.phero--project { padding-bottom: 0; }
.phero__dev { margin: 14px 0 0; color: var(--text); font-size: 1.02rem; }
.phero__brand { margin: 4px 0 0; color: var(--text-dim); font-size: .95rem; }

.crumbs { margin-bottom: 22px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .82rem; color: var(--text-faint); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-faint); }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--white); }

.project-hero { margin-top: clamp(28px, 4vw, 48px); }
.project-hero img { width: 100%; border-radius: var(--radius); }
.project-hero__cap { margin-top: 12px; font-size: .82rem; color: var(--text-faint); }

.storytop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 64px); align-items: end; }
.story-portrait { max-width: 520px; width: 100%; justify-self: end; }
.story-portrait img { border-radius: var(--radius); }
.story-portrait figcaption { margin-top: 12px; font-size: .85rem; color: var(--text-faint); }

/* ------------------------------------------------------------- quotecard -- */
.quotecard {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(30px, 4.6vw, 68px) clamp(22px, 4.6vw, 72px);
  max-width: 1120px; margin: 0 auto; text-align: center;
}
.quotecard__glyph {
  font-family: var(--display); font-size: 3.2rem; line-height: .6; color: var(--white);
  display: block; text-align: left; margin-bottom: 24px;
}
.quotecard__text {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .13em;
  font-size: clamp(1.05rem, 2.05vw, 1.75rem); line-height: 1.5; color: var(--white); margin: 0;
}
.quotecard__note {
  margin: 26px auto 0; padding-top: 24px; border-top: 1px solid var(--line-soft);
  color: var(--text); font-size: clamp(.95rem, 1.1vw, 1.04rem); line-height: 1.75; max-width: 60ch;
}
.quotecard__by {
  margin-top: 20px; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------- section -- */
.shead .textlink { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.shead { display: flex; align-items: center; justify-content: space-between; gap: 26px;
  margin-bottom: clamp(18px, 2.4vw, 28px); flex-wrap: wrap; }
.shead--center { text-align: center; margin-bottom: clamp(30px, 3.6vw, 50px); }

/* ----------------------------------------------------------------- cards -- */
.grid { display: grid; gap: 26px; list-style: none; margin: 0; padding: 0; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* The carousel scrolls inside its own box. Without this it inflates the
   document's scroll width, which puts the page a few pixels wider than the
   viewport on a phone and knocks the header out of alignment. */
.rail { position: relative; overflow: hidden; min-width: 0; }
.rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 26px) / 3);
  gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  list-style: none; margin: 0; padding: 0 0 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > li { scroll-snap-align: start; display: flex; min-width: 0; }
.rail__track > li > .card { width: 100%; }
.rail__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.rail__dots { display: flex; gap: 9px; }
.rail__dots button {
  flex: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.rail__dots button::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3); transition: background .3s var(--ease);
}
.rail__dots button.is-on::after { background: var(--white); }
.rail__arrow {
  flex: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,.75); display: grid; place-items: center;
  transition: color .3s var(--ease);
}
.rail__arrow:hover { color: var(--white); }
.rail__arrow[disabled] { opacity: .3; cursor: default; }
.rail__arrow svg { width: 15px; height: 24px; }

.card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.card:hover { border-color: var(--line); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__media { position: relative; aspect-ratio: 16/7; overflow: hidden; background: var(--panel-2); display: block; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 6px 11px; border-radius: 6px;
  background: rgba(0,0,0,.66); backdrop-filter: blur(6px);
  border: 1px solid var(--line-soft);
  font-size: .74rem; color: var(--white); line-height: 1.3;
}
.card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.card__title { font-family: var(--sans); font-size: 1.06rem; color: var(--white); font-weight: 400; line-height: 1.4; }
.card__title a { display: inline-flex; align-items: center; min-height: 44px; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__sub { margin: 0; font-size: .875rem; color: var(--text-dim); }
.card__loc { margin: 0; font-size: .84rem; color: var(--text-faint); }
.card__facts { margin: 12px 0 0; display: grid; gap: 5px; }
.card__facts div { display: flex; gap: 10px; font-size: .875rem; }
.card__facts dt { color: var(--text-faint); min-width: 96px; }
.card__facts dd { margin: 0; color: var(--text); }
.card__price { margin: 14px 0 0; font-size: 1rem; color: var(--white); }
.card__status { margin: 2px 0 0; font-size: .82rem; color: var(--text-faint); }
.card__note { margin: 12px 0 0; font-size: .85rem; color: var(--text-dim); line-height: 1.6; }
/* Whatever the column width, the price, the status line and the buttons are
   pinned to the foot of the card, so those three line up across a row even when
   the descriptions above them run to different lengths. */
.card--project .card__price { margin-top: auto; padding-top: 16px; }
.card--project .card__cta { margin-top: 0; }

/* Cards sitting side by side must line up row for row, so while they share a
   row the two variable blocks are held to a fixed number of lines. Once the
   grid stacks to one column there is nothing to line up against, and the text
   is allowed to run to its natural length instead of being cut. */
@media (min-width: 1081px) {
  .card--project .card__title { min-height: 2.8em; }
  .card--project .card__title a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.8em; align-items: flex-start;
  }
  .card--project .card__sub {
    min-height: 3.2em; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .card--project .card__loc {
    min-height: 1.6em; display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden;
  }
}
.card__cta { margin-top: auto; padding-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2; }

/* the Obsidian privacy plate, used when we hold no publishable image */
.plate {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 12px; padding: 20px; text-align: center;
  background:
    radial-gradient(70% 90% at 50% 30%, rgba(255,255,255,.055), rgba(255,255,255,0) 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, rgba(255,255,255,0) 2px 9px),
    var(--panel-2);
}
.card__media .plate__mark, .plate__mark {
  width: 26px; height: auto; object-fit: contain; opacity: .75; flex: none;
}
.plate__label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .19em;
  font-size: clamp(.82rem, 1.5vw, 1.02rem); color: var(--white);
}
.plate__sub { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.card--plate .card__media { aspect-ratio: 16/9; }

/* ------------------------------------------------------- asset classes ---- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat {
  position: relative; isolation: isolate;
  background: var(--panel); padding: 30px 28px 32px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .45s var(--ease), background .45s var(--ease),
              box-shadow .45s var(--ease), transform .45s var(--ease);
}
/* a soft lit edge, so each box reads as its own object on the black ground */
.cat::after {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; opacity: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.30), 0 12px 40px rgba(255,255,255,.06);
  transition: opacity .45s var(--ease);
}
.cat:hover, .cat:focus-within {
  background: var(--panel-2); border-color: transparent; transform: translateY(-2px);
}
.cat:hover::after, .cat:focus-within::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cat:hover { transform: none; } }
.cat__head { display: grid; gap: 5px; }
.cat__title {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .15em;
  font-size: 1.14rem; color: var(--white);
}
.cat__count { margin: 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); }
.cat__blurb { margin: 0; font-size: .94rem; color: var(--text); line-height: 1.68; }
.cat__areas {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cat__areas li {
  font-size: .78rem; color: var(--text-dim);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 11px;
}
.cat__cta { margin-top: auto; padding-top: 16px; }

.card__class {
  margin: 0 0 2px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
}

/* the request only statement on Private Mandates */
.statement {
  position: relative; isolation: isolate; text-align: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--panel); padding: clamp(34px, 5vw, 68px) clamp(24px, 4.6vw, 72px);
}
.statement::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 18px 60px rgba(255,255,255,.05);
}
.statement__lead { margin: 22px auto 0; max-width: 52ch; color: var(--white);
  font-size: clamp(1.04rem, 1.5vw, 1.2rem); line-height: 1.7; }
.statement__note { margin: 18px auto 0; max-width: 60ch; color: var(--text-dim);
  font-size: 1rem; line-height: 1.7; }

/* --------------------------------------------------------------- filters -- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 38px; }
.chip {
  min-height: 44px; padding: 10px 20px; border: 1px solid var(--line);
  border-radius: var(--radius-btn); background: transparent;
  font-size: .875rem; color: var(--text); cursor: pointer;
  transition: all .3s var(--ease);
}
.chip:hover { color: var(--white); border-color: var(--line-hard); }
.chip.is-on { background: var(--white); color: #000; border-color: var(--white); }
.is-hidden { display: none !important; }

/* ----------------------------------------------------------------- specs -- */
.specs { margin: 0; border-top: 1px solid var(--line-soft); }
.specs__row { display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.specs__k { font-size: .84rem; color: var(--text-faint); margin: 0; }
.specs__v { font-size: .95rem; color: var(--white); font-weight: 300; margin: 0; }

.checks { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--text); font-size: .98rem; }
.checks li::marker { color: var(--text-faint); }

/* ------------------------------------------------------------ reach/desks -- */
.reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  list-style: none; margin: clamp(34px,4vw,52px) 0 0; padding: 0; }
.reach__cell { border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 30px 26px 32px; text-align: center; background: var(--panel); }
.reach__city { font-family: var(--display); text-transform: uppercase; letter-spacing: .17em;
  font-size: 1.24rem; color: var(--white); }
.reach__kind { margin: 10px 0 0; font-size: .8rem; color: var(--text-faint);
  letter-spacing: .1em; text-transform: uppercase; }
.reach__note { margin: 14px 0 0; font-size: .92rem; color: var(--text); line-height: 1.65; }

/* -------------------------------------------------------------- partners -- */
.partners {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  list-style: none; margin: 0; padding: 0;
}
.partner {
  position: relative; isolation: isolate;
  background: var(--panel); min-height: 104px; display: grid; place-items: center;
  text-align: center; padding: 18px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color .45s var(--ease), background .45s var(--ease);
}
.partner::after {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; opacity: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.30), 0 10px 34px rgba(255,255,255,.06);
  transition: opacity .45s var(--ease);
}
.partner:hover { background: var(--panel-2); border-color: transparent; }
.partner:hover::after { opacity: 1; }
.partner span {
  font-size: 1rem; letter-spacing: .05em; color: var(--text); line-height: 1.4;
  transition: color .35s var(--ease);
}
.partner:hover span { color: var(--white); }
.partner img {
  max-width: 100%; height: auto; opacity: .78;
  transition: opacity .35s var(--ease);
}
.partner:hover img, .partner:focus-within img { opacity: 1; }

.brandblock { margin-top: clamp(40px, 5vw, 66px); padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--line-soft); }
.brandlist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.brandrow { background: var(--panel); display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 16px; padding: 18px 22px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color .4s var(--ease), background .4s var(--ease); }
.brandrow:hover { background: var(--panel-2); border-color: var(--line); }
.brandrow__b { color: var(--white); font-size: .96rem; }
.brandrow__p { color: var(--text-dim); font-size: .9rem; }

/* --------------------------------------------------------------- founder -- */
.founder {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.founder__card { border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; background: var(--panel); }
.founder__card img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.founder__text { max-width: 56ch; }
.founder__name { margin: 0; font-family: var(--display); text-transform: uppercase;
  letter-spacing: .16em; font-size: clamp(1.3rem, 2vw, 1.75rem); color: var(--white); }
.founder__role { margin: 8px 0 0; font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint); }
.founder__body { margin: 24px 0 0; color: var(--text); line-height: 1.8; }
.founder__act { margin-top: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* the founder page reuses the card with a caption bar under the portrait */
.founder__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px 20px; }
.founder__bar .founder__name { font-family: var(--sans); text-transform: none; letter-spacing: 0;
  font-size: 1.04rem; }
.founder__bar .founder__role { margin: 2px 0 0; font-size: .875rem; letter-spacing: 0;
  text-transform: none; color: var(--text-dim); }
.founder__icons { display: flex; gap: 6px; }
.founder__icons a { width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--text); transition: color .3s var(--ease); }
.founder__icons a:hover { color: var(--white); }
.founder__icons svg { width: 21px; height: 21px; }

/* article figure and the source list at the foot of every entry */
.entry__fig { margin: 0 0 clamp(28px, 3.4vw, 44px); }
.entry__fig img { width: 100%; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.entry__fig figcaption { margin-top: 12px; font-size: .84rem; color: var(--text-faint);
  line-height: 1.6; }
.sources { margin-top: clamp(38px, 4.4vw, 60px); padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line-soft); }
.sources__h { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em;
  font-size: 1.1rem; color: var(--white); }
.sources__list { margin: 22px 0 0; padding-left: 1.4em; display: grid; gap: 4px; }
.sources__list li { color: var(--text-faint); font-size: .94rem; line-height: 1.6; }
.sources__list li::marker { color: var(--text-faint); }
.sources__list a { color: var(--text-dim); border-bottom: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere;
  transition: color .3s var(--ease), border-color .3s var(--ease); }
.sources__list a:hover { color: var(--white); border-color: var(--line-hard); }
.sources__note { margin: 22px 0 0; font-size: .86rem; color: var(--text-faint); line-height: 1.65;
  max-width: 64ch; }
.entry .lede { margin: 22px 0 0; max-width: 62ch; }

.entry__nav { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.entry__nav a { min-height: 44px; display: inline-flex; align-items: center; max-width: 46%; }
.lede { font-size: 1.14rem; color: var(--white); line-height: 1.7; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--raise); padding: 2px 6px; border-radius: 4px; color: var(--text); }
@media (max-width: 620px) { .entry__nav a { max-width: 100%; } }

.pullquote { border-left: 1px solid var(--line-hard); padding-left: 22px; margin: 28px 0 0; }
.pullquote p { font-family: var(--display); text-transform: uppercase; letter-spacing: .11em;
  font-size: clamp(.92rem, 1.3vw, 1.1rem); line-height: 1.66; color: var(--white); margin: 0; }

/* -------------------------------------------------------- steps/timeline -- */
.steps, .pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  list-style: none; margin: 0; padding: 0; }
.step, .pcard { border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--panel); padding: 28px 24px 30px; }
.step__n, .pcard__n { font-family: var(--display); font-size: 1.5rem; color: var(--text-faint);
  letter-spacing: .1em; margin: 0; }
.step h3, .pcard h3 { margin: 14px 0 9px; font-family: var(--sans); font-weight: 400;
  font-size: 1.04rem; color: var(--white); }
.step p, .pcard p { margin: 0; font-size: .92rem; color: var(--text); line-height: 1.68; }

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.tl { display: grid; grid-template-columns: 210px 1fr; gap: clamp(16px, 3.6vw, 48px);
  padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line-soft); }
.tl__when { margin: 0; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); padding-top: 5px; }
.tl__what h3 { font-family: var(--sans); font-weight: 400; font-size: 1.06rem; color: var(--white); }
.tl__what p { margin: 8px 0 0; color: var(--text); max-width: 64ch; font-size: .98rem; }

/* --------------------------------------------------------------- journal -- */
.jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.jcard {
  position: relative; isolation: isolate;
  background: var(--panel); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color .45s var(--ease), background .45s var(--ease),
              transform .45s var(--ease);
}
.jcard::after {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; opacity: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.30), 0 12px 40px rgba(255,255,255,.06);
  transition: opacity .45s var(--ease);
}
.jcard:hover, .jcard:focus-within {
  background: var(--panel-2); border-color: transparent; transform: translateY(-2px);
}
.jcard:hover::after, .jcard:focus-within::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .jcard:hover { transform: none; } }
.jcard__media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--panel-2); }
.jcard__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease); }
.jcard:hover .jcard__media img { transform: scale(1.03); }
.jcard__body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jcard__meta { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); }
.jcard__title { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 1.06rem; line-height: 1.45; color: var(--white); }
.jcard__title a { display: inline-flex; align-items: center; min-height: 44px; }
.jcard__title a::after { content: ""; position: absolute; inset: 0; }
.jcard__sum { margin: 0; font-size: .92rem; color: var(--text); line-height: 1.66; }
.jcard__more { margin: auto 0 0; padding-top: 14px; }

/* -------------------------------------------------------------- contact --- */
.contact-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: grid; gap: 0; }
.contact-list span { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint); }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  overflow-wrap: anywhere;
  font-size: 1.06rem; color: var(--white); }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ form -- */
.formpanel { background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: clamp(24px, 3.2vw, 46px); }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__row > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: .82rem; color: var(--text-dim); }
.field__opt { color: var(--text-faint); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--radius-btn); padding: 13px 15px; min-height: 48px;
  font-size: 1rem; font-weight: 300; color: var(--white);
  -webkit-appearance: none; appearance: none;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aaa' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field select option { background: #101010; color: #fff; }
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--line-hard); background: rgba(255,255,255,.06);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea {
  border-color: #E88A8A;
}
.field__err { margin: 0; font-size: .82rem; color: #F0A6A6; }
.field--inline { flex: 1; }

.form__note { font-size: .84rem; color: var(--text-faint); line-height: 1.6; margin: 0; }
.form__note a { color: var(--text-dim); }
.form__status {
  margin: 14px 0 0; padding: 13px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-btn); background: var(--raise);
  font-size: .92rem; color: var(--white);
}
.form__status[data-tone="error"] { border-color: #E88A8A; color: #F4C6C6; }

/* ------------------------------------------------------------- newsletter -- */
.signup { position: relative; overflow: hidden; padding-block: clamp(58px, 8vh, 108px); }
.signup__glow {
  position: absolute; inset: -40% -10% auto -10%; height: 150%;
  background: radial-gradient(60% 42% at 30% 28%, rgba(255,255,255,.06), transparent 70%),
              radial-gradient(50% 40% at 78% 66%, rgba(255,255,255,.045), transparent 70%);
  pointer-events: none;
}
.signup__inner { position: relative; z-index: 2; text-align: center; }
.signup__inner .sub { margin-inline: auto; max-width: 62ch; margin-top: 16px; }
/* the field and the button are the same height and share a centre line, so the
   button does not float above the input it belongs to */
/* Grid rather than flex, because grid tracks decide the widths outright. With
   flex the input's own intrinsic width can win on some mobile browsers and leave
   it narrower than the button beneath it. Both controls take a fixed height so
   they match whether they sit side by side or stacked. */
.signup__form { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px; max-width: 620px; margin: 28px auto 0; align-items: center; }
.signup__form .field { min-width: 0; }
.signup__form .field input,
.signup__form .btn { height: 54px; min-height: 54px; width: 100%; }
.signup__inner .form__status { max-width: 620px; margin-inline: auto; text-align: left; }
.signup__inner .form__note { margin-inline: auto; max-width: 62ch; }

/* ---------------------------------------------------------------- footer -- */
.footer { padding-top: clamp(38px, 5vw, 66px); }
.footer__top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px); }
.fcol__h { font-size: 1rem; font-weight: 400; color: var(--white); margin: 0 0 16px;
  font-family: var(--sans); }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fcol a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  overflow-wrap: anywhere;
  font-size: .94rem; color: var(--text); transition: color .3s var(--ease); }
.fcol a:hover { color: var(--white); }
.fcol address, .fcol__note { font-size: .94rem; color: var(--text); line-height: 1.6; margin: 0; }
.fcol__note { color: var(--text-faint); margin-top: 10px; }
.footer__icons { display: flex; gap: 14px; margin-top: 4px; }
/* The legal links carry a 44px tap target that extends below their text. Bottom
   aligning against that put the logo visibly low, so this row is centred. */
.footer__bottom {
  margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line-soft);
  padding-block: 22px 32px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.footer__legal { display: grid; gap: 6px; text-align: right; font-size: .82rem; color: var(--text-dim); }
.footer__legal a { justify-self: end; }

/* --------------------------------------------------------------- whatsapp -- */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--white); color: #000; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  transition: transform .35s var(--ease);
}
.fab:hover { transform: translateY(-3px); }
.fab svg { width: 25px; height: 25px; }

/* ---------------------------------------------------------------- reveal -- */
.rv { opacity: 1; transform: none; }
html.js .rv { opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.no-io .rv, html.rv-safe .rv { opacity: 1 !important; transform: none !important; }
html.js .rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .14s; } .rv-d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------- large -- */
/* Above a laptop the page should read as a desktop layout, not a tablet layout
   stretched wide. The container, the gutter and the base type all step up. */
@media (min-width: 1440px) {
  :root { --maxw: 1620px; --gutter: clamp(52px, 3.6vw, 78px); }
  body { font-size: 17.5px; }
  .grid { gap: 30px; }
  .rail__track { grid-auto-columns: calc((100% - 2 * 30px) / 3); gap: 30px; }
  .cats { gap: 30px; }
}
@media (min-width: 1800px) {
  :root { --maxw: 1760px; }
  body { font-size: 18px; }
  .wrap--mid { max-width: 1420px; }
  .wrap--narrow { max-width: 1100px; }
  .quotecard { max-width: 1240px; }
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1280px) {
  .footer__top { grid-template-columns: 1.2fr repeat(2, 1fr); row-gap: 36px; }
  .partners { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1080px) {
  .partners { grid-template-columns: repeat(3, 1fr); }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
  .header__actions .btn { display: none; }
  .burger { display: block; }
  .steps, .pcards { grid-template-columns: repeat(2, 1fr); }
  .rail__track { grid-auto-columns: calc((100% - 26px) / 2); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .jgrid { grid-template-columns: repeat(2, 1fr); }
  .split-2, .split-2--wide { grid-template-columns: 1fr; }
  .specs__row { grid-template-columns: 160px 1fr; }
}
@media (max-width: 860px) {
  :root { --header-h: 72px; }
  .founder { grid-template-columns: 1fr; gap: 30px; }
  .storytop { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .story-portrait { justify-self: start; max-width: 420px; }
  .founder__card { max-width: 460px; margin-inline: auto; }
  .founder__text { max-width: none; text-align: center; margin-inline: auto; }
  .founder__act { justify-content: center; }
  .grid--2 { grid-template-columns: 1fr; }
  .reach { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; gap: 6px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__legal { text-align: left; }
  .footer__legal a { justify-self: start; }
  .brandrow { grid-template-columns: 1fr; gap: 4px; }
  .hero__mark { width: min(74vw, 300px); }
}
@media (max-width: 700px) {
  .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cats { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .steps, .pcards { grid-template-columns: 1fr; }
  .jgrid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .signup__form { grid-template-columns: minmax(0, 1fr); }
  .rail__track { grid-auto-columns: 86%; }
  .specs__row { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
  .card__facts dt { min-width: 84px; }
  .footer__top { grid-template-columns: 1fr; }
}