/* ============================================================================
   COORDENADAS / XYZ — shared component layer
   v1 — load AFTER brand.css:

     <link rel="stylesheet" href="/brand/v1/brand.css">
     <link rel="stylesheet" href="/brand/v1/chrome.css">
     <link rel="stylesheet" href="your-site.css">

   Nav, footer, buttons, cards, grids, filters and the section furniture that
   makes these sites read as one family.

   GENERATED — edit styles.css, then re-run
   tools/build-chrome.py. Do not hand-edit this file.
   ========================================================================= */

.ul{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* noise overlay */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 1;
  background-image: url("assets/img-noise-361x370.png");
  background-size: 361px 370px;
  opacity: .035;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .grain{ mix-blend-mode: screen; opacity: .05; }

/* ---------- NAV ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 14px var(--pad);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav__mark{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-sans);
}
.mark-xyz{ width: 28px; height: 28px; fill: var(--ink); }
.nav__wordmark{ line-height:1; display:flex; flex-direction:column; gap:2px; }
.nav__wordmark span{ font-weight: 600; letter-spacing: -.01em; font-size: 15px; }
.nav__wordmark em{ font-family: var(--f-mono); font-style: normal; font-size: 10px; color: var(--ink-3); letter-spacing:.08em; text-transform: uppercase; }

.nav__links{ display:flex; gap: 22px; justify-self:center; }
.nav__links a{
  font-size: 13px; font-weight: 500; letter-spacing:-.005em;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--tr-fast), color var(--tr-fast);
}
.nav__links a:hover{ border-color: var(--ink); }

.nav__utils{ display:flex; align-items:center; gap: 14px; }
.lang{ display:flex; gap:1px; padding:2px; border:1px solid var(--rule); border-radius: 999px; }
.lang button, .lang a{
  padding: 4px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing:.05em;
  border-radius: 999px; color: var(--ink-3);
}
.lang a{ text-decoration: none; line-height: 1; }
.lang button.is-active, .lang a.is-active{ background: var(--ink); color: var(--bg); }

.theme-toggle{ width: 28px; height: 28px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center; }
.theme-toggle .dot{ width: 14px; height:14px; border-radius:50%; background: var(--ink); box-shadow: inset -4px -4px 0 0 var(--bg); transition: transform .4s ease; }
[data-theme="dark"] .theme-toggle .dot{ transform: rotate(180deg); }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height: calc(100vh - 60px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 40px var(--pad) 0;
  gap: 36px;
  border-bottom: 1px solid var(--rule);
}
.hero__meta{ display:flex; justify-content: space-between; gap:16px; }
.hero__meta .tick{ display:flex; gap: 18px; color: var(--ink-3); }

.hero__stage{
  position: relative;
  display: grid;
  place-items: center;
  /* Same 54vh as before on laptops; the cap only lifts on tall displays,
     so the mark can grow on a 4K screen without shifting anything below. */
  min-height: min(54vh, 720px);
  padding: 20px 0;
}
/* ---------- INTERACTIVE HERO MARK ----------
   Two stacked layers sharing one viewBox: a decorative point cloud that
   assembles and dissolves (public/assets/xyz-cloud.svg, cached across all
   three languages) and the letters, which are real links — X → Serviços,
   Y → HBIM, Z → Arquitectura. */
.mark-big{
  position: relative;
  /* Scales with the viewport in both axes: 30vw keeps it proportional on wide
     screens, 48vh keeps it inside the 54vh stage on short ones, and the two
     bounds stop it shrinking on phones or ballooning past 660px on 4K.
     Both layers are vector, so it stays crisp at any size. */
  width: clamp(180px, min(30vw, 48vh), 660px);
  aspect-ratio: 1;
  color: var(--ink);
}
/* An img-loaded SVG cannot read the page's custom properties, so the cloud
   ships as #111 ink and dark mode inverts it, as the figures above do. */
.mark-cloud{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}
[data-theme="dark"] .mark-cloud{ filter: invert(1); }

