/* ==========================================================================
   COMPONENTS
   Each block maps to one Elementor construct. see the mapping document.
   ========================================================================== */

/* --------------------------------------------------------------------------
   C15 · IDENTITY SYSTEM
   Uses the official Turtuga vector, unaltered, via <use> against a sprite
   defined once per page. Fills are currentColor so the identity inherits the
   surface. Never recoloured, never redrawn, never stretched.
   -------------------------------------------------------------------------- */
.tg-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-logo-gap);
  color: currentColor;
  padding-block: var(--tg-s-2xs);
}
.tg-logo__mark {
  height: var(--tg-mark-h);
  aspect-ratio: 173.16 / 154.49;
  width: auto; flex: none; display: block;
}
.tg-logo__word {
  height: var(--tg-word-h);
  aspect-ratio: 462.83 / 46.41;
  width: auto; flex: none; display: block;
}
.tg-logo--stack { flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.4vw, 20px); }
.tg-logo--stack .tg-logo__mark { height: clamp(44px, 4.2vw, 62px); }
.tg-logo--stack .tg-logo__word { height: clamp(14px, 1.35vw, 20px); }

/* WATERMARK. The mark used architecturally: oversized, cropped by the
   viewport edge, at a strength set per surface. Decorative only. */
.tg-watermark {
  position: absolute; pointer-events: none;
  color: var(--surface-mark); z-index: 0; line-height: 0;
}
.tg-watermark svg { width: 100%; height: auto; display: block; }

/* Small identity signature used to open a section */
.tg-sig {
  height: clamp(15px, 1.5vw, 21px);
  aspect-ratio: 173.16 / 154.49;
  width: auto; display: block;
  color: var(--surface-accent);
}

/* --------------------------------------------------------------------------
   C13 · HEADER
   -------------------------------------------------------------------------- */
.tg-header {
  position: sticky;
  top: 0;
  z-index: var(--tg-z-header);
  background: var(--surface-bg);
  color: var(--surface-fg);
  transition: border-color var(--tg-d-quick) var(--tg-e-standard);
  border-bottom: var(--tg-hair) solid transparent;
}
.tg-header.is-scrolled { border-bottom-color: var(--surface-rule); }
.tg-header__inner {
  height: var(--tg-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tg-s-lg);
}
.tg-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 44px); }
.tg-nav__group { position: relative; }
.tg-nav__panel {
  position: absolute;
  top: calc(100% + 18px);
  left: -18px;
  min-width: 210px;
  padding: 18px;
  background: var(--surface-bg);
  border: var(--tg-hair) solid var(--surface-rule);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--tg-d-quick) var(--tg-e-standard),
              transform var(--tg-d-quick) var(--tg-e-standard),
              visibility 0s linear var(--tg-d-quick);
}
.tg-nav__group:hover .tg-nav__panel,
.tg-nav__group:focus-within .tg-nav__panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--tg-d-quick) var(--tg-e-standard),
              transform var(--tg-d-quick) var(--tg-e-standard), visibility 0s;
}
.tg-nav__sub {
  display: block;
  padding: 7px 0;
  font-size: var(--tg-size-small);
  color: var(--surface-mute);
  transition: color var(--tg-d-quick) var(--tg-e-standard);
  white-space: nowrap;
}
.tg-nav__sub:hover, .tg-nav__sub:focus-visible { color: var(--surface-fg); }
.tg-nav__link {
  font-size: var(--tg-size-eyebrow);
  font-weight: var(--tg-wt-medium);
  letter-spacing: var(--tg-tr-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
}
.tg-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--tg-hair);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tg-d-quick) var(--tg-e-standard);
}
.tg-nav__link:hover::after,
.tg-nav__link:focus-visible::after { transform: scaleX(1); }
.tg-nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--surface-accent); }

.tg-burger {
  display: none;
  width: 40px; height: 40px;
  margin-right: -10px;
  align-items: center;
  justify-content: flex-end;
}
.tg-burger__box { display: block; width: 22px; height: 9px; position: relative; }
.tg-burger__box::before,
.tg-burger__box::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: var(--tg-hair); background: currentColor;
  transition: transform var(--tg-d-base) var(--tg-e-standard), opacity var(--tg-d-quick);
}
.tg-burger__box::before { top: 0; }
.tg-burger__box::after  { bottom: 0; }
body.menu-open .tg-burger__box::before { transform: translateY(4px) rotate(45deg); }
body.menu-open .tg-burger__box::after  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {
  .tg-nav { display: none; }
  .tg-burger { display: flex; }
}

/* --------------------------------------------------------------------------
   MOBILE MENU. full-screen overlay, large type
   -------------------------------------------------------------------------- */
