/* ============================================================================
   TESAE — base layer.
   Every value here comes from variables.css. No raw colours, sizes or spacing.
   Section styles live in assets/css/sections.css.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  /* The desktop header is sticky, so an anchor jump would otherwise park the target
     section underneath it — measured at 100-121px of the section swallowed. Reserving
     the bar's own inset plus its height plus a gap makes every in-page link (the hero
     scroll cue, the nav, the mobile bottom bar) land with the heading in clear view.
     Reset in the mobile block, where the header does not stick. */
  scroll-padding-top: calc(
    var(--tesae-header-top) + var(--tesae-header-clearance) + var(--tesae-space-m)
  );
}

body {
  margin: 0;
  background: var(--tesae-color-bg);
  color: var(--tesae-color-text);
  font-family: var(--tesae-font-primary);
  font-size: var(--tesae-fs-body);
  font-weight: var(--tesae-fw-regular);
  line-height: var(--tesae-lh-normal);
  /* Nothing may push the page sideways — but `clip`, never `hidden`. `overflow-x:
     hidden` computes `overflow-y` up from `visible` to `auto`, which turns the body
     into a scroll container that never actually scrolls; every `position: sticky`
     descendant then resolves against that box and simply rides the page. `clip` is
     the one overflow value compatible with `overflow-y: visible`, so it clips exactly
     the same while leaving the viewport as the scrollport — which is what lets
     .tesae-header stick. `html` above already relies on it. */
  overflow-x: clip;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tesae-transition), opacity var(--tesae-transition);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--tesae-color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ layout */

.tesae-container {
  width: 100%;
  max-width: calc(var(--tesae-container-max) + var(--tesae-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--tesae-gutter);
}

.tesae-section {
  position: relative;
  padding-block: var(--tesae-section-padding);
}

.tesae-main {
  position: relative;
  isolation: isolate;
}

.tesae-section--tint {
  background: var(--tesae-color-tint);
}

.tesae-section--dark {
  background: var(--tesae-color-black);
  color: var(--tesae-color-text-invert);
}

.tesae-skip-link {
  position: absolute;
  left: -9999px;
  z-index: var(--tesae-z-modal);
  padding: var(--tesae-space-s) var(--tesae-space-m);
  background: var(--tesae-color-primary);
  color: var(--tesae-color-white);
}

.tesae-skip-link:focus {
  left: var(--tesae-space-s);
  top: var(--tesae-space-s);
}

/* -------------------------------------------------------------- typography */

.tesae-display {
  font-size: var(--tesae-fs-display);
  font-weight: var(--tesae-fw-extrabold);
  line-height: var(--tesae-lh-display);
  letter-spacing: var(--tesae-ls-display);
  text-transform: uppercase;
}

.tesae-h1 {
  font-size: var(--tesae-fs-h1);
  font-weight: var(--tesae-fw-bold);
  line-height: var(--tesae-lh-tight);
}

.tesae-h2 {
  font-size: var(--tesae-fs-h2);
  font-weight: var(--tesae-fw-extrabold);
  line-height: var(--tesae-lh-tight);
}

.tesae-h2--light {
  font-weight: var(--tesae-fw-light);
}

.tesae-h2--light strong {
  font-weight: var(--tesae-fw-extrabold);
}

.tesae-h3 {
  font-size: var(--tesae-fs-h3);
  font-weight: var(--tesae-fw-extrabold);
  line-height: var(--tesae-lh-snug);
}

.tesae-lead {
  font-size: var(--tesae-fs-body-lg);
  font-weight: var(--tesae-fw-regular);
  line-height: var(--tesae-lh-normal);
}

.tesae-text-primary {
  color: var(--tesae-color-primary);
}

/* ----------------------------------------------------------------- buttons */

.tesae-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tesae-space-s);
    padding: 12px 30px;
    border-radius: 10px;
    font-size: var(--tesae-fs-button);
    font-weight: var(--tesae-fw-bold);
    line-height: var(--tesae-lh-loose);
    text-align: center;
    transition: background-color var(--tesae-transition), color var(--tesae-transition), transform var(--tesae-transition), box-shadow var(--tesae-transition);
}

