/* Manifesto page */

.manifesto-bar{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 18px;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.manifesto-bar .lights{ display:flex; gap: 7px; }
.manifesto-bar .lights .lt{ width: 12px; height: 12px; border-radius: 999px; }
.manifesto-bar .lights .lt.r{ background:#ff5f57; cursor: pointer; }
.manifesto-bar .lights .lt.y{ background:#febc2e; }
.manifesto-bar .lights .lt.g{ background:#28c840; }
.manifesto-bar .title{ flex: 1; padding-left: 14px; display:flex; gap: 12px; align-items:center; font-family: var(--f-mono); font-size: 12px; min-width: 0; }
.manifesto-bar .title b{ font-family: var(--f-display); font-size: 15px; flex: 0 0 auto; }
.manifesto-bar .crumb{ padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); cursor: pointer; }
.manifesto-bar .crumb:hover{ background: rgba(255,255,255,0.18); }
.manifesto-bar .right{ font-family: var(--f-mono); font-size: 12px; opacity: 0.8; }

.manifesto-page{ background: var(--paper); }

/* Hero */
.m-hero{
  padding: 110px 32px 90px;
  max-width: 1280px; margin: 0 auto;
}
.m-hero .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.m-hero h1{
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: 130px; line-height: 0.93;
  margin: 18px 0 0;
  max-width: 1080px;
}
.m-hero h1 .muted{ color: var(--ink-3); }
.m-hero .amber{ color: var(--c-hotel); }
.m-hero .pink{ color: var(--c-agency); }
.m-hero .violet{ color: var(--c-lms); }
.m-hero .meta-line{
  margin-top: 56px;
  display: flex; gap: 36px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
}
.m-hero .meta-line b{ color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; display: block; margin-bottom: 2px; text-transform: none; }

/* Big tenet */
.tenet{
  padding: 110px 32px;
  border-top: 1px solid var(--line);
}
.tenet .inner{
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 0.4fr 1fr; gap: 60px;
  align-items: flex-start;
}
.tenet .num{
  font-family: var(--f-display); font-weight: 600;
  font-size: 200px; line-height: 0.85; letter-spacing: -0.05em;
  color: var(--tcol, var(--ink));
}
.tenet .body{ display: flex; flex-direction: column; gap: 22px; }
.tenet .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tenet h2{
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em;
  font-size: 72px; line-height: 1; margin: 0;
}
.tenet h2 .accent{ color: var(--tcol, var(--ink)); }
.tenet p{ font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 640px; margin: 0; }
.tenet .quote{
  margin-top: 8px;
  padding: 22px 26px;
  background: var(--paper-2); border-radius: 14px;
  font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.35;
  color: var(--ink);
  border-left: 4px solid var(--tcol, var(--ink));
  letter-spacing: -0.015em;
}

/* Tinted variants */
.tenet.tinted-amber{ background: color-mix(in oklch, var(--c-hotel), white 92%); }
.tenet.tinted-pink{ background: color-mix(in oklch, var(--c-agency), white 92%); }
.tenet.tinted-green{ background: color-mix(in oklch, var(--c-desk), white 92%); }
.tenet.tinted-violet{ background: color-mix(in oklch, var(--c-lms), white 92%); }
.tenet.tinted-cyan{ background: color-mix(in oklch, var(--c-chat), white 92%); }
.tenet.dark{ background: var(--ink); color: var(--paper); }
.tenet.dark .eye{ color: rgba(255,255,255,0.65); }
.tenet.dark h2 .accent{ color: var(--paper); }
.tenet.dark p{ color: rgba(255,255,255,0.85); }
.tenet.dark .quote{ background: rgba(255,255,255,0.06); color: var(--paper); }

/* Values grid */
.values{
  padding: 96px 32px; max-width: 1280px; margin: 0 auto;
}
.values .head{ margin-bottom: 36px; }
.values .head .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.values .head h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em; font-size: 56px; margin: 8px 0 0; line-height: 1.02; }
.values-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.value-card{
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.value-card .vnum{
  position: absolute; top: 20px; right: 24px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-3);
}
.value-card h4{ font-family: var(--f-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.value-card p{ color: var(--ink-2); margin: 0; line-height: 1.55; font-size: 15px; }

/* Timeline */
.timeline-sec{
  padding: 96px 32px; background: var(--paper-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.timeline-sec .inner{ max-width: 1080px; margin: 0 auto; }
.timeline-sec h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em; font-size: 56px; margin: 0 0 36px; line-height: 1.02; }
.tl{
  position: relative;
  padding-left: 28px;
}
.tl::before{
  content:""; position:absolute; top: 6px; bottom: 6px; left: 5px;
  width: 2px; background: var(--line);
}
.tl-item{
  position: relative;
  padding: 14px 0;
  display: grid; grid-template-columns: 120px 1fr; gap: 36px;
  align-items: baseline;
}
.tl-item::before{
  content:""; position: absolute; left: -28px; top: 22px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--paper); border: 2px solid var(--ink);
}
.tl-item.highlight::before{ background: var(--tcol, var(--c-hotel)); border-color: var(--tcol, var(--c-hotel)); }
.tl-item .year{ font-family: var(--f-display); font-weight: 600; font-size: 28px; letter-spacing: -0.015em; }
.tl-item .what{ font-size: 17px; color: var(--ink-2); line-height: 1.5; }
.tl-item .what b{ color: var(--ink); font-weight: 600; }

/* Team / founders */
.team-sec{
  padding: 96px 32px; max-width: 1280px; margin: 0 auto;
}
.team-sec .head{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; gap: 24px; }
.team-sec h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em; font-size: 56px; line-height: 1.02; margin: 8px 0 0; }
.team-sec .head .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.team-sec .head .sub{ color: var(--ink-3); max-width: 380px; font-size: 15px; line-height: 1.5; }

.team-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.member{
  display: flex; flex-direction: column; gap: 10px;
}
.member .ph{
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: var(--mcol, var(--ink));
  color: var(--mtxt, var(--paper));
  display: flex; align-items: flex-end; padding: 18px;
  font-family: var(--f-display); font-weight: 600; font-size: 56px; line-height: 0.85;
  letter-spacing: -0.04em;
}
.member .name{ font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; margin: 0; }
.member .role{ font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.team-sec .openings{
  margin-top: 36px; padding: 22px 28px;
  background: var(--ink); color: var(--paper);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.team-sec .openings .l{ display: flex; flex-direction: column; gap: 4px; }
.team-sec .openings h3{ font-family: var(--f-display); font-weight: 600; font-size: 24px; margin: 0; letter-spacing: -0.015em; }
.team-sec .openings p{ color: rgba(255,255,255,0.7); margin: 0; font-size: 14px; }
.team-sec .openings .btn{ background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Closing CTA */
.m-cta{
  padding: 120px 32px;
  background: var(--ink); color: var(--paper);
  text-align: center;
}
.m-cta h2{
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: 96px; line-height: 0.95; margin: 0 0 18px; max-width: 1100px; margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.m-cta .accent{ color: var(--c-hotel); }
.m-cta p{ color: rgba(255,255,255,0.72); margin: 0 auto 32px; font-size: 19px; max-width: 540px; }
.m-cta .row{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.m-cta .btn{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.m-cta .btn.outline{ background: transparent; color: var(--paper); border: 1.5px solid rgba(255,255,255,0.5); }

@media (max-width: 1000px){
  .m-hero h1{ font-size: 80px; }
  .tenet .inner{ grid-template-columns: 1fr; gap: 28px; }
  .tenet .num{ font-size: 140px; }
  .tenet h2{ font-size: 52px; }
  .values-grid, .team-grid{ grid-template-columns: 1fr 1fr; }
  .m-cta h2{ font-size: 64px; }
  .tl-item{ grid-template-columns: 80px 1fr; gap: 16px; }
}
@media (max-width: 640px){
  .manifesto-bar .right{ display: none; }
  .manifesto-bar .title > span:not(.crumb){ display: none; }
  .m-hero h1{ font-size: 56px; }
  .tenet h2{ font-size: 40px; }
  .values-grid, .team-grid{ grid-template-columns: 1fr; }
  .m-cta h2{ font-size: 48px; }
}