.mark-letters{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.mark-letters .ltr{ cursor: pointer; outline: none; }
.mark-letters .hit{ fill: transparent; pointer-events: all; }
.mark-letters .lp{
  fill: var(--ink);
  transform-box: fill-box; transform-origin: center;
  animation: letterIn .85s cubic-bezier(.2,.7,0,1) backwards;
  transition: fill var(--tr), stroke var(--tr);
}
/* Letters land just as the cloud starts to dissolve. */
.mark-letters .lp1{ animation-delay: 3.55s; }
.mark-letters .lp2{ animation-delay: 3.70s; }
.mark-letters .lp3{ animation-delay: 3.90s; }
.mark-letters .lp4{ animation-delay: 4.10s; }
@keyframes letterIn{ from{ opacity: 0; transform: scale(1.055); } }

.mark-letters .ltr:hover .lp,
.mark-letters .ltr:focus-visible .lp{ fill: var(--accent); }
.mark-letters .ltr:focus-visible .lp{ stroke: var(--accent); stroke-width: .12; }
.mark-letters:has(.ltr:hover) .ltr:not(:hover) .lp,
.mark-letters:has(.ltr:focus-visible) .ltr:not(:focus-visible) .lp{ fill: var(--ink-3); }

.mark-letters .cap{
  font-family: var(--f-mono); font-size: .9px; font-weight: 500; letter-spacing: .12em;
  fill: var(--accent); text-anchor: middle;
  opacity: 0; transition: opacity .35s cubic-bezier(.2,.7,0,1);
  pointer-events: none;
}
.ltr-x:hover ~ .cap-x, .ltr-x:focus-visible ~ .cap-x,
.ltr-y:hover ~ .cap-y, .ltr-y:focus-visible ~ .cap-y,
.ltr-z:hover ~ .cap-z, .ltr-z:focus-visible ~ .cap-z{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .mark-letters .lp{ animation-duration: .01s; animation-delay: 0s; }
}
.morph__trigger{
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: none; /* legacy — unused after hero redesign */
}
.morph__trigger .sep{ opacity: .5; }
.morph__trigger:hover{ border-color: var(--ink); }

.hero__statement{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 8px;
}
.hero__statement h1{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.025em;
  font-size: clamp(32px, 5.2vw, 78px);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.hero__statement h1 em{ font-style: italic; color: var(--accent); }
.hero__statement .lede{
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--ink-2);
  max-width: 42ch;
  margin: 0 0 18px 0;
  line-height: 1.55;
  text-wrap: pretty;
}
.hero__ctas{ display:flex; gap:12px; flex-wrap: wrap; }
.btn{
  display: inline-flex; align-items:center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  transition: border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.btn:hover{ border-color: var(--ink); }
.btn--primary{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--primary:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent{ border-color: var(--accent); color: var(--accent); }
.btn--accent:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }

.hero__strip{
  display: flex; flex-wrap: wrap; gap: 32px;
  padding: 14px 0; border-top: 1px solid var(--rule);
  color: var(--ink-3);
}

/* ---------- SECTION HEAD ---------- */
section{ padding: clamp(60px, 8vw, 120px) var(--pad); border-bottom: 1px solid var(--rule); position: relative; }

.section-head--maxim{
  padding-bottom: 24px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.maxims{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.maxim{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.maxim .tag{ color: var(--ink-3); }
.maxim__txt{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.1;
  font-style: italic;
  color: var(--ink);
}

.section-head{
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 48px;
  align-items: start;
  padding-bottom: 48px;
}
.section-head__l{ display:flex; flex-direction: column; gap: 12px; }
.section-head h2{
  font-family: var(--f-display);
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 400;
  letter-spacing: -.022em;
  margin: 0;
  line-height: 1.02;
  text-wrap: balance;
}
.section-lede{
  font-size: clamp(14px, 1.05vw, 17px);
  color: var(--ink-2);
  max-width: 52ch; margin: 8px 0 0;
  line-height: 1.55;
}
.tag{ color: var(--ink-3); }

.section-head__loader{
  align-self: end;
  justify-self: end;
  display: grid;
  place-items: center;
  padding-bottom: 4px;
}
.morph-loader{
  width: 48px; height: 48px;
  color: var(--ink);
  animation: ml-spin 9s linear infinite;
}
.ml__p{ transform-origin: 115.6px 133.7px; transform-box: fill-box; }
.ml__p--1{ animation: ml-1 3.2s ease-in-out infinite; }
.ml__p--2{ animation: ml-2 3.2s ease-in-out infinite; }
.ml__p--3{ animation: ml-3 3.2s ease-in-out infinite; }
.ml__p--4{ animation: ml-4 3.2s ease-in-out infinite; }
@keyframes ml-spin{ to{ transform: rotate(360deg); } }
@keyframes ml-1{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(0,-1px); } }
@keyframes ml-2{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(0, 1.5px); } }
@keyframes ml-3{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-1px,-.5px); } }
@keyframes ml-4{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate( 1px, .5px); } }

/* ---------- PROJECTS ---------- */
.projects__bar{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 58px; z-index: 20;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  margin-bottom: 32px;
}
.filters{ display: flex; gap: 4px; flex-wrap: wrap; }
.filter{
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  display: inline-flex; align-items:center; gap: 8px;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.filter .count{ font-family: var(--f-mono); font-size: 10px; opacity: .7; }
.filter:hover{ color: var(--ink); }
.filter.is-active{ background: var(--ink); color: var(--bg); }
.filter.is-active .count{ opacity: .7; }

.density{ display: inline-flex; gap: 2px; }
.density button{ padding: 6px 8px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing:-.04em; }
.density button.is-active{ color: var(--ink); }

.grid{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--grid-gap);
}
body[data-cols="2"] .grid{ --cols: 2; }
body[data-cols="3"] .grid{ --cols: 3; }
body[data-cols="4"] .grid{ --cols: 4; }

.card{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--rule);
  padding: 18px;
  min-height: 260px;
  gap: 16px;
  background: var(--bg);
  transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}
.card[data-tags*="wip"]{ background: transparent; }
.card:hover{ border-color: var(--ink); }
.card.is-dimmed{ opacity: .25; }

.card__top{
  display: flex; justify-content: space-between; gap: 10px;
  align-items: flex-start;
}
.card__code{ color: var(--ink-3); display:inline-flex; align-items:center; gap:6px; flex-wrap: wrap; }
.card__chip{
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 15%, transparent);
}
.card__hex{ color: var(--card-hex, var(--ink-3)); letter-spacing: .02em; }
.card__status{
  display: inline-flex; align-items:center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.05em;
}
.card__status::before{
  content: ""; width:6px; height:6px; border-radius:50%;
  background: var(--accent); display: inline-block;
}
.card__status[data-status="LIVE"]::before{ background: #2a7d4f; }
.card__status[data-status="WIP"]::before{ background: var(--accent); animation: blink 1.6s infinite; }
[data-theme="dark"] .card__status[data-status="LIVE"]::before{ background: #53c07f; }

@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.card__body h3{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.015em;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.02;
  margin: 0 0 8px 0;
}
.card__body p{
  margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5;
  max-width: 40ch;
}

.card__foot{
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rule-2);
  padding-top: 12px;
  gap: 10px;
}
.card__url{
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  display: inline-flex; align-items:center; gap: 6px;
}
.card__arrow{
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
  flex: 0 0 auto;
}
.card:hover .card__arrow{
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  transform: rotate(-45deg);
}

.card__meta{
  display: flex; gap: 14px; color: var(--ink-3);
}

/* cursor reveal image */
.cursor-reveal{
  position: fixed;
  width: 320px; height: 200px;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,0,1);
  overflow: hidden;
  mix-blend-mode: normal;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.25);
}
.cursor-reveal.is-active{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-reveal img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.05); }

