/* ============================================================
   Thaleria — About Us section + shared side-rail shell + 404
   Ported as-is from Claude Design "Full website WIP".
   ============================================================ */

/* --- About shell: sticky side rail + main content -------- */
.tl-about-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--gutter-md);
  gap: var(--space-8);
}
.tl-about-shell__main { min-width: 0; }
.tl-about-shell__main .tl-container {
  max-width: none;
  padding: 0;
}

.tl-side-subnav {
  position: relative;
  align-self: stretch;
}
.tl-side-subnav__sticky {
  position: sticky;
  top: 96px;
  padding: var(--space-12) 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tl-side-subnav__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.tl-side-subnav__label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--fg-accent);
  border-radius: 2px;
}
.tl-side-subnav__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--border-1);
}
.tl-side-subnav__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: 12px 14px 12px 18px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.tl-side-subnav__item:hover { color: var(--fg-1); }
.tl-side-subnav__item.is-active {
  color: var(--orange-700);
  border-left-color: var(--orange-700);
  font-weight: var(--weight-semibold);
}
.tl-side-subnav__num {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  width: 22px;
}
.tl-side-subnav__item.is-active .tl-side-subnav__num { color: var(--orange-700); }
.tl-side-subnav__text { line-height: 1.3; }

@media (max-width: 1024px) {
  .tl-about-shell { display: block; padding: 0; }
  /* Shell no longer supplies the side gutter here, so the content's own
     container must restore it (it's zeroed on desktop to avoid doubling). */
  .tl-about-shell__main .tl-container { padding: 0 var(--gutter-md); }
  /* The rail turns into a sticky top bar in this band, pinning at the same 76px
     as the main navbar and sitting above it in the stack. Anything else on these
     pages that pins below the navbar has to clear the rail as well, so publish
     its height here — declared only inside this media query, so consumers that
     fall back to 0px are automatically correct once the rail is a side column
     again. Consumer: .tl-ds-phase__head in datascience.css. */
  :root { --subnav-h: 60px; }   /* 59.2 rendered (pills + padding + 1px border), rounded up to clear it */
  .tl-side-subnav {
    position: sticky;
    top: 76px;
    z-index: 40;
    background: rgba(244, 246, 250, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border-1);
  }
  .tl-side-subnav__sticky {
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 12px var(--gutter-md);
    max-width: var(--container-lg);
    margin: 0 auto;
    gap: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tl-side-subnav__sticky::-webkit-scrollbar { display: none; }
  .tl-side-subnav__nav { flex-direction: row; border-left: 0; gap: 4px; }
  .tl-side-subnav__item {
    padding: 8px 12px;
    margin-left: 0;
    border-left: 0;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .tl-side-subnav__item.is-active { background: rgba(255, 165, 59, 0.12); border-left: 0; }
  .tl-side-subnav__num { display: none; }
}
@media (max-width: 720px) {
  .tl-side-subnav__label { display: none; }
  .tl-about-shell__main .tl-container { padding: 0 var(--gutter-sm); }
}

/* --- Soft gradient placeholder (avatars, photo slots) --- */
.tl-pl {
  position: relative;
  background: linear-gradient(135deg, #C8D2E1 0%, #E8DBC8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(20, 34, 62, 0.55);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  overflow: hidden;
}
.tl-pl::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(255, 165, 59, 0.18), transparent 60%);
  pointer-events: none;
}
.tl-pl__initials { position: relative; z-index: 1; font-size: 0.42em; }
.tl-pl__icon     { position: relative; z-index: 1; color: rgba(20, 34, 62, 0.45); }
.tl-pl--variant-a { background: linear-gradient(135deg, #C5D4DB 0%, #E0CFB8 100%); }
.tl-pl--variant-b { background: linear-gradient(135deg, #D7CFE2 0%, #F0DCC4 100%); }
.tl-pl--variant-c { background: linear-gradient(135deg, #CDD7E6 0%, #EAD9C2 100%); }
.tl-pl--variant-d { background: linear-gradient(135deg, #C9D7D1 0%, #E5DAC0 100%); }
.tl-pl--variant-e { background: linear-gradient(135deg, #D2CADD 0%, #E7D2B6 100%); }
.tl-pl--variant-f { background: linear-gradient(135deg, #C4CFDC 0%, #EAD5BA 100%); }

/* --- Our Story greeting --------------------------------- */
.tl-greeting {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 920px) { .tl-greeting { grid-template-columns: 1fr; } }
.tl-greeting__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-1);
  overflow: hidden;
}
.tl-greeting__copy h2 {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--weight-semibold);
  margin: var(--space-3) 0 var(--space-6);
  text-wrap: balance;
}
.tl-greeting__copy p { color: var(--fg-2); font-size: 17px; line-height: 1.7; margin: 0 0 var(--space-4); }
.tl-greeting__copy p:last-child { margin-bottom: 0; }

/* --- Timeline ------------------------------------------- */
.tl-timeline-v {
  position: relative;
  max-width: 1000px;
  margin: var(--space-4) auto 0;
  padding: var(--space-8) 0 var(--space-4);
}
.tl-timeline-v__line {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent 0%, var(--orange-700) 6%, var(--orange-700) 94%, transparent 100%);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.tl-timeline-v__rail { display: flex; flex-direction: column; }
.tl-timeline-v__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  min-height: 44px;
}
.tl-timeline-v__row.is-content { min-height: 168px; }
.tl-timeline-v__node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.tl-timeline-v__row.is-content { z-index: 1; }
.tl-timeline-v__row.is-tick .tl-timeline-v__node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--orange-700);
  opacity: 0.55;
  box-shadow: 0 0 0 4px var(--surface-page);
  transform: translate(-50%, -50%);
}
.tl-timeline-v__row.is-content .tl-timeline-v__node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--surface-card);
  border: 2px solid var(--orange-700);
  box-shadow: 0 0 0 6px var(--surface-page), 0 0 0 10px rgba(255, 165, 59, 0.14), 0 6px 18px rgba(20, 34, 62, 0.08);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tl-timeline-v__row.is-content:hover .tl-timeline-v__node::before {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 0 0 6px var(--surface-page), 0 0 0 14px rgba(255, 165, 59, 0.22), 0 8px 22px rgba(20, 34, 62, 0.12);
}
.tl-timeline-v__year {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--orange-700);
  pointer-events: none;
}
.tl-timeline-v__row.is-tick .tl-timeline-v__year { display: none; }
.tl-timeline-v__card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  max-width: 380px;
  box-shadow: var(--shadow-1);
  z-index: 1;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.tl-timeline-v__row.is-content:hover .tl-timeline-v__card {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
}
.tl-timeline-v__row[data-side="right"] .tl-timeline-v__card { grid-column: 3; justify-self: start; margin-left: 4px; }
.tl-timeline-v__row[data-side="left"] .tl-timeline-v__card { grid-column: 1; justify-self: end; margin-right: 4px; text-align: right; }
.tl-timeline-v__row[data-side] .tl-timeline-v__card::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--orange-700);
  opacity: 0.7;
  transform: translateY(-50%);
}
.tl-timeline-v__row[data-side="right"] .tl-timeline-v__card::before { left: -16px; width: 16px; }
.tl-timeline-v__row[data-side="left"] .tl-timeline-v__card::before { right: -16px; width: 16px; }
.tl-timeline-v__title { font-size: 16px; font-weight: var(--weight-semibold); letter-spacing: -0.008em; margin: 0 0 6px; line-height: 1.3; color: var(--fg-1); }
.tl-timeline-v__content { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg-2); }
@media (max-width: 760px) {
  .tl-timeline-v { max-width: none; }
  /* Single left rail: the node/circle sits on the line at 36px, cards stack to its right. */
  .tl-timeline-v__line { left: 36px; transform: none; }
  /* Cards stack in a single column here, so add uniform vertical spacing and
     let each row size to its card (min-height centering left them touching). */
  .tl-timeline-v__rail { gap: var(--space-6); }
  .tl-timeline-v__row { grid-template-columns: 72px 1fr; min-height: 28px; }
  .tl-timeline-v__row.is-content { min-height: 0; }
  .tl-timeline-v__node { grid-column: 1; left: 36px; width: 72px; }
  .tl-timeline-v__row.is-content .tl-timeline-v__node::before { width: 60px; height: 60px; }
  .tl-timeline-v__year { font-size: 14px; }
  .tl-timeline-v__row[data-side="left"] .tl-timeline-v__card,
  .tl-timeline-v__row[data-side="right"] .tl-timeline-v__card { grid-column: 2; justify-self: start; text-align: left; margin: 0; max-width: none; }
  /* No connector stub on mobile — the card already sits beside the rail. */
  .tl-timeline-v__row[data-side] .tl-timeline-v__card::before { display: none; }
}

/* --- Team directory ------------------------------------- */
.tl-team-group { padding: var(--space-12) 0; border-top: 1px solid var(--border-1); }
.tl-team-group:first-child { border-top: 0; padding-top: var(--space-8); }
.tl-team-group__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-3); }
.tl-team-group__title { font-size: 26px; font-weight: var(--weight-semibold); letter-spacing: -0.012em; margin: 0; }
.tl-team-group__count { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.tl-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
.tl-team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.tl-team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: inherit; }
.tl-team-card__photo { aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 64px; position: relative; background: var(--surface-quiet, #edf1f8); }
/* Absolute-fill so a portrait/landscape source can't force the square container
   taller than its 1/1 aspect-ratio — every portrait crops to the same box. */
.tl-team-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-team-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 21, 36, 0) 55%, rgba(11, 21, 36, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px;
  z-index: 2;
}
.tl-team-card:hover .tl-team-card__overlay { opacity: 1; }
.tl-team-card__linkedin {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--fg-on-dark);
  color: var(--navy-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(8px);
  transition: transform var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.tl-team-card:hover .tl-team-card__linkedin { transform: translateY(0); }
.tl-team-card__meta { padding: 16px 18px 18px; border-top: 1px solid var(--border-1); }
.tl-team-card__name { font-size: 15px; font-weight: var(--weight-semibold); margin: 0; letter-spacing: -0.005em; }
.tl-team-card__role { font-size: 13px; color: var(--fg-2); margin: 4px 0 0; line-height: 1.4; }

/* --- Our Entities offices + service locations ----------- */
.tl-offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.tl-office-card {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tl-office-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tl-office-card__role { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-accent); font-weight: var(--weight-semibold); }
.tl-office-card__name { font-size: 18px; font-weight: var(--weight-semibold); margin: 0; letter-spacing: -0.008em; }
.tl-office-card__addr { font-size: 14px; color: var(--fg-2); line-height: 1.6; white-space: pre-line; }
.tl-service-locs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.tl-service-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  font-size: 13px;
  color: var(--fg-1);
  font-weight: var(--weight-medium);
}
.tl-service-loc::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--navy-700); flex: none; }

