/* ==========================================================
   Thaleria marketing site — page-level styles
   Built on tokens from colors_and_type.css and components.css.
   Ported as-is from Claude Design "Full website WIP".
   ========================================================== */

html { scroll-behavior: smooth; }
body { background: var(--surface-page); }

/* Containers ---------------------------------------------- */
.tl-container {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--gutter-md);
}
@media (max-width: 720px) {
  .tl-container { padding: 0 var(--gutter-sm); }
}

/* Section rhythm ------------------------------------------ */
/* Global section-spacing knob (the Claude Design "Tweaks" density control).
   Change --section-y once here to re-space every section site-wide:
     spacious → var(--space-24)  (96px)
     middle   → var(--space-20)  (80px)
     compact  → var(--space-16)  (64px)   ← current */
:root {
  --section-y:       var(--space-16);
  --section-y-tight: var(--space-12);
}
.tl-section { padding: var(--section-y) 0; }
.tl-section--tight { padding: var(--section-y-tight) 0; }
.tl-section--ink   { background: var(--surface-ink); color: var(--fg-on-dark); }
.tl-section--ink-deep { background: var(--surface-ink-deep); color: var(--fg-on-dark); }

@media (max-width: 720px) {
  .tl-section { padding: var(--section-y-tight) 0; }
}

/* Section headers (orange rule + eyebrow + headline) ------ */
.tl-section-head { max-width: 760px; margin-bottom: var(--space-12); }
/* The eyebrow treatment itself now lives on .tl-eyebrow (components.css); only
   the spacing a section head wants is left here. */
.tl-section-head .tl-eyebrow {
  margin-bottom: var(--space-4);
  margin-top: 0;
}
.tl-section--ink .tl-eyebrow,
.tl-section--ink-deep .tl-eyebrow { color: var(--neutral-300); }

.tl-section-head h2 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.018em;
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}
@media (max-width: 720px) {
  .tl-section-head h2 { font-size: 30px; line-height: 1.1; }
}
.tl-section-head p {
  margin-top: var(--space-5);
  color: var(--fg-2);
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  text-wrap: pretty;
}
.tl-section--ink .tl-section-head p,
.tl-section--ink-deep .tl-section-head p { color: var(--neutral-300); }
/* Headings carry an explicit `color: var(--fg-1)` from the global h1..h4 rule,
   which beats the on-dark color inherited from the section — so a heading on an
   ink background renders navy-on-navy unless it's restored here. */
.tl-section--ink .tl-section-head h2,
.tl-section--ink-deep .tl-section-head h2 { color: var(--fg-on-dark); }

/* Header / Nav ------------------------------------------- */
.tl-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 246, 250, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.tl-nav--scrolled {
  background: rgba(244, 246, 250, 0.92);
  border-bottom-color: var(--border-1);
}
.tl-nav__inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.tl-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg-1);
  flex-shrink: 0; /* never let the logo get crushed by the link row */
}
.tl-nav__logo {
  height: 28px;
  width: auto;
  display: block;
}
.tl-nav__logo--mark { display: none; } /* compact mark: shown only when tight */
.tl-nav__logo--dark { filter: brightness(0) invert(1); }
.tl-footer__brand .tl-nav__logo { height: 30px; }
.tl-nav__links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-nav__link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tl-nav__link:hover { background: var(--neutral-100); color: var(--fg-1); }
.tl-nav__link.is-active {
  color: var(--orange-700);
  background: transparent;
  font-weight: var(--weight-semibold);
}
.tl-nav__link.is-active:hover { background: rgba(255, 165, 59, 0.10); color: var(--orange-700); }
.tl-nav__link--button.is-active svg { color: var(--orange-700); }

/* Top-level item with dropdown — rendered as a <button> for a11y */
.tl-nav__item { position: relative; }
.tl-nav__link--button {
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  gap: 4px;
  text-align: start;
}
.tl-nav__link--button svg {
  transition: transform var(--dur-fast) var(--ease-out);
  color: var(--fg-3);
}
.tl-nav__link--button.is-open svg,
.tl-nav__item--has-menu:hover .tl-nav__link--button svg { transform: rotate(180deg); color: var(--fg-1); }

