/* =====================================================================
   Ayalon Invest — Boutique PropCo
   Design system: restrained editorial. Warm off-white, deep ink,
   muted olive accent. Serif display + sans body. Generous whitespace.
   ===================================================================== */

:root {
  /* Palette */
  --paper:      #f6f2ea;   /* warm off-white, primary background */
  --paper-2:    #efe9dd;   /* secondary cream surface */
  --plate:      #fbf8f2;   /* elevated plate surface (subtle +3 lift from paper) */
  --plate-on-cream: #f8f3e8; /* plate when sitting on cream bg */
  --ink:        #1d1d1a;   /* deep warm charcoal — primary text */
  --ink-2:      #3a3933;   /* secondary text */
  --ink-3:      #6a6759;   /* tertiary / meta */
  --rule:       #d9d2c2;   /* warm hairline */
  --rule-2:     #c6bea9;
  --accent:     #6a6855;   /* muted olive */
  --ink-bg:     #15140f;   /* dark section background */
  --ink-bg-2:   #1f1d18;
  --paper-on-ink: #ede5d2;

  /* Typography */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(48px, 5vw, 88px);
  --radius: 0;
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--paper); }

/* Scroll-triggered reveals — content drifts up + fades in when a
   section enters the viewport. Subtle by design — the brief is
   "boutique editorial" not "motion-heavy SaaS". */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: 0.04s;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.18s; }
.reveal--delay-2 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------- Layout ----------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-y) 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section--rule { border-top: 1px solid var(--rule); }
.section--cream { background: var(--paper-2); }
.section--ink { background: var(--ink-bg); color: var(--paper-on-ink); }
@media (max-width: 880px) {
  .section { min-height: auto; display: block; }
}

.section__head {
  max-width: 880px;
  margin-bottom: clamp(24px, 3vw, 44px);
}

/* Plate — subtle elevated content surface (editorial, not SaaS).
   Used inside selected sections to give each topic the feel of a
   discrete "plate" sitting on the page, with the page bg breathing
   in the gap between sections. */
.plate {
  background: var(--plate);
  border: 1px solid rgba(29, 29, 26, 0.06);
  border-radius: 4px;
  padding: clamp(28px, 3.4vw, 52px) clamp(28px, 4vw, 64px);
}
.section--cream .plate { background: var(--plate-on-cream); }
@media (max-width: 880px) {
  .plate { padding: 36px 28px; border-radius: 4px; }
}
.section__head--ink { color: var(--paper-on-ink); }

/* ----------------------------- Typography ----------------------------- */
.eyebrow {
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 28px 0;
  padding-top: 18px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.eyebrow--ink { color: rgba(237, 229, 210, 0.62); }
.eyebrow--ink::before { background: rgba(237, 229, 210, 0.4); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(32px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
}
.display__line { display: block; white-space: nowrap; }
@media (max-width: 600px) {
  .display { font-size: 34px; line-height: 1.04; letter-spacing: -0.018em; }
  .display__line { white-space: normal; }
}
.display__line--1 { color: var(--ink); }
.display__line--2 { color: var(--ink-2); }
.display__line--3 { color: var(--ink-3); }

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}
.h2--ink { color: var(--paper-on-ink); }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 36;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.003em;
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: 760px;
}
.lede--narrow { max-width: 720px; }

.body { margin: 0 0 16px; color: var(--ink-2); }
.body--measured { max-width: 560px; font-size: 14.5px; line-height: 1.65; color: var(--ink-3); }

.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.link:hover { border-color: var(--ink); }
.link--arrow::after { content: " →"; }