/* --- IMS pillars ---------------------------------------- */
/* Certifications as hero badges — the page states them here instead of in a
   "Policy pillars" section head. */
.tl-ims-certs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-8); }
.tl-ims-cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-1);
  font-weight: var(--weight-semibold);
}
.tl-ims-cert::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--fg-accent); flex: none; }
/* Prose column shares the page's left edge with the hero and the pillar cards;
   with no section head above it, the first paragraph carries the lead. */
.tl-ims-intro { max-width: 820px; margin: 0 0 var(--space-12); text-align: left; }
.tl-ims-intro p { color: var(--fg-1); font-size: 17px; line-height: 1.75; margin: 0 0 var(--space-5); }
.tl-ims-intro p:first-child { font-size: 20px; line-height: 1.6; }
.tl-ims-intro p:last-child { margin-bottom: 0; }
.tl-ims-intro__cta { margin-top: var(--space-8); }
@media (max-width: 640px) {
  .tl-ims-intro p:first-child { font-size: 18px; }
}
.tl-ims-intro__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-1);
  font-weight: var(--weight-semibold);
  border-bottom: 1px solid var(--fg-accent);
  padding-bottom: 4px;
  text-decoration: none;
  transition: gap var(--dur-base) var(--ease-out);
}
.tl-ims-intro__link:hover { gap: 14px; color: var(--fg-1); }
.tl-ims-pillars--cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 920px) { .tl-ims-pillars--cards { grid-template-columns: 1fr; } }
.tl-ims-pillar {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.tl-ims-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
.tl-ims-pillar__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface-quiet);
  color: var(--fg-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.tl-ims-pillar__cert { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-accent); font-weight: var(--weight-semibold); }
.tl-ims-pillar__title { font-size: 24px; font-weight: var(--weight-semibold); letter-spacing: -0.012em; margin: 0; line-height: 1.2; }
.tl-ims-pillar__body { color: var(--fg-2); font-size: 15px; line-height: 1.7; margin: 0; }

/* --- 404 ------------------------------------------------ */
.tl-404 { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: var(--space-16) 0; }
.tl-404__inner { max-width: 560px; text-align: center; }
.tl-404__code {
  font-size: clamp(96px, 16vw, 168px);
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.04em;
  color: var(--navy-700);
  margin: 0 0 var(--space-3);
  position: relative;
  display: inline-block;
}
.tl-404__code::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 16px;
  height: 14px;
  background: var(--orange-700);
  opacity: 0.25;
  border-radius: 2px;
  z-index: -1;
}
.tl-404__title { font-size: clamp(24px, 3vw, 32px); font-weight: var(--weight-semibold); letter-spacing: -0.012em; margin: 0 0 var(--space-3); }
.tl-404__lede { color: var(--fg-2); font-size: 16px; line-height: 1.65; margin: 0 0 var(--space-8); }
.tl-404__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }