/* ============================================================================
   TESAE — base layer.
   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;
scroll-padding-top: calc(
    20px + clamp(70px, 3.3369vw + 36.931px, 101px) + clamp(16px, 0.6611vw + 7.466px, 24px)
  )}

body {margin: 0;
background: #ffffff;
color: #000000;
font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 400;
line-height: 1.5;
/* 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 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

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 #cb1716;
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(1744px + clamp(16px, 7.7503vw - 60.814px, 88px) * 2);
margin-inline: auto;
padding-inline: clamp(16px, 7.7503vw - 60.814px, 88px)}

.tesae-section {position: relative;
padding-block: clamp(64px, 8.1808vw - 17.072px, 140px)}

.tesae-main {position: relative;
isolation: isolate;
container-type: inline-size;
container-name: tesae-page}

.tesae-section--tint {background: #f6f6f6}

.tesae-section--dark {background: #000000;
color: #ffffff}

.tesae-skip-link {position: absolute;
left: -9999px;
z-index: 300;
padding: clamp(12px, 0.4306vw + 7.733px, 16px) clamp(16px, 0.6611vw + 7.466px, 24px);
background: #cb1716;
color: #ffffff}

.tesae-skip-link:focus {left: clamp(12px, 0.4306vw + 7.733px, 16px);
top: clamp(12px, 0.4306vw + 7.733px, 16px)}

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

.tesae-display {font-size: clamp(43px, 7.2874vw - 29.218px, 110.7px);
font-weight: 800;
line-height: 0.84;
letter-spacing: -0.05em;
text-transform: uppercase}

.tesae-h1 {font-size: clamp(32px, 3.5522vw - 3.202px, 65px);
font-weight: 700;
line-height: 1.2}

.tesae-h2 {font-size: clamp(30px, 1.3994vw + 18.132px, 40px);
font-weight: 800;
line-height: 1.2}

.tesae-h2--light {font-weight: 300}

.tesae-h2--light strong {font-weight: 800}

.tesae-h3 {font-size: clamp(20px, 0.8611vw + 11.466px, 28px);
font-weight: 800;
line-height: 1.26}

.tesae-lead {font-size: clamp(16px, 0.6459vw + 9.600px, 22px);
font-weight: 400;
line-height: 1.5}

.tesae-text-primary {color: #cb1716}

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

.tesae-button {display: inline-flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 0.4306vw + 7.733px, 16px);
padding: 12px 30px;
border-radius: 10px;
font-size: clamp(16px, 0.4306vw + 11.733px, 20px);
font-weight: 700;
line-height: 1.6;
text-align: center;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-button--primary {background: #cb1716;
color: #ffffff;
width: 249px;
height: 60px;
min-height: 60px;
padding-block: 0}

.tesae-button--primary:hover,
.tesae-button--primary:focus-visible {background: #a01211;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12)}

.tesae-button--dark {background: #5c0022;
color: #ffffff}

.tesae-button--dark:hover,
.tesae-button--dark:focus-visible {background: #3d0016;
transform: translateY(-2px);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12)}

.tesae-button--ghost {background: transparent;
color: #000000;
border: 1px solid currentColor}

.tesae-button--ghost:hover,
.tesae-button--ghost:focus-visible {background: #000000;
color: #ffffff}

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

.tesae-header {position: sticky;
top: 20px;
z-index: 100;
width: calc(100% - 16px - 15px);
margin-top: 20px;
margin-right: 15px;
margin-left: 16px;
border-radius: 10px 10px 10px 10px;
background: rgba(251, 240, 240, 0.43);
backdrop-filter: blur(26px);
-webkit-backdrop-filter: blur(26px)}

.tesae-header__inner {position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 0.6611vw + 7.466px, 24px);
min-height: clamp(64px, 3.9828vw + 24.531px, 101px);
max-width: none;
padding-inline: 20px}

.tesae-header__logo img {width: auto;
max-height: clamp(48px, 3.6598vw + 11.733px, 82px)}

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

.tesae-header__actions {display: flex;
align-items: center;
gap: 8px}

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

.tesae-nav {display: flex;
align-items: center;
gap: clamp(24px, 1.7223vw + 6.932px, 40px)}

.tesae-nav__list {display: flex;
align-items: center;
gap: clamp(24px, 1.7223vw + 6.932px, 40px);
flex-wrap: wrap}

.tesae-nav__list a {font-size: clamp(16px, 0.4306vw + 11.733px, 20px);
font-weight: 500;
white-space: nowrap}

.tesae-nav__list a:hover,
.tesae-nav__list .current-menu-item > a {color: #cb1716}

.tesae-nav__bell {display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: clamp(44px, 1.7223vw + 26.93px, 60px);
height: clamp(44px, 1.7223vw + 26.93px, 60px);
padding: 0;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

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

.tesae-nav__bell:hover {transform: translateY(calc(2px * -1))}

.tesae-notification {position: absolute;
top: calc(100% + 24px);
right: 0;
z-index: 200;
width: min(
    382px,
    calc(100vw - (clamp(16px, 7.7503vw - 60.814px, 88px) * 2))
  );
min-height: min(
    587px,
    calc(
      100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
        clamp(12px, 0.4306vw + 7.733px, 16px)
    )
  );
max-height: calc(
    100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
      clamp(12px, 0.4306vw + 7.733px, 16px)
  );
padding: calc(130px - 2px)
    calc(12px - 2px)
    calc(48px - 2px)
    calc(46px - 2px);
border: 2px solid #f0d4d4;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 4px 45.3px rgba(0, 0, 0, 0.68);
overflow-y: auto;
overscroll-behavior: contain}

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

.tesae-notification__close {position: absolute;
top: calc(15px - 2px);
right: calc(16px - 2px);
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
padding: 0;
border-radius: 10px;
background: #000000;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-notification__close:hover,
.tesae-notification__close:focus-visible {background: #252525;
transform: translateY(calc(2px * -1))}

.tesae-notification__close-mark {position: relative;
display: block;
width: 37.7211px;
height: 37.7211px}

.tesae-notification__close-line {position: absolute;
top: 50%;
left: 0;
width: 37.7211px;
height: 3px;
max-width: none;
transform-origin: center}

.tesae-notification__close-line--a {transform: translateY(-50%)
    rotate(45deg)}

.tesae-notification__close-line--b {transform: translateY(-50%)
    rotate(calc(45deg * -1))}

.tesae-notification__title {width: 100%;
max-width: 324px;
font-size: clamp(32px, 0vw + 32px, 32px);
font-weight: 300;
line-height: 1.2;
overflow-wrap: break-word}

.tesae-notification__title strong {font-weight: 800}

.tesae-notification__title .tesae-hl {display: inline-block;
padding: 1px
    4px;
background: #ffffff;
color: #000000;
line-height: 1}

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

.tesae-notification__copy {width: 100%;
max-width: 311px;
margin-top: 21px;
font-size: clamp(18px, 0vw + 18px, 18px);
font-weight: 400;
line-height: 1.29;
overflow-wrap: break-word}

.tesae-notification__copy strong {font-weight: 800}

.tesae-notification__offer {width: 100%;
max-width: 311px;
margin-top: 23.22px;
font-size: clamp(18px, 0vw + 18px, 18px);
font-weight: 800;
line-height: 1.29}

.tesae-notification__offer span {display: block}

.tesae-notification__cta {width: 249px;
min-height: 59.6433px;
margin-top: 28px;
padding: 0;
font-size: clamp(20px, 0vw + 20px, 20px)}

.tesae-burger {position: relative;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px;
border-radius: 10px}

.tesae-burger__bar {display: block;
width: 26px;
height: 2px;
background: #000000;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-burger__close-mark {position: relative;
display: none;
width: 25px;
height: 25px}

.tesae-burger__close-line {position: absolute;
top: 50%;
left: 50%;
width: 25px;
height: 2px;
max-width: none;
transform-origin: center}

.tesae-burger__close-line--a {transform: translate(-50%, -50%) rotate(45deg)}

.tesae-burger__close-line--b {transform: translate(-50%, -50%) rotate(calc(45deg * -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: #000000;
color: #ffffff;
padding-block: clamp(32px, 3.4446vw - 2.136px, 64px)}

.tesae-footer__inner {position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(24px, 1.7223vw + 6.932px, 40px);
justify-content: space-between}

.tesae-footer__brand {display: flex;
align-items: center;
gap: clamp(16px, 0.6611vw + 7.466px, 24px)}

.tesae-footer__logo {width: clamp(100px, 5.4898vw + 45.595px, 151px)}

.tesae-footer__socials {display: flex;
gap: clamp(9.2px, 0.6243vw + 3.013px, 15px);
margin: 0;
padding: 0;
list-style: none}

.tesae-footer__socials a {display: block;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.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: clamp(38.4px, 3.1862vw + 6.825px, 68px);
height: auto}

.tesae-footer__list {display: flex;
flex-wrap: wrap;
gap: clamp(24px, 1.7223vw + 6.932px, 40px)}

.tesae-footer__list a {font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 500}

.tesae-footer__list a:hover {color: #ffffff}

.tesae-footer__copyright {width: 100%;
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 500}

.tesae-footer__top {position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(44px, 1.7223vw + 26.93px, 60px);
height: clamp(44px, 1.7223vw + 26.93px, 60px);
margin-left: auto;
border-radius: 10px;
background: #ffffff;
color: #000000}

/* 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: 18px;
height: 18px;
border-top: 3px solid currentColor;
border-left: 3px solid currentColor;
transform: translateY(25%) rotate(45deg)}

@media (min-width: 992px) {
  .tesae-header__inner {justify-content: flex-start;
gap: clamp(8px, 0.5405vw + 0.622px, 11px)}

  .tesae-nav {gap: clamp(21px, 2.7027vw - 5.892px, 46px);
margin-left: auto}

  .tesae-nav__list {gap: clamp(22px, 2.1622vw + 0.486px, 42px)}

  .tesae-nav__cta {width: clamp(171px, 8.3784vw + 88.135px, 249px);
min-height: 60px;
height: 60px;
padding: 0}

  .tesae-footer {position: relative;
height: auto;
overflow: visible}

  .tesae-footer::before {content: '';
position: absolute;
left: 0;
right: 0;
top: 319px;
z-index: 1;
height: 477px;
background: #000000}

  .tesae-footer__band {position: absolute;
inset: 0 0 auto;
z-index: 2;
height: 828px;
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: 120.94%;
height: auto;
max-width: none;
margin-left: -8.28%;
transform: rotate(5deg)}

  .tesae-footer__bar {position: absolute;
left: 0;
right: 0;
top: 319px;
z-index: 3;
height: 477px;
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: 130px;
transform: translateX(-50%)}

  .tesae-footer__nav {position: absolute;
left: clamp(16px, 7.7503vw - 60.814px, 88px);
top: 363px}

  .tesae-footer__list {gap: 64px}

  .tesae-footer__copyright {position: absolute;
left: clamp(16px, 7.7503vw - 60.814px, 88px);
top: 408px;
width: auto}

  .tesae-footer__top {position: absolute;
right: clamp(16px, 7.7503vw - 60.814px, 88px);
top: 369px;
width: 57px;
height: 59px;
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: 300;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none}

  .tesae-header__inner {padding-inline: clamp(16px, 7.7503vw - 60.814px, 88px)}

  .tesae-burger {display: flex;
width: clamp(44px, 1.5070vw + 29.07px, 58px);
height: clamp(44px, 1.5070vw + 29.07px, 58px);
background: #000000}

  .tesae-burger__bar {background: #ffffff}

  .tesae-header__logo img {max-width: 145px}

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

  body.tesae-nav-open .tesae-mobile-menu__brand {position: absolute;
top: 8.3538px;
left: 11px;
display: block;
width: 136.7512px;
height: 45.6462px}

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

  .tesae-mobile-menu__brand-image--mark {top: 0;
left: 0;
width: 47.7692px;
height: 45.6462px}

  .tesae-mobile-menu__brand-image--word {top: 14.8615px;
left: 47.7692px;
width: 88.9819px;
height: 15.9231px}

  .tesae-nav__bell {width: clamp(44px, 1.5070vw + 29.07px, 58px);
height: clamp(44px, 1.5070vw + 29.07px, 58px);
background: #5c0022}

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

  body.tesae-nav-open .tesae-header__actions {position: absolute;
top: 10.5px;
right: 8px;
gap: 11px}

  body.tesae-nav-open .tesae-nav__bell,
  body.tesae-nav-open .tesae-burger {width: 45px;
height: 45px}

  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: 200;
right: 0;
width: auto;
min-height: 0;
max-height: none;
padding: 165.95px
      23.25px 0;
border: 0;
border-radius: 0;
background: #ffffff;
overflow: hidden;
overscroll-behavior: contain}

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

  body.tesae-notification-open .tesae-header {z-index: 300;
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: 300}

  .tesae-notification__close {top: 10px;
right: 68px;
width: clamp(44px, 1.5070vw + 29.07px, 58px);
height: clamp(44px, 1.5070vw + 29.07px, 58px);
background: #ffffff}

  .tesae-notification__close:hover,
  .tesae-notification__close:focus-visible {background: #ffffff}

  .tesae-notification__close-mark {width: 25px;
height: 25px}

  /* The exports are white strokes; the frame draws the mark black on white. */
  .tesae-notification__close-line {width: 25px;
height: 2px;
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: #cb1716}

  .tesae-notification__copy {max-width: none;
margin-top: 41.8px;
margin-left: 3px;
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
line-height: 1.26}

  .tesae-notification__offer {max-width: none;
margin-top: 20.64px;
margin-left: 3px;
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
line-height: 1.26}

  /* 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: 179.13px;
min-height: 47px;
height: 47px;
margin-top: 61.1px;
margin-left: 1.38px;
padding: 0;
font-size: clamp(16px, 0.2153vw + 13.866px, 18px)}

  .tesae-nav {display: none}

  .tesae-mobile-menu:not([hidden]) {position: fixed;
inset: 0;
z-index: 200;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100dvh;
padding: clamp(104px, 17.1206dvh, 132px) 0 clamp(40px, 11.5975dvh, 89.417px);
outline: 3px solid #252525;
background: #252525;
color: #ffffff;
overflow-y: auto;
overscroll-behavior: contain}

  .tesae-mobile-menu__list {display: grid;
grid-auto-rows: 26.84px;
row-gap: calc(
      clamp(66px, 10.1946dvh, 78.6px) - 26.84px
    );
justify-items: center;
width: 100%}

  .tesae-mobile-menu__list li,
  .tesae-mobile-menu__list a {height: 26.84px}

  .tesae-mobile-menu__list a {display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: clamp(22px, 0vw + 22px, 22px);
font-weight: 500;
line-height: 1.22;
text-align: center;
white-space: nowrap}

  .tesae-mobile-menu__list a:hover,
  .tesae-mobile-menu__list a:focus-visible {color: #cb1716}

  .tesae-mobile-menu__socials {position: relative;
flex: 0 0 auto;
width: min(
      245.0641px,
      calc(100vw - (clamp(16px, 7.7503vw - 60.814px, 88px) * 2))
    );
height: 53.5829px;
margin-top: clamp(48px, 9.8781dvh, 76.16px)}

  .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, 51.9221px);
column-gap: 12.4583px}

  .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: 132px;
z-index: 1;
height: 286px;
background: #000000}

  .tesae-footer__band {position: relative;
z-index: 2;
height: 132px;
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: -21.9px;
width: min(214.73%, 1000px);
height: auto;
aspect-ratio: 837.432 / 296.872;
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% + -4.9px))
      rotate(-1.36deg)}

  .tesae-footer__bar {position: relative;
z-index: 3;
min-height: 286px;
padding-block: 0;
background: transparent}

  .tesae-footer__inner {position: relative;
display: block;
min-height: 286px;
padding-inline: 23px}

  .tesae-footer__brand {position: absolute;
left: 23px;
top: 153px}

  .tesae-footer__logo {width: 82px}

  .tesae-footer__nav {position: absolute;
left: 23px;
top: 207.4px}

  .tesae-footer__list {flex-direction: row;
gap: 18px}

  .tesae-footer__copyright {position: absolute;
left: 23px;
top: 236.4px;
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: 12px;
line-height: 1.6}

  .tesae-footer__top {position: absolute;
right: 25px;
top: 154.4px;
bottom: auto;
width: 36px;
height: 37px;
margin-left: 0}

  .tesae-footer__top span {width: 12.75px;
height: 12.75px;
border-top-width: 2.1px;
border-left-width: 2.1px}

  /* ------------------------------------------------------ mobile bottom bar
     Figma 4414:309 Group 2535 — 390×60, #5c0022, Manrope Medium 11 / lh 1.22.
     Pinned to the foot of the viewport and revealed on the first scroll. */
  .tesae-bottombar {display: block;
position: fixed;
z-index: 90;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
height: 60px;
padding: 11px 0 0;
background: #5c0022;
padding-bottom: env(safe-area-inset-bottom, 0);
transform: translateY(100%);
visibility: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

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

  .tesae-bottombar__list {display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
height: 100%;
margin: 0;
padding: 0;
list-style: none}

  .tesae-bottombar__link {display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
color: #ffffff;
text-align: center;
text-decoration: none}

  .tesae-bottombar__icon {display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 19px}

  /* Figma exports are already white — keep each mark’s native width/height. */
  .tesae-bottombar__icon img {display: block;
width: auto;
height: auto;
max-height: 19px}

  .tesae-bottombar__label {font-size: 11px;
font-weight: 500;
line-height: 1.22;
white-space: nowrap;
text-box: trim-both cap alphabetic}

  .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. */
}


/* Fluid desktop and laptop tiers, inlined from the old custom properties. */

@media (min-width: 992px) {
html {scroll-padding-top: calc(
    20px + clamp(70px, 3.3369vw + 36.931px, 101px) + clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)
  )}
body {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-section {padding-block: clamp(56px, 140 * min(100vw / 1920, 100svh / 953) * 1, 140px)}
.tesae-skip-link {padding: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px) clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-skip-link:focus {left: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px);
top: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)}
.tesae-display {font-size: clamp(43px, 110.7 * min(100vw / 1920, 100svh / 953), 110.7px)}
.tesae-h1 {font-size: clamp(30px, 65 * min(100vw / 1920, 100svh / 953), 65px)}
.tesae-h2 {font-size: clamp(26px, 40 * min(100vw / 1920, 100svh / 953), 40px)}
.tesae-h3 {font-size: clamp(18px, 28 * min(100vw / 1920, 100svh / 953), 28px)}
.tesae-lead {font-size: clamp(16px, 22 * min(100vw / 1920, 100svh / 953), 22px)}
.tesae-button {gap: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px);
font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-header__inner {gap: clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-nav {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-nav__list {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-nav__list a {font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-notification {min-height: min(
    587px,
    calc(
      100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
        clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)
    )
  );
max-height: calc(
    100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
      clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)
  )}
.tesae-notification__title {font-size: clamp(24px, 32 * min(100vw / 1920, 100svh / 953), 32px)}
.tesae-notification__copy {font-size: clamp(15px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-notification__offer {font-size: clamp(15px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-notification__cta {font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-footer__bar {padding-block: clamp(28px, 64 * min(100vw / 1920, 100svh / 953) * 1, 64px)}
.tesae-footer__inner {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-footer__brand {gap: clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-footer__list {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-footer__list a {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-footer__copyright {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
}

@media (min-width: 992px) and (max-width: 1600px),
       (min-width: 992px) and (max-height: 900px) {
html {scroll-padding-top: calc(
    20px + clamp(70px, 3.3369vw + 36.931px, 101px) + clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)
  )}
body {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-section {padding-block: clamp(56px, 140 * min(100vw / 1920, 100svh / 953) * 1, 140px)}
.tesae-skip-link {padding: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px) clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-skip-link:focus {left: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px);
top: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)}
.tesae-display {font-size: clamp(43px, 110.7 * min(100vw / 1920, 100svh / 953), 110.7px)}
.tesae-h1 {font-size: clamp(30px, 65 * min(100vw / 1920, 100svh / 953), 65px)}
.tesae-h2 {font-size: clamp(26px, 40 * min(100vw / 1920, 100svh / 953), 40px)}
.tesae-h3 {font-size: clamp(18px, 28 * min(100vw / 1920, 100svh / 953), 28px)}
.tesae-lead {font-size: clamp(16px, 22 * min(100vw / 1920, 100svh / 953), 22px)}
.tesae-button {gap: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px);
font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-button--primary {width: 210px;
height: 50px;
min-height: 50px}
.tesae-header__inner {gap: clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-nav {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-nav__list {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-nav__list a {font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-nav__bell {width: 50px;
height: 50px}
.tesae-notification {min-height: min(
    587px,
    calc(
      100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
        clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)
    )
  );
max-height: calc(
    100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
      clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)
  )}
.tesae-notification__title {font-size: clamp(24px, 32 * min(100vw / 1920, 100svh / 953), 32px)}
.tesae-notification__copy {font-size: clamp(15px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-notification__offer {font-size: clamp(15px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-notification__cta {width: 210px;
font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-footer__bar {padding-block: clamp(28px, 64 * min(100vw / 1920, 100svh / 953) * 1, 64px)}
.tesae-footer__inner {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-footer__brand {gap: clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-footer__list {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-footer__list a {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-footer__copyright {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-footer__top {width: 50px;
height: 50px}
}

@media (min-width: 992px) and (max-width: 1400px),
       (min-width: 992px) and (max-height: 740px) {
html {scroll-padding-top: calc(
    20px + clamp(70px, 3.3369vw + 36.931px, 101px) + clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)
  )}
body {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-section {padding-block: clamp(56px, 140 * min(100vw / 1920, 100svh / 953) * 1, 140px)}
.tesae-skip-link {padding: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px) clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-skip-link:focus {left: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px);
top: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)}
.tesae-display {font-size: clamp(43px, 110.7 * min(100vw / 1920, 100svh / 953), 110.7px)}
.tesae-h1 {font-size: clamp(30px, 65 * min(100vw / 1920, 100svh / 953), 65px)}
.tesae-h2 {font-size: clamp(26px, 40 * min(100vw / 1920, 100svh / 953), 40px)}
.tesae-h3 {font-size: clamp(18px, 28 * min(100vw / 1920, 100svh / 953), 28px)}
.tesae-lead {font-size: clamp(16px, 22 * min(100vw / 1920, 100svh / 953), 22px)}
.tesae-button {gap: clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px);
font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-button--primary {width: 190px;
height: 46px;
min-height: 46px}
.tesae-header__inner {gap: clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-nav {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-nav__list {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-nav__list a {font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-nav__bell {width: 46px;
height: 46px}
.tesae-notification {min-height: min(
    587px,
    calc(
      100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
        clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)
    )
  );
max-height: calc(
    100dvh - clamp(64px, 3.9828vw + 24.531px, 101px) - 24px -
      clamp(10px, 16 * min(100vw / 1920, 100svh / 953) * 1, 16px)
  )}
.tesae-notification__title {font-size: clamp(24px, 32 * min(100vw / 1920, 100svh / 953), 32px)}
.tesae-notification__copy {font-size: clamp(15px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-notification__offer {font-size: clamp(15px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-notification__cta {width: 190px;
font-size: clamp(15px, 20 * min(100vw / 1920, 100svh / 953), 20px)}
.tesae-footer__bar {padding-block: clamp(28px, 64 * min(100vw / 1920, 100svh / 953) * 1, 64px)}
.tesae-footer__inner {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-footer__brand {gap: clamp(14px, 24 * min(100vw / 1920, 100svh / 953) * 1, 24px)}
.tesae-footer__list {gap: clamp(20px, 40 * min(100vw / 1920, 100svh / 953) * 1, 40px)}
.tesae-footer__list a {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-footer__copyright {font-size: clamp(16px, 18 * min(100vw / 1920, 100svh / 953), 18px)}
.tesae-footer__top {width: 46px;
height: 46px}
}

@media ((min-width: 992px)) and ((min-width: 992px) and (max-width: 1600px)),
((min-width: 992px)) and ((min-width: 992px) and (max-height: 900px)) {
.tesae-nav__cta {width: 210px;
min-height: 50px;
height: 50px}
}

@media ((min-width: 992px)) and ((min-width: 992px) and (max-width: 1400px)),
((min-width: 992px)) and ((min-width: 992px) and (max-height: 740px)) {
.tesae-nav__cta {width: 190px;
min-height: 46px;
height: 46px}
}