/* ============================================================
   /company. The investor surface: hero, city hubs, the TiempOS
   demo and the context section.
   ============================================================ */

/* == S1 Hero. Copied from page-about.css 22-39 ================ */
.page-hero {
  position: relative;
  width: 100%;
  min-height: var(--hero-h);
  background-color: var(--media);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Top padding keeps the title off the nav when the lede outgrows --hero-h on a phone. */
.page-hero__content { position: relative; z-index: var(--z-raised); padding: 48px var(--pad-x) 48px; }
.page-hero__content h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--crema); line-height: 1.1; letter-spacing: -0.02em; max-width: 640px; text-wrap: balance; }
.page-hero__content h1 em { font-style: italic; }
.page-hero__content p { color: rgba(var(--crema-rgb), 0.85); font-size: 1.05rem; max-width: 52ch; margin-top: 12px; }
.page-hero__content .btn-primary { margin-top: 24px; }

/* Cream band between the hero and the hubs. Same vertical padding as the homepage. */
.company-seam {
  padding: var(--band) var(--pad-x);
  text-align: center;
}
.company-seam__title {
  margin: 0 auto;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--clockwork);
  white-space: nowrap;
}
/* One curve. The slot starts at the width of "Product", so the period
   sits against it. On the way out the slot eases to the width of
   "Company" and "ized" eases shut, and the period rides the right edge
   the whole way. Both words are pinned to that edge, so neither one
   opens a gap in front of the period. */
.company-seam__drop {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: var(--seam-ized, auto);
  white-space: nowrap;
  opacity: 1;
  transition:
    opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
    width 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.company-seam__shift {
  display: inline-block;
  position: relative;
  height: 1lh;
  overflow: hidden;
  vertical-align: bottom;
  text-align: right;
  width: var(--seam-from, auto);
  /* A full second after "ized" starts to close. */
  transition: width 1.25s cubic-bezier(0.22, 1, 0.36, 1) 1s;
}
.company-seam__from,
.company-seam__to {
  white-space: nowrap;
  line-height: 1.12;
  transition: transform 1.25s cubic-bezier(0.22, 1, 0.36, 1) 1s;
}
.company-seam__from { display: inline-block; transform: translateY(0); }
.company-seam__to {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(110%);
}
.company-seam.is-leaving .company-seam__drop,
.company-seam.is-settled .company-seam__drop {
  opacity: 0;
  width: 0;
}
.company-seam.is-leaving .company-seam__shift,
.company-seam.is-settled .company-seam__shift {
  width: var(--seam-to);
}
.company-seam.is-leaving .company-seam__from,
.company-seam.is-settled .company-seam__from {
  transform: translateY(-110%);
}
.company-seam.is-leaving .company-seam__to,
.company-seam.is-settled .company-seam__to {
  transform: translateY(0);
}
.company-seam__body {
  max-width: 46ch;
  margin: 22px auto 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--tierrita);
}


/* == Section A. City hubs ===================================== */
/* section-a:start */
/* Three colours only: the media ground, crema, honey.
   Desktop: the heading and the globe stack on the left, the city legend and
   the feature list run down the right. Vertical padding matches the homepage
   band. The globe fades at the content edge.
   The globe is a <canvas> that page-company.js redraws. The canvas is 106%
   of the stage wide and hangs 3% past each side; the script sizes the globe
   so its atmosphere fades out inside the canvas on the top and both sides.
   The stage (100 : 88) holds the globe's top 85% and fades it into the
   ground. Wider than 1024 the globe is scaled up; see the block below. */
.hubs { overflow-x: clip; padding: var(--band) var(--pad-x); }
.hubs-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas: "head side" "globe side";
  grid-template-rows: auto 1fr;
  column-gap: var(--s-12);
  row-gap: var(--s-8);
}

.hubs-head { grid-area: head; max-width: 720px; }
.hubs-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
.hubs-lede {
  margin-top: 16px;
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(var(--crema-rgb), 0.75);
}

.hubs-side {
  grid-area: side;
  min-width: 0;
  padding-bottom: var(--s-12);
}

/* -- Globe -------------------------------------------------------- */
.hubs-globe { grid-area: globe; align-self: end; margin: 0; min-width: 0; }

.hubs-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 88;
  cursor: grab;
  /* Touch: sideways drags turn the globe, vertical ones still scroll the page */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.hubs-stage.is-dragging { cursor: grabbing; user-select: none; }
