/* ==========================================================================
   Tunji Idowu - global foundation
   Tokens . base . accessibility . motion . global shell

   Resolved from the approved design export. The prototype carried 35 distinct
   hex values and no custom properties; those are consolidated here into the
   named roles below. Do not reintroduce raw hex values in page CSS - every
   colour must come from a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {

  /* -- Fields: dark grounds -------------------------------------------- */
  --ti-field-deepest: var(--ti2-navy);  /* Rooms ground, mobile menu overlay        */
  --ti-field-deep: var(--ti2-navy);  /* footer ground                            */
  --ti-field-warm: var(--ti2-navy);  /* hero and Legacy ground                   */
  --ti-field-mid: var(--ti2-plate);  /* hero radial, midpoint                    */
  --ti-field-core: var(--ti2-navy);  /* hero radial, outer                       */
  --ti-field-umber: var(--ti2-plate);  /* Rooms scrim, third state                 */
  --ti-field-ember: var(--ti2-plate);  /* Currently radial, midpoint               */

  /* -- Papers: light grounds ------------------------------------------- */
  --ti-paper: var(--ti2-ivory);      /* primary page ground                      */
  --ti-paper-alt: var(--ti2-dune);      /* alternating band ground                  */

  /* -- Ink and text on light ------------------------------------------- */
  --ti-ink: var(--ti2-navy);     /* headings                                 */
  --ti-body: var(--ti2-slate-2);     /* running text                             */
  --ti-quiet-body: var(--ti2-slate-2);     /* secondary text                           */
  --ti-register: var(--ti2-slate-2);     /* uppercase register labels                */
  --ti-body-strong: var(--ti2-navy);    /* Story lesson panel                       */
  --ti-nav-ink: var(--ti2-slate-2);    /* header nav links at rest, on light       */

  /* -- Text on dark ----------------------------------------------------- */
  --ti-light: var(--ti2-ivory);    /* headings on dark                         */
  --ti-light-soft: var(--ti2-ivory);    /* wordmark on dark                         */
  --ti-light-body: var(--ti2-dune);    /* running text on dark                     */
  --ti-light-mute: var(--ti2-dune);    /* secondary text on dark                   */
  --ti-light-quiet: var(--ti2-dune);    /* register labels on dark                  */
  --ti-light-warm: var(--ti2-gold);    /* italic accent line in the footer         */
  --ti-light-lede: var(--ti2-dune);    /* hero lede, Rooms opening line            */
  --ti-light-band: var(--ti2-dune);    /* Legacy band body                         */
  --ti-light-room: var(--ti2-dune);    /* Rooms supporting lines                   */
  --ti-light-belief: var(--ti2-ivory);  /* belief statements, second emphasis  */
  --ti-light-belief-quiet: var(--ti2-dune);  /* belief statements, third emphasis   */

  /* -- Accents ---------------------------------------------------------- */
  --ti-tan: var(--ti2-gold);        /* primary accent, CTA on dark              */
  --ti-tan-dim: var(--ti2-dune);        /* nav links at rest on dark                */
  --ti-sienna: var(--ti2-gold);        /* active underline, focus, links           */
  --ti-navy: var(--ti2-navy);        /* editorial link colour                    */

  /* --ti-error was here, at #9E3B22: the last literal colour in this file and
     the last value in it that was not the approved system's. Connect was its
     only consumer, and Connect now takes the export's own #8A2B2B from the
     token layer. Deleted rather than remapped: a form's error colour has to be
     exactly the approved one, and an alias pointing at a near miss is worse
     than no alias. */

  /* -- Rules ------------------------------------------------------------ */
  --ti-rule: rgba(var(--ti2-navy-rgb), 0.14);     /* editorial dividers on paper              */
  --ti-rule-soft: rgba(var(--ti2-navy-rgb), 0.10);     /* lighter dividers                         */
  --ti-rule-header: rgba(var(--ti2-navy-rgb), 0.14);    /* pale rule: Story header, Connect close    */
  --ti-field-line: rgba(var(--ti2-navy-rgb), 0.22);     /* form underlines, controls on light       */
  --ti-rule-dark: rgba(var(--ti2-gold-rgb), 0.22);
  --ti-rule-dark-soft: rgba(var(--ti2-gold-rgb), 0.18);
  --ti-rule-dark-faint: rgba(var(--ti2-gold-rgb), 0.20);
  --ti-line-dark: rgba(var(--ti2-gold-rgb), 0.55);
  --ti-line-paper: rgba(var(--ti2-ivory-rgb), 0.42);
  --ti-wash-paper: rgba(var(--ti2-ivory-rgb), 0.08);

  /* -- Channels ---------------------------------------------------------
     The same colours again, as space-separated RGB triples. The design
     layers scrims and washes over photography, which needs the colour at
     an alpha. Composing those from a channel token keeps the overlays tied
     to the palette instead of reintroducing loose hex values in page CSS.
     -------------------------------------------------------------------- */
  --ti-rgb-deepest: 13 27 42;    /* --ti-field-deepest */
  --ti-rgb-warm: 13 27 42;    /* --ti-field-warm    */
  --ti-rgb-umber: 19 38 57;    /* --ti-field-umber   */
  --ti-rgb-sienna: 200 161 83;    /* --ti-sienna        */
  --ti-rgb-navy: 13 27 42;    /* --ti-navy          */
  --ti-rgb-tan: 200 161 83;  /* --ti-tan           */
  --ti-rgb-paper: 244 242 237;  /* --ti-paper         */

  /* -- Type ------------------------------------------------------------- */
  --ti-serif: var(--ti2-serif);
  --ti-sans: var(--ti2-sans);

  /* -- Geometry --------------------------------------------------------- */
  --ti-pad-x:    clamp(20px, 5vw, 76px);   /* shared section inset          */
  --ti-sec-y:    clamp(76px, 11vh, 140px);
  --ti-sec-y-md: clamp(66px, 10vh, 120px);
  --ti-sec-y-sm: clamp(52px, 8vh, 96px);
  --ti-measure:      40ch;
  --ti-measure-wide: 42ch;
  /* --ti-form-w was here. It capped the old Connect form at 660px; the
     approved card sizes from its grid column instead, and nothing else read
     it. */
  --ti-bp-nav: 860px;
  --ti-header-h: 89px;          /* resting band height; Ideas' sticky uses it */           /* mirrored in functions.php                */

  /* -- Motion ----------------------------------------------------------- */
  --ti-ease-rise: cubic-bezier(.22, .61, .36, 1);
  --ti-ease-fade: cubic-bezier(.4, 0, .2, 1);
  --ti-ease-mask: cubic-bezier(.19, .72, .24, 1);
  --ti-dur-rise: 880ms;
  --ti-dur-fade: 950ms;
  --ti-dur-mask: 1300ms;
  --ti-stagger: 110ms;
}