/* ----------------------------- Buttons ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--solid {
  background: var(--ink);
  color: var(--paper);
}
.btn--solid:hover { background: var(--ink-bg); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  height: 38px;
  padding: 0 18px;
  font-size: 13px;
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ----------------------------- Nav ----------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav--scrolled { border-bottom-color: var(--rule-2); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 60px;
}
.nav__logo {
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav__logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.nav__logo-word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.nav__logo-mark {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  text-transform: uppercase;
  align-self: flex-end;
  padding-bottom: 2px;
}
.nav__links {
  display: flex;
  gap: 32px;
  margin-left: auto;
}
.nav__links a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--accent); }
.nav__links a.nav__cta-link {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}
.nav__links a.nav__cta-link:hover { color: var(--ink); }

/* Hamburger toggle */
.nav__toggle {
  display: none;
  position: relative;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-left: auto;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle-line {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}
.nav__toggle-line:nth-child(1) { top: 9px; }
.nav__toggle-line:nth-child(2) { top: 14px; }
.nav__toggle-line:nth-child(3) { top: 19px; }
.nav--open .nav__toggle-line:nth-child(1) { top: 14px; transform: rotate(45deg); }
.nav--open .nav__toggle-line:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle-line:nth-child(3) { top: 14px; transform: rotate(-45deg); }

body.no-scroll { overflow: hidden; }

@media (max-width: 880px) {
  .nav__inner { height: 60px; }
  .nav__toggle { display: block; }

  .nav__links {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 32px var(--gutter) 48px;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.25s ease;
    z-index: 49;
  }
  .nav--open .nav__links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links a {
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif);
    font-weight: 400;
    font-variation-settings: "opsz" 48;
    font-size: 28px;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .nav__links a.nav__cta-link {
    margin-top: 12px;
    border-bottom-color: transparent;
    color: var(--accent);
    font-style: italic;
    font-weight: 300;
  }
  .nav__links .nav__letterhead {
    display: block;
    margin-top: auto;
    padding: 32px 0 0;
    border-top: 1px solid var(--rule);
    border-bottom: none;
    width: 100%;
  }
  .nav__links .nav__letterhead-locs {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--ink);
    margin: 0 0 10px;
    padding: 0;
    border: none;
  }
  .nav__links a.nav__letterhead-email {
    display: inline-block;
    width: auto;
    font-family: var(--sans);
    font-style: normal;
    font-weight: 400;
    font-variation-settings: normal;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--ink-2);
    text-decoration: none;
    border: none;
    border-bottom: 1px solid var(--rule-2);
    padding: 0 0 2px;
    margin: 0;
  }
}
@media (min-width: 881px) {
  .nav__letterhead { display: none; }
}

/* ----------------------------- Hero ----------------------------- */
.hero {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: var(--section-y);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero { min-height: auto; display: block; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
}

.hero__copy { max-width: 760px; }
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 40px 0 0;
  flex-wrap: wrap;
}

.hero__media { margin: 0; }
.hero__media--image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  margin-right: calc(var(--gutter) * -1);
  max-height: 64vh;
}
@media (max-width: 980px) {
  .hero__media--image { margin-right: 0; aspect-ratio: 4 / 5; max-height: none; }
}
.hero__media--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}

/* Leader portraits */
.leader__portrait {
  margin: 0 0 24px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
  position: relative;
}
.leader__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.9) contrast(1.02);
}
.leader__portrait-missing {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: var(--ink-3);
  background: repeating-linear-gradient(135deg,
    rgba(106,104,85,0.04) 0 12px,
    rgba(106,104,85,0.07) 12px 24px);
  border: 1.5px dashed var(--rule-2);
  border-radius: var(--radius);
}
.leader__portrait-missing code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 2px;
}
.leader__portrait--missing img { display: none; }
.leader__portrait--missing .leader__portrait-missing { display: flex; }

/* ----------------------------- Tiles (Model) ----------------------------- */
.tiles {
  display: grid;
  gap: clamp(28px, 3.5vw, 56px);
}
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
  .tiles--3 { grid-template-columns: 1fr; }
}
.tile { padding-top: 20px; border-top: 1px solid var(--rule); }
.tile__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--accent);
  margin: 0 0 16px;
}
.tile__title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 16px;
}
.tile__body {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------- Pillars ----------------------------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 0;
}
@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; }
}
.pillar {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 2.8vw, 40px) 0;
  border-top: 1px solid var(--rule);
}
.pillar:nth-child(1),
.pillar:nth-child(2) { border-top-color: var(--rule-2); }
@media (max-width: 720px) {
  .pillar { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
}
.pillar__title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}
.pillar__body { color: var(--ink-2); margin: 0; font-size: 15px; line-height: 1.65; }