.hubs-stage:focus { outline: none; }
.hubs-stage:focus-visible { box-shadow: var(--ring-focus); border-radius: var(--r-md); }
.hubs-canvas,
.hubs-pins {
  position: absolute;
  top: 0;
  left: -3%;
  width: 106%;
  height: 100%;
}
.hubs-canvas {
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
  mask-image: linear-gradient(to bottom, black 80%, transparent);
}

/* Two columns: a 1.35x globe that keeps the base globe's top, moved left by
   7% of the stage (--hubs-shift). It runs past the crop at the bottom, off
   the page edge a little on the left at narrower widths, and under the gap
   and the start of the feature column on the right. The canvas grows to hold
   it (16px above and 12% left for the glow, out to 138% on the right) and
   fades out on the right. By where the feature text starts (about 79% of
   the canvas) the globe is down to about 20%, and it is gone by 90%, so no
   bright line sits under the text. The camera rests lower (--hubs-pitch) so
   the UAE pins land above the bottom fade; pins past --hubs-pin-edge of the
   canvas width are hidden. */
@media (min-width: 1025px) {
  /* The feature column sets the section height. Section padding is the
     homepage band, so the column does not add a second bottom inset.
     The globe is out of the height calculation. Its grid cell stretches
     over row 2 and is a size container; the stage sits absolutely inside
     it, at the row's top, or lower when the row is tall enough that its
     bottom would land more than --hubs-lift above the content edge
     (the stage is 88cqw tall: aspect 100 : 88). The canvas runs from
     16px above the stage down to that edge, which crops it, with the
     bottom fade tied to the edge. .hubs clips it. */
  .hubs { overflow: clip; }
  .hubs-side { position: relative; z-index: 1; padding-bottom: 0; }
  .hubs-globe {
    --hubs-lift: var(--band);
    align-self: stretch;
    position: relative;
    container-type: size;
  }
  .hubs-stage {
    --hubs-scale: 1.35;
    --hubs-shift: -0.07;
    --hubs-pitch: 13;
    --hubs-pin-edge: 0.68;
    --hubs-top: max(0px, 100cqh - var(--hubs-lift) - 88cqw);
    position: absolute;
    top: var(--hubs-top);
    left: 0;
  }
  .hubs-canvas,
  .hubs-pins {
    top: -16px;
    left: -12%;
    width: 150%;
    height: calc(100cqh - var(--hubs-top) + 16px);
  }
  .hubs-canvas {
    -webkit-mask-image:
      linear-gradient(to bottom, black 80%, transparent),
      linear-gradient(to right, black 64%, rgba(0, 0, 0, 0.22) 78%, transparent 90%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, black 80%, transparent),
      linear-gradient(to right, black 64%, rgba(0, 0, 0, 0.22) 78%, transparent 90%);
    mask-composite: intersect;
  }
}

.hubs-pins { pointer-events: none; }

.hubs-pin {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: auto;
  transition: opacity 0.3s var(--ease-std);
}
.hubs-pin.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.hubs-pin--live { color: var(--honey); }
.hubs-pin--soon { color: rgba(var(--crema-rgb), 0.5); }
.hubs-pin--next { color: rgba(var(--honey-rgb), 0.6); }

/* The icon's tip sits on the city. A solid ground-coloured teardrop sits
   behind it, so lines and a neighbouring pin do not show through. */
.hubs-pin::before,
.hubs-pin__icon {
  position: absolute;
  left: -9px;
  top: -19px;
  width: 18px;
  height: 20px;
  transform-origin: 50% 95%;
  transition: transform 0.2s var(--ease-out-quart);
}
.hubs-pin::before {
  content: "";
  background: var(--media);
  -webkit-mask: url("/assets/company/hubs-pin-fill.svg") center / contain no-repeat;
  mask: url("/assets/company/hubs-pin-fill.svg") center / contain no-repeat;
}
.hubs-pin:hover::before,
.hubs-pin.is-active::before { transform: scale(1.2); }
.hubs-pin__icon {
  background: currentColor;
  -webkit-mask: url("/assets/company/hubs-pin.svg") center / contain no-repeat;
  mask: url("/assets/company/hubs-pin.svg") center / contain no-repeat;
}
.hubs-pin:hover .hubs-pin__icon,
.hubs-pin.is-active .hubs-pin__icon { transform: scale(1.2); }