/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ti-paper);
  color: var(--ti-ink);
  font-family: var(--ti-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/*
 * Astra adds .ast-plain-container to <body> and sets its background at class
 * specificity, which outranks a bare `body` selector. The theme's own body
 * class reclaims the page ground without referencing Astra's internals.
 */
body.ti { background: var(--ti-paper); }

h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--ti-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ti-ink);
  text-wrap: balance;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * Production photography. The approved design expressed every photograph as a
 * background-image with a background-position; here the element is real and
 * the approved origin arrives as --ti-crop on the element itself, so one
 * stored original serves every aspect ratio the design asks for.
 */
.ti-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ti-crop, 50% 50%);
}

a {
  color: var(--ti-navy);
  text-decoration: none;
}

a:hover { color: var(--ti-sienna); }

button { font: inherit; }

/*
 * Astra gives every button a 4px radius and a soft drop shadow. The approved
 * design's controls are flat and have neither. Reset inside our own shell so
 * no component has to remember to — on a dark ground the shadow is invisible,
 * but on paper it draws a box around anything built from a button.
 */
.ti-shell button {
  border-radius: 0;
  box-shadow: none;
}

::selection {
  background: var(--ti-tan);
  color: var(--ti-field-deepest);
}


/* --------------------------------------------------------------------------
   3. ACCESSIBILITY
   -------------------------------------------------------------------------- */

.ti-skip {
  position: absolute;
  left: 12px;
  top: -100%;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ti-field-deepest);
  color: var(--ti-paper);
  font-family: var(--ti-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}

.ti-skip:focus {
  top: 12px;
  color: var(--ti-paper);
}

:focus-visible {
  outline: 2px solid var(--ti-sienna);
  outline-offset: 3px;
}

