/* ===== MAO — pixel-perfect canvas generated from Website-Mao.psd =====
   Every element is positioned by its exact PSD coordinate.
   --u is one "PSD pixel": 1u == 1px when the page is at its native 1920px,
   and scales down proportionally on narrower screens. */

:root{
  --f-ui:"Open Sans", system-ui, sans-serif;   /* exact (free) */
  --f-head:"Marcellus", serif;                  /* substitute for Albertus Nova */
  --f-disp:"Cinzel", serif;                      /* substitute for Friz Quadrata */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#0a0405}
body{overflow-x:hidden}
img,video{display:block;border:0}
a{color:inherit;text-decoration:none}

/* groups + sections are layout-neutral on desktop: the absolute canvas is unchanged */
.s,.g{display:contents}
/* the mobile top bar + menu only exist on small screens */
.mnav,.mmenu{display:none}

.page{
  position:relative;
  width:100%;
  max-width:1920px;
  margin:0 auto;
  aspect-ratio:1920 / 2612;     /* height follows width at the design ratio */
  container-type:inline-size;    /* cqw resolves against .page width */
  overflow:hidden;
  background:#0a0405;
  --u:calc(100cqw / 1920);
}

/* absolute image/asset boxes.
   :where() keeps these at ZERO specificity so the mobile reset (which appears
   later in the file) overrides them by source order, and role rules win over both. */
:where(.a){
  position:absolute;
  left:calc(var(--x) * var(--u));
  top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));
  height:calc(var(--h) * var(--u));
}
:where(.a > img, .a > video){width:100%;height:100%;object-fit:fill}
.a.hero > video{object-fit:cover}

/* absolute text boxes */
:where(.t){
  position:absolute;
  left:calc(var(--x) * var(--u));
  top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));
  font-family:var(--ff);
  font-weight:var(--fw);
  font-size:calc(var(--fs) * var(--u));
  line-height:1.08;
  color:var(--c);
  letter-spacing:calc(var(--tr) / 1000 * 1em);
  white-space:pre-wrap;
  /* PSD bbox top sits at the cap height; nudge to align the CSS line box */
  margin-top:calc(-0.12 * var(--fs) * var(--u));
}
.t{font-family:var(--ff);font-weight:var(--fw)}   /* keep font hooks at normal weight */

/* hover affordances on interactive bits (doesn't affect layout) */
.a img{transition:filter .2s, transform .3s}
.a:hover > img{filter:brightness(1.08)}

/* ===== Verification overlay (toggle with the ?overlay flag / button) ===== */
.page.overlay::after{
  content:"";position:absolute;inset:0;z-index:999;pointer-events:none;
  background:url("../assets/psd/_reference.png") center/100% 100% no-repeat;
  opacity:.5;
}

/* ============================================================
   MOBILE REFLOW (<= 760px)
   The same PSD assets/text, re-laid-out as a single column.
   ============================================================ */
