/* ------------ Section shells ------------ */
section {
  position: relative;
  padding: var(--section-pad) 0;
  z-index: 2;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
@media (min-width: 800px) {
  .section-head {
    grid-template-columns: 1fr 1.4fr;
    gap: 12px 48px;
  }
  .section-head .meta {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .section-head h2 {
    align-self: end;
  }
  .section-head .lead {
    align-self: start;
  }
}
.section-head h2 {
  font-weight: 400;
}
.section-head h2 em { font-weight: 400; color: var(--brass-deep); }
/* About / Practice section-head: bespoke layout — h2 + image on top row, lead below.
   Voci uses its own single-column head; the marquee sits directly below. */
.about .section-head,
.practice .section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
}
.about .section-head h2 em,
.practice .section-head h2 em { font-weight: 400; color: var(--brass-deep); }
.about .section-head .meta,
.practice .section-head .meta {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.about .section-head .head-figure,
.practice .section-head .head-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background-color: var(--bg);
  background-image: var(--bg-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Inner inset frame — matches .about-figure frame-in-frame */
.about .section-head .head-figure::before,
.practice .section-head .head-figure::before {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid color-mix(in oklab, var(--paper) 78%, transparent);
  pointer-events: none;
  z-index: 3;
}
/* Two tiny brass ticks on the inner frame's top edge */
.about .section-head .head-figure::after,
.practice .section-head .head-figure::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 14px;
  height: 1px;
  background:
    linear-gradient(to right,
      transparent 0,
      transparent calc(20% - 4px),
      var(--brass) calc(20% - 4px),
      var(--brass) calc(20% + 4px),
      transparent calc(20% + 4px),
      transparent calc(80% - 4px),
      var(--brass) calc(80% - 4px),
      var(--brass) calc(80% + 4px),
      transparent calc(80% + 4px),
      transparent 100%);
  pointer-events: none;
  z-index: 4;
}
.about .section-head .head-figure .caption,
.practice .section-head .head-figure .caption {
  position: absolute;
  left: 26px; right: 26px; bottom: 26px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  padding: 10px 12px;
  border: 1px solid var(--rule);
}
.about .section-head .head-figure .caption .ref,
.practice .section-head .head-figure .caption .ref { color: var(--brass-deep); }
.about .section-head .head-lead,
.practice .section-head .head-lead,
.voci .section-head .head-lead {
  margin: 0;
}
.about .section-head .head-lead .lead,
.practice .section-head .head-lead .lead,
.voci .section-head .head-lead .lead {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.65;
  margin: 0;
}
.about .section-head .head-lead .lead-rule,
.practice .section-head .head-lead .lead-rule,
.voci .section-head .head-lead .lead-rule {
  width: 48px; height: 1px;
  background: var(--brass);
  margin: 0 0 16px 0;
}

@media (min-width: 800px) {
  .about .section-head,
  .practice .section-head {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: clamp(24px, 3vw, 40px);
  }
  .about .section-head .meta,
  .practice .section-head .meta { grid-column: 1 / -1; grid-row: 1; }
  .about .section-head h2,
  .practice .section-head h2 {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    margin: 0;
  }
  .about .section-head .head-lead,
  .practice .section-head .head-lead {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
  }
  .about .section-head .head-figure,
  .practice .section-head .head-figure {
    grid-column: 2;
    grid-row: 2 / span 2;
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    margin-left: calc(clamp(28px, 4vw, 56px) / -2);
    width: calc(100% + clamp(28px, 4vw, 56px) / 2);
  }
}
.section-head .lead {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.65;
}
.section-head .meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Stats grid — full width */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) {
  .about-stats { grid-template-columns: repeat(4, 1fr); }
}
.about {
  background: var(--bg);
}
/* Two-row about grid: each row = image + text, alternating sides on desktop */
.about-rows {
  display: grid;
  gap: clamp(40px, 6vw, 88px);
}
.about-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .about-row { grid-template-columns: 1fr 1fr; }
  /* DOM order is text→figure; on desktop Row 1 shows figure left, text right */
  .about-row .about-figure { order: 1; }
  .about-row .about-text   { order: 2; }
  /* Row 2 (.flip): text left, figure right */
  .about-row.flip .about-figure { order: 2; }
  .about-row.flip .about-text   { order: 1; }
}

/* Figure placeholder — same frame language as hero portrait */
.about-figure {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}
@media (min-width: 900px) {
  .about-figure {
    max-width: none;
    width: calc(100% + clamp(24px, 4vw, 56px) / 2);
    aspect-ratio: unset;
    align-self: stretch;
    height: 100%;
  }
  /* Pull figure into the column-gap so it spans the full 50% of the row,
     matching the head-figure treatment above. */
  .about-row:not(.flip) .about-figure { margin: 0 calc(clamp(24px, 4vw, 56px) / -2) 0 0; }
  .about-row.flip        .about-figure { margin: 0 0 0 calc(clamp(24px, 4vw, 56px) / -2); }
}
.about-figure::before {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 3;
}
.about-figure::after {
  /* Tiny brass ticks on the inner frame corners */
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 14px;
  height: 1px; background: transparent;
  box-shadow:
    20% 0 0 0 var(--brass),
    80% 0 0 0 var(--brass);
  pointer-events: none;
  z-index: 4;
}
.about-figure .fig-body {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklab, var(--brass) 10%, var(--paper)) 0 2px,
      var(--paper) 2px 18px
    );
  display: grid;
  place-items: center;
}
.about-figure .fig-body .fig-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  padding: 8px 14px;
  border: 1px dashed var(--rule);
}
.about-figure .fig-tag {
  position: absolute;
  top: 26px; left: 26px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--bg);
}
.about-figure .fig-caption {
  position: absolute;
  left: 26px; right: 26px; bottom: 26px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  padding: 10px 12px;
  border: 1px solid var(--rule);
}
.about-figure .fig-caption .tick { color: var(--brass-deep); }