/* Dropdown panel ----------------------------------------- */
.tl-nav__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  min-width: 260px;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 8px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  z-index: 60;
}
.tl-nav__menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tl-nav__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tl-nav__menu-link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.tl-nav__menu-link:hover { background: var(--neutral-100); color: var(--fg-1); }
.tl-nav__menu-link.is-active,
.tl-nav__menu-link.is-active:hover {
  background: var(--neutral-100);
}
.tl-nav__menu-link.is-active .tl-nav__menu-label { color: var(--orange-700); }
.tl-nav__menu-label {
  display: block;
  font-size: 14px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}
.tl-nav__menu-blurb {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.45;
  margin-top: 2px;
}

/* Grouped panel — one menu holding two labelled columns ("What we do"). */
.tl-nav__menu--groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--space-6);
  padding: 14px 12px 12px;
  min-width: 520px;
}
.tl-nav__menu-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--weight-semibold);
  color: var(--fg-3);
  padding: 0 12px;
  margin-bottom: 8px;
}
/* Second column gets a hairline so the two groups read as distinct lists. */
.tl-nav__menu--groups .tl-nav__menu-group + .tl-nav__menu-group {
  border-left: 1px solid var(--border-1);
  padding-left: var(--space-4);
  margin-left: calc(var(--space-2) * -1);
}
@media (max-width: 1024px) {
  .tl-nav__menu--groups { min-width: 460px; grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}

/* Mobile group headings inside an expanded drawer section. */
.tl-nav__mobile-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--weight-semibold);
  color: var(--fg-3);
  padding: 12px var(--gutter-md) 4px calc(var(--gutter-md) + 20px);
}

/* Mobile dropdown groups --------------------------------- */
.tl-nav__mobile-group { border-bottom: 1px solid var(--border-1); }
.tl-nav__mobile-toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--gutter-md);
  font: inherit;
  font-size: 15px;
  background: transparent;
  border: 0;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
}
.tl-nav__mobile-toggle svg {
  color: var(--fg-3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tl-nav__mobile-group.is-open .tl-nav__mobile-toggle svg { transform: rotate(180deg); }
.tl-nav__mobile-children { background: var(--surface-quiet); }
.tl-nav__mobile-children a {
  padding-left: calc(var(--gutter-md) + 20px);
  font-size: 14px;
  color: var(--fg-2);
}
.tl-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--navy-700);
  color: var(--fg-on-dark);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;   /* never wrap "Apply now" to a second line */
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.tl-nav__cta:hover { background: var(--navy-600); color: var(--fg-on-dark); }
.tl-nav__link { white-space: nowrap; }
.tl-nav__burger { display: none; }

/* Constrained desktop band (below the full-logo comfort width, above the burger
   cutoff): use the compact mark, tighten the link row, and drop the CTA arrow so
   the full nav still fits on one line without shrinking or wrapping anything. */
@media (max-width: 1120px) {
  .tl-nav__logo--full { display: none; }
  .tl-nav__logo--mark { display: block; height: 30px; }
}
@media (max-width: 1024px) {
  .tl-nav__inner { gap: var(--space-5); }
  .tl-nav__links { gap: 2px; }
  .tl-nav__link { padding: 0 9px; }
  .tl-nav__cta { padding: 0 14px; }
  .tl-nav__cta svg { display: none; } /* drop the arrow when space is tight */
}

@media (max-width: 880px) {
  .tl-nav__links { display: none; }
  .tl-nav__cta { display: none; }
  .tl-nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-1);
    background: var(--surface-card);
    color: var(--fg-1);
  }
}
.tl-nav__mobile {
  display: none;
  border-top: 1px solid var(--border-1);
  background: var(--surface-card);
  padding: 12px 0;
  position: relative;   /* above .tl-nav__scrim */
  z-index: 1;
}
/* The drawer lives inside the sticky header, so the drawer's height is the
   header's. With a section expanded it outgrew the viewport, which clipped the
   last item and left the header taller than the screen — at which point sticky
   has nothing to hold and the bar scrolls away. Cap it to what's below the bar
   (76px, .tl-nav__inner) and scroll inside instead. dvh second so browsers that
   have it use it: on mobile Safari 100vh excludes the retracting toolbars. */