@media (max-width:760px){
  /* turn the fixed canvas into normal flow */
  .page{position:static;max-width:100%;width:100%;aspect-ratio:auto;height:auto;
        container-type:normal;overflow:visible;display:flex;flex-direction:column}
  .s{display:flex;flex-direction:column;width:100%}
  .g{display:contents}
  /* neutralize every absolutely-placed element.
     :where() = ZERO specificity, so every role rule below cleanly overrides it. */
  :where(.s .a,.s .t){position:static;left:auto;top:auto;width:auto;height:auto;margin:0}
  :where(.s .a>img){width:auto;height:auto;max-width:100%}
  :where(.s .t){font-size:1rem;white-space:normal;letter-spacing:normal;line-height:1.35;
        width:auto;color:var(--c)}

  /* ---- section order + hide desktop-only chrome ---- */
  .s-bg{display:none}
  .s-nav{display:none}                    /* replaced by .mnav */
  .s-hero{order:1} .s-features{order:2} .s-destiny{order:3}
  .s-classes{order:4} .s-download{order:5} .s-footer{order:6}
  [data-r=bgmaster],[data-r=secbg],[data-r=navbar],[data-r=navactive],
  [data-r=navburger],[data-r=orn],[data-r=emblem],[data-r=arrow],
  [data-r=scroll],[data-r=btnshape],.m-hide{display:none}

  /* ---- mobile top bar + slide-down menu ---- */
  .mnav{display:flex;position:fixed;inset:0 0 auto 0;height:58px;z-index:200;
        align-items:center;justify-content:space-between;padding:0 18px;
        background:rgba(10,4,5,.95);backdrop-filter:blur(10px);
        border-bottom:1px solid rgba(224,56,43,.3)}
  .mnav-logo{height:34px;width:auto}
  .mnav-burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;
        padding:8px;cursor:pointer}
  .mnav-burger span{width:26px;height:2px;background:#fff;transition:.25s}
  body.menu-open .mnav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .mnav-burger span:nth-child(2){opacity:0}
  body.menu-open .mnav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mmenu{display:flex;flex-direction:column;position:fixed;top:58px;left:0;right:0;z-index:199;
        background:rgba(10,4,5,.98);border-bottom:1px solid rgba(224,56,43,.3);
        max-height:0;overflow:hidden;transition:max-height .35s ease}
  body.menu-open .mmenu{max-height:420px}
  .mmenu a{padding:15px 22px;color:#e9d9d7;font:600 .9rem/1 "Open Sans",sans-serif;
        letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(224,56,43,.15)}
  .mmenu a:active{background:#1a090c;color:#fff}

  /* ---- HERO ---- */
  .s-hero{align-items:center;padding:58px 0 28px;background:linear-gradient(#0a0405,#140709);gap:20px}
  .s-hero .hero{width:100%}
  .s-hero .hero>video{width:100%;height:auto;object-fit:contain}
  .hero-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  [data-r=badge]{width:160px}
  [data-r=badge] img{width:100%}

  /* ---- FEATURES ---- */
  .s-features{padding:34px 20px;gap:26px;align-items:center;background:#120608}
  .feat-item{display:flex;flex-direction:column;align-items:center;text-align:center;
        gap:10px;max-width:300px}
  .feat-item [data-r=featicon]{order:-1}          /* icon above the title */
  .feat-item [data-r=featicon] img{height:62px;width:auto}
  [data-r=feat-title]{font:700 1.25rem/1 "Open Sans",sans-serif;letter-spacing:.1em;color:#FFEFF0}
  [data-r=feat-sub]{font:400 .95rem/1.2 "Open Sans",sans-serif;color:#F92F3A}

  /* ---- DESTINY ---- */
  .s-destiny{padding:46px 22px;gap:22px;background:#0a0405}
  .destiny-copy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  .s-destiny [data-r=eyebrow]{font:700 .8rem/1 "Open Sans",sans-serif;letter-spacing:.24em;color:#CD1C27}
  .s-destiny [data-r=h2]{font-family:var(--f-head);font-size:2rem;line-height:1.08;color:#fff}
  .s-destiny [data-r=body]{font-size:1rem;color:#cdbab8}
  .destiny-btn{display:inline-flex}
  .s-destiny [data-r=btn]{display:inline-block;padding:13px 30px;border-radius:6px;
        font:600 .8rem/1 "Open Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;
        color:#fff;background:linear-gradient(180deg,#ff4438,#8b1014);
        box-shadow:0 6px 22px rgba(224,56,43,.4)}
  .tile-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
  [data-r=tile]{width:100%}
  [data-r=tile] img{width:100%;height:172px;object-fit:cover;object-position:center;
        border-radius:10px;border:1px solid rgba(224,56,43,.25)}
  /* tile-4 is a wide canvas with its art on the right edge — show that part */
  .tile-row [data-r=tile]:first-child img{object-position:right}

  /* ---- CLASSES ---- */
  .s-classes{padding:46px 18px;gap:18px;align-items:center;
        background:linear-gradient(#0a0405,#120608)}
  .classes-title{display:flex;justify-content:center}
  [data-r=sectitle]{font-family:var(--f-disp);font-size:1.7rem;letter-spacing:.08em;
        color:#FDEDED;text-align:center}
  [data-r=card]{width:100%;max-width:430px}
  [data-r=card] img{width:100%;height:auto;border-radius:12px}

  /* ---- DOWNLOAD ---- */
  .s-download{padding:46px 22px;gap:18px;align-items:center;text-align:center;background:#0a0405}
  /* order: eyebrow -> heading -> badges -> phone (matches the desktop reading order) */
  .s-download [data-r=eyebrow]{order:1}
  .s-download .dl-copy{order:2}
  .s-download [data-r=badge]{order:3}
  .s-download [data-r=phone]{order:4}
  .dl-copy{display:flex;flex-direction:column;gap:12px;align-items:center}
  .s-download [data-r=eyebrow]{font:700 .8rem/1 "Open Sans",sans-serif;letter-spacing:.24em;color:#CD1C27}
  .s-download [data-r=h2]{font-family:var(--f-head);font-size:1.9rem;line-height:1.08;color:#fff}
  .s-download [data-r=body]{font-size:1rem;color:#cdbab8}
  .s-download .hero-badges,.s-download [data-r=badge]{margin:0 auto}
  [data-r=phone]{width:78%;max-width:300px;margin-top:8px}
  [data-r=phone] img{width:100%;height:auto}

  /* ---- FOOTER ---- */
  .s-footer{padding:40px 22px 30px;gap:26px;background:#070203}
  [data-r=footerlogo] img{height:74px;width:auto}
  [data-r=foot-about]{font-size:.85rem;color:#a98c89;max-width:340px}
  .foot-col{display:flex;flex-direction:column;gap:9px}
  [data-r=foot-head]{font:700 1rem/1 "Open Sans",sans-serif;letter-spacing:.1em;color:#fff;margin-bottom:4px}
  [data-r=foot-link]{font-size:.9rem;color:#a98c89}
  .foot-social{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
  .foot-social [data-r=foot-head]{flex-basis:100%;order:-1}   /* heading above the icons */
  .foot-social [data-r=social] img{width:40px;height:40px}
  [data-r=copyright]{font-size:.8rem;color:#7a5f5d;text-align:center;width:100%}
}