/* Portrait variant — Ritratto · 01 */
.about-figure[data-portrait="01"] .fig-body {
  background-image: var(--bg-img, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.about-figure[data-portrait="01"] .fig-mono { display: none; }
.about-figure--map::before,
.about-figure--map::after { display: none; }

.about-text { min-width: 0; }
.about-text .eyebrow { margin-bottom: 18px; }
.about-text h3 {
  font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 18px;
  max-width: 22ch;
}
.about-text h3 em { color: var(--brass-deep); font-weight: 400; }
.about-text p {
  color: var(--ink-soft);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  margin-bottom: 16px;
  max-width: 58ch;
}
.about-text .drop::first-letter {
  font-family: var(--font-display);
  font-size: 3.2em;
  float: left;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  color: var(--brass-deep);
  font-style: italic;
  font-weight: 500;
}
@media (max-width: 600px) {
  .about-text .drop::first-letter { font-size: 2.6em; }
}
.about-text ul.bio {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 28px max-content 1fr;
  column-gap: 20px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.about-text ul.bio li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
  align-items: baseline;
  word-break: break-word;
}
.about-text ul.bio li:first-child { padding-top: 0; }
.about-text ul.bio li:last-child { border-bottom: 0; padding-bottom: 0; }
.about-text ul.bio .k {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.14em;
}
.about-text ul.bio .bio-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.about-text ul.bio .bio-value {
  color: var(--ink-soft);
  min-width: 0;
}
.about-text ul.bio .bio-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s, text-decoration-color .2s;
  cursor: pointer;
}
/* Reset button defaults so .bio-copy looks identical to the previous <a> */
.about-text ul.bio button.bio-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  appearance: none;
}
.about-text ul.bio .bio-link:hover {
  color: var(--brass);
  text-decoration-color: var(--brass);
}
.about-text ul.bio .bio-link-icon {
  display: inline-block;
  vertical-align: -1.5px;
  opacity: .55;
  transition: opacity .2s, transform .35s cubic-bezier(.5,1.6,.4,1), color .2s;
}
.about-text ul.bio .bio-link:hover .bio-link-icon {
  opacity: 1;
}
/* Stack the two icons (copy + check) — only one visible at a time */
.about-text ul.bio .bio-copy-icons {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  line-height: 0;
}
.about-text ul.bio .bio-copy-icons .bio-link-icon {
  position: absolute;
  inset: 0;
  margin-left: 0;
  transition: opacity .35s ease, transform .5s cubic-bezier(.5,1.7,.4,1), color .2s;
}
.about-text ul.bio .bio-copy-icons .ic-check {
  opacity: 0;
  transform: scale(.4) rotate(-12deg);
  color: var(--brass-deep);
}
.about-text ul.bio .bio-copy.is-copied .ic-copy {
  opacity: 0;
  transform: scale(.4) rotate(8deg);
}
.about-text ul.bio .bio-copy.is-copied .ic-check {
  opacity: 1;
  transform: scale(1.15) rotate(0);
  animation: bioCheckPop .55s cubic-bezier(.5,1.7,.4,1);
}
@keyframes bioCheckPop {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(0); opacity: 1; }
  100% { transform: scale(1.15) rotate(0); opacity: 1; }
}
/* Tiny "Copiato" toast */
.about-text ul.bio .bio-copy-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 4px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--brass) 40%, var(--rule));
  padding: 3px 8px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  transition: opacity .25s ease, transform .35s cubic-bezier(.5,1.6,.4,1);
}
.about-text ul.bio .bio-copy.is-copied .bio-copy-toast {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .about-text ul.bio .bio-link-icon,
  .about-text ul.bio .bio-copy-toast { transition: opacity .2s; }
}
@media (max-width: 540px) {
  .about-text ul.bio {
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
  }
  .about-text ul.bio li {
    row-gap: 4px;
  }
  .about-text ul.bio .bio-label { grid-column: 2; }
  .about-text ul.bio .bio-value { grid-column: 2; }
}
.about-text .signoff {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.about-text .signoff::before {
  content: "";
  width: 28px; height: 1px; background: var(--brass);
}

/* Legacy about-grid kept as alias in case of reuse */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) { .about-grid { grid-template-columns: 0.85fr 1fr; } }

.about-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(20px, 3vw, 44px);
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.about-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 24px;
  width: 48px; height: 2px;
  background: var(--brass);
}
.about-card h3 {
  font-size: clamp(22px, 2vw, 28px);
  margin-bottom: 14px;
}
.about-card p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.about-card ul {
  list-style: none;
  padding: 0; margin: 20px 0 0;
  display: grid; gap: 12px;
}
.about-card li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--rule);
  align-items: baseline;
  word-break: break-word;
}
.about-card li:last-child { border-bottom: 0; }
.about-card li .k {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.14em;
}

.about-prose h3 {
  font-size: clamp(28px, 3vw, 42px);
  margin-bottom: 20px;
  max-width: 20ch;
}
.about-prose p {
  color: var(--ink-soft);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  margin-bottom: 18px;
  max-width: 100%;
}
.about-prose .drop::first-letter {
  font-family: var(--font-display);
  font-size: 3.2em;
  float: left;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  color: var(--brass-deep);
  font-style: italic;
  font-weight: 500;
}
@media (max-width: 600px) {
  .about-prose .drop::first-letter { font-size: 2.8em; }
}

.values {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 800px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value {
  background: var(--bg);
  padding: 24px 20px;
  transition: background 0.4s ease;
  position: relative;
}
.value:hover { background: var(--hover-bg); }
.value .num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass-deep);
  letter-spacing: 0.18em;
}
.value h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 10px 0 6px;
}
.value p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.value::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; bottom: 16px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.value:hover::after { transform: scaleX(1); }