.tl-nav__mobile.is-open {
  display: block;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tl-nav__mobile a {
  display: block;
  padding: 14px var(--gutter-md);
  font-size: 15px;
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
}
.tl-nav__mobile a:last-child { border-bottom: 0; }
/* The drawer's Apply now. Reuses .tl-nav__cta so the pill is defined once, and
   so has to opt back into display (the burger breakpoint hides the header's
   copy) and out of the row styling above. 44px keeps it a comfortable tap. */
.tl-nav__mobile .tl-nav__cta {
  display: flex;
  height: 44px;
  margin: 12px var(--gutter-md) 4px;
  justify-content: center;
  border-bottom: 0;
  /* Restated: .tl-nav__mobile a's colour is more specific than .tl-nav__cta's,
     which otherwise leaves dark text on the dark pill. */
  color: var(--fg-on-dark);
}
/* The arrow is dropped from the header CTA in the narrow desktop band because
   the row runs out of room; the drawer's full-width pill has room to spare. */
.tl-nav__mobile .tl-nav__cta svg { display: inline; }
/* Covers the viewport; the header's own z-index (50) keeps the bar above it. */
.tl-nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(11, 18, 32, 0.35);
}

/* Hero --------------------------------------------------- */
.tl-hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--surface-ink-deep);
  color: var(--fg-on-dark);
}
.tl-hero__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-12);
  align-items: stretch;
  min-height: 640px;
  position: relative;
  z-index: 2;
}
.tl-hero__copy {
  padding: 96px 0 var(--space-20);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tl-hero__visual {
  position: relative;
  margin: 64px 0 64px var(--space-8);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #1A2D52 0%, #0B1524 65%);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
}
@media (max-width: 1024px) {
  .tl-hero__layout { grid-template-columns: 1fr; min-height: 0; }
  .tl-hero__visual { margin: 0 0 64px 0; min-height: 360px; }
  .tl-hero__copy { padding: 80px 0 32px; }
}
@media (max-width: 720px) {
  .tl-hero__copy { padding-top: 56px; }
}
.tl-hero__eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--orange-700);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.tl-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--fg-accent);
  border-radius: 2px;
}
.tl-hero h1 {
  font-size: clamp(44px, 6.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  font-weight: var(--weight-semibold);
  max-width: 14ch;
  text-wrap: balance;
  margin: 0;
  color: var(--fg-on-dark);
}
.tl-hero h1 .tl-accent { color: var(--fg-accent); }
.tl-hero h1 .tl-hero__underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.tl-hero h1 .tl-hero__underline::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 4px;
  height: 14px;
  background: var(--orange-700);
  opacity: 0.32;
  border-radius: 2px;
  z-index: -1;
}
.tl-hero__lede {
  margin-top: var(--space-8);
  max-width: 560px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--neutral-300);
}
.tl-hero__cta {
  margin-top: var(--space-10);
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tl-hero__proof {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  align-items: baseline;
}
.tl-hero__proof-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--neutral-400);
  margin-bottom: 6px;
}
.tl-hero__proof-val {
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--fg-on-dark);
}

/* Hero visual — bold institutional callout */
.tl-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 80%);
  pointer-events: none;
}
.tl-hero__visual::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,165,59,0.22), transparent 65%);
  pointer-events: none;
}
.tl-hero__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--neutral-300);
  font-weight: var(--weight-semibold);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-on-dark);
  align-self: flex-start;
}
.tl-hero__badge-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--orange-700);
  box-shadow: 0 0 0 4px rgba(255,165,59,0.2);
  animation: tlPulse 2.4s ease-in-out infinite;
}
@keyframes tlPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,165,59,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255,165,59,0.06); }
}
.tl-hero__visual-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-hero__visual-stat strong {
  font-size: clamp(72px, 9vw, 128px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--fg-on-dark);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: flex-start;
}
.tl-hero__visual-stat strong span {
  color: var(--orange-700);
  font-size: 0.5em;
  margin-left: 6px;
  margin-top: 14px;
}
.tl-hero__visual-stat-label {
  color: var(--neutral-300);
  font-size: 14px;
  line-height: 1.4;
  max-width: 280px;
}
.tl-hero__clients {
  position: relative;
  border-top: 1px solid var(--border-on-dark);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tl-hero__clients-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--neutral-400);
  font-weight: var(--weight-semibold);
}
.tl-hero__clients-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tl-hero__client-chip {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-on-dark);
  padding: 8px 14px;
  border: 1px solid var(--border-on-dark);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
}