/* A ring on the ground under a live pin. */
.hubs-pin--live::after {
  content: "";
  position: absolute;
  left: -9px;
  top: -3.5px;
  width: 18px;
  height: 7px;
  border: 1px solid rgba(var(--honey-rgb), 0.8);
  border-radius: 50%;
  animation: hubs-pulse 2.2s var(--ease-out-quart) infinite;
}
@keyframes hubs-pulse {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.hubs-pin__label {
  position: absolute;
  top: -19px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 18px;
  padding: 0 7px;
  border-radius: var(--r-sm);
  background: rgba(var(--media-rgb), 0.82);
  color: var(--crema);
  transition: background-color 0.2s var(--ease-std);
}
.hubs-pin[data-side="right"] .hubs-pin__label { left: 12px; }
.hubs-pin[data-side="left"]  .hubs-pin__label { right: 12px; }
.hubs-pin--up   .hubs-pin__label { top: -30px; }
.hubs-pin--down .hubs-pin__label { top: -8px; }

.hubs-pin--soon .hubs-pin__label { color: rgba(var(--crema-rgb), 0.55); }
.hubs-pin__status {
  display: none;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--honey);
}
/* Next and later pins always say so; live pins say "Live now" on hover. */
.hubs-pin--soon .hubs-pin__status { display: inline; color: rgba(var(--crema-rgb), 0.45); }
.hubs-pin--next .hubs-pin__label { color: rgba(var(--crema-rgb), 0.8); }
.hubs-pin--next .hubs-pin__status { color: rgba(var(--honey-rgb), 0.75); }

.hubs-pin:hover,
.hubs-pin.is-active { z-index: var(--z-lifted); }
.hubs-pin:hover .hubs-pin__label,
.hubs-pin.is-active .hubs-pin__label { background: var(--media); }
.hubs-pin:hover .hubs-pin__status,
.hubs-pin.is-active .hubs-pin__status { display: inline; }

/* -- Legend: a compact note at the top of the right column --------- */
.hubs-legend {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hubs-legend__city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(var(--crema-rgb), 0.14);
  border-radius: 999px;
  background: transparent;
  color: var(--crema);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-std), background-color 0.2s var(--ease-std);
}
.hubs-legend__city:hover,
.hubs-legend__city.is-active { border-color: rgba(var(--honey-rgb), 0.6); background: rgba(var(--crema-rgb), 0.04); }
.hubs-legend__city:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.hubs-legend__city--soon { color: rgba(var(--crema-rgb), 0.6); }
.hubs-legend__pin {
  width: 10px;
  height: 11px;
  background: var(--honey);
  -webkit-mask: url("/assets/company/hubs-pin.svg") center / contain no-repeat;
  mask: url("/assets/company/hubs-pin.svg") center / contain no-repeat;
}
.hubs-legend__city--soon .hubs-legend__pin { background: rgba(var(--crema-rgb), 0.5); }
.hubs-legend__state {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--honey);
}
.hubs-legend__city--soon .hubs-legend__state { color: rgba(var(--crema-rgb), 0.45); }
/* The next hub reads one step brighter than the later ones: an order, not a list. */
.hubs-legend__city--next { color: rgba(var(--crema-rgb), 0.8); }
.hubs-legend__city--next .hubs-legend__pin { background: rgba(var(--honey-rgb), 0.55); }
.hubs-legend__city--next .hubs-legend__state { color: rgba(var(--honey-rgb), 0.75); }

/* -- Items --------------------------------------------------------- */
.hubs-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
/* Ruled rows rather than boxed cards, so eight fit beside the globe. */
.hubs-item {
  display: grid;
  row-gap: 4px;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-top: 1px solid rgba(var(--crema-rgb), 0.10);
  box-shadow: inset 2px 0 0 transparent;
  transition: box-shadow 0.25s var(--ease-std), background-color 0.25s var(--ease-std);
}
.hubs-item:last-child { border-bottom: 1px solid rgba(var(--crema-rgb), 0.10); }
.hubs-item:hover {
  background: rgba(var(--crema-rgb), 0.03);
  box-shadow: inset 2px 0 0 var(--honey);
}
.hubs-item__title { font-size: 1.25rem; line-height: 1.2; }
.hubs-item__soon {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 2px;
  color: rgba(var(--crema-rgb), 0.55);
}
.hubs-item__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(var(--crema-rgb), 0.72);
}

/* One column: heading, features, legend, then the globe on the bottom edge.
   It starts at 1024 because two columns there left the feature list far
   taller than the heading plus the globe. */
