/* =========================
   CRT Landing Header — base
   Responsive background + logo + tagline controls
   ========================= */

.crt-landing-header{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
  min-height:var(--crt-h);
  display:flex;
  justify-content:center;
  isolation:isolate;
  overflow:hidden;
  z-index:9999;
  box-sizing:border-box;
  background:var(--crt-bg-base, var(--crt-bg-solid, transparent));

  /* Background focus — default / desktop */
  --crt-bg-x-active:var(--crt-bg-x, 50%);
  --crt-bg-y-active:var(--crt-bg-y, 50%);
  --crt-bg-ox-active:var(--crt-bg-ox, 0px);
  --crt-bg-oy-active:var(--crt-bg-oy, 0px);
  --crt-bg-pos-active:calc(var(--crt-bg-x-active) + var(--crt-bg-ox-active)) calc(var(--crt-bg-y-active) + var(--crt-bg-oy-active));
  --crt-bg-zoom-active:var(--crt-bg-zoom, 1);

  /* Logo — default / desktop */
  --crt-logo-h-active:var(--crt-logo-h, 100px);
  --crt-logo-ox-active:var(--crt-logo-ox, 0px);
  --crt-logo-oy-active:var(--crt-logo-oy, 0px);

  /* Tagline — default / desktop */
  --crt-tag-align-active:var(--crt-tag-align, left);
  --crt-tag-fs-active:var(--crt-tag-fs, 20px);
  --crt-tag-maxw-active:var(--crt-tag-maxw, 760px);
  --crt-tag-lh-active:var(--crt-tag-lh, 1.15);
  --crt-tag-ox-active:var(--crt-tag-ox, 0px);
  --crt-tag-oy-active:var(--crt-tag-oy, 0px);

  transition:
    background-color .28s ease,
    box-shadow .28s ease,
    backdrop-filter .28s ease,
    -webkit-backdrop-filter .28s ease,
    transform .28s ease;
}

@supports (width:100dvw){
  .crt-landing-header{
    width:100dvw;
    margin-left:calc(50% - 50dvw);
    margin-right:calc(50% - 50dvw);
  }
}

.crt-landing-header.is-sticky{
  position:fixed;
  top:var(--crt-sticky-top, 0px);
  left:0;
  right:0;
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  z-index:99999;
}

.crt-landing-header.is-sticky.is-scrolled{
  backdrop-filter:blur(var(--crt-sticky-blur, 0px));
  -webkit-backdrop-filter:blur(var(--crt-sticky-blur, 0px));
  box-shadow:0 10px 28px rgba(0,0,0,var(--crt-sticky-shadow-opacity, 0));
}

.crt-landing-header::after{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:var(--crt-bg);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--crt-bg-pos-active);
  pointer-events:none;
  transform:scale(var(--crt-bg-zoom-active));
  transform-origin:var(--crt-bg-pos-active);
  will-change:transform;
  -webkit-clip-path:inset(2px);
  clip-path:inset(2px);
  z-index:0;
}

.crt-landing-header::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:var(--crt-overlay);
  pointer-events:none;
  transform:scale(var(--crt-bg-zoom-active));
  transform-origin:var(--crt-bg-pos-active);
  will-change:transform;
  -webkit-clip-path:inset(2px);
  clip-path:inset(2px);
  z-index:1;
}

.crt-landing-header__inner{
  position:relative;
  width:100%;
  max-width:min(100%, max(var(--crt-maxw, 1680px), 1180px));
  min-height:var(--crt-h);
  padding-top:var(--crt-pt);
  padding-bottom:var(--crt-pb);
  padding-left:calc(var(--crt-pl) + env(safe-area-inset-left));
  padding-right:calc(var(--crt-pr) + env(safe-area-inset-right));
  display:grid;
  grid-template-columns:auto minmax(280px, 1fr) auto;
  align-items:center;
  column-gap:var(--crt-gap);
  z-index:2;
  overflow:visible;
  box-sizing:border-box;
}

.crt-landing-header__logo{
  transform:translate(var(--crt-logo-ox-active), var(--crt-logo-oy-active));
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  max-width:100%;
  text-decoration:none;
}

.crt-landing-header__logo img{
  max-height:var(--crt-logo-h-active);
  max-width:100%;
  height:auto;
  width:auto;
  display:block;
}