.tesae-button--primary {
  background: var(--tesae-color-primary-soft);
  color: var(--tesae-color-black);
      width: var(--tesae-hero-cta-width);
    height: var(--tesae-hero-cta-height);
    min-height: var(--tesae-hero-cta-height);
    padding-block: 0;
}

.tesae-button--primary:hover,
.tesae-button--primary:focus-visible {
  background: var(--tesae-color-primary-dark);
  color: var(--tesae-color-white);
  transform: translateY(-2px);
  box-shadow: var(--tesae-shadow-lifted);
}

.tesae-button--dark {
  background: var(--tesae-color-black);
  color: var(--tesae-color-white);
}

.tesae-button--dark:hover,
.tesae-button--dark:focus-visible {
  background: var(--tesae-color-ink);
  transform: translateY(-2px);
  box-shadow: var(--tesae-shadow-lifted);
}

.tesae-button--ghost {
  background: transparent;
  color: var(--tesae-color-black);
  border: 1px solid currentColor;
}

.tesae-button--ghost:hover,
.tesae-button--ghost:focus-visible {
  background: var(--tesae-color-black);
  color: var(--tesae-color-white);
}

/* ------------------------------------------------------------------ header */

.tesae-header {
  position: sticky;
  top: var(--tesae-header-top);
  z-index: var(--tesae-z-header);
  width: calc(100% - var(--tesae-page-inset) - var(--tesae-page-inset-end));
  margin-top: var(--tesae-header-top);
  margin-right: var(--tesae-page-inset-end);
  margin-left: var(--tesae-page-inset);
  border-radius: var(--tesae-radius-m) var(--tesae-radius-m) var(--tesae-radius-m) var(--tesae-radius-m);
  background: var(--tesae-overlay-tint-43);
  backdrop-filter: var(--tesae-blur-header);
  -webkit-backdrop-filter: var(--tesae-blur-header);
}

.tesae-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tesae-space-m);
  min-height: var(--tesae-header-height);
  max-width: none;
  padding-inline: var(--tesae-header-inner-gutter);
}

.tesae-header__logo img {
  width: auto;
  max-height: var(--tesae-logo-height);
}

.tesae-mobile-menu__brand,
.tesae-nav__bell-menu {
  display: none;
}

.tesae-header__actions {
  display: flex;
  align-items: center;
  gap: var(--tesae-space-xs);
}

.tesae-notifications {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.tesae-nav {
  display: flex;
  align-items: center;
  gap: var(--tesae-space-l);
}

.tesae-nav__list {
  display: flex;
  align-items: center;
  gap: var(--tesae-space-l);
  flex-wrap: wrap;
}

.tesae-nav__list a {
  font-size: var(--tesae-fs-button);
  font-weight: var(--tesae-fw-medium);
  white-space: nowrap;
}

.tesae-nav__list a:hover,
.tesae-nav__list .current-menu-item > a {
  color: var(--tesae-color-primary);
}

.tesae-nav__bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tesae-bell-size);
  height: var(--tesae-bell-size);
  padding: 0;
  border-radius: var(--tesae-radius-m);
  overflow: hidden;
  transition: transform var(--tesae-transition);
}

.tesae-nav__bell img {
  width: 100%;
  height: 100%;
}

.tesae-nav__bell:hover {
  transform: translateY(calc(var(--tesae-space-3xs) * -1));
}

.tesae-notification {
  --tesae-notification-active-panel-gap: var(--tesae-notification-panel-gap);
  position: absolute;
  top: calc(100% + var(--tesae-notification-active-panel-gap));
  right: 0;
  z-index: var(--tesae-z-overlay);
  width: min(
    var(--tesae-notification-width),
    calc(100vw - (var(--tesae-gutter) * 2))
  );
  min-height: min(
    var(--tesae-notification-min-height),
    calc(
      100dvh - var(--tesae-header-height) - var(--tesae-notification-active-panel-gap) -
        var(--tesae-space-s)
    )
  );
  max-height: calc(
    100dvh - var(--tesae-header-height) - var(--tesae-notification-active-panel-gap) -
      var(--tesae-space-s)
  );
  padding:
    calc(var(--tesae-notification-content-top) - var(--tesae-notification-border-width))
    calc(var(--tesae-notification-content-end) - var(--tesae-notification-border-width))
    calc(var(--tesae-notification-content-bottom) - var(--tesae-notification-border-width))
    calc(var(--tesae-notification-content-start) - var(--tesae-notification-border-width));
  border: var(--tesae-notification-border-width) solid var(--tesae-color-primary-soft);
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-color-primary-soft);
  box-shadow: var(--tesae-shadow-notification);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tesae-notification[hidden] {
  display: none;
}

