/* TheGala homepage — Next.js reference rebuild (2026-08-17 full pivot).
   Ported from knowledge-base/nextjs-source/app/globals.css. Scoped to the
   homepage only (body.tgn-page) — does not touch the gold/tg-* system
   used elsewhere on the site. Do not add gold-system tokens here; this page
   has its own palette, see knowledge-base/DESIGN_SYSTEM.md. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.tgn-page {
  --tgn-ivory: #f7f3f0;
  --tgn-taupe: #c2ad9d;
  --tgn-sand: #ddd0c7;
  --tgn-taupe-deep: #9b8274;
  --tgn-espresso: #54390f;
  --tgn-espresso-deep: #332109;
  --tgn-ink: #1c1814;
  --tgn-olive: #77745e;
  --tgn-line: rgba(84, 57, 15, 0.2);

  background: var(--tgn-ivory);
  color: var(--tgn-ink);
}

body.tgn-page * {
  box-sizing: border-box;
}

/* Astra ships a site-wide header and footer. The Next.js reference has its own
   header and footer as page content and no theme chrome at all, so hide Astra's
   on this page only. Other pages keep the theme header/footer untouched. */
body.tgn-page header#masthead,
body.tgn-page .site-header,
body.tgn-page #ast-desktop-header,
body.tgn-page .ast-mobile-header-wrap,
body.tgn-page footer.site-footer,
body.tgn-page #colophon {
  display: none !important;
}

/* Astra emits its own skip link. The rebuild supplies the reference's skip link
   (.tgn-skip-link) with equivalent function, so hide Astra's rather than ship
   two competing skip links to the same content. */
body.tgn-page .skip-link.screen-reader-text,
body.tgn-page a.skip-link {
  display: none;
}

body.tgn-page .tgn-skip-link {
  display: block;
}

body.tgn-page .site-content,
body.tgn-page #primary,
body.tgn-page .ast-container,
body.tgn-page .entry-content {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Elementor containers carry their own default block/inline padding and a
   max-width. Zero them so the ported globals.css values below are the only
   thing controlling spacing. Must stay above the section rules — same
   specificity, so source order decides. */
body.tgn-page .e-con,
body.tgn-page .e-con-inner {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --content-width: 100%;
  --width: 100%;
  max-width: none;
  /* Elementor still applies a literal 10px inline padding regardless of the
     custom properties above; left in place it shows as a pale gutter down both
     sides of every full-bleed section. Section rules further down re-apply the
     source's own padding, and win on source order. */
  padding: 0;
}

/* Elementor wraps every widget in .elementor-widget > .elementor-widget-container.
   Those two divs become the flex/grid items of the surrounding container, so
   `flex: 1`, `gap` and `justify-content` from the source land on a wrapper
   instead of the <a>/<span> elements they were written for — the hero CTA
   segments stop splitting 50/50, the icon-and-label pairs lose their gap, and
   the store buttons sit flush against each other.

   `display: contents` removes the wrappers from layout so the real elements
   become direct children of the container, which is what the source assumes.
   Applied only to containers whose entire content is one HTML widget. */
body.tgn-page .tgn-section-index > .elementor-widget,
body.tgn-page .tgn-section-index > .elementor-widget > .elementor-widget-container,
body.tgn-page .tgn-main-nav > .elementor-widget,
body.tgn-page .tgn-main-nav > .elementor-widget > .elementor-widget-container,
body.tgn-page .tgn-store-links > .elementor-widget,
body.tgn-page .tgn-store-links > .elementor-widget > .elementor-widget-container,
body.tgn-page .tgn-hero-cta-card > .elementor-widget,
body.tgn-page .tgn-hero-cta-card > .elementor-widget > .elementor-widget-container,
body.tgn-page .tgn-content-heading > .elementor-widget,
body.tgn-page .tgn-content-heading > .elementor-widget > .elementor-widget-container,
body.tgn-page .tgn-store-actions > .elementor-widget,
body.tgn-page .tgn-store-actions > .elementor-widget > .elementor-widget-container,
body.tgn-page .tgn-footer-top-nav > .elementor-widget,
body.tgn-page .tgn-footer-top-nav > .elementor-widget > .elementor-widget-container,
body.tgn-page .tgn-footer-bottom > .elementor-widget,
body.tgn-page .tgn-footer-bottom > .elementor-widget > .elementor-widget-container {
  display: contents;
}

/* Elementor containers default to flex-direction: column. Every container above
   is a row in the source, so the direction has to be stated explicitly or the
   flattened children stack vertically. */
body.tgn-page .tgn-section-index,
body.tgn-page .tgn-main-nav,
body.tgn-page .tgn-store-links,
body.tgn-page .tgn-hero-cta-card,
body.tgn-page .tgn-content-heading,
body.tgn-page .tgn-store-actions,
body.tgn-page .tgn-footer-top-nav,
body.tgn-page .tgn-footer-bottom {
  flex-direction: row;
}

/* Flattening also exposes these containers to Elementor's default 20px gap.
   The source spaces these three with justify-content alone, so the gap has to
   be zeroed explicitly; the containers that DO want a gap set their own below. */
body.tgn-page .tgn-section-index,
body.tgn-page .tgn-hero-cta-card,
body.tgn-page .tgn-footer-bottom {
  gap: 0;
}

body.tgn-page .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* The Elementor kit and the child theme's site-wide CSS push Montserrat/
   Cormorant and the kit's dusty-rose accent (#C3937C) onto headings and body
   copy. This page is Cairo-only with colour inherited from its section, per the
   Next.js source. Selectors are deliberately one class deeper than Elementor's
   own (.elementor-widget-heading .elementor-heading-title) so they win on
   specificity rather than needing !important. */
body.tgn-page .elementor-heading-title,
body.tgn-page .elementor-widget-heading .elementor-heading-title,
body.tgn-page .elementor-widget-html h1,
body.tgn-page .elementor-widget-html h2,
body.tgn-page .elementor-widget-html h3,
body.tgn-page .elementor-widget-html p,
body.tgn-page .elementor-widget-html a,
body.tgn-page .elementor-widget-html span,
body.tgn-page .elementor-widget-html li {
  font-family: 'Cairo', sans-serif;
}

/* Colour inheritance is deliberately NOT applied to a/span/li here: those carry
   their own colours further down (the hero CTA's active segment, store buttons,
   footer links) and a broad `color: inherit` at this specificity would silently
   win and render them invisible against their own backgrounds. */
body.tgn-page .elementor-heading-title,
body.tgn-page .elementor-widget-heading .elementor-heading-title,
body.tgn-page .elementor-widget-html h1,
body.tgn-page .elementor-widget-html h2,
body.tgn-page .elementor-widget-html h3,
body.tgn-page .elementor-widget-html > p {
  color: inherit;
}

/* Manrope is the only exception — short numeric/label fragments only. */
body.tgn-page .tgn-section-index,
body.tgn-page .tgn-service-number,
body.tgn-page .tgn-service-arrow,
body.tgn-page .tgn-objectives li span,
body.tgn-page .tgn-steps-grid li > span,
body.tgn-page .tgn-store-button strong,
body.tgn-page .tgn-partner-visual-label span,
body.tgn-page .tgn-footer-bottom {
  font-family: 'Manrope', sans-serif;
}

body.tgn-page img {
  display: block;
  max-width: 100%;
}

body.tgn-page h1,
body.tgn-page h2,
body.tgn-page h3,
body.tgn-page p {
  margin-top: 0;
  font-family: 'Cairo', sans-serif;
}

body.tgn-page .tgn-shell {
  width: min(1220px, calc(100% - 96px));
  margin-inline: auto;
}

/* ---------- Skip link ---------- */

body.tgn-page .tgn-skip-wrap {
  position: absolute;
}

body.tgn-page .tgn-skip-link {
  position: fixed;
  z-index: 100;
  inset: 8px auto auto 8px;
  padding: 10px 18px;
  transform: translateY(-140%);
  background: var(--tgn-ivory);
  color: var(--tgn-espresso);
  text-decoration: none;
}

body.tgn-page .tgn-skip-link:focus {
  transform: translateY(0);
}

/* ---------- Header ---------- */

body.tgn-page .tgn-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  width: 100%;
  min-height: 104px;
  padding: 16px 48px;
  border-bottom: 1px solid rgba(247, 243, 240, 0.28);
  color: var(--tgn-ivory);
}