@media (max-width: 720px) {
  .tl-hero__visual { padding: 24px; min-height: 320px; }
}

/* Hero animated constellation backdrop ------------------- */
.tl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.tl-hero__copy--left {
  text-align: left;
  align-items: flex-start;
  padding: 140px 0 144px;
  max-width: 620px;
  position: relative;
  z-index: 2;
}
.tl-hero__copy--left h1 {
  max-width: 14ch;
  margin: 0;
}
.tl-hero__copy--left .tl-hero__lede {
  margin-left: 0;
  margin-right: 0;
}
.tl-hero__copy--left .tl-hero__cta {
  justify-content: flex-start;
}
@media (max-width: 720px) {
  .tl-hero__copy--left { padding: 96px 0 96px; }
}

.tl-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 65% 45%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 65% 45%, #000 35%, transparent 85%);
}
.tl-hero__bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,165,59,0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(59,111,224,0.08), transparent 70%);
}
.tl-hero__bg-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Push the visible network toward the right so it doesn't clutter the copy. */
  mask-image: linear-gradient(to right, transparent 0%, transparent 38%, #000 58%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 38%, #000 58%, #000 100%);
}
.tl-hero__bg-grid {
  /* Soften grid on the left where the headline sits. */
  mask-image:
    radial-gradient(ellipse 70% 65% at 70% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:
    radial-gradient(ellipse 70% 65% at 70% 50%, #000 30%, transparent 80%);
}
@media (max-width: 1024px) {
  .tl-hero__bg-network {
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
  }
}

/* edge: draws on, holds, fades, repeats */
.tl-hero__edge {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  opacity: 0;
  animation-name: tlEdgeDraw;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  /* per-element pathLength fallback handled via stroke-dasharray on actual length */
}
/* Use vector-effect so dasharray works with absolute lengths */
.tl-hero__edge {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
@keyframes tlEdgeDraw {
  0%   { stroke-dashoffset: 600; opacity: 0; }
  6%   { opacity: 0.95; }
  18%  { stroke-dashoffset: 0;   opacity: 0.95; }
  60%  { stroke-dashoffset: 0;   opacity: 0.55; }
  82%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}

.tl-hero__node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation-name: tlNodePop;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
@keyframes tlNodePop {
  0%, 4%   { opacity: 0; r: 0; }
  10%      { opacity: 1; r: 3.4; }
  18%      { opacity: 1; r: 2.6; }
  70%      { opacity: 0.9; }
  90%      { opacity: 0; }
  100%     { opacity: 0; }
}

.tl-hero__pulse {
  stroke-dasharray: 0.18 0.82;
  stroke-dashoffset: 1;
  opacity: 0;
  animation-name: tlPulseTravel;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes tlPulseTravel {
  0%   { stroke-dashoffset:  1; opacity: 0; }
  10%  { opacity: 0.9; }
  60%  { stroke-dashoffset: -0.6; opacity: 0.9; }
  85%  { opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

.tl-hero__node-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation-name: tlAnchorPulse;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
@keyframes tlAnchorPulse {
  0%, 50%  { opacity: 0; transform: scale(0.6); }
  58%      { opacity: 1; transform: scale(1.4); }
  68%      { opacity: 1; transform: scale(1); }
  82%      { opacity: 0.9; transform: scale(1.05); }
  92%      { opacity: 0; transform: scale(0.9); }
  100%     { opacity: 0; transform: scale(0.6); }
}
.tl-hero__node-glow {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation-name: tlAnchorGlow;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
@keyframes tlAnchorGlow {
  0%, 50%  { opacity: 0; transform: scale(0.6); }
  60%      { opacity: 0.7; transform: scale(1.2); }
  78%      { opacity: 0.4; transform: scale(1.5); }
  92%      { opacity: 0; transform: scale(1.8); }
  100%     { opacity: 0; transform: scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .tl-hero__edge,
  .tl-hero__node,
  .tl-hero__pulse,
  .tl-hero__node-pulse,
  .tl-hero__node-glow {
    animation: none !important;
    opacity: 0.7;
  }
  .tl-hero__edge { stroke-dashoffset: 0; }
}

/* Engagement model cards --------------------------------- */
.tl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.tl-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 920px) {
  .tl-grid-3 { grid-template-columns: 1fr; }
  .tl-grid-2 { grid-template-columns: 1fr; }
}

.tl-feature {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 32px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tl-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
}
.tl-feature__num {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--fg-accent);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-8);
  font-variant-numeric: tabular-nums;
}
.tl-feature__title {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.tl-feature__body {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 var(--space-6);
}
.tl-feature__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid var(--border-1);
  padding-top: var(--space-6);
}
.tl-feature__list li {
  font-size: 14px;
  color: var(--fg-1);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.tl-feature__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orange-700);
  margin-top: 8px;
  flex: none;
}

/* Stats band --------------------------------------------- */
.tl-stats-band {
  background: var(--surface-ink);
  color: var(--fg-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-12);
}
.tl-stats-band .tl-stat__value {
  color: var(--fg-on-dark);
  font-size: 64px;
  letter-spacing: -0.022em;
}
.tl-stats-band .tl-stat__label {
  color: var(--neutral-300);
  font-size: 13px;
  margin-top: 14px;
  max-width: 220px;
}
.tl-stats-band__lead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}
.tl-stats-band__lead h2 {
  color: var(--fg-on-dark);
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-weight: var(--weight-semibold);
  max-width: 18ch;
  text-wrap: balance;
}
.tl-stats-band__lead p {
  color: var(--neutral-300);
  max-width: 380px;
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .tl-stats-band { padding: var(--space-12) var(--space-8); }
  .tl-stats-band__lead h2 { font-size: 30px; }
}

/* Locations ---------------------------------------------- */
.tl-locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
/* Two columns before one: going straight from three to full width made each
   card ~670px on a tablet, blowing the office map up past the resolution the
   Static Maps request asks for. */
@media (max-width: 920px) { .tl-locations { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tl-locations { grid-template-columns: 1fr; } }

.tl-location {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.tl-location:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tl-location__city {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.012em;
  margin: 0;
}
.tl-location__country { color: var(--fg-2); font-size: 14px; margin-top: 4px; }
.tl-location__addr {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.6;
  border-top: 1px solid var(--border-1);
  padding-top: var(--space-5);
  white-space: pre-line;
}
/* Office locator — public-domain vector map (no tiles / attribution) */
.tl-location__map {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: #eaf1fa;
  position: relative;
  overflow: hidden;
}
.tl-office-map__svg { display: block; width: 100%; height: 100%; }
.tl-location__map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tl-office-map__sea { fill: #eaf1fa; }
.tl-office-map__neighbour {
  fill: #dbe4f1;
  stroke: #cfd9ea;
  stroke-width: 1;
  stroke-linejoin: round;
}
.tl-office-map__country {
  fill: #9db4d8;
  stroke: #40587f;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(30, 47, 79, 0.14));
}
.tl-office-map__pin-halo { fill: rgba(255, 165, 59, 0.28); }
.tl-office-map__pin {
  fill: var(--orange-700);
  stroke: #fff;
  stroke-width: 2;
}

/* Careers teaser ----------------------------------------- */
.tl-careers-teaser {
  background: var(--surface-ink);
  color: var(--fg-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-12);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.tl-careers-teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255, 165, 59, 0.18), transparent 40%);
  pointer-events: none;
}
.tl-careers-teaser h2 {
  color: var(--fg-on-dark);
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}
.tl-careers-teaser p {
  color: var(--neutral-300);
  margin-top: var(--space-5);
  font-size: 16px;
  line-height: 1.65;
  max-width: 520px;
}
.tl-careers-teaser__cta {
  margin-top: var(--space-8);
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tl-careers-teaser__roles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.tl-careers-teaser__role {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--fg-on-dark);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.tl-careers-teaser__role:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 165, 59, 0.5);
  transform: translateY(-1px);
  color: var(--fg-on-dark);
}
.tl-careers-teaser__role-meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-300);
}
.tl-careers-teaser__role-title {
  font-size: 16px;
  font-weight: var(--weight-medium);
  margin-top: 4px;
}
.tl-careers-teaser__role-arrow {
  color: var(--orange-700);
  flex: none;
}
@media (max-width: 920px) {
  .tl-careers-teaser { grid-template-columns: 1fr; padding: var(--space-12) var(--space-6); }
  .tl-careers-teaser h2 { font-size: 30px; }
}

/* Buttons (page-level inline link arrow) ----------------- */
.tl-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.tl-link-arrow:hover { gap: 14px; color: var(--fg-1); }
.tl-section--ink .tl-link-arrow,
.tl-section--ink-deep .tl-link-arrow,
.tl-careers-teaser .tl-link-arrow { color: var(--fg-on-dark); }

/* Buttons — accent variant for hero etc ------------------ */
.tl-btn--accent {
  background: var(--orange-700);
  color: var(--navy-900);
  border-color: transparent;
}
.tl-btn--accent:hover { background: var(--orange-500); }
.tl-btn--outline-dark {
  background: transparent;
  color: var(--fg-on-dark);
  border-color: rgba(255, 255, 255, 0.25);
}
.tl-btn--outline-dark:hover { border-color: var(--fg-on-dark); background: rgba(255, 255, 255, 0.05); }
.tl-btn--outline {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-2);
}
.tl-btn--outline:hover { background: var(--surface-card); border-color: var(--fg-1); }