/* ---------- SERVICES ---------- */
.service-list{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.service-list li{
  padding: 32px 24px 32px 0;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.service-list li:last-child{ border-right: 0; padding-right: 0; }
.service-list li + li{ padding-left: 24px; }
.svc__num{ color: var(--ink-3); }
.service-list h3{
  font-family: var(--f-display);
  font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(22px, 2.2vw, 30px);
  margin: 0; line-height: 1.1;
}
.service-list p{ margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; max-width: 38ch; }
.svc__bullets{ list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 4px; color: var(--ink-3); }

/* ---------- ABOUT ---------- */
.about__body{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.manifesto{
  font-family: var(--f-display);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.manifesto em{ color: var(--accent); }
/* HBIM section CTAs: don't stretch to the grid row height */
#hbim .hero__ctas{ align-self: start; align-items: flex-start; flex-wrap: wrap; }
.about__figure{
  grid-column: 1 / -1;
  margin: 40px auto 0; padding: 0;
  border: 1px solid var(--rule);
  position: relative;
  max-width: 900px;
  width: 100%;
}
.about__figure > img,
.about__figure .compare__img{
  width: 100%; height: auto; display:block;
  filter: var(--fig-filter, none);
}
[data-theme="dark"] .about__figure > img,
[data-theme="dark"] .about__figure .compare__img{ filter: invert(1) hue-rotate(180deg); }

/* ---------- COMPARE SLIDER (point cloud ↔ BIM) ---------- */
.compare{
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  background: var(--bg-2);
  cursor: ew-resize;
  --pos: 50%;
}
.compare .compare__img{ width: 100%; height: auto; display: block; }
.compare__clip{
  position: absolute; inset: 0;
  width: var(--pos);
  overflow: hidden;
}
.compare__clip .compare__img{
  position: absolute; top: 0; left: 0;
  width: 100vw; /* overridden by JS with parent pixel width */
  height: auto;
  max-width: none;
}
.compare__handle{
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  transform: translateX(-50%);
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  cursor: ew-resize;
  outline: none;
}
.compare__line{
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--ink), 0 0 22px rgba(0,0,0,.25);
}
.compare__knob{
  position: relative; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition: transform .15s ease;
}
.compare__handle:hover .compare__knob,
.compare__handle:focus-visible .compare__knob{ transform: scale(1.08); }
.compare__handle:focus-visible .compare__knob{ outline: 2px solid var(--accent); outline-offset: 2px; }

.compare__badge{
  position: absolute; top: 14px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding: 5px 9px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink);
  pointer-events: none;
  white-space: nowrap;
}
.compare__badge--l{ right: calc(100% + 14px); }
.compare__badge--r{ left: calc(100% + 14px); }
.compare__hint{ color: var(--ink-3); }
.compare__cycle{
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 4px 9px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  font: inherit; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.compare__cycle:hover{ color: var(--ink); border-color: var(--ink); }
.compare__cycle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.about__figure figcaption{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px){
  .compare__badge{ font-size: 9px; padding: 4px 7px; }
}
.about__figure figcaption{
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  background: var(--bg);
}

/* ---------- TEAM ---------- */
.team__list{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
.team__list li{
  display: grid;
  grid-template-columns: 70px 1.2fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding var(--tr-fast), background var(--tr-fast);
}
.team__list li:hover{ padding-left: 12px; padding-right: 12px; }
.team__initials{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  width: 40px; height: 40px;
  border: 1px solid var(--ink);
  display: grid; place-items: center;
  border-radius: 50%;
}
.team__name{
  font-family: var(--f-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  letter-spacing: -.015em;
}
.team__role, .team__years, .team__focus{ color: var(--ink-2); font-size: 13px; }
.team__years, .team__focus{ font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- FOOT ---------- */
.foot{ padding: 80px var(--pad) 24px; }
.foot__grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.foot__grid > div{ display: flex; flex-direction: column; gap: 10px; }
.foot__grid p{ margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.foot__big{
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 56px);
  letter-spacing: -.025em;
  line-height: 1.02;
  display: inline-block;
  margin-top: 4px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.foot__big:hover{ border-color: var(--accent); color: var(--accent); }
.foot__links{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.foot__links a:hover{ color: var(--accent); }
.foot__bottom{
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 18px;
  color: var(--ink-3);
}

/* ---------- TWEAKS ---------- */
.tweaks{
  position: fixed; right: 18px; bottom: 18px;
  width: 260px;
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 14px 14px 18px;
  z-index: 80;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.25);
  font-size: 12px;
}
.tweaks[hidden]{ display: none; }
.tweaks header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.tweaks h4{ margin:0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.tweaks__close{ font-size: 14px; line-height:1; }
.tweak{ display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.tweak label{ font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.seg{ display: flex; gap: 1px; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.seg--stack{ flex-direction: column; border-radius: 4px; }
.seg button{ padding: 8px 10px; font-size: 12px; flex: 1; text-align: left; color: var(--ink-2); }
.seg--stack button{ text-align: left; border-top: 1px solid var(--rule-2); }
.seg--stack button:first-child{ border-top: 0; }
.seg button.is-active{ background: var(--ink); color: var(--bg); }
.tweak__note{
  margin: 4px 0 0;
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ---------- IMAGE HOMOGENIZATION ----------
   CSS only controls the white-veil overlay (var --img-veil-alpha,
   set by JS per thumb). The filter itself is applied inline by JS
   (see applyImgCal in app.js) because Chrome's calc()-in-filter
   doesn't reliably re-evaluate on custom-property changes. */
body{
  --img-veil-color: 255,253,248;
}
[data-theme="dark"]{
  --img-veil-color: 18,18,20;
}

.card__thumb{
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  margin: 0 0 6px;
  position: relative;
}
.card__thumb img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.card__thumb::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(var(--img-veil-color), var(--img-veil-alpha, 0));
  pointer-events: none;
  transition: opacity .45s ease, background-color .45s ease;
  opacity: 1;
}
.card--portfolio:hover .card__thumb img{
  transform: scale(1.035);
  filter: none !important;
}
.card--portfolio:hover .card__thumb::after{ opacity: 0; }

.card__thumb--contain{ background: #f2efe8; }
[data-theme="dark"] .card__thumb--contain{ background: #1a1a1a; }
.card__thumb--contain img{ object-fit: contain; padding: 8px; filter: grayscale(.05) !important; }

/* ---------- PORTFOLIO (uses .grid + .card system) ---------- */
.grid--portfolio{ margin-top: 24px; }
/* portfolio runs one column denser than the hub grid, with flatter thumbs */
body[data-cols="2"] .grid--portfolio{ --cols: 3; }
body[data-cols="3"] .grid--portfolio{ --cols: 4; }
body[data-cols="4"] .grid--portfolio{ --cols: 5; }
.card--portfolio .card__thumb{ aspect-ratio: 3/2; }
.card--portfolio{ position: relative; }
.card--portfolio.is-hidden{ display: none; }
.card--portfolio .card__top,
.card--portfolio .card__body{
  text-align: left; background: transparent; border: 0; padding: 0;
  color: inherit; cursor: pointer; display: grid; gap: 8px; width: 100%;
}
.card--portfolio .card__body{ gap: 10px; padding-top: 6px; }
.card--portfolio .card__arrow{ border: 1px solid var(--rule); }

.card__status[data-status="built"]::before{ background: #2a7d4f; }
.card__status[data-status="competition"]::before{ background: #b94b3a; }
.card__status[data-status="design"]::before{ background: #c9a227; }
.card__status[data-status="published"]::before{ background: #3a6fb9; }
[data-theme="dark"] .card__status[data-status="built"]::before{ background: #53c07f; }

.count-chip{
  color: var(--ink-3);
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
}

/* ---------- XYZ STATIC (portfolio section-head icon) ---------- */
.xyz-static{ width: 48px; height: 48px; color: var(--ink); display: block; }
.xyz-static.is-pulsing{ animation: xyz-pulse .6s ease; }

/* ---------- XYZ LOADER (modal) — mark spinning around its centre ---------- */
.xyz-loader{
  width: 48px; height: 48px; color: var(--ink); display: block;
  animation: xyz-spin 1.6s cubic-bezier(.7,0,.3,1) infinite;
  transform-origin: 50% 50%;
}
@keyframes xyz-spin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes xyz-pulse{
  0% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(-8deg); }
  100% { transform: scale(1); }
}

/* ---------- MODAL LOADER OVERLAY ---------- */
.pmodal__loader{
  position: absolute; inset: 0; z-index: 3;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
.pmodal__loader.is-on{
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.pmodal__loader .xyz-loader{ width: 64px; height: 64px; color: var(--ink); }
.pmodal__loader-label{
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- PROJECT MODAL ---------- */
body.pmodal-open{ overflow: hidden; }
.pmodal{
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: stretch;
}
.pmodal[hidden]{ display: none; }
.pmodal__backdrop{
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; transition: opacity .26s ease;
}
.pmodal.is-open .pmodal__backdrop{ opacity: 1; }

.pmodal__panel{
  position: relative;
  margin: 4vh auto; max-width: 1240px; width: calc(100% - 48px);
  max-height: 92vh; overflow: auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 80px rgba(0,0,0,.2);
  transform: translateY(14px); opacity: 0;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .26s ease;
}
.pmodal.is-open .pmodal__panel{ transform: translateY(0); opacity: 1; }

.pmodal__head{
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding: 20px 24px;
}
.pmodal__head-l{ display: grid; gap: 4px; }
.pmodal__code{ color: var(--ink-3); }
.pmodal__title{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -.015em; line-height: 1.1; margin: 2px 0 0;
}
.pmodal__sub{ color: var(--ink-2); }
.pmodal__close{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background var(--tr-fast), color var(--tr-fast);
  flex: 0 0 auto;
}
.pmodal__close:hover{ background: var(--ink); color: var(--bg); }

.pmodal__body{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 28px 24px 32px;
}
.pmodal__facts{ display: grid; gap: 10px; align-content: start; }
.pfact{
  display: grid; gap: 2px;
  padding: 10px 0; border-top: 1px solid var(--rule-2);
}
.pfact:first-child{ border-top: 0; padding-top: 0; }
.pfact span:first-child{ color: var(--ink-3); }
.pfact span:last-child{ color: var(--ink); font-size: 14px; }

.pmodal__text{
  grid-column: 2;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55; color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.pmodal__text p{ margin: 0; }

.pmodal__gallery{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.pshot{ margin: 0; grid-column: span 6; background: var(--bg-2); overflow: hidden; border: 1px solid var(--rule-2); position: relative; }
.pshot:nth-child(3n){ grid-column: span 12; }
.pshot:nth-child(5n){ grid-column: span 8; }
.pshot:nth-child(5n+1){ grid-column: span 4; }
.pshot img{
  width: 100%; height: auto; display: block;
}
.pshot::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(var(--img-veil-color), var(--img-veil-alpha, 0));
  pointer-events: none;
  transition: opacity .45s ease;
}
.pshot:hover img{ filter: none !important; }
.pshot:hover::after{ opacity: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .nav__links{ display: none; }
  .hero__statement{ grid-template-columns: 1fr; }
  .service-list{ grid-template-columns: 1fr; }
  .service-list li{ border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; padding-right: 0 !important; }
  .about__body{ grid-template-columns: 1fr; gap: 24px; }
  .foot__grid{ grid-template-columns: 1fr 1fr; }
  .team__list li{ grid-template-columns: 50px 1fr auto; }
  .team__role, .team__focus{ display: none; }
  body[data-cols="3"] .grid, body[data-cols="4"] .grid{ --cols: 2; }
  .projects__bar{ position: static; flex-wrap: wrap; }
  .pmodal__body{ grid-template-columns: 1fr; }
  .pmodal__text{ grid-column: 1; }
}
@media (max-width: 600px){
  body[data-cols="2"] .grid, body[data-cols="3"] .grid, body[data-cols="4"] .grid{ --cols: 1; }
  .hero__statement h1{ font-size: 40px; }
  .foot__grid{ grid-template-columns: 1fr; }
}