.practice {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.areas {
  display: grid;
  grid-template-areas: "stack";
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.areas::before,
.areas::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(32px, 6vw, 80px);
  z-index: 10;
  pointer-events: none;
}
.areas::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-alt), transparent);
}
.areas::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-alt), transparent);
}
.areas .area {
  grid-area: stack;
  width: 100%;
  will-change: transform, filter, opacity;
}
.areas.is-ready .area {
  transition: transform 0.55s cubic-bezier(.22,.9,.36,1),
              filter 0.55s cubic-bezier(.22,.9,.36,1),
              opacity 0.55s cubic-bezier(.22,.9,.36,1);
}
@media (orientation: landscape) and (min-width: 700px) {
  .areas .area { width: 50%; }
}

/* Slider controls (arrows + dots) */
.areas-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 2.5vw, 32px) clamp(20px, 4vw, 48px) 0;
}
.areas-arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.areas-arrow:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.areas-arrow[disabled] { opacity: 0.3; cursor: default; }
.areas-arrow[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--rule); }
.areas-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.areas-dot {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.areas-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--ink) 35%, transparent);
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.areas-dot[aria-selected="true"]::before {
  background: var(--brass);
  border-color: var(--brass);
  transform: scale(1.25);
}
.area {
  position: relative;
  padding: clamp(28px, 3.5vw, 48px);
  border-bottom: 0;
  background: transparent;
  transition: background 0.5s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.area + .area { border-left: 1px solid var(--rule); }
.area:hover { background-color: var(--paper); }

.area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.area:hover::before { transform: scaleX(1); }

.area-head {
  margin-bottom: 24px;
}
.area-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--brass);
}
.area-roman {
  position: absolute;
  top: clamp(28px, 3.5vw, 48px);
  right: clamp(28px, 3.5vw, 48px);
  font-family: var(--font-display);
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 400;
  line-height: 0.85;
  color: var(--ink);
  transition: color 0.5s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
  letter-spacing: -0.02em;
}
.area:hover .area-roman {
  color: var(--brass-deep);
  transform: translateX(6px);
}

.area h3 {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.area h3 em {
  font-weight: 400;
  color: var(--brass-deep);
}
.area-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.area-bullets li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s ease;
}
.area-bullets li::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--brass);
  flex-shrink: 0;
  transition: width 0.3s ease;
}
.area:hover .area-bullets li { color: var(--ink); }
.area:hover .area-bullets li::before { width: 32px; }

.area-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.area-foot .sect {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 0;
}

.area-foot .go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.3s ease;
}
.area-foot .go .arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.area:hover .area-foot .go .arrow { transform: translateX(6px); }
.area:hover .area-foot .go { color: var(--brass-deep); }

/* ------------ Approach / Metodo — accordion grid (no image) ------------ */
.approach { background: var(--bg); position: relative; }
.approach .container { position: relative; }

.approach .steps-wrap {
  margin-top: clamp(36px, 6vw, 72px);
}

/* ----- Accordion list — 1 col (portrait) / 2×2 grid (landscape) ----- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  /* Shared column width for the Roman numeral so every title (and its
     description) aligns to the same left edge across all rows. */
  --num-col: clamp(56px, 6vw, 88px);
}
.step {
  position: relative;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
/* Brass tick that grows when the row activates */
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.step.is-active::before { transform: scaleX(1); }

.step-trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  width: 100%;
  padding: clamp(22px, 2.8vw, 32px) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.step-trigger:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}
.step-trigger .n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.85;
  color: color-mix(in oklab, var(--brass-deep) 55%, transparent);
  width: var(--num-col);
  flex-shrink: 0;
  transition: color 380ms ease;
}
.step.is-active .step-trigger .n,
.step-trigger:hover .n { color: var(--brass-deep); }

.step-trigger .t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.step-trigger .t em {
  font-style: italic;
  color: var(--brass-deep);
  font-weight: 400;
}

/* +/− glyph indicator */
.step-trigger .chev {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 380ms ease, background 380ms ease;
}
.step-trigger .chev::before,
.step-trigger .chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transition:
    transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    background 380ms ease;
}
.step-trigger .chev::before {
  width: 11px; height: 1px;
  transform: translate(-50%, -50%);
}
.step-trigger .chev::after {
  width: 1px; height: 11px;
  transform: translate(-50%, -50%);
}
.step.is-active .step-trigger .chev {
  border-color: var(--brass);
  background: color-mix(in oklab, var(--brass) 14%, transparent);
}
.step.is-active .step-trigger .chev::before { background: var(--brass-deep); }
.step.is-active .step-trigger .chev::after  { transform: translate(-50%, -50%) scaleY(0); }

/* Animated description panel (grid-rows trick → no max-height guesswork) */
.step-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.step-panel > .panel-inner {
  overflow: hidden;
  min-height: 0;
}
.step.is-active .step-panel { grid-template-rows: 1fr; }

.step-panel .d {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
  padding: 0 0 clamp(22px, 2.8vw, 32px) calc(var(--num-col) + clamp(18px, 2.4vw, 32px));
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 380ms ease,
    transform 460ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.step.is-active .step-panel .d {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 140ms;
}

/* ----- Landscape: 2 columns × 2 rows ----- */
@media (orientation: landscape) {
  .steps {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 5vw, 80px);
  }
  /* Top border on every cell; bottom border on the last row to close the grid */
  .step:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* Reduced-motion: snap, don't animate */
@media (prefers-reduced-motion: reduce) {
  .step-panel,
  .step-panel .d,
  .step::before,
  .step-trigger .chev::before,
  .step-trigger .chev::after { transition: none; }
}

/* Closing principle (kept) */
.approach-coda {
  margin-top: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: baseline;
}
.approach-coda .glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--brass);
}
.approach-coda blockquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 clamp(12px, 1.5vw, 18px) 0;
  letter-spacing: -0.005em;
}
.approach-coda blockquote em {
  color: var(--brass-deep);
  font-style: italic;
}
.approach-coda cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-style: normal;
}
@media (min-width: 700px) {
  .approach-coda { grid-template-columns: 60px 1fr; gap: clamp(18px, 2.5vw, 28px); }
}