.tesae-notification__close {
  position: absolute;
  top: calc(var(--tesae-notification-close-top) - var(--tesae-notification-border-width));
  right: calc(var(--tesae-notification-close-end) - var(--tesae-notification-border-width));
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tesae-notification-close-size);
  height: var(--tesae-notification-close-size);
  padding: 0;
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-color-black);
  transition: background-color var(--tesae-transition), transform var(--tesae-transition);
}

.tesae-notification__close:hover,
.tesae-notification__close:focus-visible {
  background: var(--tesae-color-ink);
  transform: translateY(calc(var(--tesae-space-3xs) * -1));
}

.tesae-notification__close-mark {
  position: relative;
  display: block;
  width: var(--tesae-notification-close-line-length);
  height: var(--tesae-notification-close-line-length);
}

.tesae-notification__close-line {
  position: absolute;
  top: var(--tesae-notification-close-line-center);
  left: 0;
  width: var(--tesae-notification-close-line-length);
  height: var(--tesae-notification-close-line-height);
  max-width: none;
  transform-origin: center;
}

.tesae-notification__close-line--a {
  transform: translateY(var(--tesae-notification-close-line-shift))
    rotate(var(--tesae-notification-close-line-rotate));
}

.tesae-notification__close-line--b {
  transform: translateY(var(--tesae-notification-close-line-shift))
    rotate(calc(var(--tesae-notification-close-line-rotate) * -1));
}

.tesae-notification__title {
  width: 100%;
  max-width: var(--tesae-notification-title-width);
  font-size: var(--tesae-notification-title-size);
  font-weight: var(--tesae-fw-light);
  line-height: var(--tesae-lh-tight);
  overflow-wrap: break-word;
}

.tesae-notification__title strong {
  font-weight: var(--tesae-fw-extrabold);
}

.tesae-notification__title .tesae-hl {
  display: inline-block;
  padding: var(--tesae-notification-highlight-block)
    var(--tesae-notification-highlight-inline);
  background: var(--tesae-color-white);
  color: var(--tesae-color-black);
  line-height: var(--tesae-notification-highlight-line-height);
}

.tesae-notification__title .tesae-break {
  display: inline;
}

.tesae-notification__copy {
  width: 100%;
  max-width: var(--tesae-notification-copy-width);
  margin-top: var(--tesae-notification-title-copy-gap);
  font-size: var(--tesae-notification-copy-size);
  font-weight: var(--tesae-fw-regular);
  line-height: var(--tesae-notification-line-height);
  overflow-wrap: break-word;
}

.tesae-notification__copy strong {
  font-weight: var(--tesae-fw-extrabold);
}

.tesae-notification__offer {
  width: 100%;
  max-width: var(--tesae-notification-copy-width);
  margin-top: var(--tesae-notification-copy-offer-gap);
  font-size: var(--tesae-notification-copy-size);
  font-weight: var(--tesae-fw-extrabold);
  line-height: var(--tesae-notification-line-height);
}

.tesae-notification__offer span {
  display: block;
}

.tesae-notification__cta {
  width: var(--tesae-notification-cta-width);
  min-height: var(--tesae-notification-cta-min-height);
  margin-top: var(--tesae-notification-copy-cta-gap);
  padding: 0;
  font-size: var(--tesae-notification-button-size);
}

.tesae-burger {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tesae-burger-gap);
  padding: var(--tesae-space-xs);
  border-radius: var(--tesae-radius-m);
}