@media (max-width: 1024px) {
  .hubs-inner { display: flex; flex-direction: column; gap: var(--s-8); }
  .hubs-side { display: contents; }
  .hubs-head { order: 1; }
  .hubs-items { order: 2; }
  .hubs-legend { order: 3; margin: 0 0 calc(-1 * var(--s-4)); }
  .hubs-globe { order: 4; width: 100%; max-width: 640px; align-self: center; }
  .hubs-stage { width: 100%; margin-left: 0; }
}
/* Tablet: the features sit in two columns so the list stays short. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hubs-items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
  .hubs-item:nth-last-child(2) { border-bottom: 1px solid rgba(var(--crema-rgb), 0.10); }
}
@media (max-width: 767px) {
  .hubs-item { padding-left: var(--s-3); }
  .hubs-pin__label { font-size: var(--fs-micro); line-height: 16px; padding: 0 5px; }
  /* Three US pins share a small globe here: names only, status on hover or
     when the city's chip is active, so the labels never collide. */
  .hubs-pin--soon .hubs-pin__status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hubs-pin--live::after { animation: none; opacity: 0; }
  .hubs-item,
  .hubs-pin::before,
  .hubs-pin__icon { transition: none; }
}
/* section-a:end */


/* == Section B. TiempOS live demo ============================= */
/* section-b:start */
/* A self-playing mockup of TiempOS over a plaza photograph.
   Outside the app frame: website tokens only (media, crema, honey).
   Inside .os-app: the TiempOS dark theme, ported from
   tiempos apps/web/src/routes/layout.css and scoped here as --os-*.
   Swap the backdrop for a photo by changing --os-bg on .os-demo. */
.os-demo {
  --os-bg: url("/assets/company/os-plaza.webp");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--media);
  color: var(--crema);
  padding: var(--band) var(--pad-x);
}
.os-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background: var(--os-bg) center / cover no-repeat;
}
/* Same graded blur as the homepage booking section: strongest on the
   bottom edge and gone by the top third. The mask grades a backdrop-filter. */
.os-demo__blur {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 70%);
  mask-image: linear-gradient(to top, #000 0%, transparent 70%);
}
/* Two scrims. The vertical one keeps the heading on a dark ground; the side
   one sits under the step list, whose muted text needs it to stay AA. */
.os-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background:
    linear-gradient(90deg, rgba(var(--media-rgb), 0.5) 0%, rgba(var(--media-rgb), 0.34) 30%, rgba(var(--media-rgb), 0) 55%),
    linear-gradient(180deg,
      rgba(var(--media-rgb), 0.55) 0%,
      rgba(var(--media-rgb), 0.18) 40%,
      rgba(var(--media-rgb), 0.06) 72%,
      rgba(var(--media-rgb), 0.36) 100%);
}
.os-inner { position: relative; max-width: var(--content-max); margin: 0 auto; }

.os-head { margin-bottom: var(--s-12); }
.os-title { font-size: clamp(2rem, 4vw, 3rem); line-height: var(--lh-tight); color: var(--crema); }
.os-lede { margin-top: var(--s-4); max-width: 56ch; font-size: 1.05rem; line-height: var(--lh-relaxed); color: var(--on-dark-2); }

.os-stage {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--s-10);
  align-items: stretch;
}
/* The rail runs the frame's full height so its action row can sit on the
   frame's bottom edge. */
.os-rail { display: flex; flex-direction: column; min-width: 0; }

/* ── Step selector ─────────────────────────────────────────── */
.os-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.os-step {
  --os-progress: 0;
  position: relative;
  display: flex;
  gap: var(--s-3);
  width: 100%;
  padding: 14px 16px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--crema);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);
}
.os-step:hover { opacity: 0.92; background: var(--fill-dark); }
.os-step:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.os-step.is-active {
  opacity: 1;
  background: rgba(var(--media-rgb), 0.6);
  border-color: var(--line-dark);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.os-step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-circle);
  border: 1px solid rgba(var(--crema-rgb), 0.3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.os-step.is-done .os-step__num { border-color: rgba(var(--honey-rgb), 0.7); color: var(--honey); }
.os-step.is-active .os-step__num { background: var(--honey); border-color: var(--honey); color: var(--crema); }
.os-step__text { display: grid; grid-template-rows: auto 0fr; min-width: 0; transition: grid-template-rows var(--dur-3) var(--ease-std); }
.os-step.is-active .os-step__text { grid-template-rows: auto 1fr; }
.os-step__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.6; }
.os-step__desc { overflow: hidden; min-height: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--on-dark-2); }
.os-step__bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 2px;
  border-radius: var(--r-xxs);
  background: var(--line-dark);
  overflow: hidden;
  opacity: 0;
}
.os-step.is-active .os-step__bar { opacity: 1; }
.os-step__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--honey);
  transform-origin: left center;
  transform: scaleX(var(--os-progress));
}
.os-caption { display: none; }