/* ----------------------------- Disciplines ----------------------------- */
.disciplines {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  position: relative;
}
.disciplines::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(58.3% - 1px);
  width: 1px;
  background: var(--rule);
}
@media (max-width: 980px) {
  .disciplines { grid-template-columns: 1fr; }
  .disciplines::before { display: none; }
}
.discipline {
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.discipline--secondary { padding-right: 0; }
@media (min-width: 981px) {
  .discipline--secondary { padding-left: clamp(24px, 3vw, 56px); }
}
.discipline__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 28px;
}
.discipline__title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 22px;
}
.discipline__body {
  color: var(--ink-2);
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.65;
}
.discipline__meta {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.discipline__meta-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.discipline__meta--italic {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
}

/* ----------------------------- Metrics (Track Record) ----------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 4.5vw, 72px) clamp(28px, 3vw, 56px);
  border-top: 1px solid rgba(237, 229, 210, 0.18);
  padding-top: clamp(40px, 4vw, 64px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgba(237, 229, 210, 0.18);
}
@media (max-width: 880px) {
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; padding-top: 32px; }
}
@media (max-width: 480px) {
  .metrics { grid-template-columns: 1fr; gap: 28px; }
}
.metric {
  /* Stack the value and label as a column; pin value to the bottom
     of the cell so €320M and "3" sit on the same visual baseline. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: 0;
  min-height: clamp(64px, 7vw, 104px);
}
.metric__value {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "wght" 300;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.028em;
  margin: 0 0 14px;
  color: var(--paper-on-ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  background: var(--ink-bg); /* opaque backing so the counting figures never flash white */
}
.metric__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(237, 229, 210, 0.62);
  margin: 0;
}

.track__after {
  margin-top: clamp(28px, 3vw, 48px);
  max-width: 880px;
}
/* Experience line — now living as the subtitle inside section__head--ink,
   right under the headline. Italic serif, soft paper-on-ink color. */
.section__head--ink .track__experience {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 36;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4;
  margin: 4px 0 0;
  color: rgba(237, 229, 210, 0.82);
  max-width: 720px;
}
.track__tenants {
  font-size: 14px;
  color: rgba(237, 229, 210, 0.75);
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}

/* ----------------------------- About / Horizontal Timeline ----------------------------- */
/* The Who We Are slide is a zigzag horizontal timeline — milestones run
   left-to-right along a thin olive spine, alternating above and below. */

/* About slide — tighter padding + lede so timeline + photo can fit. */
#about {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 4.5vw, 72px);
}
/* About intro runs full container width — same width as the timeline below. */
#about .section__head--about { max-width: none; margin-bottom: clamp(20px, 2.4vw, 32px); }
#about .lede { max-width: none; margin: 0 0 14px; }
/* Supporting paragraph — same family, 20% smaller than the lede above it. */
.about-more {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(13.6px, 1.2vw, 16.8px);
  line-height: 1.6;
  letter-spacing: -0.002em;
  color: var(--ink-3);
  margin: 0;
  max-width: none;
}

.timeline-h-wrap {
  margin-top: clamp(16px, 1.6vw, 28px);
  width: 100%;
}

.timeline-h {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Six milestone columns at equal width, plus a narrower terminal
     column for the "Today." moment that closes the timeline. */
  grid-template-columns: repeat(6, 1fr) 0.55fr;
  gap: clamp(8px, 1vw, 18px);
  position: relative;
  align-items: stretch;
}

/* Horizontal spine at the vertical center of the row. The right end
   terminates precisely at the "Today." dot rather than fading off into
   blank space, so the reader's eye lands on the closing moment. */
.timeline-h::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  /* Stop just shy of the terminal column's center dot. */
  right: calc((100% / 7) * 0.275 + 6px);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0,
    var(--rule-2) 32px,
    var(--rule-2) 100%
  );
  transform: translateY(-0.5px);
}

.timeline-h__item {
  position: relative;
  /* Tall enough that each half-item fully contains a card + connector,
     so the bottom-anchored "above" cards never rise into the heading
     block above the timeline. */
  min-height: clamp(560px, 62vh, 600px);
}

/* Olive dot marker on the spine */
.timeline-h__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: transform 0.3s ease;
}
.timeline-h__item:hover::before { transform: translate(-50%, -50%) scale(1.4); }

/* Alternation handled via absolute card positioning below — items are
   plain positioning contexts. The card lives in one half, the spine
   bisects the item at 50%, and the two never share space. */

/* Vertical connector — a hairline from the dot to the card.
   Long enough that cards visibly hover above/below the spine, never crowd it. */
.timeline-h__item::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--rule-2);
  z-index: 1;
  transform: translateX(-50%);
}
/* Connector starts at the spine (dot) and stops short of the card,
   leaving a visible gap so the line never runs into the plate. */
.timeline-h__item--above::after {
  bottom: 50%;
  height: clamp(20px, 2.6vw, 32px);
}
.timeline-h__item--below::after {
  top: 50%;
  height: clamp(20px, 2.6vw, 32px);
}