.tesae-burger__bar {
  display: block;
  width: var(--tesae-burger-bar-width);
  height: var(--tesae-burger-bar-height);
  background: var(--tesae-color-black);
  transition: transform var(--tesae-transition), opacity var(--tesae-transition);
}

.tesae-burger__close-mark {
  position: relative;
  display: none;
  width: var(--tesae-mobile-menu-close-line-length);
  height: var(--tesae-mobile-menu-close-line-length);
}

.tesae-burger__close-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tesae-mobile-menu-close-line-length);
  height: var(--tesae-mobile-menu-close-line-height);
  max-width: none;
  transform-origin: center;
}

.tesae-burger__close-line--a {
  transform: translate(-50%, -50%) rotate(var(--tesae-mobile-menu-close-rotate));
}

.tesae-burger__close-line--b {
  transform: translate(-50%, -50%) rotate(calc(var(--tesae-mobile-menu-close-rotate) * -1));
}

.tesae-mobile-menu {
  display: none;
}

.tesae-mobile-menu[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ footer */

.tesae-footer__band-image {
  width: 100%;
  object-fit: cover;
}

.tesae-footer__bar {
  background: var(--tesae-color-black);
  color: var(--tesae-color-text-invert);
  padding-block: var(--tesae-space-xl);
}

.tesae-footer__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tesae-space-l);
  justify-content: space-between;
}

.tesae-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--tesae-space-m);
}

.tesae-footer__logo {
  width: var(--tesae-footer-social-width);
}

.tesae-footer__socials {
  display: flex;
  gap: var(--tesae-footer-social-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tesae-footer__socials a {
  display: block;
  transition: opacity var(--tesae-transition);
}

.tesae-footer__socials a:hover,
.tesae-footer__socials a:focus-visible {
  opacity: 0.75;
}

/* The marks ship at their Figma colours — mint disc, black glyph — so no filter. */
.tesae-footer__socials img {
  width: var(--tesae-footer-social-size);
  height: auto;
}

.tesae-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tesae-space-l);
}

.tesae-footer__list a {
  font-size: var(--tesae-fs-body);
  font-weight: var(--tesae-fw-medium);
}

.tesae-footer__list a:hover {
  color: var(--tesae-color-primary);
}

.tesae-footer__copyright {
  width: 100%;
  font-size: var(--tesae-fs-body);
  font-weight: var(--tesae-fw-medium);
}

.tesae-footer__top {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tesae-bell-size);
  height: var(--tesae-bell-size);
  margin-left: auto;
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-color-white);
  color: var(--tesae-color-black);
}

/* The node reports a soft-green fill, but the frame renders it black — going by the
   render, as everywhere else the two disagree. */
.tesae-footer__top span {
  width: var(--tesae-footer-top-arrow-size);
  height: var(--tesae-footer-top-arrow-size);
  border-top: var(--tesae-footer-top-arrow-stroke) solid currentColor;
  border-left: var(--tesae-footer-top-arrow-stroke) solid currentColor;
  transform: translateY(25%) rotate(45deg);
}