/* Footer ------------------------------------------------- */
.tl-footer {
  background: var(--surface-ink);
  color: var(--fg-on-dark);
  padding: var(--space-20) 0 var(--space-10);
}
/* Even columns. The link labels are allowed to wrap — sizing each track to its
   longest label ("Fixed Price Project Development" wants 230px) buys single-line
   labels at the cost of columns wide enough to pull the footer apart. */
.tl-footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--border-on-dark);
}
.tl-footer h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neutral-300);
  margin: 0 0 var(--space-5);
  font-weight: var(--weight-semibold);
}
.tl-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tl-footer a { color: var(--fg-on-dark); font-size: 14px; }
.tl-footer a:hover { color: var(--orange-700); }
.tl-footer__about p { color: var(--neutral-300); font-size: 14px; line-height: 1.65; max-width: 320px; margin: var(--space-4) 0 0; }
.tl-footer__social { margin-top: var(--space-6); }
.tl-footer__social-label { display: block; color: var(--neutral-300); font-size: 14px; margin-bottom: var(--space-3); }
.tl-footer__social-icons { display: flex; gap: var(--space-4); }
.tl-footer__social-icons a { color: var(--fg-on-dark); display: inline-flex; }
.tl-footer__social-icons a:hover { color: var(--orange-700); }
/* Top-level pages that sit inside another column (News, Contact, under Careers).
   Styled as the section headings are, because that is what they rank as — they just
   have no children to list. Spaced off the list above so the two do not run
   together. */