.os-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-6); }
.os-play {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(var(--crema-rgb), 0.25);
  border-radius: var(--r-pill);
  background: rgba(var(--media-rgb), 0.45);
  color: var(--crema);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-1);
}
.os-play:hover { background: var(--fill-dark-2); border-color: rgba(var(--crema-rgb), 0.5); }
.os-play:active { transform: scale(0.97); }
.os-play:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.os-play .os-i { width: 12px; height: 12px; }

/* ── The app frame ─────────────────────────────────────────── */
.os-frame { min-width: 0; container: osframe / inline-size; }

.os-app {
  position: relative;
  display: flex;
  height: 640px;
  overflow: hidden;
  border-radius: var(--os-r-panel);
  background: transparent;
  box-shadow: 0 0 0 1px var(--os-stroke), 0 12px 32px oklch(0% 0 0 / 0.5), 0 40px 90px oklch(0% 0 0 / 0.4);
  color: var(--os-ink);
  font-family: var(--font-body);
  font-size: var(--fs-os);
  line-height: var(--lh-os);
  text-align: left;
}

/* Sidebar (AppShell.svelte + DrawerItem.svelte) */
/* Frosted glass. The app frame is transparent behind the sidebar (the main
   column carries the page colour), so the blurred skyline shows through a
   tinted panel. Grain is a tiled SVG at 5% so the glass reads as a surface. */
