/* =========================================================================
   Prestige Rising — Responsive Layer (mobile-first)
   Base styles in style.css target 320px and up.
   Breakpoints: 360 / 480 / 600 / 768 / 992 / 1024 / 1280 / 1440+
   ========================================================================= */

/* ---------- Very small phones (320–359px) ---------- */
@media (max-width:359px){
  :root{--gutter:16px}
  .btn{padding:12px 16px;font-size:.76rem;letter-spacing:.08em}
  .hero-facts li{padding-right:12px;margin-right:12px}
  .hero-facts .v{font-size:1.02rem}
  .sticky-cta a{font-size:.62rem;letter-spacing:.05em}
  .price-card__amt{font-size:1.62rem}
  .gal{grid-template-columns:1fr}
  .gal__item--wide{grid-column:auto}
  .g-4{grid-template-columns:1fr}
}

/* ---------- 375px / 390px / 414px phones ---------- */
@media (min-width:390px){
  .btn-row .btn{flex:1 1 auto}
}

/* ---------- 480px — large phones & small tablets ---------- */
@media (min-width:480px){
  :root{--sec-y:64px}
  .g-2{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .field--full{grid-column:1/-1}
  .btn-row .btn{flex:0 0 auto}
  .form-card{padding:30px 26px}
  .gal{gap:14px}
}

/* ---------- 600px ---------- */
@media (min-width:600px){
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-legal{flex-direction:row;align-items:center;justify-content:space-between}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gal__item--wide{grid-column:span 2}
}

/* ---------- 768px — tablets: tables return to normal layout ---------- */
@media (min-width:768px){
  :root{--gutter:28px;--sec-y:80px;--header-h:74px}

  .rtable thead{position:static;width:auto;height:auto;clip:auto}
  .rtable tr{display:table-row;border:0;padding:0}
  .rtable td{display:table-cell;text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
  .rtable td::before{display:none}
  .rtable tbody tr:hover{background:var(--sand)}
  .rtable td.num{text-align:right}

  .split{grid-template-columns:1fr 1fr;gap:40px}
  .split--wide-left{grid-template-columns:1.25fr .75fr}
  .split--wide-right{grid-template-columns:.75fr 1.25fr}
  .grid{gap:22px}
  .g-4{grid-template-columns:repeat(4,1fr)}
  .card{padding:28px}
  .section-head{margin-bottom:44px}

  .hero-body{padding-bottom:clamp(64px,9vh,104px)}
  .hero-controls{display:flex}
  .hero-dots{left:auto;right:var(--gutter);bottom:calc(clamp(64px,9vh,104px) - 26px)}
  .hero-facts li{padding-right:26px;margin-right:26px}

  .page-hero .wrap{padding-top:72px;padding-bottom:68px}

  .modal .form-card{padding:36px 32px 30px}
  .form-card{padding:34px 30px}
  .cta-band{padding:68px 0}
  .cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
  .cta-band .btn-row{flex:0 0 auto}
  .cta-band p{margin-bottom:0}

  .sticky-cta{display:none}
  .float-cta{display:block}
  .to-top{bottom:88px;right:22px}
  .footer-disclaimer{padding-bottom:22px}
}

/* ---------- 992px ---------- */
@media (min-width:992px){
  .brand-mark{width:40px;height:40px;font-size:1.2rem}
  .brand-name{font-size:1.34rem}

  .g-3{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
  .gal{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 1024px ---------- */
@media (min-width:1024px){
  :root{--sec-y:92px}
  body{font-size:16.5px}
  .lede{font-size:1.12rem}
  .split{gap:56px}
  .to-top{bottom:96px}
  .float-cta{right:22px;bottom:26px}
}

/* ---------- 1100px — the full nine-item navigation fits from here ---------- */
@media (min-width:1100px){
  .nav{display:block}
  .nav-toggle{display:none}
  .nav ul{gap:18px}
  .nav a{font-size:.78rem}
  .header-cta .btn--gold{display:inline-flex}
}

/* ---------- 1280px ---------- */
@media (min-width:1280px){
  :root{--gutter:36px;--sec-y:104px}
  .nav ul{gap:24px}
  .nav a{font-size:.82rem}
  .grid{gap:26px}
  .section-head{margin-bottom:52px}
}

/* ---------- 1440px and above ---------- */
@media (min-width:1440px){
  :root{--maxw:1320px}
  /* room for the secondary header CTA alongside the full navigation */
  .header-cta .btn{display:inline-flex}
  .hero-slides{height:min(84vh,800px)}
}

/* ---------- Short landscape viewports: let the hero size to its content
              while the slide image still fills the whole section ---------- */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:420px}
  .hero-slides{position:absolute;inset:0;height:100%}
  .hero-body{position:relative;padding-top:88px;padding-bottom:40px}
  .hero-facts li{padding-block:10px}
  .hero-dots{bottom:10px}
  .hero-controls{bottom:20px}
}

/* ---------- Hover-capable devices only ---------- */
@media (hover:none){
  .card:hover,.price-card:hover,.stat:hover{transform:none;box-shadow:none}
  .figure:hover img,.gal__item:hover img{transform:none}
  .gal__item figcaption{opacity:1;transform:none}
}

/* ---------- Wide tables that must scroll on small screens ---------- */
@media (max-width:767px){
  .table-wrap table:not(.rtable){min-width:560px}

  /* The hero artwork is ~2.3:1. On a narrow portrait crop, centring would show
     mostly sky, so bias the crop downwards to keep the towers in frame. */
  .hero-slide img,.page-hero>img{object-position:50% 62%}
}