/* Sienna has too little contrast against the dark grounds to read as a focus
   ring, so those surfaces take the tan accent instead. */
.ti-header--dark :focus-visible,
.ti-menu :focus-visible,
.ti-footer :focus-visible {
  outline-color: var(--ti-tan);
}

.ti-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   4. MOTION
   Three named behaviours, resolved from the approved prototype:
   rise (880ms), fade (950ms), mask (1300ms clip-path + 1900ms scale).
   -------------------------------------------------------------------------- */

.ti-js [data-ti-rise] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--ti-dur-rise) var(--ti-ease-rise),
    transform var(--ti-dur-rise) var(--ti-ease-rise);
}

.ti-js [data-ti-rise].is-in {
  opacity: 1;
  transform: none;
}

.ti-js [data-ti-fade] {
  opacity: 0;
  transition: opacity var(--ti-dur-fade) var(--ti-ease-fade);
}

.ti-js [data-ti-fade].is-in { opacity: 1; }

.ti-js [data-ti-mask] {
  clip-path: inset(6% 6% 6% 6%);
  transform: scale(1.06);
  transition:
    clip-path var(--ti-dur-mask) var(--ti-ease-mask),
    transform 1900ms var(--ti-ease-mask);
}

.ti-js [data-ti-mask].is-in {
  clip-path: inset(0% 0% 0% 0%);
  transform: none;
}

/*
 * Reduced motion shows everything at once. So does print: a reveal that has
 * not fired yet must never carry its hidden state onto paper.
 */
@media (prefers-reduced-motion: reduce), print {
  html { scroll-behavior: auto; }

  .ti-js [data-ti-rise],
  .ti-js [data-ti-fade],
  .ti-js [data-ti-mask] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   5. SHELL
   -------------------------------------------------------------------------- */

.ti-shell {
  width: 100%;
}

.ti-main {
  display: block;
}

/* --------------------------------------------------------------------------
   6. HEADER
   The approved shared Site Header. One treatment on every route: the band is
   transparent over the top of the page and resolves to navy once the page has
   moved, so the header never competes with a hero and never disappears into a
   light section. Geometry condenses with it.
   -------------------------------------------------------------------------- */

.ti-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(var(--ti2-navy-rgb), 0.92);
  border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.3);
  backdrop-filter: saturate(140%) blur(10px);
  transition: background 260ms ease, border-color 260ms ease, backdrop-filter 260ms ease;
}

/* Routes that open on a dark hero let it run under the band, which stays
   transparent until the page moves. Every other route carries the band solid
   from the top, because dune-coloured type on an ivory section is unreadable. */
.ti-header--dark:not(.is-condensed) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.ti-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px clamp(20px, 4.4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  transition: padding 260ms cubic-bezier(.22, .61, .36, 1);
}

.ti-header.is-condensed .ti-header__inner {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* The spacer holds the page down by the band's resting height, so no route has
   to know the header is fixed. */
.ti-header-spacer {
  height: var(--ti-header-h);
}

/* Routes that open on a dark hero let the hero run under the band. */
.ti-header--dark ~ .ti-header-spacer {
  height: 0;
}

.ti-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  color: var(--ti2-dune);
  transition: color 200ms ease;
}

.ti-brand:hover,
.ti-brand:focus-visible { color: var(--ti2-gold); }

/* The TI monogram. Same heights as the square mark it replaced (40px, 32px
   condensed), so the band keeps its geometry; the width follows the mark. */
.ti-brand__mark {
  display: block;
  flex: 0 0 auto;
  height: 40px;
  transition: height 260ms ease;
}

.ti-header.is-condensed .ti-brand__mark {
  height: 32px;
}

.ti-monogram {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}

.ti-monogram path { stroke-linejoin: miter; }
.ti-monogram__t { fill: var(--ti2-dune); stroke: var(--ti2-dune); }
.ti-monogram__i { fill: var(--ti2-gold); stroke: var(--ti2-gold); }

.ti-brand__word {
  font-family: var(--ti2-serif);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  transition: font-size 260ms ease;
}

.ti-header.is-condensed .ti-brand__word { font-size: 17px; }

.ti-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.1vw, 34px);
  justify-content: flex-end;
  min-width: 0;
}

/* The current-route treatment is a gold rule that grows from nothing. It is
   drawn with a background image rather than a border so it can animate. */