/* Grid column 1 in RTL is the right-hand column, and `end` resolves to its
   inner (left) edge — so the logo sits at the far right of the bar, as in the
   source. Pairs with the header's DOM order: brand, nav, store links. */
body.tgn-page .tgn-brand-mark {
  justify-self: end;
}

body.tgn-page .tgn-brand-mark img {
  width: 158px;
  filter: brightness(0) invert(1);
}

/* These live on the container, not on .elementor-widget-container: that wrapper
   is display:contents (see the flatten block above), so the links are direct
   flex children of the container itself. */
body.tgn-page .tgn-main-nav {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 3.2vw, 54px);
  font-size: 13px;
}

body.tgn-page .tgn-main-nav a,
body.tgn-page .tgn-footer-top-nav a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

body.tgn-page .tgn-main-nav a::after,
body.tgn-page .tgn-footer-top-nav a::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: currentColor;
  transition: transform 220ms ease;
}

body.tgn-page .tgn-main-nav a:hover::after,
body.tgn-page .tgn-main-nav a:focus-visible::after,
body.tgn-page .tgn-footer-top-nav a:hover::after,
body.tgn-page .tgn-footer-top-nav a:focus-visible::after {
  transform: scaleX(1);
}

body.tgn-page .tgn-store-links {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  /* Keeps the App Store icon first (left) and the Arabic label last, matching
     the source, even though the page itself is RTL. */
  direction: ltr;
}

body.tgn-page .tgn-store-label {
  margin-left: 4px;
  direction: rtl;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.tgn-page .tgn-store-link {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgba(247, 243, 240, 0.6);
  border-radius: 50%;
  background: rgba(20, 14, 10, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
  color: var(--tgn-ivory);
}

body.tgn-page .tgn-store-link:hover,
body.tgn-page .tgn-store-link:focus-visible {
  transform: translateY(-2px);
  background: var(--tgn-ivory);
  color: var(--tgn-espresso);
}

body.tgn-page .tgn-store-link svg {
  width: 20px;
  height: 20px;
}

/* ---------- Hero ---------- */

body.tgn-page .tgn-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  color: var(--tgn-ivory);
}

body.tgn-page .tgn-hero-image,
body.tgn-page .tgn-hero-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.tgn-page .tgn-hero-image,
body.tgn-page .tgn-hero-image .elementor-widget-container,
body.tgn-page .tgn-hero-image .elementor-widget-image {
  height: 100%;
}

body.tgn-page .tgn-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: tgn-hero-in 1.6s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

/* The editorial and partner photos also sit inside widget wrappers that would
   otherwise collapse to content height and defeat the fixed heights below. */
body.tgn-page .tgn-editorial-image .elementor-widget-image,
body.tgn-page .tgn-editorial-image .elementor-widget-container,
body.tgn-page .tgn-partner-visual .elementor-widget-image,
body.tgn-page .tgn-partner-visual .elementor-widget-container {
  height: 100%;
}

body.tgn-page .tgn-hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(28, 24, 20, 0.18), rgba(28, 24, 20, 0.03)),
    linear-gradient(0deg, rgba(28, 24, 20, 0.78) 0%, rgba(28, 24, 20, 0.15) 62%, rgba(28, 24, 20, 0.45) 100%);
}