.tg-menu {
  /* Declares its own surface: without this, --surface-mute fell back to the
     light-surface default and produced a 3.20:1 contrast failure on ink. */
  --surface-bg:   var(--tg-ink);
  --surface-fg:   var(--tg-bone);
  --surface-mute: var(--tg-graphite-i);
  --surface-rule: var(--tg-hairline-i);
  position: fixed;
  inset: 0;
  z-index: var(--tg-z-menu);
  background: var(--tg-ink);
  color: var(--tg-bone);
  display: flex;
  flex-direction: column;
  padding-top: var(--tg-header-h);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tg-d-base) var(--tg-e-standard), visibility 0s linear var(--tg-d-base);
}
body.menu-open .tg-menu {
  opacity: 1; visibility: visible;
  transition: opacity var(--tg-d-base) var(--tg-e-standard), visibility 0s;
}
.tg-menu__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: var(--tg-s-2xl) var(--tg-s-xl);
  overflow-y: auto;
}
.tg-menu__item {
  display: block;
  font-family: var(--tg-font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: var(--tg-wt-medium);
  letter-spacing: var(--tg-tr-h1);
  line-height: 1.1;
  padding-block: var(--tg-s-xs);
}
.tg-menu__sub {
  padding: var(--tg-s-sm) 0 var(--tg-s-md);
  border-bottom: var(--tg-hair) solid var(--tg-hairline-i);
  margin-bottom: var(--tg-s-md);
}
.tg-menu__sublink {
  display: block;
  padding-block: 10px;
  font-size: var(--tg-size-body);
  color: var(--tg-graphite-i);
}
.tg-menu__sublink:hover { color: var(--tg-bone); }
.tg-menu__foot { display: grid; gap: var(--tg-s-md); color: var(--tg-graphite-i); font-size: var(--tg-size-small); }
.tg-menu__mail { color: var(--tg-graphite-i); border-bottom: var(--tg-hair) solid var(--tg-hairline-i); padding-block: 4px; display: inline-block; justify-self: start; }
.tg-menu__mail:hover, .tg-menu__mail:focus-visible { color: var(--tg-bone); }
body.menu-open { overflow: hidden; }
/* The header sits above the overlay so the logo and close control remain
   visible and clickable; it adopts the overlay's surface while open. */
body.menu-open .tg-header {
  --surface-bg:   var(--tg-ink);
  --surface-fg:   var(--tg-bone);
  --surface-mute: var(--tg-graphite-i);
  --surface-rule: var(--tg-hairline-i);
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   LINKS & ACTIONS
   No filled pills. Text + hairline, or hairline-outlined rectangle.
   -------------------------------------------------------------------------- */
.tg-link {
  display: inline-block;
  position: relative;
  font-size: var(--tg-size-eyebrow);
  font-weight: var(--tg-wt-medium);
  letter-spacing: var(--tg-tr-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  padding-top: 8px;
  padding-bottom: 9px;
  border-bottom: var(--tg-hair) solid var(--surface-rule);
  transition: border-color var(--tg-d-quick) var(--tg-e-standard);
}
.tg-link::after {
  content: '';
  position: absolute; left: 0; bottom: -1px; height: var(--tg-hair);
  width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tg-d-base) var(--tg-e-standard);
}
.tg-link:hover::after, .tg-link:focus-visible::after { transform: scaleX(1); }
.tg-link__arrow { display: inline-block; margin-left: .7em; transition: transform var(--tg-d-base) var(--tg-e-standard); }
.tg-link:hover .tg-link__arrow { transform: translateX(5px); }

.tg-btn {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: 1.05em 1.7em;
  border: var(--tg-hair) solid var(--surface-fg);
  border-radius: var(--tg-radius);
  font-size: var(--tg-size-eyebrow);
  font-weight: var(--tg-wt-medium);
  letter-spacing: var(--tg-tr-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  transition: background-color var(--tg-d-base) var(--tg-e-standard),
              color var(--tg-d-base) var(--tg-e-standard);
}
.tg-btn:hover, .tg-btn:focus-visible { background: var(--surface-fg); color: var(--surface-bg); }
.tg-btn__arrow { transition: transform var(--tg-d-base) var(--tg-e-standard); }
.tg-btn:hover .tg-btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   C01 · SECTION HEADER
   -------------------------------------------------------------------------- */
.tg-sechead { display: flex; align-items: baseline; gap: var(--tg-s-md); margin-bottom: clamp(40px, 4.5vw, 76px); }
.tg-sechead__rule { flex: 1; height: var(--tg-hair); background: var(--surface-rule); }
.tg-sechead__link {
  display: inline-block;
  font-size: var(--tg-size-eyebrow);
  font-weight: var(--tg-wt-medium);
  letter-spacing: var(--tg-tr-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  padding-block: 7px 8px;
  border-bottom: var(--tg-hair) solid var(--surface-rule);
  transition: border-color var(--tg-d-quick) var(--tg-e-standard);
  white-space: nowrap;
}
.tg-sechead__link:hover, .tg-sechead__link:focus-visible { border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   C05 · HAIRLINE INDEX. replaces card grids everywhere
   -------------------------------------------------------------------------- */
.tg-index { border-top: var(--tg-hair) solid var(--surface-rule); }
.tg-index__row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.05fr) auto;
  column-gap: var(--tg-gutter);
  align-items: start;
  padding-block: clamp(26px, 2.6vw, 44px);
  border-bottom: var(--tg-hair) solid var(--surface-rule);
  position: relative;
  transition: padding-left var(--tg-d-base) var(--tg-e-standard);
}
a.tg-index__row { color: inherit; }
a.tg-index__row::before {
  content: '';
  position: absolute; left: 0; top: -1px; right: 0;
  height: var(--tg-hair); background: var(--surface-fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tg-d-slow) var(--tg-e-standard);
}
a.tg-index__row:hover::before, a.tg-index__row:focus-visible::before { transform: scaleX(1); }
a.tg-index__row:hover { padding-left: var(--tg-s-sm); }
.tg-index__num { padding-top: .35em; }
.tg-index__title { font-family: var(--tg-font-display); font-size: var(--tg-size-h3); font-weight: var(--tg-wt-medium); letter-spacing: var(--tg-tr-h3); line-height: 1.2; }
.tg-index__desc { color: var(--surface-mute); font-size: var(--tg-size-body); line-height: 1.55; max-width: 46ch; }
.tg-index__meta { text-align: right; padding-top: .35em; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tg-index__tag {
  font-size: var(--tg-size-eyebrow);
  letter-spacing: var(--tg-tr-eyebrow);
  text-transform: uppercase;
  color: var(--surface-mute);
  white-space: nowrap;
}
.tg-index__tag--owned { color: var(--surface-accent); }

@media (max-width: 860px) {
  .tg-index__row { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: var(--tg-s-xs); }
  .tg-index__desc { grid-column: 2; }
  .tg-index__meta { grid-column: 2; text-align: left; align-items: flex-start; flex-direction: row; gap: var(--tg-s-sm); flex-wrap: wrap; padding-top: 2px; }
  a.tg-index__row:hover { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   HERO. typographic / identity-led. No media dependency.
   -------------------------------------------------------------------------- */
.tg-hero {
  background: var(--surface-bg);
  color: var(--surface-fg);
  min-height: calc(86svh - var(--tg-header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 6vw, 96px) clamp(32px, 3vw, 48px);
  position: relative;
  overflow: hidden;
}
.tg-hero__inner { position: relative; z-index: 2; width: 100%; flex: 1; display: flex; flex-direction: column; }
.tg-hero__mark { margin-bottom: clamp(40px, 6vw, 96px); }
.tg-hero__statement { max-width: 16ch; }
.tg-hero__support {
  margin-top: clamp(28px, 3vw, 48px);
  max-width: 44ch;
  color: var(--surface-mute);
}
.tg-hero__actions { margin-top: clamp(40px, 4.5vw, 72px); display: flex; flex-wrap: wrap; gap: var(--tg-s-md) var(--tg-s-xl); align-items: center; }
.tg-hero__foot {
  margin-top: auto;
  /* pinned to the base of the hero so the capability line is always in view */
  padding-top: clamp(40px, 4.5vw, 72px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--tg-s-lg);
  border-top: var(--tg-hair) solid var(--surface-rule);
}
/* Oversized mark, cropped by the right edge. Architectural, not illustrative. */
.tg-hero__mark-bg {
  position: absolute;
  right: 5%; top: 52%;
  transform: translateY(-50%);
  width: min(33vw, 460px);
  color: var(--surface-mark);
  pointer-events: none; z-index: 0; line-height: 0;
}
.tg-hero__mark-bg svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  /* On phones the mark sits behind and below the copy rather than beside it,
     so it never competes with the statement. */
  .tg-hero__mark-bg { width: 108vw; right: -30vw; top: auto; bottom: -14vh; transform: none; }
  /* Force "Music. / Culture. / IP." onto three lines rather than an awkward 2. */
  .tg-hero__statement { max-width: none; }
  .tg-hero__statement span { display: block; }
  .tg-hero__foot { gap: var(--tg-s-sm); }
  .tg-hero__caps { display: none; }
}

/* Page hero (secondary pages) */
.tg-phero {
  background: var(--surface-bg);
  color: var(--surface-fg);
  padding-block: clamp(72px, 9vw, 152px) clamp(56px, 6.5vw, 104px);
  position: relative; overflow: hidden;
}
.tg-phero__mark {
  position: absolute; right: 4%; top: 54%;
  transform: translateY(-50%);
  width: min(24vw, 320px);
  color: var(--surface-mark);
  pointer-events: none; z-index: 0; line-height: 0;
}
.tg-phero__mark svg { width: 100%; height: auto; display: block; }
.tg-phero > .tg-container { position: relative; z-index: 1; }
@media (max-width: 860px) { .tg-phero__mark { width: 62vw; right: -14vw; top: auto; bottom: -8%; transform: none; } }
.tg-phero__meta { display: flex; gap: var(--tg-s-md); flex-wrap: wrap; margin-bottom: var(--tg-s-lg); }
.tg-phero__statement { max-width: 18ch; }
.tg-phero__support { margin-top: var(--tg-s-lg); max-width: 52ch; color: var(--surface-mute); }

/* --------------------------------------------------------------------------
   C04 · GRAPHIC FIGURE. logo-derived line system (provisional, see docs/04b)
   -------------------------------------------------------------------------- */
.tg-gfx { display: block; width: 100%; height: auto; color: currentColor; }
.js .tg-gfx--draw { opacity: 0; transition: opacity var(--tg-d-slow) var(--tg-e-entrance); }
.js .tg-gfx--draw.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .tg-gfx--draw { opacity: 1 !important; } }
.tg-gfx path, .tg-gfx line, .tg-gfx circle, .tg-gfx ellipse, .tg-gfx rect {
  vector-effect: non-scaling-stroke;
}
.tg-figure { display: grid; gap: var(--tg-s-md); }
.tg-figure__cap { color: var(--surface-mute); font-size: var(--tg-size-small); }

/* Line-draw on reveal */
.js .tg-gfx--draw [data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1.4s var(--tg-e-entrance);
  transition-delay: var(--draw-delay, 0ms);
}
.js .is-in .tg-gfx--draw [data-draw],
.js .tg-gfx--draw.is-in [data-draw] { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .tg-gfx--draw [data-draw] { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   DIAGRAM. the "elegant diagram" moment (value chain / rights structure)
   -------------------------------------------------------------------------- */
.tg-diagram { border-top: var(--tg-hair) solid var(--surface-fg); }
.tg-diagram__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tg-gutter);
}
.tg-diagram__node {
  position: relative;
  padding-top: var(--tg-s-lg);
  border-top: var(--tg-hair) solid transparent;
}
.tg-diagram__node::before {
  content: '';
  position: absolute; top: -3px; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--surface-fg);
}
.tg-diagram__node:last-child::after {
  content: '';
  position: absolute; top: -3px; right: 0;
  width: 5px; height: 5px; border-radius: 50%;
  border: var(--tg-hair) solid var(--surface-fg);
}
.tg-diagram__label { font-family: var(--tg-font-display); font-size: var(--tg-size-h3); font-weight: var(--tg-wt-medium); letter-spacing: var(--tg-tr-h3); margin-bottom: var(--tg-s-xs); }
.tg-diagram__note { color: var(--surface-mute); font-size: var(--tg-size-small); max-width: 30ch; }
@media (max-width: 860px) {
  .tg-diagram__track { grid-template-columns: 1fr; gap: 0; }
  .tg-diagram__node { padding-block: var(--tg-s-md) var(--tg-s-lg); border-top: var(--tg-hair) solid var(--surface-rule); }
  .tg-diagram__node::before { top: -3px; }
  .tg-diagram__node:last-child::after { display: none; }
  .tg-diagram { border-top: 0; }
}

/* --------------------------------------------------------------------------
   C08 · PULL QUOTE / STATEMENT
   -------------------------------------------------------------------------- */
.tg-quote { border-top: var(--tg-hair) solid var(--surface-rule); padding-top: var(--tg-s-lg); }
.tg-quote__text {
  font-family: var(--tg-font-serif);
  font-size: clamp(1.75rem, 4.4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  max-width: 20ch;
}
.tg-quote__attr { margin-top: var(--tg-s-lg); }

/* --------------------------------------------------------------------------
   C09 · CREDENTIAL / TERRITORY BAND
   -------------------------------------------------------------------------- */
.tg-terr { display: flex; flex-wrap: wrap; gap: var(--tg-s-sm) clamp(24px, 3vw, 56px); }
.tg-terr__item {
  font-family: var(--tg-font-display);
  font-size: clamp(1.125rem, 2.1vw, 1.875rem);
  font-weight: var(--tg-wt-light);
  letter-spacing: -0.015em;
  color: var(--surface-fg);
}
.tg-terr__item--mute { color: var(--surface-mute); }

/* --------------------------------------------------------------------------
   C11 · CTA CLOSE
   -------------------------------------------------------------------------- */
.tg-cta { position: relative; overflow: hidden; }
.tg-watermark--cta { right: 5%; bottom: 8%; width: min(20vw, 260px); }
@media (max-width: 900px) { .tg-watermark--cta { width: 46vw; right: 4%; bottom: 5%; } }
.tg-cta > .tg-container { position: relative; z-index: 1; }
.tg-cta__inner { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--tg-gutter); row-gap: var(--tg-s-xl); align-items: end; }
.tg-cta__text { grid-column: 1 / span 7; }
.tg-cta__act { grid-column: 9 / span 4; justify-self: end; text-align: right; }
@media (max-width: 900px) {
  .tg-cta__text, .tg-cta__act { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* --------------------------------------------------------------------------
   C12 · FORM. labelled fields, hairline underlines, no boxes
   -------------------------------------------------------------------------- */
.tg-form { display: grid; gap: var(--tg-s-xl); max-width: 640px; }
.tg-field-group { display: grid; gap: var(--tg-s-2xs); }
.tg-label {
  font-size: var(--tg-size-eyebrow);
  font-weight: var(--tg-wt-medium);
  letter-spacing: var(--tg-tr-eyebrow);
  text-transform: uppercase;
  color: var(--surface-mute);
}
.tg-input, .tg-textarea, .tg-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--tg-hair) solid var(--surface-rule);
  border-radius: var(--tg-radius-input);
  padding: var(--tg-s-xs) 0;
  font-size: var(--tg-size-lead);
  font-weight: var(--tg-wt-light);
  color: var(--surface-fg);
  transition: border-color var(--tg-d-quick) var(--tg-e-standard);
}
.tg-input:hover, .tg-textarea:hover, .tg-select:hover { border-bottom-color: var(--surface-fg); }
.tg-input:focus-visible, .tg-textarea:focus-visible, .tg-select:focus-visible {
  border-bottom-color: var(--surface-accent);
  outline: 2px solid var(--surface-accent);
  outline-offset: 6px;
}
.tg-textarea { resize: vertical; min-height: 7em; line-height: 1.5; }
.tg-select { appearance: none; cursor: pointer; padding-right: 2em; }
.tg-select-wrap { position: relative; }
.tg-select-wrap::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px;
  border-right: var(--tg-hair) solid var(--surface-fg);
  border-bottom: var(--tg-hair) solid var(--surface-fg);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.tg-form__note { color: var(--surface-mute); font-size: var(--tg-size-small); max-width: 48ch; }

/* Contact routing panel */
.tg-routes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--tg-s-xl) var(--tg-gutter); }
.tg-route { border-top: var(--tg-hair) solid var(--surface-rule); padding-top: var(--tg-s-md); }
.tg-route__label { margin-bottom: var(--tg-s-2xs); }
.tg-route__mail { display: inline-block; padding-block: 3px 5px; font-size: var(--tg-size-lead); font-weight: var(--tg-wt-light); border-bottom: var(--tg-hair) solid var(--surface-rule); transition: border-color var(--tg-d-quick); }
.tg-route__mail:hover { border-bottom-color: var(--surface-fg); }
@media (max-width: 700px) { .tg-routes { grid-template-columns: 1fr; gap: var(--tg-s-lg); } }

/* --------------------------------------------------------------------------
   C14 · FOOTER
   -------------------------------------------------------------------------- */
.tg-footer { background: var(--tg-ink); color: var(--tg-bone); padding-block: clamp(56px, 6vw, 96px) var(--tg-s-xl); }
.tg-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--tg-gutter); row-gap: var(--tg-s-2xl); padding-bottom: clamp(48px, 5vw, 88px); }
.tg-footer__brand { grid-column: 1 / span 4; }
.tg-footer__col { grid-column: span 2; }
.tg-footer__col:nth-of-type(2) { grid-column: 6 / span 2; }
.tg-footer__col:nth-of-type(3) { grid-column: 8 / span 2; }
.tg-footer__col:nth-of-type(4) { grid-column: 10 / span 3; }
.tg-footer__line { margin-top: clamp(20px, 2vw, 30px); letter-spacing: 0.02em; }
.tg-footer__head { margin-bottom: var(--tg-s-md); }
.tg-footer__list > li + li { margin-top: 2px; }
.tg-footer__link { display: inline-block; padding-block: 5px; font-size: var(--tg-size-body); color: var(--tg-graphite-i); transition: color var(--tg-d-quick); }
.tg-footer__link:hover, .tg-footer__link:focus-visible { color: var(--tg-bone); }
.tg-footer__bottom {
  border-top: var(--tg-hair) solid var(--tg-hairline-i);
  padding-top: var(--tg-s-md);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tg-s-sm) var(--tg-s-lg);
  color: var(--tg-graphite-i); font-size: var(--tg-size-small);
}
.tg-footer__legal { display: flex; flex-wrap: wrap; gap: var(--tg-s-md); }
@media (max-width: 900px) {
  .tg-footer__brand { grid-column: 1 / -1; }
  .tg-footer__col, .tg-footer__col:nth-of-type(2), .tg-footer__col:nth-of-type(3), .tg-footer__col:nth-of-type(4) { grid-column: span 6; }
}
@media (max-width: 560px) {
  .tg-footer__col, .tg-footer__col:nth-of-type(2), .tg-footer__col:nth-of-type(3), .tg-footer__col:nth-of-type(4) { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   WORK. project detail
   -------------------------------------------------------------------------- */
.tg-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--tg-gutter); border-top: var(--tg-hair) solid var(--surface-rule); padding-top: var(--tg-s-md); }
.tg-fact__k { margin-bottom: var(--tg-s-2xs); }
.tg-fact__v { font-size: var(--tg-size-body); }
@media (max-width: 700px) { .tg-facts { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: var(--tg-s-lg); } }