.os-side {
  /* A near-neutral dark. saturate() stays below 1 so the orange skyline is
     calmed, not pushed red, once the blur is live after the reveal. */
  --os-side-glass: oklch(15% 0.006 40 / 0.5);
  /* Muted ink runs a step brighter on the glass to hold AA over the lights. */
  --os-ink-muted: rgba(var(--crema-rgb), 0.8);
  --os-side-dur: 300ms;
  --os-side-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 212px;
  padding: 0 8px 8px;
  overflow: hidden;
  border-right: 1px solid rgba(var(--crema-rgb), 0.12);
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, var(--os-side-glass);
  box-shadow: inset -1px 0 0 rgba(var(--crema-rgb), 0.04), inset 0 1px 0 rgba(var(--crema-rgb), 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  backdrop-filter: blur(10px) saturate(0.8);
  /* Expanding: the width opens first, the labels follow. */
  transition: width var(--os-side-dur) var(--os-side-ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .os-side { background: var(--os-panel); }
}
/* The wordmark row: 64px tall with 8px under it before the nav, the mark and
   the toggle both centred on it, and the mark's left edge on the nav icons'. */
.os-brand { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 64px; margin-bottom: 8px; }
.os-brand__mark { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; }
.os-drawer-toggle { margin-right: 0; transition: margin-right var(--os-side-dur) var(--os-side-ease), background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease); }

/* What fades as the drawer closes. Nothing here changes size, so no line
   rewraps mid-animation: the words just clip under the narrowing edge. */
.os-brand__mark,
.os-nav__label,
.os-nav__meta,
.os-client__name,
.os-client__dot,
.os-user__text,
.os-user > .os-i {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 180ms var(--os-side-ease) 160ms, transform 220ms var(--os-side-ease) 160ms, visibility 0s linear 0s;
}
.os-brand__mark img { display: block; width: auto; height: 31px; }

.os-nav { display: flex; flex-direction: column; gap: 2px; }
.os-nav__item,
.os-client {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  /* Icons sit 12px in and avatars 10px in, which is dead centre of the
     collapsed 56px rail, so neither moves when the drawer closes. */
  padding: 0 8px 0 12px;
  overflow: hidden;
  border-radius: var(--os-r-control);
  white-space: nowrap;
  transition: background-color var(--os-base) var(--os-ease), color var(--os-fast) var(--os-ease);
}
.os-nav__item:hover,
.os-client:hover,
.os-nav__item.is-active,
.os-client.is-active { background: var(--os-accent-fill); }
.os-nav__item .os-i { width: 15px; height: 15px; }
.os-nav__label,
.os-client__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.os-nav__meta { display: flex; align-items: center; gap: 6px; }
.os-nav__badge { font-size: 10px; font-weight: 600; color: var(--os-danger); }
.os-nav__count { font-size: 11px; color: var(--os-ink-muted); }
.os-nav__badge:empty,
.os-nav__count:empty { display: none; }
.os-sep { margin: 12px 8px; border-top: 1px solid var(--os-stroke-subtle); }
.os-clients { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.os-client { padding-left: 10px; }
.os-clients__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.os-client__dot { flex: none; width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--os-tag-green); box-shadow: 0 0 6px color-mix(in srgb, var(--os-tag-green) 65%, transparent); }
.os-side__foot { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.os-user { display: flex; align-items: center; gap: 8px; height: 44px; padding: 6px 6px 6px 4px; overflow: hidden; border-radius: 8px; white-space: nowrap; transition: background-color var(--os-fast) var(--os-ease); }
.os-user:hover { background: var(--os-accent-fill); }
.os-user__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.os-user__name { font-size: 12px; font-weight: 500; }
.os-user__role { font-size: 10px; text-transform: uppercase; color: var(--os-ink-muted); }
.os-user .os-i { width: 12px; height: 12px; color: var(--os-ink-muted); }

.os-client.is-active .os-cav { box-shadow: 0 0 0 1px rgba(var(--crema-rgb), 0.8); }
.os-client.is-active img.os-cav { box-shadow: 0 0 0 1.5px rgba(var(--crema-rgb), 0.85); }

/* Collapsed drawer: the real app's w-14 state. Toggle or narrow frame. */
/* Collapsing: labels fade and slide out first, then the width closes. */
.os-app.is-collapsed .os-side { width: 56px; transition-delay: 110ms; }
.os-app.is-collapsed .os-drawer-toggle { margin-right: 5px; transition-delay: 110ms, 0s, 0s; }
.os-app.is-collapsed .os-brand__mark,
.os-app.is-collapsed .os-nav__label,
.os-app.is-collapsed .os-nav__meta,
.os-app.is-collapsed .os-client__name,
.os-app.is-collapsed .os-client__dot,
.os-app.is-collapsed .os-user__text,
.os-app.is-collapsed .os-user > .os-i {
  opacity: 0;
  transform: translateX(-6px);
  visibility: hidden;
  transition: opacity 120ms var(--os-side-ease), transform 160ms var(--os-side-ease), visibility 0s linear 160ms;
}
@media (prefers-reduced-motion: reduce) {
  .os-side,
  .os-app.is-collapsed .os-side,
  .os-drawer-toggle,
  .os-app.is-collapsed .os-drawer-toggle { transition: none; }
  .os-brand__mark,
  .os-nav__label,
  .os-nav__meta,
  .os-client__name,
  .os-client__dot,
  .os-user__text,
  .os-user > .os-i,
  .os-app.is-collapsed .os-brand__mark,
  .os-app.is-collapsed .os-nav__label,
  .os-app.is-collapsed .os-nav__meta,
  .os-app.is-collapsed .os-client__name,
  .os-app.is-collapsed .os-client__dot,
  .os-app.is-collapsed .os-user__text,
  .os-app.is-collapsed .os-user > .os-i { transform: none; transition: none; }
}

/* ── Container rules. The frame reflows by its own width. ──── */
/* A forced rail hides the toggle, so it waits until the open drawer truly
   cannot fit. At 640px and up the inbox drops its profile pane and the
   drawer still opens and closes. */
@container osframe (max-width: 640px) {
  .os-side { width: 56px; }
  .os-brand__mark,
  .os-drawer-toggle,
  .os-nav__label,
  .os-nav__meta,
  .os-client__name,
  .os-client__dot,
  .os-user__text,
  .os-user .os-i { display: none; }
  .os-brand { justify-content: center; }
  .os-nav__item,
  .os-client { justify-content: center; padding: 0; }
}
@container osframe (max-width: 560px) {
  .os-app { flex-direction: column; height: 620px; }
  .os-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; width: auto; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--os-stroke); }
  .os-brand,
  .os-sep,
  .os-user { display: none; }
  .os-nav { flex-direction: row; order: 1; }
  .os-side__foot { display: contents; }
  .os-side__foot .os-nav__item { order: 2; }
  .os-nav__item { width: 36px; }
  .os-clients { flex-basis: 100%; order: 3; }
  .os-clients__list { flex-direction: row; gap: 4px; overflow-x: auto; }
  .os-client { width: 32px; flex: none; }
  .os-cav { width: 24px; height: 24px; font-size: 9px; }
}