@media (min-width: 900px) {
  .approach .container { max-width: 1360px; }
  .approach .section-head { max-width: none; }
}

/* Approach section-head: full-width single column (override default 2-col grid),
   so h2 and lead paragraph each span the whole row. */
.approach .section-head {
  grid-template-columns: 1fr;
  row-gap: clamp(24px, 3vw, 40px);
}
.approach .section-head .meta { grid-column: 1 / -1; }
.approach .section-head h2 { grid-column: 1 / -1; align-self: start; max-width: none; }
.approach .section-head .head-lead {
  grid-column: 1 / -1;
  align-self: start;
  margin: 0;
}
.approach .section-head .head-lead .lead-rule {
  width: 48px; height: 1px;
  background: var(--brass);
  margin: 0 0 16px 0;
}
.approach .section-head .head-lead .lead {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
  max-width: none;
}

/* ------------ Voci / Testimonials (horizontal marquee) ------------ */
.voci {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.voci::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-color) 1px, transparent 1px);
  background-size: 100% clamp(80px, 8vw, 120px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.voci .container { position: relative; z-index: 1; }

/* Trust-strip beneath the lead — mono credentials separated by brass dividers */
.voci-credentials {
  list-style: none;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: clamp(14px, 1.4vw, 18px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}
.voci-credentials li {
  flex: 1 1 220px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px clamp(14px, 2vw, 28px);
  position: relative;
}
.voci-credentials li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--brass);
  opacity: 0.55;
}
.voci-credentials .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 500;
}
.voci-credentials .v {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .voci-credentials { flex-direction: column; padding: 6px 0; }
  .voci-credentials li { padding: 10px clamp(2px, 2vw, 12px); flex: 1 1 auto; }
  .voci-credentials li + li::before {
    left: clamp(2px, 2vw, 12px);
    right: clamp(2px, 2vw, 12px);
    top: 0;
    width: auto;
    height: 1px;
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   § V — Voci · protocol block (figure 4:3 left, 4 cards 2×2 right).
   Mobile: figure stacks on top, cards become a horizontal-scroll strip.
   The voci .section-head is overridden to a single-column meta/h2/lead
   stack at all breakpoints so title + lead read full container width.
   ───────────────────────────────────────────────────────────────────── */

/* Override the generic .section-head 2-col rule for voci so the title + lead
   span the full container width (no 1.4fr second column eating the right side). */
.voci .section-head {
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-bottom: clamp(28px, 3vw, 44px);
}
@media (min-width: 800px) {
  .voci .section-head { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 36px); }
  .voci .section-head .meta { grid-column: 1 / -1; margin-bottom: 0; }
  .voci .section-head h2 { align-self: start; margin: 0; }
  .voci .section-head .head-lead { max-width: none; }
}
/* Voci title — keep the base h2 size, left-aligned. text-wrap: balance still
   distributes words evenly between the two natural lines. */
.voci .section-head h2 {
  width: 100%;
  text-align: left;
  text-wrap: balance;
}
.voci .section-head h2 em { font-weight: 400; color: var(--brass-deep); }
/* Voci lead — drop the max-width cap so the paragraph wraps at the full
   container width (yields roughly two lines on desktop). */
.voci .section-head .head-lead { margin: 0; width: 100%; max-width: none; }
.voci .section-head .head-lead .lead {
  max-width: none;
  width: 100%;
}

/* Marquee rail — sits directly inside .voci .container, full container width */
.voci-rail {
  position: relative;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  width: 100%;
  overflow: hidden;
  /* fade edges so cards enter/exit gracefully */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 clamp(24px, 6vw, 96px),
    #000 calc(100% - clamp(24px, 6vw, 96px)),
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    #000 clamp(24px, 6vw, 96px),
    #000 calc(100% - clamp(24px, 6vw, 96px)),
    transparent 100%);
  padding: clamp(8px, 1vw, 14px) 0;
}
/* Mobile: full-bleed cinematic feel across the viewport */
@media (max-width: 899px) {
  .voci-rail {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
}

.voci-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(16px, 1.6vw, 24px);
  width: max-content;
  /* JS drives transform via translate3d on --voci-x */
  transform: translate3d(var(--voci-x, 0px), 0, 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .voci-track { transform: none; animation: none; }
  .voci-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .voce { scroll-snap-align: start; }
}
/* Mobile / touch devices: drive the marquee via pure CSS instead of the JS
   rAF loop. Track contains two identical halves, so translating from 0 to
   -50% produces a seamless wrap. JS init bails out on coarse-pointer
   devices to avoid double-driving the transform. */
@keyframes voci-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .voci-track {
    animation: voci-scroll 70s linear infinite;
  }
}

.voce {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 78vw, 360px);
  max-height: clamp(180px, 22vw, 240px);
  overflow: hidden;
  /* `align-items: stretch` on .voci-track equalizes card heights to the
     tallest; max-height bounds that tallest to a compact editorial strip.
     Required because some unknown source (suspected: Chrome's
     content-visibility: auto + flex-children rendering quirk on .voci at
     lines 3149-3156) was stretching cards to ~958px in testing — DevTools
     confirmed both .voci-track and .voce rendered at 958.9px while no CSS
     rule in the source explained it. overflow:hidden clips any future
     testimonial that exceeds the cap. .voce-foot uses `margin-top: auto`
     to anchor the bottom hairline. Do NOT set explicit `height` here —
     it breaks the equalization. See CLAUDE.md §3 "Voci marquee specifics". */
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(14px, 1.2vw, 18px) clamp(18px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.9vw, 14px);
  transition: background 0.35s ease, border-color 0.35s ease;
}
@media (min-width: 700px)  { .voce { width: clamp(320px, 38vw, 380px); } }
@media (min-width: 1100px) { .voce { width: clamp(340px, 28vw, 400px); } }