.ti-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ti2-sans);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ti2-dune);
  white-space: nowrap;
  background-image: linear-gradient(var(--ti2-gold), var(--ti2-gold));
  background-repeat: no-repeat;
  background-position: 0 calc(50% + 11px);
  background-size: 0 1px;
  transition: background-size 320ms cubic-bezier(.22, .61, .36, 1), color 200ms ease;
}

.ti-nav__list a:hover,
.ti-nav__list a:focus-visible {
  color: var(--ti2-ivory);
  background-size: 100% 1px;
}

.ti-nav__list .current-menu-item > a,
.ti-nav__list .current_page_item > a,
.ti-nav__list [aria-current="page"] {
  color: var(--ti2-ivory);
  font-weight: 600;
  background-size: 100% 1px;
}

/* Connect is the only filled control in the shell. */
.ti-nav__list .ti-cta > a {
  min-height: 44px;
  padding: 0 22px;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--ti2-navy);
  background-image: none;
  background-color: var(--ti2-gold);
  transition: background-color 200ms ease, padding 260ms ease;
}

.ti-nav__list .ti-cta > a:hover,
.ti-nav__list .ti-cta > a:focus-visible {
  background-color: var(--ti2-ivory);
  color: var(--ti2-navy);
}

.ti-header.is-condensed .ti-nav__list .ti-cta > a { padding: 0 18px; }

/* --------------------------------------------------------------------------
   7. MENU TRIGGER AND OVERLAY
   Progressive enhancement: without the ti-js class on <html> the full
   navigation stays visible at every width and nothing is hidden.
   -------------------------------------------------------------------------- */

.ti-menu-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ti2-sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ti2-dune);
}

.ti-menu-toggle:hover,
.ti-menu-toggle:focus-visible { color: var(--ti2-gold); }

.ti-menu-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.ti-menu-toggle__bars span {
  display: block;
  height: 1px;
  background: var(--ti2-gold);
}

.ti-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--ti2-navy);
  display: flex;
  flex-direction: column;
}

/* Hidden only once script is running; otherwise it is simply part of the page. */
.ti-js .ti-menu {
  display: none;
}

.ti-js .ti-menu.is-open {
  display: flex;
  animation: ti-menu-fade 220ms ease both;
}

@keyframes ti-menu-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.ti-menu-open { overflow: hidden; }

.ti-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 6vw, 40px);
  border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.3);
}

.ti-menu__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ti2-dune);
}

.ti-menu__mark {
  display: block;
  flex: 0 0 auto;
  height: 38px;
}

.ti-menu__word {
  font-family: var(--ti2-serif);
  font-size: 19px;
}

.ti-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ti2-sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ti2-dune);
}

.ti-menu__close:hover,
.ti-menu__close:focus-visible { color: var(--ti2-gold); }

/* Astra's inline button:hover / button:focus rules paint its blue background
   and outrank the plain class rules above; the menu buttons stay on the navy
   ground. nav.js moves focus to Close on open, so this showed on every phone. */
.ti-menu-toggle:hover,
.ti-menu-toggle:focus,
.ti-menu__close:hover,
.ti-menu__close:focus { background: none; }

.ti-menu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(10px, 3vw, 26px) clamp(20px, 6vw, 40px);
}

.ti-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ti-menu__list li {
  border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.14);
}

.ti-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  font-family: var(--ti2-serif);
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.1;
  color: var(--ti2-dune);
}

.ti-menu__list a:hover,
.ti-menu__list a:focus-visible { color: var(--ti2-gold); }

.ti-menu__list .current-menu-item > a,
.ti-menu__list .current_page_item > a,
.ti-menu__list [aria-current="page"] { color: var(--ti2-gold); }

.ti-menu__list .ti-cta > a { color: var(--ti2-gold); }

.ti-menu__foot {
  padding: clamp(16px, 4vw, 26px) clamp(20px, 6vw, 40px) clamp(22px, 5vw, 34px);
  border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.3);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ti-menu__themes {
  margin: 0;
  font-family: var(--ti2-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(var(--ti2-dune-rgb), 0.62);
}

@media (max-width: 859.98px) {
  .ti-js .ti-nav { display: none; }
  .ti-js .ti-menu-toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   8. FOOTER
   The approved ending: a name, three words, and the one legal link a reader
   needs. Nothing in any approved export justifies more than this.
   -------------------------------------------------------------------------- */

.ti-footer {
  background: var(--ti2-navy);
  border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.32);
  color: var(--ti2-dune);
}

/* The footer carries the site's pages, identical on every route: the brand on
   one side and the primary menu on the other, then a base line with the year,
   the Privacy Notice and a way back to the top. */
.ti-footer__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 64px) clamp(18px, 2.2vw, 28px);
}