.milestone-h {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 8px);
  max-width: 220px;
  padding: clamp(18px, 1.8vw, 24px) clamp(12px, 1.2vw, 16px);
  background: var(--plate-on-cream);
  border: 1px solid rgba(29, 29, 26, 0.06);
  border-radius: 4px;
  text-align: center;
  /* Equal heights regardless of whether a logo block is present —
     cards without logos still reserve the bottom slot so the row
     reads as one consistent rhythm. */
  display: flex;
  flex-direction: column;
  min-height: 210px;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.3s ease;
}
.milestone-h:hover {
  transform: translateX(-50%) translateY(-3px);
}
/* "Above" cards: bottom edge sits a connector + gap above the spine. */
.timeline-h__item--above .milestone-h {
  bottom: calc(50% + clamp(36px, 4vw, 48px));
}
/* "Below" cards: top edge sits a connector + gap below the spine. */
.timeline-h__item--below .milestone-h {
  top: calc(50% + clamp(36px, 4vw, 48px));
}

.milestone-h:hover {
  transform: translateX(-50%) translateY(-3px);
  border-color: rgba(29, 29, 26, 0.16);
}

.milestone-h__year {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "wght" 300;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--accent);
  margin: 0 0 12px;
  font-variant-numeric: lining-nums tabular-nums;
}

.milestone-h__title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  /* Capped at 16px so the longest title ("Entering the Spanish Market")
     stays two lines at every desktop width; paired with a two-line
     min-height so every card is an identical height and the cards align. */
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0 0 18px;
  min-height: 2.6em;
}

/* Logo placeholder — dedicated bottom slot pinned to card foot via
   margin-top: auto. Every card has one (visible or empty) so all
   six cards share an identical visual rhythm. */
.milestone-h__logo {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  /* Uniform slot height across every card (icon, lockup, or empty) so the
     row stays perfectly aligned regardless of logo shape. */
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.milestone-h__logo--img { padding-top: 12px; }
.milestone-h__logo img {
  max-height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%);
  opacity: 0.78;
}
/* Lockup logos (mark + wordmark) read larger than the icon-only marks. */
.milestone-h__logo--lockup img { max-height: 46px; }
/* Empty slot — kept structurally so card height matches the others;
   shows the hairline divider but no content. */
.milestone-h__logo--empty {
  border-top-color: transparent;
}

/* Terminal "Today." column — converts the timeline from a list of past
   events into a present-tense thesis. No card, no plate; a larger olive
   dot and a single italic Fraunces word. The spine terminates here. */
.timeline-h__item--terminal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.timeline-h__item--terminal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 6px var(--paper-2);
}
.timeline-h__item--terminal::after { display: none; }
.timeline-h__today {
  position: absolute;
  top: calc(50% + 28px);
  left: 50%;
  transform: translate(-50%, 0);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "wght" 300;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--accent);
  white-space: nowrap;
}

/* ------- Mobile: spine snaps to the left, milestones stack vertically ------- */
@media (max-width: 880px) {
  .timeline-h {
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 40px);
  }
  /* On mobile, drop the "Today." terminal — the stacked list ends naturally. */
  .timeline-h__item--terminal { display: none; }
  .timeline-h::before {
    top: 0;
    bottom: 0;
    left: 18px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      to bottom,
      transparent 0,
      var(--rule-2) 32px,
      var(--rule-2) calc(100% - 32px),
      transparent 100%
    );
    transform: none;
  }
  .timeline-h__item {
    min-height: 0;
    padding: 8px 0 0 48px;
  }
  .timeline-h__item::before {
    top: 18px;
    left: 18px;
    transform: translate(-50%, 0);
    width: 9px;
    height: 9px;
  }
  .timeline-h__item:hover::before { transform: translate(-50%, 0) scale(1.4); }
  .timeline-h__item::after { display: none; }

  .milestone-h {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    max-width: none;
    width: 100%;
    text-align: left;
    padding: 18px 20px;
  }
  .timeline-h__item--above .milestone-h,
  .timeline-h__item--below .milestone-h {
    top: auto;
    bottom: auto;
  }
  .milestone-h:hover { transform: translateY(-3px); }
  .milestone-h__year { font-size: 36px; }
  .milestone-h__title { font-size: 17px; }
}

/* ----------------------------- Meet the Team ----------------------------- */
/* Two stacked bands on one slide: a full-width environmental group photo
   (the team together) above a hairline rule, then the 5 individual
   portraits (the roster) below. The rich content fills the slide — the
   air sits around the composition, not inside it. */