body.tgn-page .tgn-hero-content {
  width: min(1220px, calc(100% - 96px));
  margin-inline: auto;
  padding-bottom: clamp(118px, 14vh, 150px);
}

body.tgn-page .tgn-hero-content .tgn-eyebrow {
  max-width: 680px;
  margin-bottom: 14px;
  line-height: 1.7;
}

body.tgn-page .tgn-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  color: var(--tgn-espresso);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

body.tgn-page .tgn-eyebrow::before {
  width: 38px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0.65;
}

body.tgn-page .tgn-eyebrow.tgn-light {
  color: rgba(247, 243, 240, 0.8);
}

body.tgn-page .tgn-hero h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(48px, 4.6vw, 78px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
}

body.tgn-page .tgn-hero h1 span {
  display: block;
}

body.tgn-page .tgn-hero-copy {
  max-width: 620px;
  margin-bottom: 26px;
  color: rgba(247, 243, 240, 0.88);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
}

@media (min-width: 641px) {
  body.tgn-page .tgn-hero h1 span {
    white-space: nowrap;
  }
}

body.tgn-page .tgn-closing-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

body.tgn-page .tgn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

body.tgn-page .tgn-btn:hover,
body.tgn-page .tgn-btn:focus-visible {
  transform: translateY(-2px);
}

body.tgn-page .tgn-btn-light {
  background: var(--tgn-ivory);
  color: var(--tgn-espresso);
}

body.tgn-page .tgn-btn-light:hover,
body.tgn-page .tgn-btn-light:focus-visible {
  background: var(--tgn-taupe);
  color: var(--tgn-ink);
}

body.tgn-page .tgn-btn-dark {
  background: var(--tgn-espresso);
  color: var(--tgn-ivory);
}

body.tgn-page .tgn-btn-dark:hover,
body.tgn-page .tgn-btn-dark:focus-visible {
  background: var(--tgn-espresso-deep);
}

body.tgn-page .tgn-text-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  font-size: 13px;
  text-decoration: none;
}

body.tgn-page .tgn-light-link {
  color: rgba(247, 243, 240, 0.9);
}

body.tgn-page .tgn-hero-cta-card {
  position: absolute;
  bottom: 46px;
  left: 48px;
  display: flex;
  align-items: stretch;
  width: min(430px, calc(100% - 96px));
  min-height: 56px;
  padding: 0;
  /* The two segments meet flush in the source, split by a 1px divider only.
     Without this they inherit Elementor's default 20px container gap, which
     shows as a dark band between the divider and the active (ivory) half. */
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(247, 243, 240, 0.48);
  border-radius: 999px;
  background: rgba(28, 24, 20, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.tgn-page .tgn-hero-cta-item {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  color: var(--tgn-ivory);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

body.tgn-page .tgn-hero-cta-item + .tgn-hero-cta-item {
  border-inline-start: 1px solid rgba(247, 243, 240, 0.35);
}

body.tgn-page .tgn-hero-cta-primary,
body.tgn-page .tgn-hero-cta-item:hover,
body.tgn-page .tgn-hero-cta-item:focus-visible {
  background: var(--tgn-ivory);
  color: var(--tgn-espresso);
}

@keyframes tgn-hero-in {
  from { transform: scale(1.04); opacity: 0.85; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Section index rail ---------- */

/* R1 (2026-08-19): the 01/02/03 section labels — من نحن / خدماتنا / رحلتك معانا —
   go to weight 700 and up from 9px to 12px, at every breakpoint. There are no
   breakpoint overrides for this rule, so this one change covers all sizes. */
body.tgn-page .tgn-section-index {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: start;
  min-width: 170px;
  padding-top: 10px;
  border-top: 1px solid var(--tgn-line);
  color: var(--tgn-espresso);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

body.tgn-page .tgn-section-index.tgn-inverse {
  border-color: rgba(247, 243, 240, 0.25);
  color: rgba(247, 243, 240, 0.75);
}

/* ---------- About / intro ---------- */

body.tgn-page .tgn-intro-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(60px, 9vw, 150px);
  padding-top: clamp(100px, 11vw, 165px);
  padding-bottom: clamp(28px, 4vw, 60px);
}

body.tgn-page .tgn-intro-statement {
  max-width: 920px;
}

body.tgn-page .tgn-content-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  /* Without this the flattened icon+label pair inherits the container's
     centring and floats to the middle of the column instead of sitting at the
     inline start (the right edge, in RTL). */
  justify-content: flex-start;
  margin-bottom: 22px;
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 700;
  letter-spacing: 0;
}

body.tgn-page .tgn-content-heading::before {
  display: none;
}

body.tgn-page .tgn-heading-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(84, 57, 15, 0.3);
  border-radius: 50%;
  background: rgba(194, 173, 157, 0.16);
  color: var(--tgn-espresso);
}

body.tgn-page .tgn-heading-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

body.tgn-page .tgn-intro-statement h2,
body.tgn-page .tgn-journey-heading h2,
body.tgn-page .tgn-partner-copy h2,
body.tgn-page .tgn-closing-content h2 {
  margin-bottom: 30px;
  color: var(--tgn-espresso);
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.04em;
}

/* `_css_classes` lands on Elementor's widget wrapper, not the heading element,
   so this has to reach the inner .elementor-heading-title or the generic
   display-h2 rule above wins and renders the lead paragraph at 69px. */
body.tgn-page .tgn-intro-statement .tgn-lead-h2,
body.tgn-page .tgn-intro-statement .tgn-lead-h2 .elementor-heading-title {
  max-width: 920px;
  margin-bottom: 12px;
  color: #514a44;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0;
}

body.tgn-page .tgn-intro-statement > p:last-child {
  max-width: 920px;
  margin-inline-start: 0;
  color: #514a44;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 2.05;
}

/* ---------- Story grid ---------- */

body.tgn-page .tgn-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: stretch;
  margin-top: -24px;
  padding-bottom: clamp(110px, 13vw, 190px);
}

body.tgn-page .tgn-editorial-image {
  margin: 0;
  overflow: hidden;
}

body.tgn-page .tgn-editorial-image img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
}

body.tgn-page .tgn-editorial-image figcaption {
  margin-top: 12px;
  color: var(--tgn-olive);
  font-size: 10px;
}

body.tgn-page .tgn-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: 28px 4px;
}