.voce::before {
  /* brass top-left hairline tick */
  content: "";
  position: absolute;
  top: 0;
  left: clamp(22px, 2.2vw, 32px);
  width: 48px;
  height: 2px;
  background: var(--brass);
}
.voce:hover {
  background: color-mix(in oklab, var(--paper) 92%, var(--brass) 8%);
  border-color: color-mix(in oklab, var(--rule) 55%, var(--brass) 45%);
}

.voce-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.003em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
  quotes: "\201C" "\201D";
}
.voce-quote em { color: var(--brass-deep); font-style: italic; }
.voce-quote::before {
  content: open-quote;
  color: var(--brass);
  font-size: 1.4em;
  line-height: 0;
  margin-right: 0.05em;
  vertical-align: -0.18em;
}
.voce-quote::after { content: close-quote; color: var(--brass); }

.voce-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  border-top: 1px solid var(--rule);
  padding: clamp(8px, 0.8vw, 12px) 0 0;
  background: transparent;
}
.voce-foot .name {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  flex-shrink: 0;
}
.voce-foot .role {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}
/* ------------ Contact ------------ */
.contact {
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 120px) clamp(60px, 8vw, 120px);
  mask-image: radial-gradient(ellipse at 20% 30%, black 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 20% 30%, black 10%, transparent 60%);
}
.contact .container { position: relative; z-index: 2; }
.contact .eyebrow { color: color-mix(in oklab, var(--bg) 70%, transparent); }
.contact .eyebrow::before { background: var(--brass); }
.contact h2 { color: var(--bg); }
.contact h2 em { color: var(--brass); font-style: italic; font-weight: 400; }

/* Contact section-head: single-column flow, headline owns the full width */
.contact .section-head {
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  max-width: none;
}
@media (min-width: 800px) {
  .contact .section-head {
    grid-template-columns: 1fr;
  }
  .contact .section-head h2 { align-self: stretch; }
}
.contact .section-head h2 {
  width: 100%;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Vertical stack: card rail on top, full-width form below — same on every
   viewport (no 2-column desktop layout). */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 72px);
}

.contact-info-wrap {
  min-width: 0;
}

/* Rail — same flex/scroll-snap behaviour on every viewport. Pattern lifted
   from .voci-rail; mobile gets a full-bleed override further down. */
.contact-rail {
  position: relative;
  width: 100%;
  /* On tablet/desktop the rail is already bounded to the container content
     area, so overflow:hidden alone keeps cards strictly within the section's
     margins. No mask needed here — the mobile-only override below adds a
     fade aligned to the container padding for the full-bleed phone layout. */
  overflow: hidden;
  padding: clamp(8px,1vw,14px) 0;
}
@media (max-width: 899px) {
  .contact-rail {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    /* Mask fade aligned to .container's horizontal padding so cards are
       fully visible only inside the content area; anything in the viewport
       padding gutters fades out symmetrically at both margins. */
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      #000 clamp(20px, 4vw, 56px),
      #000 calc(100% - clamp(20px, 4vw, 56px)),
      transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0,
      #000 clamp(20px, 4vw, 56px),
      #000 calc(100% - clamp(20px, 4vw, 56px)),
      transparent 100%);
  }
}

.contact-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* No horizontal padding by default — when the rail is inside .container
     (≥900px), this keeps the first card flush with the container's content
     left edge (= where the eyebrow / h2 sit). Mobile full-bleed adds the
     padding back via a media query below. */
  padding: 2px 0;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}
.contact-track::-webkit-scrollbar { display: none; }
@media (max-width: 899px) {
  /* Full-bleed rail spans viewport edge-to-edge; inset cards by the same
     amount as .container's horizontal padding so the first card aligns
     with the section-head text on phones too. */
  .contact-track {
    padding-left: clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
    scroll-padding-inline: clamp(20px, 4vw, 56px);
  }
}

/* Single card — dark-inverted, brass hairline tick like .voce / .form-card.
   Width clamp sizes the mobile rail card; height hugs natural content and
   equalises to the tallest card via the parent's align-items: stretch. */
.contact-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(170px, 46vw, 210px);
  scroll-snap-align: start;
  background: color-mix(in oklab, var(--bg) 6%, var(--ink));
  border: 1px solid rgba(255,255,255,0.10);
  padding: clamp(18px, 1.8vw, 22px) clamp(20px, 2vw, 24px);
  display: grid;
  grid-template-areas:
    "icon  label"
    "value value";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  row-gap: clamp(8px, 0.8vw, 12px);
  align-items: center;
  overflow: hidden;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: -1px; left: clamp(20px, 2vw, 24px);
  width: 36px; height: 2px;
  background: var(--brass);
}
.contact-card:hover {
  background: color-mix(in oklab, var(--ink) 92%, var(--brass) 8%);
  border-color: color-mix(in oklab, rgba(255,255,255,0.10) 50%, var(--brass) 50%);
}

.card-icon {
  grid-area: icon;
  width: 22px; height: 22px;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.card-icon svg { width: 100%; height: 100%; display: block; }

.card-k {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 22px;          /* match .card-icon height so the title's
                                 line-box vertically centers with the icon */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bg) 70%, transparent);
}

.card-v {
  grid-area: value;
  align-self: start;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.3;
  font-weight: 400;
}
.card-v a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.card-v a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width 0.4s ease;
}
.card-v a:hover::after { width: 100%; }

.card-v-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  color: color-mix(in oklab, var(--bg) 50%, transparent);
}

/* Live (Orario) card — body sans + brass diagonal glow. The element keeps
   id="studioPresence" + class "presence" so the existing clock JS continues
   to fire. The older `.presence` rule (line ~2877) sets margin / padding /
   border / gap with the same specificity but a later source position; this
   selector `.contact-card.presence` has higher specificity (0,2,0) so it
   wins for the properties it re-declares — required to keep the live card
   visually identical to the other cards. */