.crt-landing-header__logo-fallback{
  color:#fff;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

.crt-landing-header__tagline-wrap{
  min-width:0;
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  max-width:100%;
}

.crt-landing-header__tagline-wrap.is-empty{
  min-height:1px;
}

.crt-landing-header__tagline{
  max-width:min(var(--crt-tag-maxw-active), 100%);
  width:auto;
  min-width:0;
  margin:0;
  transform:translate(var(--crt-tag-ox-active), var(--crt-tag-oy-active));
  color:var(--crt-tag-color, #fff);
  font-size:var(--crt-tag-fs-active);
  font-weight:var(--crt-tag-fw, 500);
  line-height:var(--crt-tag-lh-active);
  letter-spacing:0;
  text-align:var(--crt-tag-align-active);
  text-wrap:balance;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:manual;
}

.crt-lang{
  position:relative;
  z-index:10;
  flex:0 0 auto;
  overflow:visible;
  justify-self:end;
  transform:translate(var(--crt-switch-ox), var(--crt-switch-oy));
}

.crt-lang__summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--crt-switch-minw, 72px);
  padding:var(--crt-switch-py, 10px) var(--crt-switch-px, 12px);
  border-radius:var(--crt-switch-radius, 999px);
  background:var(--crt-switch-bg, rgba(0,0,0,.25));
  border:1px solid var(--crt-switch-border, rgba(255,255,255,.25));
  color:var(--crt-switch-text, #fff);
  font-size:var(--crt-switch-fs, 14px);
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.crt-lang__panel{
  position:fixed;
  top:0;
  left:0;
  z-index:2147483000;
  min-width:140px;
  max-width:min(220px, 88vw);
  max-height:min(260px, calc(100svh - 24px));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  padding:8px;
  border-radius:14px;
  background:var(--crt-switch-dd-bg, rgba(0,0,0,.55));
  border:1px solid var(--crt-switch-border, rgba(255,255,255,.18));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  display:none;
  flex-direction:column;
  gap:6px;
  pointer-events:auto;
}

.crt-lang__panel.is-open{
  display:flex;
}

.crt-lang__item{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  text-align:left;
  padding:10px 10px;
  border-radius:10px;
  border:0;
  background:rgba(255,255,255,0.10);
  color:var(--crt-switch-text, #fff);
  cursor:pointer;
  font-size:var(--crt-switch-fs, 14px);
  font-weight:600;
}

.crt-lang__item:hover{
  background:rgba(255,255,255,0.16);
}

.crt-lang__flag{
  width:20px;
  display:inline-flex;
  justify-content:center;
}

.crt-lang__item[disabled]{
  opacity:.5;
  cursor:default;
}


/* =========================
   1024–901px
   ========================= */

@media (max-width:1024px) and (min-width:901px){
  .crt-landing-header{
    --crt-bg-x-active:var(--crt-bg-x-lg, var(--crt-bg-x, 50%));
    --crt-bg-y-active:var(--crt-bg-y-lg, var(--crt-bg-y, 50%));
    --crt-bg-ox-active:var(--crt-bg-ox-lg, var(--crt-bg-ox, 0px));
    --crt-bg-oy-active:var(--crt-bg-oy-lg, var(--crt-bg-oy, 0px));
    --crt-bg-pos-active:calc(var(--crt-bg-x-active) + var(--crt-bg-ox-active)) calc(var(--crt-bg-y-active) + var(--crt-bg-oy-active));
    --crt-bg-zoom-active:var(--crt-bg-zoom-lg, var(--crt-bg-zoom, 1));

    --crt-logo-h-active:var(--crt-logo-h-lg, var(--crt-logo-h, 82px));
    --crt-logo-ox-active:var(--crt-logo-ox-lg, 0px);
    --crt-logo-oy-active:var(--crt-logo-oy-lg, 0px);

    --crt-tag-align-active:var(--crt-tag-align-lg, left);
    --crt-tag-fs-active:var(--crt-tag-fs-lg, 16px);
    --crt-tag-maxw-active:var(--crt-tag-maxw-lg, 640px);
    --crt-tag-lh-active:var(--crt-tag-lh-lg, 1.16);
    --crt-tag-ox-active:var(--crt-tag-ox-lg, 0px);
    --crt-tag-oy-active:var(--crt-tag-oy-lg, 0px);
  }
}


/* =========================
   900–769px
   ========================= */

@media (max-width:900px) and (min-width:769px){
  .crt-landing-header{
    --crt-bg-x-active:var(--crt-bg-x-t, var(--crt-bg-x-lg, var(--crt-bg-x, 50%)));
    --crt-bg-y-active:var(--crt-bg-y-t, var(--crt-bg-y-lg, var(--crt-bg-y, 50%)));
    --crt-bg-ox-active:var(--crt-bg-ox-t, var(--crt-bg-ox-lg, var(--crt-bg-ox, 0px)));
    --crt-bg-oy-active:var(--crt-bg-oy-t, var(--crt-bg-oy-lg, var(--crt-bg-oy, 0px)));
    --crt-bg-pos-active:calc(var(--crt-bg-x-active) + var(--crt-bg-ox-active)) calc(var(--crt-bg-y-active) + var(--crt-bg-oy-active));
    --crt-bg-zoom-active:var(--crt-bg-zoom-t, var(--crt-bg-zoom-lg, var(--crt-bg-zoom, 1)));

    --crt-logo-h-active:var(--crt-logo-h-t, var(--crt-logo-h-lg, var(--crt-logo-h, 68px)));
    --crt-logo-ox-active:var(--crt-logo-ox-t, 0px);
    --crt-logo-oy-active:var(--crt-logo-oy-t, 0px);

    --crt-tag-align-active:var(--crt-tag-align-t, left);
    --crt-tag-fs-active:var(--crt-tag-fs-t, 13px);
    --crt-tag-maxw-active:var(--crt-tag-maxw-t, 520px);
    --crt-tag-lh-active:var(--crt-tag-lh-t, 1.16);
    --crt-tag-ox-active:var(--crt-tag-ox-t, 0px);
    --crt-tag-oy-active:var(--crt-tag-oy-t, 0px);
  }
}


/* =========================
   768–481px
   ========================= */

@media (max-width:768px) and (min-width:481px){
  .crt-landing-header{
    --crt-bg-x-active:var(--crt-bg-x-m, var(--crt-bg-x-t, var(--crt-bg-x, 50%)));
    --crt-bg-y-active:var(--crt-bg-y-m, var(--crt-bg-y-t, var(--crt-bg-y, 50%)));
    --crt-bg-ox-active:var(--crt-bg-ox-m, var(--crt-bg-ox-t, var(--crt-bg-ox, 0px)));
    --crt-bg-oy-active:var(--crt-bg-oy-m, var(--crt-bg-oy-t, var(--crt-bg-oy, 0px)));
    --crt-bg-pos-active:calc(var(--crt-bg-x-active) + var(--crt-bg-ox-active)) calc(var(--crt-bg-y-active) + var(--crt-bg-oy-active));
    --crt-bg-zoom-active:var(--crt-bg-zoom-m, var(--crt-bg-zoom-t, var(--crt-bg-zoom, 1)));

    --crt-logo-h-active:var(--crt-logo-h-m, var(--crt-logo-h-t, var(--crt-logo-h, 54px)));
    --crt-logo-ox-active:var(--crt-logo-ox-m, 0px);
    --crt-logo-oy-active:var(--crt-logo-oy-m, 0px);

    --crt-tag-align-active:var(--crt-tag-align-m, left);
    --crt-tag-fs-active:var(--crt-tag-fs-m, 11px);
    --crt-tag-maxw-active:var(--crt-tag-maxw-m, 420px);
    --crt-tag-lh-active:var(--crt-tag-lh-m, 1.16);
    --crt-tag-ox-active:var(--crt-tag-ox-m, 0px);
    --crt-tag-oy-active:var(--crt-tag-oy-m, 0px);
  }
}


/* =========================
   480px and below
   ========================= */

@media (max-width:480px){
  .crt-landing-header{
    --crt-bg-x-active:var(--crt-bg-x-xs, var(--crt-bg-x-m, var(--crt-bg-x, 50%)));
    --crt-bg-y-active:var(--crt-bg-y-xs, var(--crt-bg-y-m, var(--crt-bg-y, 50%)));
    --crt-bg-ox-active:var(--crt-bg-ox-xs, var(--crt-bg-ox-m, var(--crt-bg-ox, 0px)));
    --crt-bg-oy-active:var(--crt-bg-oy-xs, var(--crt-bg-oy-m, var(--crt-bg-oy, 0px)));
    --crt-bg-pos-active:calc(var(--crt-bg-x-active) + var(--crt-bg-ox-active)) calc(var(--crt-bg-y-active) + var(--crt-bg-oy-active));
    --crt-bg-zoom-active:var(--crt-bg-zoom-xs, var(--crt-bg-zoom-m, var(--crt-bg-zoom, 1)));

    --crt-logo-h-active:var(--crt-logo-h-xs, var(--crt-logo-h-m, var(--crt-logo-h, 42px)));
    --crt-logo-ox-active:var(--crt-logo-ox-xs, 0px);
    --crt-logo-oy-active:var(--crt-logo-oy-xs, 0px);

    --crt-tag-align-active:var(--crt-tag-align-xs, left);
    --crt-tag-fs-active:var(--crt-tag-fs-xs, 10px);
    --crt-tag-maxw-active:var(--crt-tag-maxw-xs, 800px);
    --crt-tag-lh-active:var(--crt-tag-lh-xs, 1.1);
    --crt-tag-ox-active:var(--crt-tag-ox-xs, 0px);
    --crt-tag-oy-active:var(--crt-tag-oy-xs, -4px);
  }
}


/* =========================
   Layout — 1024px and below
   Keep logo, tagline and switcher on one line
   while preserving configured header height
   ========================= */

@media (max-width:1024px){
  .crt-landing-header{
    min-height:var(--crt-h);
    overflow:hidden;
  }

  .crt-landing-header__inner{
    min-height:var(--crt-h);
    max-width:100%;
    padding-top:14px;
    padding-bottom:14px;
    padding-left:calc(18px + env(safe-area-inset-left));
    padding-right:calc(18px + env(safe-area-inset-right));
    grid-template-columns:auto minmax(220px, 1fr) auto;
    grid-template-areas:"logo tagline switch";
    align-items:center;
    row-gap:0;
    column-gap:12px;
  }

  .crt-landing-header__logo{
    grid-area:logo;
    align-self:center;
    justify-self:start;
    min-width:0;
    max-width:100%;
  }

  .crt-landing-header__tagline-wrap{
    grid-area:tagline;
    min-width:0;
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    align-items:center;
  }

  .crt-landing-header__tagline{
    max-width:min(var(--crt-tag-maxw-active), 100%);
    width:auto;
    margin:0;
    white-space:normal;
    text-wrap:balance;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:manual;
  }

  .crt-lang{
    grid-area:switch;
    transform:none !important;
    justify-self:end;
    align-self:center;
  }

  .crt-lang__summary{
    min-width:auto;
    padding:8px 10px;
    font-size:12px;
  }

  .crt-lang__panel{
    min-width:132px;
  }
}


/* =========================
   Layout — 900px and below
   Slightly tighter but still one line
   ========================= */

@media (max-width:900px) and (min-width:601px){
  .crt-landing-header__inner{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
    grid-template-columns:auto minmax(160px, 1fr) auto;
    column-gap:10px;
  }
}


/* =========================
   Layout — 600px and below
   Stack tagline only on narrow mobile
   ========================= */

@media (max-width:600px){
  .crt-landing-header{
    min-height:0;
    overflow:hidden;
  }

  .crt-landing-header__inner{
    min-height:0;
    max-width:100%;
    padding-top:12px;
    padding-bottom:16px;
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:
      "logo switch"
      "tagline tagline";
    align-items:start;
    row-gap:8px;
    column-gap:12px;
  }

  .crt-landing-header__logo{
    align-self:start;
  }

  .crt-landing-header__tagline-wrap{
    justify-content:flex-start;
    align-items:flex-start;
  }

  .crt-landing-header__tagline{
    max-width:min(var(--crt-tag-maxw-active), 100%);
    transform:translate(var(--crt-tag-ox-active), var(--crt-tag-oy-active));
  }

  .crt-lang{
    align-self:start;
  }

  .crt-lang__summary{
    min-width:auto;
    padding:8px 10px;
    font-size:12px;
  }

  .crt-lang__panel{
    min-width:128px;
    max-height:min(240px, calc(100svh - 20px));
  }
}


/* =========================
   Layout — 480px and below
   ========================= */

@media (max-width:480px){
  .crt-landing-header__inner{
    padding-top:10px;
    padding-bottom:14px;
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right));
    row-gap:8px;
    column-gap:10px;
  }

  .crt-lang__summary{
    padding:7px 9px;
    font-size:11px;
  }

  .crt-lang__panel{
    min-width:124px;
    max-height:min(220px, calc(100svh - 16px));
  }
}


/* =========================
   Layout — 360px and below
   ========================= */

@media (max-width:360px){
  .crt-lang__summary{
    padding:6px 8px;
    font-size:11px;
  }

  .crt-lang__panel{
    min-width:118px;
  }
}