body.tgn-page .tgn-story-block h3 {
  max-width: 620px;
  margin-bottom: 12px;
  color: #5f574f;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 2.05;
}

body.tgn-page .tgn-story-block > p:last-child {
  max-width: 620px;
  color: #5f574f;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 2.05;
}

body.tgn-page .tgn-vision-block {
  margin-top: 72px;
  padding-top: 38px;
  border-top: 1px solid var(--tgn-line);
}

body.tgn-page .tgn-vision-statement {
  max-width: 620px;
  color: #5f574f;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 2.05;
}

body.tgn-page .tgn-objectives {
  margin-top: 72px;
}

body.tgn-page .tgn-objectives ul,
body.tgn-page .tgn-partner-copy ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.tgn-page .tgn-objectives li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--tgn-line);
  color: #443d37;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 2.05;
}

body.tgn-page .tgn-objectives li span {
  color: var(--tgn-taupe-deep);
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
}

/* ---------- Services ---------- */

body.tgn-page .tgn-services-section {
  padding-block: clamp(105px, 13vw, 180px);
  background: var(--tgn-sand);
  color: var(--tgn-espresso-deep);
}

body.tgn-page .tgn-services-section .tgn-section-index.tgn-inverse {
  border-color: var(--tgn-line);
  color: rgba(84, 57, 15, 0.78);
}

body.tgn-page .tgn-services-section .tgn-eyebrow.tgn-light {
  color: rgba(84, 57, 15, 0.8);
}

body.tgn-page .tgn-services-heading {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: start;
  margin-bottom: 84px;
}

body.tgn-page .tgn-services-title-block {
  max-width: 920px;
}

body.tgn-page .tgn-services-heading h2 {
  margin: 0;
  font-size: clamp(40px, 3.4vw, 56px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.025em;
}

body.tgn-page .tgn-services-lead {
  max-width: 620px;
  margin: 26px 0 0 auto;
  color: #665a51;
  font-size: 15px;
  line-height: 2;
}

@media (min-width: 1180px) {
  body.tgn-page .tgn-services-heading h2 {
    white-space: nowrap;
  }
}

body.tgn-page .tgn-service-list {
  border-top: 1px solid rgba(84, 57, 15, 0.24);
}

body.tgn-page .tgn-service-row {
  display: grid;
  grid-template-columns: 80px minmax(210px, 0.72fr) minmax(280px, 1fr) 40px;
  gap: 0;
  align-items: center;
  min-height: 116px;
  border-bottom: 1px solid rgba(84, 57, 15, 0.18);
  transition: background 180ms ease;
}

body.tgn-page .tgn-service-row:hover {
  background: rgba(247, 243, 240, 0.14);
}

body.tgn-page .tgn-service-number {
  padding-inline: 18px;
  color: rgba(84, 57, 15, 0.62);
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
}

body.tgn-page .tgn-service-row h3 {
  margin: 0;
  padding-inline: 28px;
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 400;
}

body.tgn-page .tgn-service-row p {
  display: flex;
  align-self: stretch;
  align-items: center;
  margin: 0;
  padding: 22px clamp(24px, 3vw, 44px);
  border-inline: 1px solid rgba(84, 57, 15, 0.12);
  background: rgba(247, 243, 240, 0.56);
  color: #6a5e55;
  font-size: 13px;
  line-height: 1.9;
  transition: background 180ms ease;
}

body.tgn-page .tgn-service-row:hover p {
  background: rgba(247, 243, 240, 0.78);
}

body.tgn-page .tgn-service-arrow {
  justify-self: center;
  color: rgba(84, 57, 15, 0.68);
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
}

/* ---------- Journey / steps ---------- */

body.tgn-page .tgn-journey-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(60px, 9vw, 150px);
  padding-top: clamp(100px, 11vw, 160px);
  padding-bottom: clamp(82px, 9vw, 130px);
}