.contact-card.presence {
  margin-top: 0;
  padding: clamp(18px, 1.8vw, 22px) clamp(20px, 2vw, 24px);
  border: 1px solid rgba(255,255,255,0.10);
  column-gap: 12px;
  row-gap: clamp(8px, 0.8vw, 12px);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brass) 5%, transparent) 0%,
      transparent 60%),
    color-mix(in oklab, var(--bg) 6%, var(--ink));
}
/* Telefono card — phone number above, live mono clock + state below.
   The clock row is intentionally drawn from a different palette than the
   serif phone link: mono small-caps, tabular numerals, faded contrast and
   letter-spacing — a stamped technical readout rather than display copy.
   Flex column on .card-v (matching the Email card pattern) makes the
   stacking explicit: the phone link is the first item and the clock is
   the second item with no gap, landing exactly one display-font line-box
   below the phone — same y-position as the other cards' second line. */
.contact-card--phone .card-v {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-card--phone .card-v-tel {
  /* preserves inherited .card-v a styles (brass underline on hover) */
}
.card-clock {
  position: relative;
  width: 100%;
  /* One display-font line-box tall so total .card-v height matches the
     neighbouring cards' .card-v (= 2 display line-boxes). align-items:
     center keeps the inline content vertically centred in the row. */
  height: clamp(20.8px, 1.69vw, 24.7px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Inherit .card-v's font (Cormorant Garamond, clamp(16px,1.3vw,19px),
     line-height 1.3, color var(--bg)) so the clock reads as a second
     display-font line, identical to "00192 Roma" in Studio. tnum keeps
     the time digits monospaced so HH:MM doesn't jitter on each tick. */
  font-feature-settings: "tnum";
}
.card-clock-time {
  display: inline-flex;
  align-items: baseline;
}
.card-clock-h,
.card-clock-m {
  display: inline-block;
  min-width: 1.6ch;
  text-align: center;
}
.card-clock-colon {
  margin: 0 1px;
  opacity: 0.5;
}
.card-clock-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.card-clock-state {
  color: var(--brass);
  transition: color 0.4s ease;
}
.card-clock-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--brass) 60%, transparent);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.contact-card--phone.is-open .card-clock-dot {
  animation: card-clock-pulse 2.6s ease-in-out infinite;
}
.contact-card--phone.is-paused .card-clock-state {
  color: color-mix(in oklab, var(--bg) 65%, transparent);
}
.contact-card--phone.is-paused .card-clock-dot {
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  box-shadow: none;
}
.contact-card--phone.is-closed .card-clock-state {
  color: color-mix(in oklab, var(--bg) 48%, transparent);
}
.contact-card--phone.is-closed .card-clock-dot {
  background: color-mix(in oklab, var(--bg) 32%, transparent);
  box-shadow: none;
}
@keyframes card-clock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brass) 60%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-card--phone.is-open .card-clock-dot { animation: none; }
}

/* Studio + Telefono cards are interactive. Pointer cursor on the whole card
   plus a brass focus ring; .card-copy-trigger dissolves into the article's
   grid (display: contents) so it inherits the existing layout. */
.contact-card--copy,
.contact-card--tel {
  cursor: pointer;
}
.contact-card--copy {
  -webkit-tap-highlight-color: transparent;
}
.contact-card--copy:focus-within {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.card-copy-trigger {
  display: contents;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  appearance: none;
}

/* Copy badge — small icon pair on the right of the "Studio Roma" title row.
   Anchored inside .card-k via flex so the address below keeps the full card
   width and never wraps to 3 lines on narrow screens. Two stacked SVGs
   (copy + check) swap with a tiny rotate/scale on success. */
.contact-card--copy .card-k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-copy-badge {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: color-mix(in oklab, var(--bg) 50%, transparent);
  transition: color 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.contact-card--copy:hover .card-copy-badge,
.contact-card--copy:focus-within .card-copy-badge {
  color: var(--brass);
}
.card-copy-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: inherit;
  transition: opacity 0.35s ease,
              transform 0.5s cubic-bezier(.5,1.7,.4,1),
              color 0.2s;
}
.card-copy-icon.ic-check {
  opacity: 0;
  transform: scale(.4) rotate(-12deg);
  color: var(--brass);
}
.contact-card--copy.is-copied .card-copy-icon.ic-copy {
  opacity: 0;
  transform: scale(.4) rotate(8deg);
}
.contact-card--copy.is-copied .card-copy-icon.ic-check {
  opacity: 1;
  transform: scale(1.05) rotate(0);
  animation: card-copy-check 0.55s cubic-bezier(.5,1.7,.4,1);
}
@keyframes card-copy-check {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(0); opacity: 1; }
  100% { transform: scale(1.05) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .card-copy-icon { transition: opacity 0.2s ease; }
  .contact-card--copy.is-copied .card-copy-icon.ic-check { animation: none; }
}

/* Telefono card: hovering anywhere on the card extends the brass underline
   beneath the phone number — so the whole card reads as the call link. */
.contact-card--tel:hover .card-v-tel::after,
.contact-card--tel:focus-within .card-v-tel::after {
  width: 100%;
}

/* Email · PEC card — two stacked mail rows with mono sub-tags */
.contact-card--mail .card-v {
  font-family: var(--font-body);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mail-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  column-gap: 12px;
}
.mail-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bg) 55%, transparent);
}
.mail-row a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* The .card-v a::after underline is clipped by .mail-row a's overflow:hidden
   (the ellipsis truncation); pin the underline inside the link box so it
   animates on hover just like the phone number. */
.mail-row a::after {
  bottom: 0;
}

/* Desktop ≥1100: rail becomes a 5-column grid that fills the container.
   Cards drop their fixed squared dimensions, stretch to equal width, and
   share a common min-height so they read as a balanced deck. Below this
   breakpoint, base rules apply (squared cards + horizontal scroll rail). */
@media (min-width: 1100px) {
  .contact-rail {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding: 0;
  }
  .contact-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(14px, 1.2vw, 20px);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .contact-card {
    width: auto;
  }
}

