/* Thermax REDD ask-bar. Every rule is scoped to .redd so nothing leaks into the theme. */
.redd{
  --redd-card:#f6f3f4;
  --redd-field:#fff;
  --redd-text:#111214;
  --redd-muted:#6f6d68;
  --redd-faint:#a3a19b;
  --redd-line:#e7e4df;
  --redd-accent:#ED3438;
  --redd-radius:20px;
  --redd-radius-sm:12px;
  max-width:1440px;margin:0 auto;padding:28px 24px;
  /* #IntroText is pinned and fades out as the page scrolls; an opaque, stacked section
     keeps it from showing through around the card. #wearthermax (z-index 2, later in the
     DOM) still slides over this one. */
  position:relative;z-index:2;background:#fff;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--redd-text);box-sizing:border-box}
.redd *,.redd *::before,.redd *::after{box-sizing:border-box}
.redd-card{display:grid;grid-template-columns:300px 1fr;align-items:center;gap:0;
  background:var(--redd-card);border:1px solid var(--redd-line);border-radius:var(--redd-radius);
  overflow:hidden;min-height:272px;isolation:isolate}
.redd .mascot{position:relative;align-self:stretch;display:flex;align-items:flex-end;
  justify-content:center;overflow:hidden}
/* The still stands in for the clip: the clip opens on a blank frame (the character walks
   in) and freezes on a blink at the end. It is its own layer, not the pane's background,
   because the video's edges are feathered and a background would show a second, standing
   mascot through them. It clears as playback begins and returns when it ends. */
.redd .mascot::before{content:'';position:absolute;inset:0;z-index:1;
  background:url('../assets/images/redd/mascot-still.jpg') center bottom / contain no-repeat;
  transition:opacity .2s ease-out}
.redd .mascot.playing::before{opacity:0}
.redd .mascot video{display:block;position:relative;z-index:2;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .25s ease-out;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 7%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 88%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 7%,#000 100%);
  mask-composite:intersect}
.redd .mascot.playing video{opacity:1}
.redd-main{padding:34px 40px;display:flex;flex-direction:column;gap:20px}
.redd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.redd-copy h2{margin:0 0 4px;font-size:26px;line-height:1.25;font-weight:600;
  letter-spacing:-.01em;color:var(--redd-text)}
.redd-copy p{margin:0;font-size:17px;font-weight:400;color:var(--redd-muted)}
.redd .ask{display:flex;align-items:center;gap:10px;background:var(--redd-field);
  border:1px solid var(--redd-line);border-radius:var(--redd-radius-sm);
  padding:8px 8px 8px 20px;margin:0;transition:border-color .15s,box-shadow .15s}
.redd .ask:focus-within{border-color:#cfccc6;box-shadow:0 0 0 4px rgba(237,52,56,.08)}
.redd .ask input{flex:1;min-width:0;border:0;outline:none;box-shadow:none;background:transparent;
  color:inherit;font:inherit;font-size:15px;padding:12px 0;height:auto}
.redd .ask input::placeholder{color:var(--redd-faint)}
.redd .ask button{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;padding:0;
  border:0;border-radius:10px;background:var(--redd-accent);color:#fff;cursor:pointer;
  transition:filter .15s,transform .15s}
.redd .ask button:hover{filter:brightness(.93)}
.redd .ask button:active{transform:scale(.96)}
.redd .ask button:disabled{opacity:.45;cursor:default}
.redd .ask button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.redd .redd-logo{display:block;flex:0 0 auto;width:118px;height:auto;margin-top:2px;
  mix-blend-mode:multiply}

@media (max-width:1040px){
  .redd-card{grid-template-columns:220px 1fr}
  .redd-main{padding:28px}
  .redd .redd-logo{width:100px}
}
@media (max-width:760px){
  .redd{padding:18px 16px}
  .redd-card{grid-template-columns:minmax(0,1fr);min-height:0}
  .redd-main{min-width:0}
  .redd .mascot{height:200px}
  .redd-main{padding:22px 20px 24px;gap:16px}
  .redd-top{gap:14px}
  .redd-copy h2{font-size:21px}
  .redd-copy p{font-size:15px}
  .redd .redd-logo{width:84px}
  .redd .ask{padding:6px 6px 6px 16px;border-radius:12px}
  .redd .ask input{padding:10px 0;width:auto}
  .redd .ask button{width:42px;height:42px}
}
@media (pointer:coarse){.redd .ask input{font-size:16px}}
@media (prefers-reduced-motion:reduce){.redd .ask button{transition:none}}

/* ── popup (opened from the header search icon) ─────────────────────────── */
.redd-popup{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(17,18,20,.55);overflow-y:auto}
.redd-popup[hidden]{display:none}
html.redd-popup-open{overflow:hidden}
.redd-popup__dialog{position:relative;width:min(1100px,100%);margin:auto}
.redd-popup .redd{padding:0}
.redd-popup .redd-card{box-shadow:0 30px 80px -12px rgba(0,0,0,.4)}
.redd-popup__close{position:absolute;top:-44px;right:0;width:36px;height:36px;border:0;border-radius:50%;
  background:#fff;color:#111214;font-size:24px;line-height:1;cursor:pointer;padding:0}
.redd-popup__close:hover{background:#f6f3f4}
@media (max-width:760px){
  .redd-popup{align-items:flex-start;padding:56px 12px 16px}
}

/* Native search-field clear (×): the browser draws it blue here; draw it black instead. */
.redd .ask input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;
  height:16px;width:16px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23111214' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.redd-popup .redd{background:transparent}