.tg-prose { max-width: var(--tg-measure); }
.tg-prose p + p { margin-top: 1.15em; }
.tg-prose h3 { margin-top: 2em; margin-bottom: .6em; }

/* Media placeholder. used ONLY where a real image will be dropped in.
   Deliberately austere: a ruled field, never a grey box with an icon. */
.tg-figure--offset { max-width: 980px; margin-left: auto; }
/* Centred plate. The figure is exactly the panel width so the caption sits
   flush to the frame's left edge rather than floating. */
.tg-figure--kids { max-width: none; width: fit-content; margin-inline: auto; }
.tg-figure--kids .tg-figure__cap { max-width: 40ch; }
.tg-media {
  position: relative;
  background: var(--surface-bg);
  border: var(--tg-hair) solid var(--surface-rule);
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  overflow: hidden;
}
.tg-media img { width: 100%; height: 100%; object-fit: cover; }
.tg-media__slot { color: var(--surface-mute); text-align: center; padding: var(--tg-s-md); }
.tg-media--4x5 { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   LEGAL / long-form
   -------------------------------------------------------------------------- */
.tg-legal { max-width: 68ch; }
.tg-legal h2 { margin-top: clamp(40px, 4vw, 64px); margin-bottom: var(--tg-s-md); }
.tg-legal p + p { margin-top: 1.1em; }
.tg-legal ul { margin: 1em 0; padding-left: 1.1em; list-style: disc; }
.tg-legal li { margin-bottom: .5em; }
.tg-legal__toc { display: flex; flex-wrap: wrap; gap: var(--tg-s-sm) var(--tg-s-lg); border-top: var(--tg-hair) solid var(--surface-rule); border-bottom: var(--tg-hair) solid var(--surface-rule); padding-block: var(--tg-s-md); margin-bottom: clamp(40px, 4vw, 64px); }


/* --------------------------------------------------------------------------
   CAPABILITY LINE (hero foot). Part of the architecture, not a caption.
   -------------------------------------------------------------------------- */
.tg-caps {
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(20px, 3vw, 56px);
  width: 100%;
}
.tg-caps li { position: relative; }
.tg-caps li + li::before {
  content: ''; position: absolute;
  left: calc(clamp(20px, 3vw, 56px) / -2);
  top: 50%; width: 3px; height: 3px;
  background: currentColor; opacity: .38;
  transform: translate(-50%, -50%);
}
.tg-caps a {
  display: block; padding-block: 10px;
  font-size: var(--tg-size-eyebrow);
  font-weight: var(--tg-wt-medium);
  letter-spacing: var(--tg-tr-eyebrow);
  text-transform: uppercase;
  color: var(--surface-mute);
  transition: color var(--tg-d-quick) var(--tg-e-standard);
}
.tg-caps a:hover, .tg-caps a:focus-visible { color: var(--surface-fg); }
@media (max-width: 700px) {
  .tg-caps { flex-direction: column; gap: 0; }
  .tg-caps li + li::before { display: none; }
  .tg-caps a { padding-block: 7px; }
}

/* --------------------------------------------------------------------------
   INDEX ROW VARIANTS
   -------------------------------------------------------------------------- */
.tg-index--flush { border-top: 0; }
.tg-index__row--pair  { grid-template-columns: 3.2rem minmax(0, 1fr); }
.tg-index__row--split { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.tg-index__row--split .tg-index__title { font-size: var(--tg-size-body); font-weight: var(--tg-wt-book); }
@media (max-width: 860px) {
  .tg-index__row--split { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   GRAPHIC: SHELL BARS, derived from the mark
   -------------------------------------------------------------------------- */
.tg-bars { width: clamp(96px, 11vw, 150px); color: var(--surface-accent); }
.tg-bars .tg-gfx { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   CONTACT ROUTES. Each category opens a pre-titled message to one address.
   -------------------------------------------------------------------------- */
.tg-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--tg-gutter);
  border-top: var(--tg-hair) solid var(--surface-rule);
}
.tg-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px var(--tg-s-md);
  padding-block: clamp(22px, 2.2vw, 34px);
  border-bottom: var(--tg-hair) solid var(--surface-rule);
  position: relative;
  transition: padding-left var(--tg-d-base) var(--tg-e-standard);
}
.tg-route__label { grid-column: 1; }
.tg-route__desc {
  grid-column: 1; font-size: var(--tg-size-body);
  color: var(--surface-mute); line-height: 1.5;
}
.tg-route__go {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center; color: var(--surface-mute);
  transition: transform var(--tg-d-base) var(--tg-e-standard),
              color var(--tg-d-base) var(--tg-e-standard);
}
.tg-route:hover { padding-left: var(--tg-s-sm); }
.tg-route:hover .tg-route__go,
.tg-route:focus-visible .tg-route__go { transform: translateX(5px); color: var(--surface-fg); }
@media (max-width: 700px) {
  .tg-routes { grid-template-columns: 1fr; }
  .tg-route:hover { padding-left: 0; }
}

.tg-mail-line { margin-top: clamp(40px, 4vw, 64px); }
.tg-mail {
  font-size: var(--tg-size-lead);
  font-weight: var(--tg-wt-light);
  color: var(--surface-fg);
  border-bottom: var(--tg-hair) solid var(--surface-rule);
  padding-bottom: 3px;
  transition: border-color var(--tg-d-quick) var(--tg-e-standard);
  overflow-wrap: anywhere;
}
.tg-mail:hover, .tg-mail:focus-visible { border-bottom-color: var(--surface-accent); }
.tg-legal .tg-mail { font-size: inherit; font-weight: inherit; padding-block: 4px; }

/* Media frame with no image yet: a ruled field, never a grey box. */
.tg-media:empty { min-height: 0; }


/* ==========================================================================
   SIGNATURE MOTION
   One behaviour, used everywhere the mark appears. The mark opens from its own
   centre axis outward, which is the symmetry the mark is built on. Nothing else
   in the site moves like this, and nothing uses a second style.
   ========================================================================== */
/* The clip sits on the inner svg, never on the observed element. Clipping the
   observed box to zero width makes IntersectionObserver report no intersection,
   so the reveal would never fire. */
.js .tg-mark-reveal svg {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.5s var(--tg-e-entrance);
}
.js .tg-mark-reveal.is-in svg { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .js .tg-mark-reveal svg { clip-path: none !important; transition: none !important; }
}

/* ==========================================================================
   SECTION RHYTHM
   Sections are deliberately unequal. Airy sections carry almost nothing.
   ========================================================================== */
.tg-section--airy  { padding-block: clamp(120px, 18vw, 320px); }
.tg-section--flush { padding-block: clamp(56px, 6vw, 104px); }

/* Purely typographic moment. No eyebrow, no rule, no body copy. */
.tg-statement {
  font-family: var(--tg-font-serif);
  font-size: clamp(2.5rem, 8vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 13ch;
}
.tg-statement__note {
  margin-top: clamp(40px, 5vw, 88px);
  margin-left: auto;
  max-width: 26ch;
  font-size: var(--tg-size-lead);
  font-weight: var(--tg-wt-light);
  line-height: 1.42;
  color: var(--surface-mute);
  text-align: right;
}
@media (max-width: 760px) {
  .tg-statement__note { margin-left: 0; text-align: left; max-width: 30ch; }
}

/* ==========================================================================
   VISUAL MEDIA FRAME
   Holds a looping silent video, a poster, or, while assets are pending, a
   composition built from the mark. No request is made for absent files.
   ========================================================================== */
.tg-vm {
  position: relative;
  overflow: hidden;
  background: var(--tg-ink);
  aspect-ratio: 9 / 16;
}
.tg-vm__poster, .tg-vm__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tg-vm__video { opacity: 0; transition: opacity var(--tg-d-slow) var(--tg-e-standard); }
.tg-vm__video.is-playing { opacity: 1; }
/* The mark composition only stands in when there is no media. */
.tg-vm__poster ~ .tg-vm__fallback,
.tg-vm__video ~ .tg-vm__fallback { display: none; }
.tg-vm__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center end;
  padding-right: 7%;
  color: rgba(194, 167, 98, 0.15);
  line-height: 0;
}
.tg-vm__fallback svg { width: 34%; height: auto; max-width: 300px; }
.tg-vm--hero  { aspect-ratio: auto; }
.tg-vm--still { aspect-ratio: 4 / 5; }
/* Kenya panel. Full 9:16 frame, uncropped, height constrained so it sits in the
   page rather than dominating it. Offset left, against the hero panel's right. */
.tg-vm--kids {
  aspect-ratio: 9 / 16;
  height: min(72svh, 680px);
  width: auto;
}
@media (max-width: 760px) {
  .tg-vm__fallback { place-items: center; padding-right: 0; }
  .tg-vm--still { aspect-ratio: 4 / 5; }
  /* Full 9:16 on phones. Vertical is the native format here, no crop needed. */
  .tg-vm--kids { height: auto; width: 100%; aspect-ratio: 9 / 16; }
  .tg-figure--kids { width: 100%; }
  .tg-vm__fallback svg { width: 46%; }
}

/* ==========================================================================
   CURRENT PROJECT BAND, homepage
   ========================================================================== */
.tg-juoga__band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--tg-gutter);
  align-items: center;
  color: var(--tg-bone);
}
.tg-juoga__media { grid-column: 1 / span 4; }
.tg-juoga__inner { grid-column: 6 / span 6; }
.tg-juoga__title {
  font-family: var(--tg-font-display);
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: var(--tg-wt-medium);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--tg-s-md);
}
.tg-juoga__by {
  margin-top: var(--tg-s-md);
  font-size: var(--tg-size-lead);
  font-weight: var(--tg-wt-light);
  color: rgba(242,240,235,.82);
}
.tg-juoga__line { margin-top: var(--tg-s-2xs); font-size: var(--tg-size-body); color: rgba(242,240,235,.62); }
.tg-juoga__go { margin-top: clamp(24px, 3vw, 44px); border-bottom-color: rgba(242,240,235,.3); }
.tg-juoga__band:hover .tg-juoga__go::after,
.tg-juoga__band:focus-visible .tg-juoga__go::after { transform: scaleX(1); }
.tg-juoga__band:hover .tg-link__arrow { transform: translateX(5px); }
.tg-juoga__band:hover .tg-vm__video,
.tg-juoga__band:hover .tg-vm__poster { transform: scale(1.02); }
.tg-juoga__band:focus-visible { outline: 2px solid var(--tg-gold); outline-offset: 6px; }
.tg-vm__poster, .tg-vm__video { transition: transform var(--tg-d-slow) var(--tg-e-standard); }