/* ── Page breakpoints for the outer layout ─────────────────── */
@media (max-width: 1024px) {
  .os-stage { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .os-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
  .os-step { flex-direction: column; gap: var(--s-2); padding: 12px 12px 16px; }
  .os-step__text { grid-template-rows: auto 0fr; }
  .os-step.is-active .os-step__text { grid-template-rows: auto 0fr; }
  .os-step__title { font-size: var(--fs-sm); line-height: var(--lh-snug); }
  .os-step__bar { left: 12px; right: 12px; }
  .os-caption { display: block; min-height: 3em; margin-top: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--on-dark-2); }
  .os-caption b { color: var(--crema); font-weight: var(--fw-semibold); }
  /* One column: steps, caption, the app, then Book a Call beside Pause. */
  .os-stage { row-gap: var(--s-4); }
  .os-rail { display: contents; }
  .os-steps { order: 1; }
  .os-caption { order: 2; margin-top: 0; }
  .os-frame { order: 3; }
  .os-controls { order: 4; margin-top: var(--s-2); padding-top: 0; }
}
@media (max-width: 767px) {
  .os-head { margin-bottom: var(--s-8); }
}
@media (max-width: 640px) {
  .os-steps { gap: var(--s-1); }
  .os-step { align-items: center; padding: 10px 4px 14px; }
  .os-step__text { display: none; }
  .os-step__bar { left: 8px; right: 8px; bottom: 6px; }
}
/* section-b:end */


/* == Section C. The compounding system ======================== */
/* Copy on the left, in clockwork. The photo keeps the old column size
   and sits on the right. A straight honey fill rides its bottom edge. */
.compound {
  position: relative;
  overflow: clip;
  padding: var(--band) var(--pad-x);
  scroll-margin-top: 64px;
}
.compound-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  /* Photo is about 10% narrower than the old 1.26 share, still the right column. */
  grid-template-columns: minmax(0, 0.866fr) minmax(0, 1.134fr);
  gap: 28px 40px;
  align-items: start;
}
.compound-inner:focus { outline: none; }
.compound-inner:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 6px;
}

.compound-head {
  display: grid;
  align-self: stretch;
  min-width: 0;
  margin: 0;
}
.compound-head__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  height: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.compound-head__panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.compound-head__panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--clockwork);
}
.compound-head__body {
  max-width: 34em;
}
.compound-head__panel p {
  margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.45;
  color: var(--clockwork);
}
.compound-head__panel p + p { margin-top: 0.85em; }

.compound-media {
  position: relative;
  min-width: 0;
  width: 100%;
}
.compound-media__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(var(--clockwork-rgb), 0.08);
}
.compound-media__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.compound-media__img.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Straight fill along the photo bottom. The frame clips it to the photo edge. */
.compound-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  pointer-events: none;
  overflow: hidden;
}
.compound-line__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--honey);
}
.compound-line__fill.is-filling {
  animation: compoundLineFill 3800ms linear forwards;
}
@keyframes compoundLineFill {
  from { width: 0%; }
  to { width: 100%; }
}

.compound-step-index {
  margin: 8px 0 0;
  text-align: right;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tierrita);
}

@media (prefers-reduced-motion: reduce) {
  .company-seam__drop { display: none; }
  .company-seam__from { display: none; }
  .company-seam__from,
  .company-seam__to,
  .company-seam__drop { transition: none; }
  .company-seam__to { opacity: 1; transform: none; }
  .compound-head__panel,
  .compound-media__img { transition: none; }
  .compound-media__img { transform: none; }
  .compound-line__fill.is-filling { animation: none; width: 100%; }
}

@media (max-width: 900px) {
  .compound-inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 16px 20px;
  }
  .compound-media__frame { aspect-ratio: 5 / 4; }
}

@media (max-width: 767px) {
  .compound-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .compound-head__panel {
    height: auto;
    justify-content: flex-start;
    gap: 16px;
  }
  .compound-head__panel h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .compound-media { width: 100%; }
  .compound-media__frame { aspect-ratio: 16 / 11; }
}