.tl-footer__standalone {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.tl-footer__standalone a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--weight-semibold);
  color: var(--neutral-300);
}
.tl-footer__standalone a:hover { color: var(--orange-700); }
.tl-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-on-dark);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: 18px;
}
/* Closing row. The gaps are deliberately generous: at 13px, four short items set
   24px apart read as one run-on string — you cannot tell "Privacy Policy" and
   "Terms and Conditions" are two links rather than one phrase. 32px separates
   items within a group and 48px separates the two groups, so the row parses at a
   glance without needing rules or dot separators. */
.tl-footer__bottom {
  margin-top: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5) var(--space-12);
  font-size: 13px;
  color: var(--neutral-400);
  flex-wrap: wrap;
}
/* The legal pages. Quiet on purpose — same size and colour as the copyright line
   beside them, so this row stays one closing note rather than a sixth column. */
.tl-footer__utility { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.tl-footer__utility a { font-size: 13px; color: var(--neutral-400); }
.tl-footer__utility a:hover { color: var(--orange-700); }
.tl-footer__copyright { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }

@media (max-width: 920px) {
  .tl-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-10); }
  .tl-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .tl-footer__top { grid-template-columns: 1fr; }
  /* Stacked and left-aligned: the two halves read as one list, not a split row. */
  .tl-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Reveal-on-scroll ---------------------------------------- */
.tl-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.tl-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .tl-reveal { opacity: 1; transform: none; }
}

/* Keeps a token together on one line (product names such as DIGIT-TM3, which
   browsers would otherwise break on their hyphen). */
.tl-nowrap { white-space: nowrap; }