.ti-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3.2vw, 44px);
  padding-bottom: clamp(26px, 3.2vw, 42px);
  border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.14);
}

.ti-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The TI monogram, sized to sit against the two-line name and themes. */
.ti-footer__mark {
  display: block;
  flex: none;
  height: 44px;
}

.ti-footer__name {
  margin: 0;
  font-family: var(--ti2-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  color: var(--ti2-ivory);
}

.ti-footer__themes {
  margin: 6px 0 0;
  font-family: var(--ti2-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ti2-dune-rgb), 0.7);
}

.ti-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
}

.ti-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ti2-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ti2-dune-rgb), 0.84);
  text-decoration: none;
  background: linear-gradient(var(--ti2-gold), var(--ti2-gold)) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: color 200ms ease, background-size 260ms ease;
}

.ti-footer__list a:hover,
.ti-footer__list a:focus-visible {
  color: var(--ti2-ivory);
  background-size: 100% 1px;
}

.ti-footer__list .current-menu-item > a,
.ti-footer__list .current_page_item > a,
.ti-footer__list [aria-current="page"] { color: var(--ti2-gold); }

.ti-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: clamp(10px, 1.4vw, 18px);
}

.ti-footer__copy {
  margin: 0;
  font-family: var(--ti2-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(var(--ti2-dune-rgb), 0.6);
}

.ti-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

.ti-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--ti2-sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ti2-dune-rgb), 0.66);
  text-decoration: none;
  transition: color 200ms ease;
}

.ti-footer__legal:hover,
.ti-footer__legal:focus-visible { color: var(--ti2-gold); }

@media (min-width: 900px) {
  .ti-footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .ti-footer__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 clamp(18px, 2.2vw, 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ti-footer__legal,
  .ti-footer__list a { transition: none; }
}

/* --------------------------------------------------------------------------
   Privacy Notice
   A legal page set to the site's editorial standard: masthead, a navy "at a
   glance" summary, a sticky contents rail on wide screens and a reading
   column. The words live in the page itself, so they can be edited without
   touching the theme.
   -------------------------------------------------------------------------- */

.ti-privacy {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 64px) clamp(56px, 7vw, 110px);
  color: rgba(var(--ti2-navy-rgb), 0.86);
  font-family: var(--ti2-sans);
}

.ti-privacy__head {
  max-width: 52rem;
  padding-bottom: clamp(26px, 3.2vw, 44px);
  border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.16);
}

.ti-privacy__eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ti2-gold-ink);
}

.ti-privacy__title {
  margin: 0;
  font-family: var(--ti2-serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ti2-navy);
}

.ti-privacy__updated {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ti2-slate);
}

.ti-privacy__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(30px, 4vw, 56px);
}

.ti-privacy__toc-label {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ti2-slate);
}

.ti-privacy__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.16);
  counter-reset: ti-privacy-toc;
}

.ti-privacy__toc li { border-bottom: 1px solid rgba(var(--ti2-navy-rgb), 0.1); }

.ti-privacy__toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ti2-navy);
  text-decoration: none;
  transition: color 200ms ease;
}

.ti-privacy__toc a::before {
  counter-increment: ti-privacy-toc;
  content: counter(ti-privacy-toc, decimal-leading-zero);
  flex: none;
  font-family: var(--ti2-serif);
  font-size: 12px;
  color: var(--ti2-gold-ink);
}

.ti-privacy__toc a:hover,
.ti-privacy__toc a:focus-visible { color: var(--ti2-gold-ink); }

.ti-privacy__body {
  min-width: 0;
  max-width: 44rem;
  font-size: clamp(16.5px, 1.2vw, 18px);
  line-height: 1.8;
}

.ti-privacy__body h2 {
  margin: clamp(38px, 4.4vw, 64px) 0 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--ti2-navy-rgb), 0.12);
  font-family: var(--ti2-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.15;
  color: var(--ti2-navy);
  scroll-margin-top: 110px;
}