body.tgn-page .tgn-journey-heading {
  max-width: 840px;
}

body.tgn-page .tgn-journey-heading > p:last-child {
  max-width: 630px;
  color: #5b544d;
}

/* In the source the <ol> is itself the grid item that sits in column 2. Here it
   lives inside an Elementor widget wrapper, so the wrapper has to carry the
   column placement instead. */
body.tgn-page .tgn-steps-wrap {
  grid-column: 2;
}

body.tgn-page .tgn-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--tgn-line);
  list-style: none;
}

body.tgn-page .tgn-steps-grid li {
  min-height: 250px;
  padding: 24px 28px 26px;
  border-inline-start: 1px solid var(--tgn-line);
}

body.tgn-page .tgn-steps-grid li:last-child {
  border-inline-end: 1px solid var(--tgn-line);
}

body.tgn-page .tgn-steps-grid li > span {
  display: block;
  margin-bottom: 42px;
  color: var(--tgn-taupe-deep);
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
}

body.tgn-page .tgn-steps-grid h3 {
  margin-bottom: 12px;
  color: var(--tgn-espresso);
  font-size: clamp(24px, 2vw, 29px);
  font-weight: 600;
}

body.tgn-page .tgn-steps-grid p {
  margin: 0;
  color: #514a44;
  font-size: 14px;
  line-height: 2;
}

/* ---------- Download / app CTA ---------- */

/* The gradient itself is set through Elementor's native container background
   settings (see the build script) rather than here, so it stays visible and
   editable in the Elementor UI. Only the padding and ink live in CSS. */
body.tgn-page .tgn-download-section {
  padding-block: clamp(72px, 8vw, 110px);
  color: var(--tgn-ivory);
}

body.tgn-page .tgn-download-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

body.tgn-page .tgn-download-copy {
  max-width: 650px;
}

body.tgn-page .tgn-download-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(42px, 4.6vw, 68px);
  font-weight: 400;
  line-height: 1.35;
}

body.tgn-page .tgn-download-copy > p:last-child {
  max-width: 590px;
  margin: 0;
  color: rgba(247, 243, 240, 0.82);
  font-size: 15px;
}

body.tgn-page .tgn-store-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.tgn-page .tgn-store-button {
  display: inline-flex;
  min-width: 210px;
  min-height: 72px;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border: 1px solid rgba(247, 243, 240, 0.72);
  border-radius: 14px;
  background: var(--tgn-ivory);
  color: var(--tgn-espresso-deep);
  direction: ltr;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}

body.tgn-page .tgn-store-button:hover,
body.tgn-page .tgn-store-button:focus-visible {
  transform: translateY(-3px);
  background: #ffffff;
}

body.tgn-page .tgn-store-button svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

body.tgn-page .tgn-store-button .tgn-store-button-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

body.tgn-page .tgn-store-button small {
  margin-bottom: 4px;
  font-family: 'Cairo', sans-serif;
  font-size: 9px;
}

body.tgn-page .tgn-store-button strong {
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  font-weight: 600;
}

/* ---------- Partners ---------- */

body.tgn-page .tgn-partners-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(60px, 9vw, 140px);
  align-items: center;
  padding-block: clamp(110px, 13vw, 190px);
}

body.tgn-page .tgn-partner-visual {
  position: relative;
  min-height: 720px;
  overflow: hidden;
}

body.tgn-page .tgn-partner-visual img {
  width: 100%;
  height: 720px;
  object-fit: cover;
}

body.tgn-page .tgn-partner-visual-label {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  width: min(310px, calc(100% - 56px));
  padding: 22px 24px;
  background: rgba(247, 243, 240, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--tgn-espresso);
}

body.tgn-page .tgn-partner-visual-label span {
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
}

body.tgn-page .tgn-partner-visual-label strong {
  margin-top: 7px;
  font-size: 19px;
  font-weight: 500;
}

body.tgn-page .tgn-partner-copy h2 {
  max-width: 540px;
}

body.tgn-page .tgn-partner-copy > p:not(.tgn-eyebrow) {
  max-width: 560px;
  color: #5c554e;
}

body.tgn-page .tgn-partner-copy ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin: 36px 0 40px;
}

body.tgn-page .tgn-partner-copy li {
  padding: 13px 0;
  border-bottom: 1px solid var(--tgn-line);
  color: #443e38;
  font-size: 12px;
}

body.tgn-page .tgn-partner-copy li::before {
  margin-inline-end: 8px;
  color: var(--tgn-taupe-deep);
  content: "—";
}

/* ---------- Closing CTA ---------- */

body.tgn-page .tgn-closing-section {
  position: relative;
  display: grid;
  min-height: 680px;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--tgn-ivory);
  text-align: center;
}

body.tgn-page .tgn-closing-image,
body.tgn-page .tgn-closing-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.tgn-page .tgn-closing-image,
body.tgn-page .tgn-closing-image .elementor-widget-container,
body.tgn-page .tgn-closing-image .elementor-widget-image {
  height: 100%;
}

body.tgn-page .tgn-closing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.tgn-page .tgn-closing-overlay {
  z-index: -1;
  background: rgba(28, 24, 20, 0.68);
}

body.tgn-page .tgn-closing-content {
  width: min(800px, calc(100% - 48px));
}

body.tgn-page .tgn-closing-content .tgn-eyebrow {
  justify-content: center;
}