@media (max-width: 900px) {
  .tg-juoga__media { grid-column: 1 / -1; }
  .tg-juoga__inner { grid-column: 1 / -1; margin-top: var(--tg-s-xl); }
  .tg-juoga__media .tg-vm { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   JUOGA PROJECT HERO
   The footage is 9:16. Rather than crop it into a landscape band, which cuts
   the dancers apart and reframes unpredictably at every cut, the whole frame
   is shown at its native ratio, height constrained, right aligned.
   On phones it goes full bleed, where vertical is the natural format.
   ========================================================================== */
.tg-jhero { position: relative; background: var(--tg-ink); color: var(--tg-bone); overflow: hidden; }
.tg-jhero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--tg-gutter);
  align-items: center;
  padding-block: clamp(48px, 5vw, 88px);
}
.tg-jhero__text  { grid-column: 1 / span 5; }
.tg-jhero__media { grid-column: 7 / span 6; justify-self: end; width: 100%; }
.tg-jhero__media .tg-vm {
  aspect-ratio: 9 / 16;
  height: min(74svh, 720px);
  width: auto;
  margin-left: auto;
}
.tg-jhero__title { margin-top: var(--tg-s-md); }
.tg-jhero__by {
  margin-top: var(--tg-s-lg);
  font-size: var(--tg-size-lead);
  font-weight: var(--tg-wt-light);
  color: rgba(242,240,235,.84);
}
.tg-jhero__line { margin-top: var(--tg-s-2xs); color: rgba(242,240,235,.62); }
.tg-jlinks { display: flex; flex-wrap: wrap; gap: var(--tg-s-md) var(--tg-s-xl); margin-top: var(--tg-s-xl); }