@media (min-width: 992px) {
  .tesae-header__inner {
    justify-content: flex-start;
    gap: var(--tesae-header-actions-gap);
  }

  .tesae-nav {
    gap: var(--tesae-header-nav-cta-gap);
    margin-left: auto;
  }

  .tesae-nav__list {
    gap: var(--tesae-header-menu-gap);
  }

  .tesae-nav__cta {
    width: var(--tesae-header-cta-width);
    min-height: var(--tesae-header-cta-height);
    height: var(--tesae-header-cta-height);
    padding: 0;
  }

  .tesae-footer {
    position: relative;
    height: var(--tesae-footer-desktop-height);
    overflow: hidden;
  }

  .tesae-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--tesae-footer-desktop-bar-top);
    z-index: 1;
    height: var(--tesae-footer-desktop-bar-height);
    background: var(--tesae-color-black);
  }

  .tesae-footer__band {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: var(--tesae-footer-desktop-band-height);
    top:-84px;
  }

  /* A transparent cut-out that straddles the band's top edge, so it keeps its own
     aspect rather than being stretched to the box. */
  .tesae-footer__band-image {
    width: var(--tesae-footer-desktop-band-width);
    height: auto;
    max-width: none;
    margin-left: var(--tesae-footer-desktop-band-left);
    transform: rotate(5deg);
  }

  .tesae-footer__bar {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--tesae-footer-desktop-bar-top);
    z-index: 3;
    height: var(--tesae-footer-desktop-bar-height);
    padding-block: 0;
    background: transparent;
  }

  /* The bar's four pieces sit where the frame puts them: the socials centred under
     the photograph, the links and copyright down the left, the top button opposite. */
  .tesae-footer__inner {
    display: block;
    height: 100%;
    padding-block: 0;
  }

  .tesae-footer__brand {
    position: absolute;
    left: 50%;
    top: var(--tesae-footer-desktop-socials-top);
    transform: translateX(-50%);
  }

  .tesae-footer__nav {
    position: absolute;
    left: var(--tesae-gutter);
    top: var(--tesae-footer-desktop-links-top);
  }

  .tesae-footer__list {
    gap: var(--tesae-footer-desktop-links-gap);
  }

  .tesae-footer__copyright {
    position: absolute;
    left: var(--tesae-gutter);
    top: var(--tesae-footer-desktop-copy-top);
    width: auto;
  }

  .tesae-footer__top {
    position: absolute;
    right: var(--tesae-gutter);
    top: var(--tesae-footer-desktop-top-btn-top);
    width: var(--tesae-footer-desktop-top-btn-width);
    height: var(--tesae-footer-desktop-top-btn-height);
    margin-left: 0;
  }
}

/* The bottom bar is a mobile-only affordance; the desktop design has no such band,
   so it is switched off here and turned back on inside the mobile query. */
.tesae-bottombar {
  display: none;
}

/* ------------------------------------------------------------ mobile: 991 */