.form-card {
  background: color-mix(in oklab, var(--bg) 6%, var(--ink));
  border: 1px solid rgba(255,255,255,0.1);
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}
.form-card::before {
  content: "";
  position: absolute; top: -1px; left: 24px;
  width: 48px; height: 2px;
  background: var(--brass);
}
/* Subtle radial brass glow following cursor */
.form-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--brass) 14%, transparent) 0%,
    transparent 38%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.form-card:hover::after, .form-card:focus-within::after { opacity: 1; }

.form-card h3 {
  color: var(--bg);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.form-card .hint {
  color: color-mix(in oklab, var(--bg) 55%, transparent);
  font-size: 13px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.form-card form { position: relative; z-index: 1; }

/* Field reveal: each field slides in from below in sequence when the form
   scrolls into view. .form-card.in-view triggers the cascade. */
.field {
  position: relative;
  margin-bottom: 14px;
  padding-top: 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.form-card.in-view .field { opacity: 1; transform: none; }
.form-card.in-view .field:nth-of-type(1) { transition-delay: 0.05s; }
.form-card.in-view .field:nth-of-type(2) { transition-delay: 0.13s; }
.form-card.in-view .field:nth-of-type(3) { transition-delay: 0.21s; }
.form-card.in-view .field:nth-of-type(4) { transition-delay: 0.29s; }
.form-card.in-view .field:nth-of-type(5) { transition-delay: 0.37s; }
.form-card.in-view .form-submit { animation: fc-rise 0.8s cubic-bezier(.2,.8,.2,1) 0.45s both; }
@keyframes fc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Floating label: sits inside the field at body size, rises and shrinks
   to brass mono caps on focus or when the field has a value. */
.field label {
  position: absolute;
  left: 0;
  top: 36px;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in oklab, var(--bg) 55%, transparent);
  transition:
    top 0.28s cubic-bezier(.2,.8,.2,1),
    font-size 0.28s cubic-bezier(.2,.8,.2,1),
    letter-spacing 0.28s cubic-bezier(.2,.8,.2,1),
    color 0.3s ease;
}
.field input:not(:placeholder-shown) ~ label,
.field input:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field-select:focus-within label,
.field-select.has-value label {
  top: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Required marker: brass star, morphs to ◆ when the field is valid */
.field input[required] ~ label::after,
.field textarea[required] ~ label::after,
.field-select select[required] ~ label::after {
  content: " *";
  color: var(--brass);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.field input[required]:valid:not(:placeholder-shown) ~ label::after,
.field textarea[required]:valid:not(:placeholder-shown) ~ label::after {
  content: " ◆";
  opacity: 1;
}
/* field-select: label comes before the hidden native select, so we drive
   the required marker off the wrapper class set by JS, not sibling order. */
.field-select label::after {
  content: " *";
  color: var(--brass);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.field-select.has-value label::after {
  content: " ◆";
  opacity: 1;
}

/* Inputs: invisible until focused, with an animated brass underline that
   scales from the centre on focus. */
.field input, .field select, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: var(--bg);
  padding: 12px 0 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  position: relative;
  width: 100%;
  transition: border-color 0.3s ease;
}
.field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }

/* ── Custom combobox dropdown ── */
/* The native <select> stays in the DOM purely for form submission +
   :required validation; all interaction lives in the .select-trigger
   button and .select-listbox panel. */
.field-select .select-native {
  display: none;
}
.field-select .select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: var(--bg);
  padding: 12px 32px 14px 0;
  font-size: 15px;
  line-height: 1.2;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: border-color 0.3s ease;
}
.field-select .select-trigger:hover {
  border-bottom-color: rgba(255,255,255,0.32);
}
.field-select .select-value[data-empty="true"] {
  color: transparent;
}
.field-select .select-value {
  color: var(--bg);
}
/* Chevron lives inside the trigger so it rotates with focus + open state */
.field-select .select-chevron {
  position: absolute;
  right: 4px;
  bottom: 18px;
  width: 9px; height: 9px;
  border-right: 1.5px solid color-mix(in oklab, var(--bg) 65%, transparent);
  border-bottom: 1.5px solid color-mix(in oklab, var(--bg) 65%, transparent);
  transform: rotate(45deg);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease;
  pointer-events: none;
}
.field-select.is-open .select-chevron,
.field-select:focus-within .select-chevron {
  border-color: var(--brass);
}
.field-select.is-open .select-chevron {
  transform: rotate(225deg);
}

/* Listbox panel anchored under the trigger */
.select-listbox {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: color-mix(in oklab, var(--bg) 6%, var(--ink));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 36px rgba(0,0,0,0.32);
  opacity: 0;
  transform: scaleY(0.96) translateY(-6px);
  transform-origin: top;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    transform 0.18s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 0.18s;
}
.select-listbox::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 48px;
  height: 2px;
  background: var(--brass);
}
.field-select.is-open .select-listbox {
  opacity: 1;
  transform: scaleY(1) translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.24s ease,
    transform 0.24s cubic-bezier(.2,.8,.2,1),
    visibility 0s;
}

/* Caption header inside the panel */
.select-caption {
  padding: 8px 18px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bg) 45%, transparent);
  pointer-events: none;
  user-select: none;
}

/* Options */
.select-listbox [role="option"] {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 14px;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  font-size: 14.5px;
  color: var(--bg);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.32s cubic-bezier(.2,.8,.2,1),
    transform 0.32s cubic-bezier(.2,.8,.2,1),
    padding-left 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}