/* Page hero (smaller, on inner pages) -------------------- */
.tl-page-hero {
  padding: 80px 0 var(--space-16);
  border-bottom: 1px solid var(--border-1);
}
.tl-page-hero h1 {
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--weight-semibold);
  max-width: 16ch;
  text-wrap: balance;
}
.tl-page-hero h1 .tl-accent { color: var(--fg-accent); }
.tl-page-hero__lede {
  margin-top: var(--space-6);
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
}
.tl-page-hero__breadcrumb {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-bottom: var(--space-6);
  display: flex;
  gap: 8px;
  align-items: center;
  /* Wraps as a row. Without this the trail can't break, so on a phone the long
     crumbs wrap inside themselves instead — two-line labels next to one-line
     separators, which staggers the whole trail (a three-level project crumb at
     375px is where it shows). */
  flex-wrap: wrap;
}
.tl-page-hero__breadcrumb a { color: var(--fg-3); }
.tl-page-hero__breadcrumb span { color: var(--fg-3); }

/* Services pillars (large) ------------------------------- */
.tl-pillar {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-12);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--border-1);
}
.tl-pillar:last-child { border-bottom: 0; }
.tl-pillar__lead { position: sticky; top: 100px; align-self: start; }
.tl-pillar__num {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--fg-accent);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
.tl-pillar__title {
  font-size: 36px;
  letter-spacing: -0.02em;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.tl-pillar__lede {
  margin-top: var(--space-5);
  color: var(--fg-2);
  font-size: 16px;
  line-height: 1.65;
  max-width: 380px;
}
.tl-pillar__capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.tl-cap {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.tl-cap:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tl-cap h3 { font-size: 16px; font-weight: var(--weight-semibold); margin: 0 0 6px; }
.tl-cap p  { color: var(--fg-2); font-size: 14px; line-height: 1.55; margin: 0; }

@media (max-width: 920px) {
  .tl-pillar { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-12) 0; }
  .tl-pillar__lead { position: static; }
  .tl-pillar__title { font-size: 30px; }
  .tl-pillar__capabilities { grid-template-columns: 1fr; }
}

/* Engagement model picker (Services page) ---------------- */
.tl-models {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8);
}
.tl-models__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-models__tab {
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--border-1);
  padding: 16px 18px;
  font: inherit;
  color: var(--fg-2);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  font-size: 15px;
  font-weight: var(--weight-medium);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.tl-models__tab:hover { color: var(--fg-1); background: var(--neutral-100); }
.tl-models__tab.is-active {
  color: var(--fg-1);
  border-left-color: var(--orange-700);
  background: var(--surface-card);
}
.tl-models__tab small {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: var(--weight-semibold);
}
.tl-models__panel {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
}
.tl-models__panel h3 {
  font-size: 26px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
.tl-models__panel p {
  color: var(--fg-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 var(--space-8);
  max-width: 60ch;
}
.tl-models__bullets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); }
.tl-models__bullets > div { display: flex; flex-direction: column; gap: 4px; }
.tl-models__bullets dt { font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--fg-1); }
.tl-models__bullets dd { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.55; }
@media (max-width: 920px) {
  .tl-models { grid-template-columns: 1fr; }
  .tl-models__tabs { flex-direction: row; overflow-x: auto; gap: 0; }
  .tl-models__tab { border-left: 0; border-bottom: 2px solid var(--border-1); white-space: nowrap; }
  .tl-models__tab.is-active { border-left-color: transparent; border-bottom-color: var(--orange-700); }
  .tl-models__bullets { grid-template-columns: 1fr; }
}

/* Careers --------------------------------------------- */
.tl-jobs-toolbar {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}
.tl-jobs-toolbar select {
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-1);
  background: var(--surface-card);
  color: var(--fg-1);
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231E2F4F' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.tl-jobs-toolbar select:focus { outline: 2px solid var(--fg-link); outline-offset: 1px; }
.tl-jobs-toolbar .tl-search { height: 44px; }
.tl-jobs-clear {
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
  border-radius: var(--radius-md);
}
.tl-jobs-clear:hover { color: var(--fg-1); background: var(--neutral-100); }

@media (max-width: 920px) {
  .tl-jobs-toolbar { grid-template-columns: 1fr 1fr; }
  .tl-jobs-toolbar > :first-child { grid-column: 1 / -1; }
}