#exec-team { padding-top: clamp(40px, 4.2vw, 64px); padding-bottom: clamp(40px, 4.2vw, 64px); }
#exec-team .section__head { margin-bottom: clamp(18px, 2vw, 28px); }

/* Group photo band */
.team-group { margin: 0 0 clamp(28px, 3vw, 44px); }
.team-group__img {
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--paper);
  border: 1px solid rgba(29, 29, 26, 0.06);
}
.team-group__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.team-group__cap {
  position: relative;
  display: inline-block;
  margin-top: 16px;
  padding-top: 13px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 36;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ink-3);
}
.team-group__cap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
@media (max-width: 880px) {
  .team-group__img { aspect-ratio: 4 / 3; }
}

/* Roster */
.exec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.2vw, 36px);
  border-top: 1px solid var(--rule-2);
  padding-top: clamp(24px, 2.6vw, 36px);
}
@media (max-width: 880px) {
  .exec-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
.exec { margin: 0; }
.exec__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--paper);
  border: 1px solid rgba(29, 29, 26, 0.06);
}
.exec__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.exec__name {
  display: block;
  margin: 16px 0 4px;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.exec__role {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.35;
}

/* ----------------------------- Portfolio overview (consolidated) ----------------------------- */
.portfolio-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
@media (max-width: 880px) {
  .portfolio-overview { grid-template-columns: 1fr; gap: 24px; }
}
.overview-card { margin: 0; }
.overview-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  background: var(--paper);
}
.overview-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.95) contrast(1.02);
  transition: transform 0.6s ease;
}
/* Per-photo crops — each source is landscape cropped into the 5/6 card. */
.overview-card__img--retail img { object-position: 74% 42%; }       /* keep the Carrefour storefront (right) */
.overview-card__img--logistics img { object-position: center 56%; }  /* warehouses + trucks, trim sky */
.overview-card__img--residential img { object-position: 60% center; } /* façade + doorway */
.overview-card:hover .overview-card__img img { transform: scale(1.02); }
.overview-card__cap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 0;
}
.overview-card__class {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.overview-card__detail {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Logo strip */
.logo-strip {
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--rule-2);
}
.logo-strip__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
  text-align: center;
}
.logo-strip__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}
.logo-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 28px;
}
.logo-strip__item img {
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%);
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.logo-strip__item:hover img { opacity: 1; }
.logo-strip__item--mb img { height: 26px; }
.logo-strip__wordmark {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

/* Dark-section variant: inverted logos, paper-on-ink colored wordmark */
.logo-strip__row--ink {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid rgba(237, 229, 210, 0.18);
}
.logo-strip__row--ink .logo-strip__item img {
  filter: brightness(0) invert(1);
  opacity: 0.78;
}
.logo-strip__row--ink .logo-strip__item:hover img { opacity: 1; }
.logo-strip__wordmark--ink { color: var(--paper-on-ink); }

/* Anchor-tenant logos under the Track Record tenants line — no extra
   divider (the metrics border sits just above), equal spacing, centered. */
.track__logos {
  border-top: none;
  margin-top: clamp(18px, 2.2vw, 30px);
  justify-content: center;
  gap: clamp(28px, 4vw, 60px);
}

/* ----------------------------- Portfolio (legacy, kept for fallback) ----------------------------- */
.portfolio {
  display: grid;
  gap: clamp(56px, 7vw, 96px);
}
.portfolio__group { }
.portfolio__class {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 36;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.005em;
  color: var(--ink-3);
  margin: 0 0 28px;
}
.portfolio__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 36px);
}
.portfolio__grid--3 { grid-template-columns: repeat(3, 1fr); }
.portfolio__grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) {
  .portfolio__grid--3,
  .portfolio__grid--2 { grid-template-columns: 1fr; }
}