.ti-privacy__body h3 {
  margin: 28px 0 8px;
  font-family: var(--ti2-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ti2-navy);
}

.ti-privacy__body p { margin: 0 0 16px; }

.ti-privacy__body ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.ti-privacy__body li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 24px;
}

.ti-privacy__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 12px;
  height: 1px;
  background: var(--ti2-gold);
}

.ti-privacy__body a {
  color: var(--ti2-navy);
  text-decoration: underline;
  text-decoration-color: var(--ti2-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ti-privacy__body a:hover,
.ti-privacy__body a:focus-visible { color: var(--ti2-gold-ink); }

.ti-privacy__body strong { font-weight: 600; color: var(--ti2-navy); }

.ti-privacy__glance {
  margin: 0 0 clamp(26px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px);
  background: var(--ti2-navy);
  border-top: 2px solid var(--ti2-gold);
  color: var(--ti2-ivory);
}

.ti-privacy__body .ti-privacy__glance h2 {
  margin: 0 0 14px;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ti2-ivory);
}

.ti-privacy__glance ul { margin: 0; }
.ti-privacy__glance li { color: var(--ti2-ivory); }
.ti-privacy__glance li:last-child { margin-bottom: 0; }

@media (min-width: 1100px) {
  .ti-privacy__layout {
    grid-template-columns: minmax(0, 17rem) minmax(0, 44rem);
    justify-content: start;
  }

  .ti-privacy__toc {
    position: sticky;
    top: calc(var(--ti-header-h, 69px) + 32px);
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ti-privacy__toc a { transition: none; }
}


/* --------------------------------------------------------------------------
   9. EDITORIAL PRIMITIVES
   Buttons, links and register labels, shared by every route.
   -------------------------------------------------------------------------- */

.ti-eyebrow {
  color: var(--ti-register);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ti-btn {
  display: inline-block;
  font-family: var(--ti-sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 15px 28px;
  transition:
    background   200ms var(--ti-ease-fade),
    color        200ms var(--ti-ease-fade),
    border-color 200ms var(--ti-ease-fade);
}

.ti-btn--paper {
  background: var(--ti-paper);
  color: var(--ti-field-deepest);
}

.ti-btn--paper:hover {
  background: var(--ti-tan);
  color: var(--ti-field-deepest);
}

.ti-btn--ghost {
  border: 1px solid var(--ti-line-paper);
  color: var(--ti-paper);
}

.ti-btn--ghost:hover {
  border-color: var(--ti-paper);
  background: var(--ti-wash-paper);
  color: var(--ti-paper);
}

.ti-btn--ink {
  background: var(--ti-ink);
  color: var(--ti-paper);
  padding: 16px 30px;
}

.ti-btn--ink:hover {
  background: var(--ti-sienna);
  color: var(--ti-paper);
}

.ti-textlink {
  display: inline-block;
  margin-top: 22px;
  color: var(--ti-sienna);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  border-bottom: 1px solid rgb(var(--ti-rgb-sienna) / .4);
  padding-bottom: 3px;
  transition: color 200ms var(--ti-ease-fade), border-color 200ms var(--ti-ease-fade);
}

.ti-textlink:hover {
  color: var(--ti-sienna);
  border-bottom-color: var(--ti-sienna);
}

.ti-textlink--dark {
  color: var(--ti-tan);
  border-bottom-color: rgb(var(--ti-rgb-tan) / .42);
}

.ti-textlink--dark:hover {
  color: var(--ti-paper);
  border-bottom-color: var(--ti-paper);
}

.ti-textlink--navy {
  color: var(--ti-navy);
  border-bottom-color: rgb(var(--ti-rgb-navy) / .4);
}

.ti-textlink--navy:hover {
  color: var(--ti-navy);
  border-bottom-color: var(--ti-navy);
}

/* The arrow is decoration, not part of the link's accessible name. */
.ti-link__arrow { margin-left: .3em; }

/* The dark grounds take the tan focus ring, as the header and menu do. */
.ti-hero :focus-visible,
.ti-rooms :focus-visible,
.ti-legacy :focus-visible,
.ti-beliefs :focus-visible {
  outline-color: var(--ti-tan);
}


/* --------------------------------------------------------------------------
   10. ROUTE SHELL
   Temporary. Replaced per route from Phase 3 onward.
   -------------------------------------------------------------------------- */

.ti-page {
  padding: var(--ti-sec-y) var(--ti-pad-x);
  min-height: 42vh;
}

.ti-page__title {
  font-family: var(--ti-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.14;
  color: var(--ti-ink);
  max-width: var(--ti-measure-wide);
}

.ti-page__body {
  margin-top: 24px;
  max-width: var(--ti-measure);
  color: var(--ti-body);
}

.ti-page__body p { margin-bottom: 16px; }

/* Below the nav breakpoint the trigger is taller than a nav link, so the band
   is too. Declared rather than assumed, because the hero and the Ideas sticky
   both position against this value. */
@media (max-width: 859.98px) {
  :root { --ti-header-h: 93px; }
}


/* --------------------------------------------------------------------------
   Responsive review, 13 September 2026
   -------------------------------------------------------------------------- */

/* The footer shares the header's edges on every route (it sat 48px inside
   them on wide screens). */
.ti-footer__inner {
  max-width: 1440px;
  padding-left: clamp(20px, 4.4vw, 56px);
  padding-right: clamp(20px, 4.4vw, 56px);
}

/* Footer links on phones and tablets: two columns sized to their words, so
   "Ideas & Engagements" stays on one line. */
@media (max-width: 899.98px) {
  .ti-footer__list {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: clamp(28px, 9vw, 64px);
  }
}

/* Privacy: stacked, the contents list keeps the text's measure; beside the
   text, the heading rule ends where the text ends. */
.ti-privacy__toc { max-width: 44rem; }

@media (min-width: 1100px) {
  .ti-privacy__toc { max-width: none; }
  .ti-privacy__head { max-width: calc(17rem + 44rem + clamp(28px, 4vw, 72px)); }
}


/* --------------------------------------------------------------------------
   Client update 01, 17 September 2026
   -------------------------------------------------------------------------- */

/* The slogan rides with the name in the brand lockup, at a register size and
   in the brand gold, so it is present at the top of every route without a new
   band. The two lines together stay shorter than the 40px monogram (32px
   condensed), so the header keeps the height --ti-header-h declares. */
.ti-brand__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ti-brand__slogan {
  font-family: var(--ti2-sans);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ti2-gold);
  white-space: nowrap;
  transition: font-size 260ms ease;
}

.ti-header.is-condensed .ti-brand__text { gap: 4px; }
.ti-header.is-condensed .ti-brand__slogan { font-size: 8.5px; }

@media (max-width: 419.98px) {
  .ti-brand { gap: 12px; }
  .ti-brand__slogan { font-size: 8.5px; letter-spacing: 0.14em; }
}

/* The footer's public profiles: one quiet line of names beneath the brand, in
   the footer menu's own register. */
.ti-footer__identity {
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  min-width: 0;
}

.ti-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(18px, 2vw, 28px);
}

.ti-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ti2-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ti2-dune-rgb), 0.7);
  text-decoration: none;
  background: linear-gradient(var(--ti2-gold), var(--ti2-gold)) 0 calc(100% - 11px) / 0 1px no-repeat;
  transition: color 200ms ease, background-size 260ms ease;
}