body.tgn-page .tgn-closing-content h2 {
  color: var(--tgn-ivory);
  font-size: clamp(48px, 6.2vw, 88px);
}

body.tgn-page .tgn-closing-content .tgn-closing-actions {
  justify-content: center;
}

/* ---------- Footer ---------- */

body.tgn-page .tgn-footer {
  background: var(--tgn-ivory);
}

body.tgn-page .tgn-footer-top {
  display: grid;
  grid-template-columns: 260px minmax(260px, 0.8fr) 1fr;
  gap: 70px;
  align-items: start;
  padding-block: 78px;
}

body.tgn-page .tgn-footer-top img {
  width: 200px;
}

body.tgn-page .tgn-footer-top p {
  max-width: 360px;
  margin: 0;
  color: #5f574f;
  font-size: 12px;
}

body.tgn-page .tgn-footer-top-nav {
  display: flex;
  justify-content: flex-end;
  gap: 34px;
  font-size: 12px;
}

body.tgn-page .tgn-footer-top-nav {
  color: var(--tgn-espresso);
}

body.tgn-page .tgn-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px 32px;
  border-top: 1px solid var(--tgn-line);
  color: #81766d;
  font-family: 'Manrope', 'Cairo', sans-serif;
  font-size: 9px;
}

/* CR line addition (2026-08-17 decision, not in the Next.js source) */
body.tgn-page .tgn-footer-bottom .tgn-footer-legal {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.tgn-page .tgn-footer-bottom a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 980px breakpoint ---------- */

@media (max-width: 980px) {
  body.tgn-page .tgn-shell,
  body.tgn-page .tgn-hero-content {
    width: min(100% - 48px, 760px);
  }

  body.tgn-page .tgn-header {
    grid-template-columns: 1fr auto;
    min-height: 88px;
    padding-inline: 24px;
  }

  body.tgn-page .tgn-main-nav {
    display: none;
  }

  body.tgn-page .tgn-brand-mark img {
    width: 135px;
  }

  body.tgn-page .tgn-store-link {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  body.tgn-page .tgn-hero-cta-card {
    bottom: 24px;
    left: 24px;
  }

  body.tgn-page .tgn-intro-section,
  body.tgn-page .tgn-journey-section {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  body.tgn-page .tgn-section-index {
    width: 170px;
  }

  body.tgn-page .tgn-story-grid,
  body.tgn-page .tgn-partners-section {
    grid-template-columns: 1fr;
  }

  body.tgn-page .tgn-editorial-image img,
  body.tgn-page .tgn-partner-visual,
  body.tgn-page .tgn-partner-visual img {
    min-height: 0;
    height: 610px;
  }

  body.tgn-page .tgn-story-copy {
    padding-top: 0;
  }

  body.tgn-page .tgn-objectives {
    margin-top: 58px;
  }

  body.tgn-page .tgn-vision-block {
    margin-top: 58px;
  }

  body.tgn-page .tgn-services-heading {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  body.tgn-page .tgn-services-heading .tgn-section-index {
    grid-column: auto;
  }

  body.tgn-page .tgn-service-row {
    grid-template-columns: 55px minmax(190px, 0.7fr) 1fr 26px;
  }

  /* The wrapper carries the column placement (see the desktop rule), so it has
     to be the thing reset to column 1 — otherwise it stays in column 2 of a
     grid that no longer has one and spawns a phantom implicit column. */
  body.tgn-page .tgn-steps-wrap {
    grid-column: 1;
  }

  body.tgn-page .tgn-steps-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.tgn-page .tgn-steps-grid li:nth-child(3) {
    border-top: 1px solid var(--tgn-line);
  }

  body.tgn-page .tgn-steps-grid li:nth-child(4) {
    border-top: 1px solid var(--tgn-line);
  }

  body.tgn-page .tgn-download-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  body.tgn-page .tgn-footer-top {
    grid-template-columns: 1fr 1fr;
  }

  body.tgn-page .tgn-footer-top-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ---------- 640px breakpoint ---------- */

@media (max-width: 640px) {
  body.tgn-page {
    font-size: 14px;
  }

  body.tgn-page .tgn-shell,
  body.tgn-page .tgn-hero-content {
    width: calc(100% - 36px);
  }

  body.tgn-page .tgn-header {
    padding-inline: 18px;
  }

  body.tgn-page .tgn-brand-mark img {
    width: 118px;
  }

  body.tgn-page .tgn-store-links {
    gap: 6px;
  }

  body.tgn-page .tgn-store-link {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  body.tgn-page .tgn-store-link svg {
    width: 17px;
    height: 17px;
  }

  body.tgn-page .tgn-store-label {
    margin-left: 2px;
    font-size: 10px;
  }

  body.tgn-page .tgn-hero {
    min-height: 820px;
  }

  body.tgn-page .tgn-hero-content {
    padding-bottom: 150px;
  }

  body.tgn-page .tgn-hero-image img {
    object-position: 63% center;
  }

  body.tgn-page .tgn-hero h1 {
    font-size: 54px;
  }

  body.tgn-page .tgn-hero-copy {
    font-size: 14px;
  }

  body.tgn-page .tgn-closing-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  body.tgn-page .tgn-hero-cta-card {
    left: 18px;
    bottom: 24px;
    width: calc(100% - 36px);
    min-height: 52px;
  }

  body.tgn-page .tgn-hero-cta-item {
    padding-inline: 14px;
    font-size: 11px;
  }

  body.tgn-page .tgn-intro-section,
  body.tgn-page .tgn-journey-section,
  body.tgn-page .tgn-partners-section {
    padding-block: 90px;
  }

  body.tgn-page .tgn-intro-statement h2,
  body.tgn-page .tgn-journey-heading h2,
  body.tgn-page .tgn-partner-copy h2,
  body.tgn-page .tgn-closing-content h2 {
    font-size: 39px;
  }

  body.tgn-page .tgn-intro-statement .tgn-lead-h2,
  body.tgn-page .tgn-intro-statement .tgn-lead-h2 .elementor-heading-title {
    font-size: 16px;
  }

  body.tgn-page .tgn-story-grid {
    width: 100%;
    gap: 45px;
    padding-bottom: 95px;
  }

  body.tgn-page .tgn-story-copy {
    width: calc(100% - 36px);
    margin-inline: auto;
  }

  body.tgn-page .tgn-editorial-image img {
    height: 490px;
  }

  body.tgn-page .tgn-editorial-image figcaption {
    padding-inline: 18px;
  }

  body.tgn-page .tgn-services-section {
    padding-block: 90px;
  }

  body.tgn-page .tgn-services-heading {
    grid-template-columns: 1fr;
    gap: 38px;
    margin-bottom: 55px;
  }

  body.tgn-page .tgn-services-heading .tgn-section-index {
    grid-column: auto;
  }

  body.tgn-page .tgn-services-heading h2 {
    font-size: 42px;
  }

  body.tgn-page .tgn-service-row {
    grid-template-columns: 38px 1fr 22px;
    gap: 0;
    min-height: 0;
    padding-top: 24px;
  }

  body.tgn-page .tgn-service-number {
    grid-column: 1;
    grid-row: 1;
    padding-inline: 8px;
  }

  body.tgn-page .tgn-service-row h3 {
    grid-column: 2;
    grid-row: 1;
    padding-inline: 14px;
  }

  body.tgn-page .tgn-service-row p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 22px;
    padding: 18px 20px;
    border-inline: 0;
  }

  body.tgn-page .tgn-service-arrow {
    grid-column: 3;
    grid-row: 1;
  }

  body.tgn-page .tgn-steps-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  body.tgn-page .tgn-steps-grid li {
    min-height: 205px;
    border-top: 1px solid var(--tgn-line);
    border-inline: 1px solid var(--tgn-line);
  }

  body.tgn-page .tgn-steps-grid li > span {
    margin-bottom: 30px;
  }

  body.tgn-page .tgn-download-section {
    padding-block: 70px;
  }

  body.tgn-page .tgn-download-copy h2 {
    font-size: 42px;
  }

  /* Overrides the row direction set on the flattened-wrapper containers above. */
  body.tgn-page .tgn-store-actions {
    flex-direction: column;
  }

  body.tgn-page .tgn-footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }

  body.tgn-page .tgn-store-button {
    width: 100%;
  }

  body.tgn-page .tgn-partner-visual,
  body.tgn-page .tgn-partner-visual img {
    height: 520px;
  }

  body.tgn-page .tgn-partner-copy ul {
    grid-template-columns: 1fr;
  }

  body.tgn-page .tgn-closing-section {
    min-height: 620px;
    place-items: end stretch;
  }

  body.tgn-page .tgn-closing-content {
    margin: 0 auto;
    padding-bottom: 80px;
    text-align: right;
  }

  body.tgn-page .tgn-closing-content .tgn-eyebrow {
    justify-content: flex-start;
  }

  body.tgn-page .tgn-footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body.tgn-page .tgn-footer-top-nav {
    grid-column: auto;
    flex-wrap: wrap;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tgn-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   LEGAL PAGES (Privacy Policy, Terms & Conditions) — added 2026-08-19

   These pages reuse the header, footer, buttons and type scale above; only the
   long-form document body is new. Kept deliberately plain: hairline-separated
   sections on the ivory ground, no cards and no shadows, matching the rest of
   the site.
   =========================================================================== */

body.tgn-page .tgn-legal-head {
  padding-top: clamp(150px, 16vw, 220px);
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--tgn-line);
}

body.tgn-page .tgn-legal-head h1 {
  margin: 0 0 14px;
  color: var(--tgn-espresso);
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.04em;
}

body.tgn-page .tgn-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
  color: var(--tgn-olive);
  font-size: 12px;
  line-height: 1.9;
}

body.tgn-page .tgn-legal-body {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(90px, 11vw, 150px);
}

/* Long-form legal text needs a shorter measure than the marketing sections;
   60–70 characters, per the project's own typographic rule. */
body.tgn-page .tgn-legal-intro,
body.tgn-page .tgn-legal-section {
  max-width: 760px;
}

body.tgn-page .tgn-legal-intro p,
body.tgn-page .tgn-legal-section p {
  margin: 0 0 18px;
  color: #514a44;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 400;
  line-height: 2.05;
}

body.tgn-page .tgn-legal-intro {
  padding-bottom: clamp(28px, 4vw, 48px);
}

body.tgn-page .tgn-legal-section {
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--tgn-line);
  margin-top: clamp(28px, 3.5vw, 44px);
}

body.tgn-page .tgn-legal-section:first-of-type {
  border-top: 0;
  margin-top: 0;
}

body.tgn-page .tgn-legal-section h2 {
  margin: 0 0 16px;
  color: var(--tgn-espresso);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* The legal pages are English documents on an RTL site: force the document
   body to read left-to-right while the surrounding chrome stays RTL. */
body.tgn-page .tgn-legal-ltr,
body.tgn-page .tgn-legal-ltr .tgn-legal-meta {
  direction: ltr;
  text-align: left;
}

body.tgn-page .tgn-legal-note {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 20px 24px;
  border: 1px solid var(--tgn-line);
  background: rgba(221, 208, 199, 0.28);
  color: #5f574f;
  font-size: 13px;
  line-height: 1.9;
}

@media (max-width: 980px) {
  body.tgn-page .tgn-legal-head {
    padding-top: clamp(130px, 18vw, 170px);
  }
}

@media (max-width: 640px) {
  body.tgn-page .tgn-legal-head h1 {
    font-size: 39px;
  }

  body.tgn-page .tgn-legal-section h2 {
    font-size: 19px;
  }
}

/* ---------- Footer: company + contact block (R4) and legal links (R5) ---------- */

body.tgn-page .tgn-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 18px;
}

body.tgn-page .tgn-footer-company {
  color: var(--tgn-espresso);
  font-size: 13px;
  font-weight: 600;
}

body.tgn-page .tgn-footer-contact a {
  display: flex;
  gap: 10px;
  color: #5f574f;
  font-size: 12px;
  text-decoration: none;
  transition: color 180ms ease;
}

body.tgn-page .tgn-footer-contact a:hover,
body.tgn-page .tgn-footer-contact a:focus-visible {
  color: var(--tgn-espresso);
}

body.tgn-page .tgn-footer-contact .tgn-fc-key {
  min-width: 82px;
  color: var(--tgn-olive);
}

body.tgn-page .tgn-footer-legal-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

body.tgn-page .tgn-footer-legal-links a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

body.tgn-page .tgn-footer-legal-links a::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: currentColor;
  transition: transform 220ms ease;
}

body.tgn-page .tgn-footer-legal-links a:hover::after,
body.tgn-page .tgn-footer-legal-links a:focus-visible::after {
  transform: scaleX(1);
}

@media (max-width: 640px) {
  body.tgn-page .tgn-footer-legal-links {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ---------------------------------------------------------------------------
   LEGAL PAGE VARIANT (.tgn-legal-page)

   Two things differ from the homepage and both are structural, not cosmetic:

   1. The header is built to sit over the dark hero photo, so it paints itself
      ivory. On the legal pages it sits on the ivory ground instead, which made
      the nav, the label and the logo invisible. It is repainted espresso here.

   2. The self-hosted Cairo is subset to Arabic only (cairo-*-arabic.woff2), so
      Latin characters have no webfont to fall back to and render in the
      browser's default sans. These documents are English, so their body text
      uses Manrope — already part of this design system as its Latin face —
      rather than pulling in a new family.
   --------------------------------------------------------------------------- */

body.tgn-legal-page .tgn-header {
  position: relative;
  color: var(--tgn-espresso);
  border-bottom: 1px solid var(--tgn-line);
  background: var(--tgn-ivory);
}

body.tgn-legal-page .tgn-brand-mark img {
  /* Undo the white-out filter the hero header applies to the dark logo art. */
  filter: none;
}

body.tgn-legal-page .tgn-store-link {
  border-color: rgba(84, 57, 15, 0.35);
  background: rgba(194, 173, 157, 0.16);
  box-shadow: none;
  color: var(--tgn-espresso);
}

body.tgn-legal-page .tgn-store-link:hover,
body.tgn-legal-page .tgn-store-link:focus-visible {
  background: var(--tgn-espresso);
  color: var(--tgn-ivory);
}

/* The header is in normal flow here, so the document must not be pushed under
   an absolutely-positioned bar the way the hero is. */
body.tgn-legal-page .tgn-legal-head {
  padding-top: clamp(48px, 6vw, 84px);
}

body.tgn-legal-page .tgn-legal-ltr,
body.tgn-legal-page .tgn-legal-head h1,
body.tgn-legal-page .tgn-legal-section h2,
body.tgn-legal-page .tgn-legal-intro p,
body.tgn-legal-page .tgn-legal-section p,
body.tgn-legal-page .tgn-legal-meta,
body.tgn-legal-page .tgn-legal-body .elementor-heading-title,
body.tgn-legal-page .tgn-legal-body .elementor-widget-text-editor {
  font-family: 'Manrope', sans-serif;
}

body.tgn-legal-page .tgn-legal-head h1 {
  letter-spacing: -0.02em;
}

@media (max-width: 980px) {
  body.tgn-legal-page .tgn-legal-head {
    padding-top: clamp(40px, 6vw, 64px);
  }
}

/* Elementor renders headings as <hN class="elementor-heading-title">, and the
   global typography reset above targets them via
   `.elementor-widget-heading .elementor-heading-title` — specificity (0,3,0),
   which outranks the (0,2,2) legal rules and was pulling the legal headings
   back to Cairo and to inherited ink. These restate them at (0,3,1) so the
   legal pages keep Manrope and the espresso heading colour. */
body.tgn-legal-page .tgn-legal-head .elementor-heading-title,
body.tgn-legal-page .tgn-legal-section .elementor-heading-title {
  font-family: 'Manrope', sans-serif;
  color: var(--tgn-espresso);
}

body.tgn-legal-page .tgn-legal-body .elementor-widget-text-editor,
body.tgn-legal-page .tgn-legal-body .elementor-widget-text-editor p {
  font-family: 'Manrope', sans-serif;
}