@media (max-width: 900px) {
  /* Full bleed vertical, title over the base of the frame. */
  .tg-jhero__grid { display: block; padding: 0; max-width: none; padding-inline: 0; }
  .tg-jhero__media { width: 100%; }
  .tg-jhero__media .tg-vm {
    height: auto; width: 100%;
    aspect-ratio: 3 / 4;
    margin: 0;
  }
  .tg-jhero__text {
    position: absolute; z-index: 2;
    left: var(--tg-margin); right: var(--tg-margin);
    bottom: clamp(28px, 5vw, 56px);
  }
  .tg-jhero::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(12,12,12,.88) 0%, rgba(12,12,12,.25) 46%, rgba(12,12,12,0) 72%);
    pointer-events: none;
  }
  .tg-jhero__by { margin-top: var(--tg-s-md); }
}

/* ==========================================================================
   RIGHTS BLOCK, diagram led
   ========================================================================== */
.tg-rights { display: flex; align-items: baseline; gap: var(--tg-s-md) clamp(32px, 5vw, 96px); flex-wrap: wrap; margin-bottom: clamp(48px, 6vw, 96px); }
.tg-rights__head { max-width: 22ch; }

/* ==========================================================================
   INTERNATIONAL BLOCK, mark led
   ========================================================================== */
.tg-intl__inner { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--tg-gutter); align-items: center; row-gap: clamp(40px, 5vw, 72px); }
.tg-intl__mark { grid-column: 1 / span 4; color: var(--surface-mark); line-height: 0; }
.tg-intl__mark svg { width: 100%; height: auto; }
.tg-intl__text { grid-column: 7 / span 6; }
.tg-intl__head { margin-top: var(--tg-s-lg); max-width: 11ch; }
.tg-intl__body { margin-top: var(--tg-s-lg); max-width: 34ch; }
@media (max-width: 900px) {
  .tg-intl__mark { grid-column: 1 / span 6; }
  .tg-intl__text { grid-column: 1 / -1; }
}

/* Taller page hero, used by 404 */
.tg-phero--tall { padding-block: clamp(120px, 16vw, 240px); }

/* Honeypot. Off screen, unfocusable, hidden from assistive tech. */
.tg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Form success message */
.tg-form__ok {
  margin-top: var(--tg-s-md);
  font-size: var(--tg-size-lead);
  font-weight: var(--tg-wt-light);
  color: var(--surface-fg);
}