.ti-footer__social a:hover,
.ti-footer__social a:focus-visible {
  color: var(--ti2-ivory);
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .ti-brand__slogan,
  .ti-footer__social a { transition: none; }
}
/* --------------------------------------------------------------------------
   FOOTER SOCIAL MARKS
   Client update, 25 September 2026: each named channel carries its platform's
   mark so the row is recognisable at a glance. The mark is set at the size of
   the words and in the footer's gold, a step quieter than the name until the
   link is hovered or focused, so the line still reads as text rather than a
   strip of logos. The name remains the link's accessible name; the mark is
   decorative and hidden from assistive technology.
   -------------------------------------------------------------------------- */
.ti-footer__social a { gap: 0.52em; }

.ti-footer__social .ti-social-icon {
  flex: none;
  width: 1.26em;
  height: 1.26em;
  translate: 0 -0.04em;
  color: var(--ti2-gold);
  transition: color 200ms ease, opacity 200ms ease;
}

.ti-footer__social a:hover .ti-social-icon,
.ti-footer__social a:focus-visible .ti-social-icon { color: var(--ti2-gold-lift, var(--ti2-gold)); opacity: 0.86; }

@media (prefers-reduced-motion: reduce) {
  .ti-footer__social .ti-social-icon { transition: none; }
}