.field-select.is-open .select-listbox [role="option"] {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(var(--i, 0) * 30ms + 60ms);
}
/* Roman numeral on the left */
.select-listbox [role="option"]::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--brass);
  opacity: 0.85;
}
/* Selected glyph slot on the right */
.select-listbox [role="option"]::after {
  content: "";
  color: var(--brass);
  font-size: 9px;
  text-align: right;
}
.select-listbox [role="option"][aria-selected="true"]::after {
  content: "◆";
}
.select-listbox [role="option"][aria-selected="true"] {
  background: color-mix(in oklab, var(--brass) 8%, transparent);
}
.select-listbox [role="option"]:hover,
.select-listbox [role="option"].is-active {
  box-shadow: inset 2px 0 0 var(--brass);
  padding-left: 24px;
  background: color-mix(in oklab, var(--brass) 10%, transparent);
}
.select-listbox [role="option"].is-stamping {
  transform: scale(0.98);
  transition: transform 0.12s ease;
}

/* Invalid-state shake on submit-with-empty */
.field-select.is-invalid .select-trigger {
  animation: select-shake 0.32s cubic-bezier(.36,.07,.19,.97);
  border-bottom-color: var(--brass);
  box-shadow: 0 1px 0 0 var(--brass), 0 0 0 4px color-mix(in oklab, var(--brass) 14%, transparent);
}
@keyframes select-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .select-listbox,
  .field-select.is-open .select-listbox,
  .select-listbox [role="option"],
  .field-select.is-open .select-listbox [role="option"] {
    transition: none;
  }
  .field-select.is-open .select-listbox [role="option"] {
    transition-delay: 0s;
  }
  .field-select.is-invalid .select-trigger { animation: none; }
}

.field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-bottom-color: rgba(255,255,255,0.32);
}

.form-submit {
  margin-top: 18px;
  width: 100%;
  padding: 16px 24px;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  transition: color 0.4s ease, letter-spacing 0.4s ease, transform 0.18s ease;
}
.form-submit::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(.7,0,.2,1);
}
/* Ink-stamp ring: expands from --rx/--ry click point on press */
.form-submit::after {
  content: "";
  position: absolute;
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: 12px; height: 12px;
  margin-left: -6px; margin-top: -6px;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}
.form-submit.stamping::after {
  animation: stamp-ring 0.55s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes stamp-ring {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(28); }
}
.form-submit:active { transform: scale(0.97); }
.form-submit > * { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; }
.form-submit .arrow { transition: transform 0.5s cubic-bezier(.2,.8,.2,1); display: inline-block; }
.form-submit:hover { letter-spacing: 0.22em; }
.form-submit:hover::before { transform: translateY(0); }
.form-submit:hover .arrow { transform: translateX(6px); }
.form-submit[disabled] { cursor: progress; opacity: 0.78; }
.form-submit.is-error {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--paper);
  animation: fc-shake 0.42s cubic-bezier(.36,.07,.19,.97);
}
@keyframes fc-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
.form-status {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bg) 55%, transparent);
  min-height: 1.2em;
}

/* ── Live Roma-time presence indicator ── */
.presence {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,0.12);
  display: grid;
  gap: 12px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brass) 5%, transparent) 0%,
    transparent 60%);
}
.presence-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.presence-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--bg) 55%, transparent);
}
.presence-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-feature-settings: "tnum";
}
.presence-sep { opacity: 0.4; }
.presence-state {
  color: var(--brass);
  transition: color 0.4s ease;
}
.presence.is-closed .presence-state {
  color: color-mix(in oklab, var(--bg) 45%, transparent);
}
.presence-body {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: color-mix(in oklab, var(--bg) 70%, transparent);
}
.presence-hours { letter-spacing: 0.02em; }
.presence-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--brass) 60%, transparent);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  margin-left: auto;
}
.presence.is-open .presence-dot {
  animation: presence-pulse 2.6s ease-in-out infinite;
}
.presence.is-closed .presence-dot {
  background: color-mix(in oklab, var(--bg) 30%, transparent);
  box-shadow: none;
}
@keyframes presence-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brass) 60%, transparent); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}
.presence-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  transition: color 0.4s ease;
}
.presence.is-closed .presence-tag {
  color: color-mix(in oklab, var(--bg) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .presence.is-open .presence-dot { animation: none; }
}

/* ------------ Footer ------------ */
footer {
  background: var(--bg-alt);
  padding: clamp(48px, 5vw, 80px) 0 32px;
  border-top: 1px solid var(--rule);
  position: relative; z-index: 2;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h2 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 14px;
}
.foot p, .foot a { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.foot a:hover { color: var(--brass-deep); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 10px;
}

/* Signature wrap holds the giant ghost § behind the actual signature */
.signature-wrap {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: clamp(40px, 5vw, 80px);
  overflow: hidden;
}
.signature-mark {
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(180px, 28vw, 460px);
  line-height: 1;
  color: var(--brass-deep);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.signature {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 12vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--bg);
  padding: clamp(40px, 5vw, 80px) 0 clamp(20px, 3vw, 40px);
  text-align: center;
  overflow: hidden;
  word-break: break-word;
}
.signature .amp { color: var(--brass); font-style: normal; }
.signature .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s cubic-bezier(.2,.8,.2,1),
    transform 0.6s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 35ms);
}
.signature.signed .ch {
  opacity: 1;
  transform: none;
}
/* Anchor the brass ampersand: it stays visible from the start */
.signature .amp.ch {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .signature .ch { opacity: 1; transform: none; transition: none; }
}

/* ------------ About stats card backgrounds ------------ */
.about-stats .stat {
  background-image: var(--bg-img, none);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  overflow: hidden;
}
/* Overlay so text remains legible */
.about-stats .stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--paper) 92%, transparent) 0%,
    color-mix(in oklab, var(--paper) 72%, transparent) 55%,
    color-mix(in oklab, var(--paper) 30%, transparent) 100%);
  pointer-events: none;
}
.about-stats .stat .num,
.about-stats .stat .lab { position: relative; z-index: 1; }
/* Stat-card backgrounds: each `.stat` element carries data-bg-light /
   data-bg-dark attrs in the HTML. The bg-image is injected as a
   `--bg-img` CSS var by initLazyBgImages() when the card nears the
   viewport, and re-applied by applyState() on mode change. */