/*
  TWP V2 PORTAL — THE CHROME: the V2 site's navigation, its menu, the accessibility trigger's slot, and the footer.

  SOURCE OF TRUTH: the approved Next.js site, release b759a50 — src/components/v2/sections/nav/* (the Eldora UI header-01
  block, owner-locked 2026-10-05) and src/components/v2/sections/footer* (Efferd's footer section, its entrance and
  reuno-ui's TextRoll). Every value here is that render's computed style, measured on the production build at 1440,
  1024, 768 and 390 px in its top, scrolled and menu-open states (rig/qa/nav-parity.mjs re-measures both sites and
  compares them). Tailwind's units are kept: rem where the block says rem (the accessibility panel's text size scales
  the bar here exactly as it does on the Next site), px where it says px.

  The page's own stylesheets reach these elements too (Pat's Additional CSS forces Inter/Poppins with !important on
  a, p, h1–h4 and button; Avada styles lists, buttons and images globally), so the chrome starts from the reset
  Tailwind's preflight gives the Next site, and answers Pat's !important font rules with its own.
*/

/* ── Faces ─────────────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "TWP Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "TWP Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* next/font's metric-matched fallback, so the bar keeps its size while Inter loads */
@font-face {
  font-family: "TWP Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}
@font-face {
  font-family: "TWP JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWP Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

body.twp-v2-portal {
  --twp-chrome-sans: "TWP Inter", "TWP Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --twp-chrome-mono: "TWP JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --twp-pill: #1e97cc;      /* --v2-pill: the nav's CTA pill */
  --twp-pill-ink: #0b1120;  /* --v2-pill-ink */
  --twp-nav-glass: rgb(11 17 32 / 0.75); /* bg-background/75 */
  --twp-nav-accent: rgb(23 35 66 / 0.6); /* bg-accent/60: the current page's pill */
  --twp-nav-border: rgb(255 255 255 / 0.08); /* border-border */
  --twp-nav-fg: rgb(230 230 230); /* the bar's foreground (the toggle's ink) */
  --twp-tw-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Tailwind's default transition curve */
  /* the drawer's spring (navbar.tsx: damping 15, stiffness 200), sampled into 61 points over its 0.85 s settle */
  --twp-spring: linear(0, 0.0186, 0.0688, 0.1429, 0.2335, 0.3344, 0.4398, 0.5452, 0.6468, 0.7417, 0.8277, 0.9034, 0.9682, 1.0217, 1.0642, 1.0963, 1.1188, 1.1328, 1.1393, 1.1396, 1.1348, 1.1261, 1.1145, 1.101, 1.0865, 1.0717, 1.0571, 1.0432, 1.0305, 1.0191, 1.0092, 1.0008, 0.994, 0.9888, 0.9849, 0.9823, 0.9809, 0.9804, 0.9807, 0.9816, 0.983, 0.9848, 0.9868, 0.9888, 0.9909, 0.9929, 0.9948, 0.9965, 0.998, 0.9993, 1.0004, 1.0012, 1.0018, 1.0023, 1.0026, 1.0027, 1.0027, 1.0027, 1.0025, 1.0023, 1.002);
}

/* ── The reset the Next site's preflight gives these elements ─────────────────────────────── */

body.twp-v2-portal :where(.twp-nav-room, .twp-foot-room, .twp-skip),
body.twp-v2-portal :where(.twp-nav-room, .twp-foot-room) :where(*, ::before, ::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
  background: none;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  text-decoration: none;
  list-style: none;
  float: none;
  min-width: 0;
  min-height: 0;
}
body.twp-v2-portal :where(.twp-nav-room, .twp-foot-room) :where(a, p, h2, h3, button, span, li, nav, ul, time, code) {
  font-family: inherit !important; /* Pat's Additional CSS: a, p, h2–h4, button { font-family: Inter !important } */
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}
body.twp-v2-portal :where(.twp-nav-room, .twp-foot-room) :where(img, svg) {
  display: block;
  vertical-align: middle;
}
body.twp-v2-portal :where(.twp-nav-room, .twp-foot-room) :where(img) {
  max-width: 100%;
  height: auto;
}
body.twp-v2-portal :where(.twp-nav-room, .twp-foot-room) :where(button) {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.twp-v2-portal :where(.twp-nav-room, .twp-foot-room) :where(a) {
  cursor: pointer;
}
body.twp-v2-portal .twp-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* ── The skip link (the Next layout's: sr-only, a cyan pill top-left on focus) ────────────────── */

body.twp-v2-portal a.twp-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  font-family: var(--twp-chrome-sans) !important;
}
body.twp-v2-portal a.twp-skip:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10000;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  background: #22d3ee; /* cyan-400 */
  color: #0b1120 !important;
  font-size: 0.875rem;
  font-weight: 600;
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

/* ── THE NAVIGATION (navbar.tsx): a fixed landmark; the bar floats 16 → 24 px down ────────────── */

body.twp-v2-portal .twp-nav-room {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  font-family: var(--twp-chrome-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--twp-nav-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
/* staff (WordPress gives its toolbar to shop managers and administrators, never to customers) see WordPress's admin
   toolbar: the bar floats under it, as it floats under the window's top, at every width. WordPress sets the height
   (32 px, 46 px under 783 px) and, since 7.x, keeps the toolbar fixed on phones too (the rig, 7.1.3, measured: under
   601 px the toolbar covered the bar's top 30 px). */
body.twp-v2-portal.admin-bar .twp-nav-room {
  top: var(--wp-admin--admin-bar--height, 32px);
}
/* `relative z-50 mx-4 flex justify-center transition-all duration-300 md:mx-0` + `top-4 mx-0` | `top-6` */
body.twp-v2-portal .twp-nav {
  position: relative;
  z-index: 50;
  display: flex;
  justify-content: center;
  top: 1rem;
  margin-inline: 0;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: var(--twp-tw-ease);
}
body.twp-v2-portal .twp-nav.is-scrolled {
  top: 1.5rem;
  margin-inline: 1rem;
}
@media (min-width: 48rem) {
  body.twp-v2-portal .twp-nav.is-scrolled {
    margin-inline: 0;
  }
}
/* the motion.div: width 70rem → 880 px over 0.3 s on [0.25, 0.1, 0.25, 1] (CSS's own `ease`); a flex item, so it
   shrinks to the window below 70rem as the block's does */
body.twp-v2-portal .twp-nav-motion {
  width: 70rem;
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body.twp-v2-portal .twp-nav.is-scrolled .twp-nav-motion {
  width: 880px;
}
/* `mx-auto max-w-7xl rounded-2xl transition-all duration-300 xl:px-0` + `px-7 shadow-none` | `border bg-background/75 px-2 backdrop-blur-lg` */
body.twp-v2-portal .twp-nav-shell {
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: 1.75rem;
  border: 0 solid currentColor; /* the preflight's: the scrolled state's hairline colour transitions from it */
  border-radius: 1rem;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: var(--twp-tw-ease);
}
body.twp-v2-portal .twp-nav.is-scrolled .twp-nav-shell {
  padding-inline: 0.5rem;
  border-width: 1px;
  border-color: var(--twp-nav-border);
  background-color: var(--twp-nav-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
@media (min-width: 80rem) {
  body.twp-v2-portal .twp-nav-shell,
  body.twp-v2-portal .twp-nav.is-scrolled .twp-nav-shell {
    padding-inline: 0;
  }
}
/* `flex h-[56px] items-center justify-between p-4` */
body.twp-v2-portal .twp-nav-row {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}
/* the logo: `flex items-center gap-3 rounded-md`, its image `h-9 w-auto md:h-10`, white (`brightness-0 invert`) until scrolled */
body.twp-v2-portal .twp-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.375rem;
  outline-color: var(--twp-pill);
  transition: initial; /* the link has none (only its image's filter has one): Avada's .2s link transition stays out */
}
body.twp-v2-portal .twp-nav-logo-img {
  width: auto;
  color: transparent; /* next/image's own style on the logo */
  height: 2.25rem !important;
  filter: brightness(0) invert(1);
  transition: filter 300ms var(--twp-tw-ease);
}
body.twp-v2-portal .twp-nav.is-scrolled .twp-nav-logo-img {
  filter: none;
}
@media (min-width: 48rem) {
  body.twp-v2-portal .twp-nav-logo-img {
    height: 2.5rem !important;
  }
}
/* the six pages (nav-menu.tsx): `hidden w-full lg:block`; the row `mx-auto flex h-11 w-fit … rounded-full px-2` */
body.twp-v2-portal .twp-nav-menu {
  display: none;
  width: 100%;
}
@media (min-width: 64rem) {
  body.twp-v2-portal .twp-nav-menu {
    display: block;
  }
}
body.twp-v2-portal .twp-nav-menu ul {
  position: relative;
  display: flex;
  width: fit-content;
  height: 2.75rem;
  margin-inline: auto;
  padding-inline: 0.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}
body.twp-v2-portal .twp-nav-menu li {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
/* `relative isolate flex h-8 items-center rounded-full px-3.5 text-sm font-medium tracking-tight whitespace-nowrap
   transition-colors duration-200` + `text-primary` | `text-primary/60 hover:text-primary` */
body.twp-v2-portal .twp-nav-menu a {
  position: relative;
  isolation: isolate;
  display: flex;
  height: 2rem;
  align-items: center;
  padding-inline: 0.875rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.6);
  outline-color: var(--twp-pill);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: var(--twp-tw-ease);
}
body.twp-v2-portal .twp-nav-menu a[aria-current="page"] {
  color: #fff;
}
/* Tailwind's `hover:` applies only where the device can hover (a tap leaves no hover colour behind) */
@media (hover: hover) {
  body.twp-v2-portal .twp-nav-menu a:hover {
    color: #fff;
  }
}
/* the current page's pill: `bg-accent/60 border-border absolute inset-0 -z-10 rounded-full border` */
body.twp-v2-portal .twp-nav-pill {
  position: absolute;
  inset: 0;
  z-index: -10;
  border: 1px solid var(--twp-nav-border);
  border-radius: 9999px;
  background: var(--twp-nav-accent);
}
/* the right end: `flex shrink-0 flex-row items-center gap-1 md:gap-3` */
body.twp-v2-portal .twp-nav-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 48rem) {
  body.twp-v2-portal .twp-nav-actions {
    gap: 0.75rem;
  }
}
body.twp-v2-portal .twp-nav-cta-wrap {
  display: flex;
  align-items: center;
}
/* "Get the robot": `h-8 w-fit rounded-full border border-white/[0.12] bg-v2-pill px-4 text-sm font-normal
   tracking-wide whitespace-nowrap shadow-[…] md:flex` (hidden under 768 px: the menu carries it) */
body.twp-v2-portal .twp-nav-cta {
  display: none;
  width: fit-content;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 9999px;
  background: var(--twp-pill);
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.25), 0 3px 3px -1.5px rgb(16 24 40 / 0.06), 0 1px 1px rgb(16 24 40 / 0.08);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  white-space: nowrap;
  color: var(--twp-pill-ink) !important;
  outline-color: var(--twp-pill);
  transition: initial; /* the bar's CTA has no transition and no hover change; Avada's link transition stays out */
}
@media (min-width: 48rem) {
  body.twp-v2-portal .twp-nav-cta {
    display: flex;
  }
}
/* the accessibility trigger's round slot and the menu toggle, under 1024 px */
body.twp-v2-portal .twp-nav-slot {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
body.twp-v2-portal .twp-nav-toggle {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--twp-nav-border);
  border-radius: 0.375rem;
  color: var(--twp-nav-fg);
  outline-color: var(--twp-pill);
}
body.twp-v2-portal .twp-nav-ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
body.twp-v2-portal .twp-nav-toggle .twp-nav-ico--x,
body.twp-v2-portal .twp-nav-toggle[aria-expanded="true"] .twp-nav-ico--menu {
  display: none;
}
body.twp-v2-portal .twp-nav-toggle[aria-expanded="true"] .twp-nav-ico--x {
  display: block;
}
@media (min-width: 64rem) {
  body.twp-v2-portal .twp-nav-slot,
  body.twp-v2-portal .twp-nav-toggle {
    display: none;
  }
}
/* one keyboard ring for every control of the bar and the menu: the brand pill's colour, 2 px, offset 2 px */
body.twp-v2-portal :is(.twp-nav-logo, .twp-nav-menu a, .twp-nav-cta, .twp-nav-toggle, .twp-nav-close, .twp-nav-acct):focus-visible {
  outline: 2px solid var(--twp-pill);
  outline-offset: 2px;
}

/* ── THE ACCOUNT ENTRY (the same on the Next bar; see includes/chrome.php note 2) ─────────────────
   One 32 px control in the toggle's own material, 12 px left of "Get the robot", from 1024 px: a person, "My Account",
   for everyone. It is positioned OUT of the bar's flex row, so the logo, the six links and the CTA are laid out by
   exactly the Next bar's flex rules (rig/qa/nav-parity.mjs measures them equal); it sits in the space the bar always
   leaves between the last link and the CTA (≥ 68 px at 1024 px scrolled, the tightest state). */
body.twp-v2-portal .twp-nav-cta-wrap {
  position: relative;
}
body.twp-v2-portal .twp-nav-acct {
  display: none;
}
@media (min-width: 64rem) {
  body.twp-v2-portal .twp-nav-acct {
    position: absolute;
    top: 50%;
    inset-inline-end: calc(100% + 0.75rem);
    display: flex;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--twp-nav-border);
    border-radius: 0.375rem;
    color: var(--twp-nav-fg);
    outline-color: var(--twp-pill);
    transition-property: color, background-color, border-color;
    transition-duration: 200ms;
    transition-timing-function: var(--twp-tw-ease);
  }
  @media (hover: hover) {
    body.twp-v2-portal .twp-nav-acct:hover {
      border-color: rgb(255 255 255 / 0.22);
      color: #fff;
    }
  }
  body.twp-v2-portal .twp-nav-acct[aria-current="page"] {
    background: var(--twp-nav-accent);
    color: #fff;
  }
}

/* ── THE MENU (navbar.tsx "Mobile Drawer"): a bottom sheet over a blurred veil, under 1024 px ──── */

body.twp-v2-portal .twp-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.twp-v2-portal .twp-nav-overlay[hidden],
body.twp-v2-portal .twp-nav-drawer[hidden] {
  display: none !important;
}
/* `bg-background border-border fixed inset-x-0 bottom-3 mx-auto max-h-[calc(100dvh-1.5rem)] w-[95%] max-w-md
   overflow-y-auto overscroll-contain rounded-xl border p-4 shadow-lg outline-none` */
body.twp-v2-portal .twp-nav-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  width: 95%;
  max-width: 28rem;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  margin-inline: auto;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--twp-nav-border);
  border-radius: 0.75rem;
  background: #0b1120;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  outline: none;
  color: var(--twp-nav-fg);
}
body.twp-v2-portal .twp-nav-drawer-in {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body.twp-v2-portal .twp-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.twp-v2-portal .twp-nav-drawer-logo {
  width: auto;
  color: transparent;
  height: 2.25rem !important;
}
/* the X: `border-border cursor-pointer rounded-md border p-1` */
body.twp-v2-portal .twp-nav-close {
  display: block;
  padding: 0.25rem;
  border: 1px solid var(--twp-nav-border);
  border-radius: 0.375rem;
  color: var(--twp-nav-fg);
  outline-color: var(--twp-pill);
}
/* the eight pages: `border-border mb-4 flex flex-col rounded-md border text-sm`, each row `border-b last:border-b-0` */
body.twp-v2-portal .twp-nav-drawer-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  border: 1px solid var(--twp-nav-border);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
body.twp-v2-portal .twp-nav-drawer-list > li {
  border-bottom: 1px solid var(--twp-nav-border);
}
body.twp-v2-portal .twp-nav-drawer-list > li:last-child {
  border-bottom-width: 0;
}
/* `hover:text-primary/80 block rounded-md p-2.5 underline-offset-4 transition-colors` + `text-primary font-medium` | `text-primary/60` */
body.twp-v2-portal .twp-nav-drawer-list a {
  display: block;
  padding: 0.625rem;
  border-radius: 0.375rem;
  color: rgb(255 255 255 / 0.6);
  text-underline-offset: 4px;
  outline-color: var(--twp-pill);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: var(--twp-tw-ease);
}
@media (hover: hover) {
  body.twp-v2-portal .twp-nav-drawer-list a:hover {
    color: rgb(255 255 255 / 0.8);
  }
}
body.twp-v2-portal .twp-nav-drawer-list a[aria-current="page"] {
  color: #fff;
  font-weight: 500;
}
body.twp-v2-portal .twp-nav-drawer-list a:focus-visible {
  outline: 2px solid var(--twp-pill);
  outline-offset: -2px;
}
/* the account (the menu's one addition): who is signed in, in the footer's mono voice, over the same ruled list */
body.twp-v2-portal .twp-nav-drawer-acct {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: -1rem; /* the list above keeps the block's mb-4 rhythm */
}
body.twp-v2-portal .twp-nav-drawer-acct .twp-nav-drawer-list {
  margin-bottom: 0;
}
body.twp-v2-portal .twp-nav-drawer-who {
  padding-inline: 0.625rem;
  font-family: var(--twp-chrome-mono) !important;
  font-size: 0.6875rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d8798;
}
/* the CTA: `flex h-8 w-full … transition-all ease-out hover:brightness-110 active:scale-95` */
body.twp-v2-portal .twp-nav-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.twp-v2-portal .twp-nav-cta--wide {
  display: flex;
  width: 100%;
  transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
@media (hover: hover) {
  body.twp-v2-portal .twp-nav-cta--wide:hover {
    filter: brightness(1.1);
  }
}
/* Tailwind v4's `scale-95` is the `scale` property (not `transform`) */
body.twp-v2-portal .twp-nav-cta--wide:active {
  scale: 0.95;
}
/* the motion: the veil fades in over 0.2 s; the sheet rises 100 px on the spring (opacity one frame ahead of the
   rise, as Motion's compositor animation runs); its list fades in on Motion's default 0.3 s tween; out in 0.1 s */
body.twp-v2-portal .twp-nav.is-open .twp-nav-overlay {
  animation: twp-fade-in 0.2s cubic-bezier(0.25, 0.1, 0.35, 1) both;
}
body.twp-v2-portal .twp-nav.is-open .twp-nav-drawer {
  animation:
    twp-sheet-rise 0.85s var(--twp-spring) 16ms both,
    twp-sheet-show 0.85s var(--twp-spring) both;
}
body.twp-v2-portal .twp-nav.is-open .twp-nav-drawer-list,
body.twp-v2-portal .twp-nav.is-open .twp-nav-drawer-list > li {
  animation: twp-fade-in 0.3s cubic-bezier(0.25, 0.1, 0.35, 1) both;
}
body.twp-v2-portal .twp-nav.is-closing .twp-nav-overlay {
  animation: twp-fade-out 0.2s cubic-bezier(0.25, 0.1, 0.35, 1) both;
}
body.twp-v2-portal .twp-nav.is-closing .twp-nav-drawer {
  animation: twp-sheet-out 0.1s cubic-bezier(0, 0, 0.58, 1) both;
}
@keyframes twp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes twp-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes twp-sheet-rise {
  from {
    transform: translateY(100px);
  }
  to {
    transform: none;
  }
}
@keyframes twp-sheet-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes twp-sheet-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(100px);
  }
}
/* without scripts the menu is a plain list under the bar (the toggle has nothing to open) */
body.twp-v2-portal .twp-nav-noscript {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 1.25rem 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--twp-nav-border);
  border-radius: 0.75rem;
  background: #0b1120;
  font-size: 0.875rem;
}
@media (min-width: 64rem) {
  body.twp-v2-portal .twp-nav-noscript {
    display: none;
  }
}
html:not(.twp-js) body.twp-v2-portal .twp-nav-toggle {
  visibility: hidden;
}

/* ── THE FOOTER (footer.css, verbatim values; the room paints no ground of its own) ──────────── */

body.twp-v2-portal .twp-foot-room {
  position: relative;
  display: block;
  font-family: var(--twp-chrome-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  color: var(--twp-nav-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --margin: 16px;
  --v2-ink-mute: #7d8798;
  --v2-sub: rgb(255 255 255 / 0.62);
  --v2-proof: rgb(255 255 255 / 0.5);
  --v2-accent: #27aae1;
}
@media (min-width: 1024px) {
  body.twp-v2-portal .twp-foot-room {
    --margin: 64px;
  }
}
@media (min-width: 1281px) {
  body.twp-v2-portal .twp-foot-room {
    --margin: 80px;
  }
}
body.twp-v2-portal .v2-footer {
  --v2-footer-link: rgb(255 255 255 / 0.68);
  --v2-footer-link-on: #eef1f7;
  --v2-footer-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --v2-footer-rule: rgb(255 255 255 / 0.12);
  --v2-footer-draw: cubic-bezier(0.65, 0, 0.35, 1);
}
body.twp-v2-portal .v2-footer-inner {
  position: relative;
  margin-inline: auto;
  max-width: calc(1200px + 2 * var(--margin));
  padding: clamp(112px, 14vh, 152px) var(--margin) clamp(56px, 8vh, 80px);
  background: radial-gradient(35% 128px at 50% 0%, rgb(255 255 255 / 0.08), transparent);
}
body.twp-v2-portal .v2-footer-rule {
  position: absolute;
  top: 0;
  inset-inline: var(--margin);
  height: 1px;
  background-color: var(--v2-footer-rule);
  transform-origin: left center;
}
body.twp-v2-portal .v2-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}
body.twp-v2-portal .v2-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
body.twp-v2-portal .v2-footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}
@media (min-width: 640px) {
  body.twp-v2-portal .v2-footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
}
@media (min-width: 1024px) {
  body.twp-v2-portal .v2-footer-grid {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: 40px;
  }
  body.twp-v2-portal .v2-footer-brand {
    padding-right: 48px;
  }
}
body.twp-v2-portal .v2-footer-heading {
  margin: 0 0 14px;
  font-family: var(--twp-chrome-mono) !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-ink-mute);
}
body.twp-v2-portal .v2-footer-logo {
  display: block;
  width: auto;
  height: 40px !important;
}
body.twp-v2-portal .v2-footer-descriptor {
  margin: 20px 0 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--v2-sub);
}
body.twp-v2-portal .v2-footer-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.twp-v2-portal .v2-footer-link,
body.twp-v2-portal .v2-footer-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--v2-footer-link);
  text-decoration: none;
  transition: color 220ms var(--v2-footer-ease);
  -webkit-tap-highlight-color: transparent;
}
body.twp-v2-portal .v2-footer-link:hover,
body.twp-v2-portal .v2-footer-link:focus-visible,
body.twp-v2-portal .v2-footer-email:hover,
body.twp-v2-portal .v2-footer-email:focus-visible {
  color: var(--v2-footer-link-on);
}
body.twp-v2-portal .v2-footer-arrow {
  flex: none;
  color: var(--v2-ink-mute);
  transition:
    color 220ms var(--v2-footer-ease),
    transform 220ms var(--v2-footer-ease);
}
body.twp-v2-portal .v2-footer-link:focus-visible .v2-footer-arrow {
  color: var(--v2-accent);
  transform: translate(2px, -2px);
}
@media (hover: hover) and (pointer: fine) {
  body.twp-v2-portal .v2-footer-link:hover .v2-footer-arrow {
    color: var(--v2-accent);
    transform: translate(2px, -2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.twp-v2-portal .v2-footer-link:hover .v2-footer-arrow,
  body.twp-v2-portal .v2-footer-link:focus-visible .v2-footer-arrow {
    transform: none;
  }
}
body.twp-v2-portal .v2-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.twp-v2-portal .v2-footer-contact .v2-footer-heading {
  margin-bottom: 4px;
}
body.twp-v2-portal .v2-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 6px 0 0 -11px;
  padding: 0;
  list-style: none;
}
body.twp-v2-portal .v2-footer-social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  color: var(--v2-ink-mute);
  transition: color 220ms var(--v2-footer-ease);
  -webkit-tap-highlight-color: transparent;
}
body.twp-v2-portal .v2-footer-social:hover,
body.twp-v2-portal .v2-footer-social:focus-visible {
  color: var(--v2-footer-link-on);
}
body.twp-v2-portal .v2-footer-legal {
  display: grid;
  gap: 18px;
  margin-top: clamp(96px, 12vh, 136px);
}
body.twp-v2-portal .v2-footer-midrule {
  height: 1px;
  margin-bottom: 6px;
  background-color: var(--v2-footer-rule);
}
body.twp-v2-portal .v2-footer-risk,
body.twp-v2-portal .v2-footer-copyright {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--v2-proof);
}
body.twp-v2-portal .v2-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
}
body.twp-v2-portal .v2-footer-utilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
}
body.twp-v2-portal .v2-footer-utility {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  color: var(--v2-proof);
  text-decoration: none;
  transition: color 220ms var(--v2-footer-ease);
}
body.twp-v2-portal .v2-footer-utility:hover,
body.twp-v2-portal .v2-footer-utility:focus-visible {
  color: var(--v2-footer-link-on);
}
body.twp-v2-portal .v2-footer-credit {
  position: relative;
  gap: 0.42em;
  padding-right: 12px;
}
body.twp-v2-portal .v2-footer-credit-role {
  color: var(--v2-proof);
  transition: color 220ms var(--v2-footer-ease);
}
body.twp-v2-portal .v2-footer-credit-name {
  position: relative;
  padding-right: 0.08em;
  font-family: "TWP Instrument Serif", Georgia, serif !important;
  font-size: 17.5px;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.012em;
  color: rgb(255 255 255 / 0.8);
  transition: color 220ms var(--v2-footer-ease);
}
body.twp-v2-portal .v2-footer-credit-stroke {
  position: absolute;
  top: calc(100% + 1px);
  left: -2px;
  overflow: visible;
  pointer-events: none;
}
body.twp-v2-portal .v2-footer-credit-stroke path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.twp-v2-portal .v2-footer-credit-trace {
  stroke: rgb(255 255 255 / 0.24);
  stroke-width: 1;
}
body.twp-v2-portal .v2-footer-credit-ink {
  stroke: var(--v2-footer-link-on);
  stroke-width: 1.15;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    opacity 280ms var(--v2-footer-ease),
    stroke-dashoffset 0s linear 280ms;
}
body.twp-v2-portal .v2-footer-credit:focus-visible .v2-footer-credit-role {
  color: rgb(255 255 255 / 0.62);
}
body.twp-v2-portal .v2-footer-credit:focus-visible .v2-footer-credit-name {
  color: var(--v2-footer-link-on);
}
body.twp-v2-portal .v2-footer-credit:focus-visible .v2-footer-credit-ink {
  opacity: 1;
  stroke-dashoffset: 0;
  transition:
    opacity 0s,
    stroke-dashoffset 760ms var(--v2-footer-draw);
}
@media (hover: hover) and (pointer: fine) {
  body.twp-v2-portal .v2-footer-credit:hover .v2-footer-credit-role {
    color: rgb(255 255 255 / 0.62);
  }
  body.twp-v2-portal .v2-footer-credit:hover .v2-footer-credit-name {
    color: var(--v2-footer-link-on);
  }
  body.twp-v2-portal .v2-footer-credit:hover .v2-footer-credit-ink {
    opacity: 1;
    stroke-dashoffset: 0;
    transition:
      opacity 0s,
      stroke-dashoffset 760ms var(--v2-footer-draw);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.twp-v2-portal .v2-footer-credit .v2-footer-credit-ink,
  body.twp-v2-portal .v2-footer-credit:hover .v2-footer-credit-ink,
  body.twp-v2-portal .v2-footer-credit:focus-visible .v2-footer-credit-ink {
    stroke-dashoffset: 0;
    transition: opacity 200ms linear;
  }
}
body.twp-v2-portal :is(.v2-footer-link, .v2-footer-email, .v2-footer-social, .v2-footer-utility):focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
body.twp-v2-portal .v2-footer-social:focus-visible {
  border-radius: 9999px;
  outline-offset: 0;
}
@media (max-width: 639px) {
  body.twp-v2-portal .v2-footer-link,
  body.twp-v2-portal .v2-footer-email {
    min-height: 44px;
  }
  body.twp-v2-portal .v2-footer-social {
    width: 44px;
    height: 44px;
  }
  body.twp-v2-portal .v2-footer-socials {
    margin-left: -13px;
  }
  body.twp-v2-portal .v2-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The letter roll (TextRoll): two layers in a clipped line box (1.35, so 15 px descenders survive); per hover or
   keyboard focus each letter swaps up in 0.22 s on easeInOut, the cascade spread over 0.06 s whatever the length. */
body.twp-v2-portal .v2-footer-roll {
  position: relative;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.35;
}
body.twp-v2-portal .twp-roll-a {
  display: block;
}
body.twp-v2-portal .twp-roll-b {
  position: absolute;
  inset: 0;
  display: block;
}
body.twp-v2-portal .twp-roll-l {
  display: inline-block;
  white-space: pre;
  transition: transform 0.22s cubic-bezier(0.42, 0, 0.58, 1);
  transition-delay: calc(var(--i, 0) * 0.06s);
}
body.twp-v2-portal .twp-roll-b .twp-roll-l {
  transform: translateY(100%);
}
@media (hover: hover) and (pointer: fine) {
  body.twp-v2-portal .v2-footer-link.twp-rolls:hover .twp-roll-a .twp-roll-l {
    transform: translateY(-100%);
  }
  body.twp-v2-portal .v2-footer-link.twp-rolls:hover .twp-roll-b .twp-roll-l {
    transform: none;
  }
}
body.twp-v2-portal .v2-footer-link.twp-rolls:focus-visible .twp-roll-a .twp-roll-l {
  transform: translateY(-100%);
}
body.twp-v2-portal .v2-footer-link.twp-rolls:focus-visible .twp-roll-b .twp-roll-l {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.twp-v2-portal .twp-roll-l {
    transition: none;
  }
  body.twp-v2-portal .v2-footer-link.twp-rolls:is(:hover, :focus-visible) .twp-roll-a .twp-roll-l {
    transform: none;
  }
  body.twp-v2-portal .v2-footer-link.twp-rolls:is(:hover, :focus-visible) .twp-roll-b .twp-roll-l {
    transform: translateY(100%);
  }
}

/* The entrance (site-footer.tsx + constants.ts TIMING): armed only by the visitor's first input while the footer is still
   below the fold, played once when 15 % of it is on screen; the finished frame for everything else. */
body.twp-v2-portal .v2-footer[data-entrance="armed"] .v2-footer-rule {
  transform: scaleX(0);
}
body.twp-v2-portal .v2-footer[data-entrance="armed"] .twp-f-item {
  opacity: 0;
}
body.twp-v2-portal .v2-footer[data-entrance="armed"] :is([data-twp-group="brand"], [data-twp-group="columns"]) > .twp-f-item {
  transform: translateY(12px);
}
body.twp-v2-portal .v2-footer[data-entrance="play"] .v2-footer-rule {
  animation: twp-f-draw 0.78s cubic-bezier(0.65, 0, 0.35, 1) both;
}
body.twp-v2-portal .v2-footer[data-entrance="play"] :is([data-twp-group="brand"], [data-twp-group="columns"]) > .twp-f-item {
  animation: twp-f-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="columns"] > .twp-f-item {
  animation-duration: 0.52s;
}
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="legal"] > .twp-f-item {
  animation: twp-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="brand"] > .twp-f-item:nth-child(1) { animation-delay: 0.08s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="brand"] > .twp-f-item:nth-child(2) { animation-delay: 0.36s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="columns"] > .twp-f-item:nth-child(1) { animation-delay: 0.16s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="columns"] > .twp-f-item:nth-child(2) { animation-delay: 0.235s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="columns"] > .twp-f-item:nth-child(3) { animation-delay: 0.31s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="columns"] > .twp-f-item:nth-child(4) { animation-delay: 0.385s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="legal"] > .twp-f-item:nth-child(1) { animation-delay: 0.44s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="legal"] > .twp-f-item:nth-child(2) { animation-delay: 0.5s; }
body.twp-v2-portal .v2-footer[data-entrance="play"] [data-twp-group="legal"] > .twp-f-item:nth-child(3) { animation-delay: 0.56s; }
@keyframes twp-f-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes twp-f-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* RTL (the Arabic pages): the bar and the footer mirror through their logical properties; arrows keep pointing out */
html[dir="rtl"] body.twp-v2-portal :is(.twp-nav-room, .twp-foot-room) :is(a, p, span) {
  unicode-bidi: plaintext;
}

@media print {
  body.twp-v2-portal :is(.twp-nav-room, .twp-foot-room, .twp-skip) {
    display: none !important;
  }
}
@media (forced-colors: active) {
  body.twp-v2-portal .twp-nav.is-scrolled .twp-nav-shell,
  body.twp-v2-portal .twp-nav-drawer {
    border: 1px solid CanvasText;
  }
}