.asset { margin: 0; }
.asset__img {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  aspect-ratio: 4 / 5;
}
.asset__img--tall { aspect-ratio: 4 / 5; }
.asset__img--wide { aspect-ratio: 3 / 2; }
.asset__img--portrait { aspect-ratio: 3 / 4; }
.asset--offset { margin-top: 32px; }
@media (max-width: 880px) {
  .asset--offset { margin-top: 0; }
}
.asset__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
  filter: saturate(0.95) contrast(1.02);
}
.asset:hover .asset__img img { transform: scale(1.02); }
.asset__cap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 0 0;
}
.asset__tenant {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.asset__loc {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ----------------------------- Leaders ----------------------------- */
.leaders {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.2vw, 32px);
}
.leader {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 880px) {
  .leader { grid-template-columns: 1fr; gap: 20px; }
}
.leader__portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  position: relative;
}
.leader__name {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.012em;
  margin: 0 0 4px;
}
.leader__role {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.leader__bio {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.section--quiet {
  background: var(--paper-2);
  padding: clamp(80px, 9vw, 144px) 0;
  text-align: center;
}
.skin-in-game {
  max-width: 860px;
  margin: 0 auto;
}
.skin-in-game__line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 96;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 16px;
}
.skin-in-game__line strong { font-style: normal; font-weight: 500; color: var(--ink); }

/* ----------------------------- Sectors ----------------------------- */
.sectors {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}
.sector {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: baseline;
  gap: 32px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-2);
}
.sector:last-child { border-bottom: 1px solid var(--rule-2); }
.sector__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 36;
  font-size: 18px;
  color: var(--accent);
}
.sector__name {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* ----------------------------- Contact form ----------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  position: relative;
}
.contact::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(38.5% - 1px);
  width: 1px;
  background: var(--rule);
}
@media (max-width: 880px) {
  .contact { grid-template-columns: 1fr; }
  .contact::before { display: none; }
}
.contact__letterhead {
  padding-right: 24px;
}
.contact__locs {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 36;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 28px;
}
.contact__email {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  letter-spacing: 0.01em;
}
.contact__email:hover { border-color: var(--ink); color: var(--ink); }
.form { display: grid; gap: 16px; max-width: 560px; }
.form__row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .form__row--2 { grid-template-columns: 1fr; }
}
.field { display: grid; gap: 4px; }
.field__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  border: none;
  border-bottom: 1px solid var(--rule-2);
  background: transparent;
  padding: 6px 0 8px;
  font-size: 15px;
  color: var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--ink); }
.field textarea { resize: vertical; }

.form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.form__direct {
  margin: 0;
  font-size: 14px;
  color: var(--ink-3);
}
.form__direct a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; }
.form__direct a:hover { border-color: var(--ink); }
.form__success {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}

/* ----------------------------- Footer ----------------------------- */
.footer {
  background: var(--ink-bg);
  color: var(--paper-on-ink);
  padding: 56px 0 40px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
@media (max-width: 880px) {
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer__logo-img {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer__word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.footer__locs {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237, 229, 210, 0.6);
}
.footer__nav {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer__nav a {
  font-size: 13px;
  color: rgba(237, 229, 210, 0.78);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer__nav a:hover { color: var(--paper-on-ink); }
.footer__copy {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(237, 229, 210, 0.5);
  text-align: right;
}
@media (max-width: 880px) {
  .footer__copy { text-align: center; }
}

/* ----------------------------- Placeholders ----------------------------- */
/* Designed to be obvious during review — never decorative. */
.placeholder {
  position: relative;
  border: 1.5px dashed var(--rule-2);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(106, 104, 85, 0.04) 0 12px,
      rgba(106, 104, 85, 0.07) 12px 24px
    );
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3vw, 40px);
  color: var(--ink-2);
}
.placeholder--portrait {
  min-height: clamp(360px, 50vw, 560px);
  aspect-ratio: 4 / 5;
}
.placeholder--portrait-tight {
  min-height: 280px;
  aspect-ratio: 4 / 5;
  margin-bottom: 24px;
}
.placeholder--strip {
  margin-top: 24px;
  min-height: 110px;
}
.placeholder--quote {
  margin-top: 20px;
  min-height: 100px;
  padding: 16px 20px;
  border-color: rgba(237, 229, 210, 0.25);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(237, 229, 210, 0.04) 0 12px,
      rgba(237, 229, 210, 0.08) 12px 24px
    );
  color: rgba(237, 229, 210, 0.85);
}
.placeholder__inner { text-align: center; max-width: 460px; }
.placeholder__tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.placeholder__tag--ink {
  background: var(--paper-on-ink);
  color: var(--ink-bg);
}
.placeholder__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--ink);
}
.placeholder__title--ink { color: var(--paper-on-ink); }
.placeholder__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.placeholder__note--ink { color: rgba(237, 229, 210, 0.7); }
.placeholder__meta {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-3);
  margin: 8px 0 0;
}
.placeholder-inline {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(106, 104, 85, 0.08);
  border: 1px dashed rgba(106, 104, 85, 0.4);
  padding: 4px 10px;
  margin-top: 12px;
  border-radius: var(--radius);
  font-style: italic;
}
.placeholder-inline--center { display: block; text-align: center; margin: 16px auto 0; max-width: max-content; }