.tl-jobs-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
  color: var(--fg-2);
  font-size: 14px;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.tl-jobs-summary strong { color: var(--fg-1); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.tl-jobs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tl-job-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: 22px var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--fg-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-job-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
  color: var(--fg-1);
}
.tl-job-row__title { font-size: 17px; font-weight: var(--weight-semibold); letter-spacing: -0.005em; }
.tl-job-row__sub  { color: var(--fg-3); font-size: 13px; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; }
.tl-job-row__cell { font-size: 14px; color: var(--fg-2); }
.tl-job-row__cell-key { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); margin-bottom: 2px; }
.tl-job-row__arrow { color: var(--fg-2); }
.tl-job-row:hover .tl-job-row__arrow { color: var(--orange-700); }
@media (max-width: 920px) {
  .tl-job-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-6);
  }
  .tl-job-row__title { grid-column: 1 / -1; }
  .tl-job-row__arrow { display: none; }
}

.tl-jobs-empty {
  background: var(--surface-card);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  text-align: center;
  color: var(--fg-2);
}
.tl-jobs-empty h3 { color: var(--fg-1); font-size: 18px; margin: 0 0 8px; font-weight: var(--weight-semibold); }

/* Career growth (Careers page) -------------------------- */
.tl-growth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 920px) { .tl-growth { grid-template-columns: 1fr; } }
.tl-growth__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tl-growth__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-1);
}
.tl-growth__step:last-child { border-bottom: 0; }
.tl-growth__step-num {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--fg-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  width: 32px;
}
.tl-growth__step h3 { font-size: 18px; font-weight: var(--weight-semibold); margin: 0 0 6px; }
.tl-growth__step p { color: var(--fg-2); font-size: 14px; line-height: 1.6; margin: 0; }

/* Job detail page --------------------------------------- */
.tl-job-detail {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 920px) { .tl-job-detail { grid-template-columns: 1fr; } }
.tl-job-detail__body h2 {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  margin: var(--space-12) 0 var(--space-4);
  letter-spacing: -0.01em;
}
.tl-job-detail__body h2:first-child { margin-top: 0; }
.tl-job-detail__body p { color: var(--fg-1); font-size: 16px; line-height: 1.7; margin: 0 0 var(--space-3); }
.tl-job-detail__body ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.tl-job-detail__body ul li {
  font-size: 15px;
  color: var(--fg-1);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.55;
}
.tl-job-detail__body ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orange-700);
  margin-top: 9px;
  flex: none;
}
.tl-job-detail__aside {
  position: sticky;
  top: 100px;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.tl-job-detail__aside dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.tl-job-detail__aside dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
}
.tl-job-detail__aside dd { margin: 0; color: var(--fg-1); font-size: 15px; font-weight: var(--weight-medium); }
.tl-job-detail__aside .tl-btn { width: 100%; margin-top: var(--space-6); }

/* Spontaneous application -------------------------------- */
.tl-spontaneous {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 920px) {
  .tl-spontaneous { grid-template-columns: 1fr; padding: var(--space-8); }
}
.tl-spontaneous__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tl-spontaneous__form > .tl-field--full { grid-column: 1 / -1; }
.tl-spontaneous__upload {
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  color: var(--fg-2);
  font-size: 13px;
  background: var(--surface-quiet);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.tl-spontaneous__upload:hover { border-color: var(--fg-link); background: #fff; }
.tl-spontaneous__upload strong { color: var(--fg-1); }

/* Misc helpers ------------------------------------------ */
.tl-text-2xl  { font-size: 22px; }
.tl-mt-12     { margin-top: var(--space-12); }
.tl-pad-32    { padding: 32px; }

/* Toast ------------------------------------------------- */
.tl-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--navy-900);
  color: var(--fg-on-dark);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-3);
  z-index: 100;
  transition: transform var(--dur-base) var(--ease-out);
}

/* --- reCAPTCHA (invisible) --------------------------------------------------
   Hide Google's floating badge globally and show inline attribution beside
   each protected form instead (contact + job application). Google permits
   hiding the badge as long as the branding text is displayed. Kept in the
   global sheet (loaded on every design page) because the badge is a fixed,
   page-agnostic element that mounts wherever an invisible reCAPTCHA renders.
   visibility:hidden (not display:none) so executeAsync() still works. */
.grecaptcha-badge { visibility: hidden; }
.tl-recaptcha-note { font-size: 12px; color: var(--fg-3); line-height: 1.45; }
.tl-recaptcha-note a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.tl-toast.is-on { transform: translateX(-50%) translateY(0); }