@media (max-width: 991px) {
  /* The header does not stick here, so there is no global mobile anchor offset. */
  html {
    scroll-padding-top: 0;
  }

  body.tesae-nav-open {
    overflow: hidden;
  }

  .tesae-header {
    /* Desktop-only stickiness. Here the bar is transparent and unblurred, so pinning it
       would float the logo and burger over whatever scrolls beneath with no backdrop to
       sit on; mobile also already has the bottom bar as its scroll-following nav.
       `relative` rather than `static` because `body.tesae-nav-open .tesae-header` below
       raises it with a z-index, which needs a positioned box to take effect. */
    position: relative;
    top: auto;
    width: 100%;
    margin: 0;
    border-radius: 0;
    background:transparent;
  }

  body.tesae-nav-open .tesae-header {
    z-index: var(--tesae-z-modal);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tesae-header__inner {
    padding-inline: var(--tesae-gutter);
  }

  .tesae-burger {
    display: flex;
    width: var(--tesae-icon-badge);
    height: var(--tesae-icon-badge);
    background: var(--tesae-color-black);
  }

  .tesae-burger__bar {
    background: var(--tesae-color-white);
  }

  .tesae-header__logo img {
    max-width: var(--tesae-header-mobile-logo-width);
  }

  body.tesae-nav-open .tesae-header__logo {
    display: none;
  }

  body.tesae-nav-open .tesae-mobile-menu__brand {
    position: absolute;
    top: var(--tesae-mobile-menu-brand-top);
    left: var(--tesae-mobile-menu-brand-left);
    display: block;
    width: var(--tesae-mobile-menu-brand-width);
    height: var(--tesae-mobile-menu-brand-height);
  }

  .tesae-mobile-menu__brand-image {
    position: absolute;
    max-width: none;
  }

  .tesae-mobile-menu__brand-image--mark {
    top: 0;
    left: 0;
    width: var(--tesae-mobile-menu-brand-mark-width);
    height: var(--tesae-mobile-menu-brand-mark-height);
  }

  .tesae-mobile-menu__brand-image--word {
    top: var(--tesae-mobile-menu-brand-word-top);
    left: var(--tesae-mobile-menu-brand-word-left);
    width: var(--tesae-mobile-menu-brand-word-width);
    height: var(--tesae-mobile-menu-brand-word-height);
  }

  .tesae-nav__bell {
    width: var(--tesae-icon-badge);
    height: var(--tesae-icon-badge);
    background: var(--tesae-color-primary-soft);
  }

  .tesae-nav__bell img {
    width: 100%;
    mix-blend-mode: screen;
  }

  body.tesae-nav-open .tesae-header__actions {
    position: absolute;
    top: var(--tesae-mobile-menu-actions-top);
    right: var(--tesae-mobile-menu-actions-end);
    gap: var(--tesae-mobile-menu-actions-gap);
  }

  body.tesae-nav-open .tesae-nav__bell,
  body.tesae-nav-open .tesae-burger {
    width: var(--tesae-mobile-menu-control-size);
    height: var(--tesae-mobile-menu-control-size);
  }

  body.tesae-nav-open .tesae-nav__bell {
    background: transparent;
    transform: none;
  }

  body.tesae-nav-open .tesae-nav__bell-default {
    display: none;
  }

  body.tesae-nav-open .tesae-nav__bell-menu {
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: normal;
  }

  body.tesae-nav-open .tesae-burger {
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  body.tesae-nav-open .tesae-burger__bar {
    display: none;
  }

  body.tesae-nav-open .tesae-burger__close-mark {
    display: block;
  }

  /* Figma 723:3760: the bell opens a full-screen green panel here, not the desktop
     card hanging off the header. The header floats over it so the burger stays
     reachable, and the panel's close sits in the bell's own slot. */
  .tesae-notification {
    position: fixed;
    inset: 0;
    z-index: var(--tesae-z-overlay);
    right: 0;
    width: auto;
    min-height: 0;
    max-height: none;
    padding: var(--tesae-notification-mobile-title-top)
      var(--tesae-notification-mobile-inset) 0;
    border: 0;
    border-radius: 0;
    background: var(--tesae-color-primary-soft);
    overflow: hidden;
    overscroll-behavior: contain;
  }

  body.tesae-notification-open {
    overflow: hidden;
  }

  body.tesae-notification-open .tesae-header {
    z-index: var(--tesae-z-modal);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The close stands in for the bell, so the bell itself steps aside. */
  body.tesae-notification-open .tesae-nav__bell {
    visibility: hidden;
  }

  /* The panel lives inside the header, so it paints over the burger; the burger is
     lifted back above it, since the frame keeps it reachable over the open panel. */
  body.tesae-notification-open .tesae-burger {
    position: relative;
    z-index: var(--tesae-z-modal);
  }

  .tesae-notification__close {
    top: var(--tesae-notification-mobile-close-top);
    right: var(--tesae-notification-mobile-close-end);
    width: var(--tesae-icon-badge);
    height: var(--tesae-icon-badge);
    background: var(--tesae-color-white);
  }

  .tesae-notification__close:hover,
  .tesae-notification__close:focus-visible {
    background: var(--tesae-color-white);
  }

  .tesae-notification__close-mark {
    width: var(--tesae-notification-mobile-close-line);
    height: var(--tesae-notification-mobile-close-line);
  }

  /* The exports are white strokes; the frame draws the mark black on white. */
  .tesae-notification__close-line {
    width: var(--tesae-notification-mobile-close-line);
    height: var(--tesae-notification-mobile-close-stroke);
    filter: brightness(0);
  }

  /* Content sits on the frame's own numbers: 32/1.2 title, 16/1.29 body, and the
     offer separated by the blank line the text layer carries. */
  /* Already 32/1.2; it was the 300px cap that pushed it onto a third line. */
  .tesae-notification__title {
    max-width: none;
  }

  /* The designer's break is composition for the desktop card. The global rule drops
     it below 991, but the card's own rule outranks that, so it is repeated here. */
  .tesae-notification__title .tesae-break {
    display: none;
  }

  /* Green on the white chip here, where the desktop card sets it black. */
  .tesae-notification__title .tesae-hl {
    color: var(--tesae-color-primary-soft);
  }

  .tesae-notification__copy {
    max-width: none;
    margin-top: var(--tesae-notification-mobile-copy-gap);
    margin-left: var(--tesae-notification-mobile-copy-inset);
    font-size: var(--tesae-fs-body);
    line-height: var(--tesae-lh-snug);
  }

  .tesae-notification__offer {
    max-width: none;
    margin-top: var(--tesae-notification-mobile-offer-gap);
    margin-left: var(--tesae-notification-mobile-copy-inset);
    font-size: var(--tesae-fs-body);
    line-height: var(--tesae-lh-snug);
  }

  /* The desktop card stacks the label over the date; the frame runs them as one line. */
  .tesae-notification__offer span {
    display: inline;
  }

  .tesae-notification .tesae-button {
    width: var(--tesae-notification-mobile-button-width);
    min-height: var(--tesae-notification-mobile-button-height);
    height: var(--tesae-notification-mobile-button-height);
    margin-top: var(--tesae-notification-mobile-button-gap);
    margin-left: var(--tesae-notification-mobile-button-inset);
    padding: 0;
    font-size: var(--tesae-fs-body);
  }

  .tesae-nav {
    display: none;
  }

  .tesae-mobile-menu:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: var(--tesae-z-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100dvh;
    padding: var(--tesae-mobile-menu-list-top) 0 var(--tesae-mobile-menu-bottom-space);
    outline: var(--tesae-mobile-menu-border-width) solid var(--tesae-color-ink);
    background: var(--tesae-color-ink);
    color: var(--tesae-color-white);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tesae-mobile-menu__list {
    display: grid;
    grid-auto-rows: var(--tesae-mobile-menu-item-line-box);
    row-gap: calc(
      var(--tesae-mobile-menu-row-step) - var(--tesae-mobile-menu-item-line-box)
    );
    justify-items: center;
    width: 100%;
  }

  .tesae-mobile-menu__list li,
  .tesae-mobile-menu__list a {
    height: var(--tesae-mobile-menu-item-line-box);
  }

  .tesae-mobile-menu__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: var(--tesae-mobile-menu-font-size);
    font-weight: var(--tesae-fw-medium);
    line-height: var(--tesae-mobile-menu-line-height);
    text-align: center;
    white-space: nowrap;
  }

  .tesae-mobile-menu__list a:hover,
  .tesae-mobile-menu__list a:focus-visible {
    color: var(--tesae-color-primary-soft);
  }

  .tesae-mobile-menu__socials {
    position: relative;
    flex: 0 0 auto;
    width: min(
      var(--tesae-mobile-menu-social-width),
      calc(100vw - (var(--tesae-gutter) * 2))
    );
    height: var(--tesae-mobile-menu-social-height);
    margin-top: var(--tesae-mobile-menu-social-gap);
  }

  .tesae-mobile-menu__socials-art {
    width: 100%;
    height: 100%;
  }

  .tesae-mobile-menu__social-links {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, var(--tesae-mobile-menu-social-item-width));
    column-gap: var(--tesae-mobile-menu-social-item-gap);
  }

  .tesae-mobile-menu__social-links a {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Same construction as desktop, smaller: the black rectangle is painted by the
     footer itself so the photograph can hang over its top edge, with the copy above
     both. */
  .tesae-footer {
    position: relative;
  }

  .tesae-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--tesae-footer-mobile-band-height);
    z-index: 1;
    height: var(--tesae-footer-mobile-bar-height);
    background: var(--tesae-color-black);
  }

  .tesae-footer__band {
    position: relative;
    z-index: 2;
    height: var(--tesae-footer-mobile-band-height);
    overflow: visible;
  }

  /* Centred rather than pushed left by a percentage: once the width is capped, a
     percentage offset would drag the picture off to one side. Figma's box is all but
     centred anyway — 190.1 against the frame's 195 — hence the small nudge. */
  .tesae-footer__band-image {
    position: absolute;
    left: 50%;
    top: var(--tesae-footer-mobile-band-top);
    width: min(var(--tesae-footer-mobile-band-width), var(--tesae-footer-mobile-band-max));
    height: auto;
    aspect-ratio: var(--tesae-footer-mobile-band-ratio);
    max-width: none;
    margin-left: 0;
    /* Figma fills the rect with object-cover: the export is taller than the box, so
       it is cropped top and bottom rather than squashed into it. */
    object-fit: cover;
    transform: translateX(calc(-50% + var(--tesae-footer-mobile-band-nudge)))
      rotate(var(--tesae-footer-mobile-band-rotate));
  }

  .tesae-footer__bar {
    position: relative;
    z-index: 3;
    min-height: var(--tesae-footer-mobile-bar-height);
    padding-block: 0;
    background: transparent;
  }

  .tesae-footer__inner {
    position: relative;
    display: block;
    min-height: var(--tesae-footer-mobile-bar-height);
    padding-inline: var(--tesae-footer-mobile-gutter);
  }

  .tesae-footer__brand {
    position: absolute;
    left: var(--tesae-footer-mobile-gutter);
    top: var(--tesae-footer-mobile-socials-top);
  }

  .tesae-footer__logo {
    width: var(--tesae-footer-mobile-social-width);
  }

  .tesae-footer__nav {
    position: absolute;
    left: var(--tesae-footer-mobile-gutter);
    top: var(--tesae-footer-mobile-links-top);
  }

  .tesae-footer__list {
    flex-direction: row;
    gap: var(--tesae-footer-mobile-links-gap);
  }

  .tesae-footer__copyright {
    position: absolute;
    left: var(--tesae-footer-mobile-gutter);
    top: var(--tesae-footer-mobile-copy-top);
    width: auto;
  }

  /* Figma sets both at 12/1.6; the body's 1.5 was leaving the two rows a touch tight. */
  .tesae-footer__list a,
  .tesae-footer__copyright {
    font-size: var(--tesae-fs-footer-mobile);
    line-height: var(--tesae-lh-loose);
  }

  .tesae-footer__top {
    position: absolute;
    right: var(--tesae-footer-mobile-top-btn-right);
    top: var(--tesae-footer-mobile-top-btn-top);
    bottom: auto;
    width: var(--tesae-footer-mobile-top-btn-width);
    height: var(--tesae-footer-mobile-top-btn-height);
    margin-left: 0;
  }

  .tesae-footer__top span {
    width: var(--tesae-footer-mobile-top-arrow-size);
    height: var(--tesae-footer-mobile-top-arrow-size);
    border-top-width: var(--tesae-footer-mobile-top-arrow-stroke);
    border-left-width: var(--tesae-footer-mobile-top-arrow-stroke);
  }

  /* ------------------------------------------------------ mobile bottom bar
     Figma 723:3738. Pinned to the foot of the viewport and revealed on the first
     scroll — it starts translated out of view rather than hidden, so the reveal
     can animate and the links stay in the DOM for assistive tech. */
  .tesae-bottombar {
    display: block;
    position: fixed;
    z-index: var(--tesae-z-bottombar);
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--tesae-bottombar-height);
    padding: var(--tesae-bottombar-pad-top) var(--tesae-bottombar-pad-x) 0;
    background: var(--tesae-color-primary);
    /* Below the notch on phones that have one. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--tesae-transition), visibility var(--tesae-transition);
  }

  .tesae-bottombar.is-visible {
    transform: translateY(0);
    visibility: visible;
  }

  /* Four equal columns, matching the frame's ~90px steps in a 390 band. */
  .tesae-bottombar__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tesae-bottombar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tesae-bottombar-icon-gap);
    color: var(--tesae-color-white);
    text-align: center;
    text-decoration: none;
  }

  .tesae-bottombar__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: var(--tesae-bottombar-icon-size);
  }

  /* The exports are already white, so no filter — each keeps its own width. */
  .tesae-bottombar__icon img {
    width: auto;
    max-height: 100%;
  }

  .tesae-bottombar__label {
    font-size: var(--tesae-bottombar-label-size);
    font-weight: var(--tesae-fw-medium);
    line-height: var(--tesae-lh-tight);
  }

  .tesae-bottombar__link:hover .tesae-bottombar__label,
  .tesae-bottombar__link:focus-visible .tesae-bottombar__label {
    text-decoration: underline;
  }

  /* The bar hides itself once the footer reaches it (see initBottomBar), so the
     footer needs no reserved strip — which also puts its height back on the frame's. */
}