/* =====================================================
   Supreme Gas 94 -- pixel-perfect build from Gas Home 3.psd
   Design canvas: 1920 x 5859px
===================================================== */

@font-face {
  font-family: 'Cook Conthic';
  src: url('../fonts/cookconthic.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trade Gothic LT Std';
  src: url('../fonts/trade-gothic-lt-std.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trade Gothic LT Std';
  src: url('../fonts/trade-gothic-lt-std-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-cream: #ECF4F8;
  --color-dark-heading: #100D0C;
  --color-black-heading: #000506;
  --color-gray-text: #646362;
  --color-dark-text: #1E1E1E;
  --color-footer-text: #F2F8FA;
  --color-btn-text: #EBF4F7;

  --color-btn-tan: #948B7C;
  --color-btn-dark: #100D0B;
  --color-btn-black: #000404;

  --gradient-hero: linear-gradient(347deg, #F9BE30 0%, #CEC5B5 100%);
  --gradient-card: linear-gradient(5deg, #F9BE30 0%, #CEC5B5 100%);

  --design-width: 1920px;
  --design-height: 5859px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: none;
}

/* =====================================================
   Page wrapper -- fixed 1920px design canvas, scaled to
   fit the viewport while preserving exact proportions.
   .page-frame sits in normal flow and is given a JS-set
   height matching the scaled content, so the document
   scrolls normally; .page-canvas is the canvas that gets
   scaled and is clipped to that height by .page-frame.
===================================================== */
.page-frame {
  position: relative;
  width: 100%;
  /* clip, not hidden: .page-canvas keeps its full unscaled layout height
     (transform: scale() only affects paint, not layout/scrollable-overflow
     size), so once the canvas is scaled down below 1920px wide this frame's
     set height is shorter than that layout height. `overflow: hidden` would
     still make the frame a real scroll container for that hidden slack, and
     native fragment navigation (the hero's "Shop the Drop" anchor link) can
     assign it a scrollTop that never resets -- permanently shifting the
     canvas up and leaving a blank gap at the bottom. `clip` clips the same
     way but never becomes a scroll container, so it can't accept scrollTop. */
  overflow: clip;
}

.page-canvas {
  position: relative;
  width: var(--design-width);
  height: var(--design-height);
  margin: 0 auto;
  transform-origin: top left;
}

/* =====================================================
   Shared button styling
===================================================== */
.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 329px;
  height: 63px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--color-btn-text);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn--tan {
  background-color: var(--color-btn-tan);
}

.btn--dark {
  background-color: var(--color-btn-dark);
}

.btn--black {
  background-color: var(--color-btn-black);
}

/* =====================================================
   1. HERO -- 1920 x 1355
===================================================== */
.hero {
  position: relative;
  width: var(--design-width);
  height: 1355px;
  background: url('../images/bg-hero.jpg') no-repeat top center;
  background-size: cover;
}

.hero__logo {
  position: absolute;
  left: 565px;
  top: 100px;
  width: 730px;
  height: auto;
  z-index: 2;
}

.hero__title {
  position: absolute;
  left: 307px;
  top: 743px;
  width: 1295px;
  font-family: 'Cook Conthic', sans-serif;
  font-weight: 700;
  font-size: 175px;
  line-height: 160px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__subtitle {
  position: absolute;
  left: 351px;
  top: 1086px;
  width: 1200px;
  font-family: 'Trade Gothic LT Std', sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-cream);
}

.hero__cta {
  left: 777px;
  top: 1222px;
}

/* =====================================================
   1B. STREETWEAR / STORY FEATURE -- 1920 x 908
===================================================== */
.streetwear {
  position: relative;
  display: flex;
  width: var(--design-width);
  height: 908px;
}

.streetwear__left {
  position: relative;
  flex-shrink: 0;
  width: 975px;
  height: 908px;
  background: url('../images/bg-streetwear.jpg') no-repeat top left;
  background-size: cover;
}

.streetwear__right {
  position: relative;
  flex-shrink: 0;
  width: 945px;
  height: 908px;
  background-color: #FFFFFF;
  background-image: url('../images/bg-streetwear-panel.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
}

.streetwear__tshirt {
  position: absolute;
  left: 0;
  top: 58px;
  width: 795px;
  height: 850px;
}

.streetwear__title {
  position: absolute;
  left: 238px;
  top: 79px;
  width: 452px;
  font-family: 'Cook Conthic', sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 72px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-dark-heading);
}

.streetwear__text {
  position: absolute;
  left: 107px;
  top: 248px;
  width: 726px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-gray-text);
}

.streetwear__cta {
  left: 325px;
  top: 712px;
}

/* =====================================================
   2. OUR PRODUCTS -- 1920 x 974 (245 heading + 729 cards)
===================================================== */
.products {
  position: relative;
  width: var(--design-width);
  height: 974px;
  background-color: #FFFFFF;
}

.products__title {
  position: absolute;
  left: 562px;
  top: 55px;
  width: 774px;
  font-family: 'Cook Conthic', sans-serif;
  font-weight: 700;
  font-size: 175px;
  line-height: 160px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black-heading);
}

.products__grid {
  position: absolute;
  left: 0;
  top: 245px;
  display: grid;
  grid-template-columns: repeat(4, 471px);
  column-gap: 12px;
  width: var(--design-width);
  height: 729px;
  background-color: var(--color-cream);
}

.feature-card {
  position: relative;
  width: 471px;
  height: 729px;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
}

.feature-card--1 {
  background-image: url('../images/bg-product-card-1.jpg');
}

.feature-card--2 {
  background-image: url('../images/bg-product-card-2.jpg');
}

.feature-card--3 {
  background-image: url('../images/bg-product-card-3.jpg');
}

.feature-card--4 {
  background-image: url('../images/bg-product-card-4.jpg');
}

.feature-card__title {
  position: absolute;
  font-family: 'Cook Conthic', sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 72px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gradient-card);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.feature-card__text {
  position: absolute;
  font-family: 'Trade Gothic LT Std', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-cream);
}

/* Card 1 -- Sustainable by design */
.feature-card--1 .feature-card__title {
  left: 95px;
  top: 225px;
  width: 276px;
}

.feature-card--1 .feature-card__text {
  left: 63px;
  top: 389px;
  width: 347px;
}

/* Card 2 -- Culture-forward identity */
.feature-card--2 .feature-card__title {
  left: 35px;
  top: 225px;
  width: 407px;
}

.feature-card--2 .feature-card__text {
  left: 63px;
  top: 389px;
  width: 355px;
}

/* Card 3 -- Premium feel, everyday wear */
.feature-card--3 .feature-card__title {
  left: 60px;
  top: 226px;
  width: 350px;
}

.feature-card--3 .feature-card__text {
  left: 70px;
  top: 389px;
  width: 333px;
}

/* Card 4 -- Rooted in authenticity */
.feature-card--4 .feature-card__title {
  left: 82px;
  top: 225px;
  width: 306px;
}

.feature-card--4 .feature-card__text {
  left: 63px;
  top: 389px;
  width: 349px;
}

/* =====================================================
   4. OUR LATEST PRODUCTS / WEAR WHAT YOU STAND FOR -- 1920 x 1942
===================================================== */
.latest {
  position: relative;
  width: var(--design-width);
  height: 1942px;
  background: url('../images/bg-latest.jpg') no-repeat top center;
  background-size: cover;
}

.latest__title {
  position: absolute;
  left: 388px;
  top: 70px;
  width: 1178px;
  font-family: 'Cook Conthic', sans-serif;
  font-weight: 700;
  font-size: 175px;
  line-height: 160px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black-heading);
}

.latest__grid {
  display: contents;
}

/* Positioning wrapper only -- purely decorative, never the click target.
   Some boxes overlap their neighbors by design (PSD layout): each product
   photo is a mockup with a lot of transparent padding and a wide
   drop-shadow around the actual garment, so boxes can overlap without the
   shirts themselves visually colliding. See .latest__product__trigger
   below for the actual clickable hotspot.

   Deliberately no z-index here. A positioned element only becomes its own
   stacking context once it gets an explicit z-index -- leaving this on
   "auto" keeps every wrapper's box (and its trigger) in one shared
   stacking order together, so a later wrapper (which paints on top by DOM
   order, same as before) never fully occludes an earlier product's
   trigger inside the .latest__product__trigger z-index below. */
.latest__product {
  position: absolute;
}

.latest__product--1 {
  left: 54px;
  top: 282px;
  width: 637px;
  height: 491px;
}

.latest__product--2 {
  left: 518px;
  top: 282px;
  width: 643px;
  height: 495px;
}

.latest__product--3 {
  left: 1009px;
  top: 282px;
  width: 649px;
  height: 500px;
}

.latest__product--4 {
  left: 54px;
  top: 817px;
  width: 637px;
  height: 491px;
}

.latest__product--5 {
  left: 518px;
  top: 817px;
  width: 643px;
  height: 495px;
}

.latest__product--6 {
  left: 1009px;
  top: 817px;
  width: 649px;
  height: 500px;
}

.latest__product__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Inset to the garment's own opaque silhouette within its photo, measured
   directly from the source PNGs: every "Latest Products" photo has ~43%
   transparent padding plus its drop-shadow on the left and a ~7-8% shadow
   band along the bottom, consistently, since they share one mockup
   template. Kept a few points inside that measured edge as safety margin.
   Because this is a real inset (not a fixed pixel box), the hotspot always
   lands on the shirt itself -- never a neighboring, intentionally
   overlapping photo, and never the drop-shadow -- at any viewport size.

   z-index is raised above the plain .latest__product wrapper (1): the
   trigger insets above are already tight enough that no two products'
   triggers ever geometrically overlap each other (verified), so it's safe
   to lift every trigger above every *wrapper*. Without this, a later
   product's wrapper -- overlapping by design into this product's box --
   would sit on top and block clicks on this shirt's own edge even though
   that edge is still what's visually on screen there (the later product's
   image is transparent at that spot). */
.latest__product__trigger {
  position: absolute;
  z-index: 2;
  top: 0%;
  right: 0%;
  bottom: 7%;
  left: 42%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.latest__cta-title {
  position: absolute;
  left: 551px;
  top: 1349px;
  width: 791px;
  font-family: 'Cook Conthic', sans-serif;
  font-weight: 700;
  font-size: 175px;
  line-height: 160px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black-heading);
}

.latest__cta-text {
  position: absolute;
  left: 292px;
  top: 1667px;
  width: 1319px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--color-dark-text);
  padding-top: 0.6rem;
}

.latest__cta-btn {
  left: 804px;
  top: 1770px;
}

/* =====================================================
   5. FOOTER -- 1920 x 680
===================================================== */
.site-footer {
  position: relative;
  width: var(--design-width);
  height: 680px;
  background: url('../images/bg-footer.jpg') no-repeat top center;
  background-size: cover;
}

.site-footer__logo {
  position: absolute;
  left: 695px;
  top: -83px;
  width: 545px;
  height: auto;
  z-index: 2;
}

.site-footer__disclaimer {
  position: absolute;
  left: 524px;
  top: 420px;
  width: 868px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--color-footer-text);
}

.site-footer__meta {
  position: absolute;
  left: 524px;
  top: 516px;
  width: 868px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 10;
  margin-top: 20px;
}

.site-footer__socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.site-footer__social-link {
  color: var(--color-footer-text);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__social-link:hover {
  opacity: 1;
  transform: translateY(-2px);
  color: #F9BE30;
}

.site-footer__social-link svg {
  width: 24px;
  height: 24px;
  display: block;
}

.site-footer__support {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer__support-link {
  font-family: 'Trade Gothic LT Std', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--color-footer-text);
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-footer__support-link:hover {
  opacity: 1;
  color: #F9BE30;
}

.site-footer__support-link svg {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

/* =====================================================
   6. PRODUCT SIZE POPUP
   Printed on wp_footer as a sibling of .page-frame (see
   homegas_render_product_size_modal()) so it always sits
   outside the scaled `.page-canvas` design and overlays the
   real viewport, independent of the 1920px canvas system.
===================================================== */
body.product-modal-open {
  overflow: hidden;
}

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.product-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 13, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  max-height: min(600px, 90vh);
  overflow-y: auto;
  background: linear-gradient(160deg, #ffffff 0%, var(--color-cream) 100%);
  border-radius: 24px;
  padding: 52px 40px 40px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.product-modal__dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 24px 24px 0 0;
  background: var(--gradient-card);
}

.product-modal.is-open .product-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.product-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(16, 13, 12, 0.06);
  color: var(--color-dark-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.product-modal__close:hover,
.product-modal__close:focus-visible {
  background: rgba(16, 13, 12, 0.12);
  transform: rotate(90deg);
}

.product-modal__title {
  font-family: 'Cook Conthic', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-black-heading);
  margin-bottom: 8px;
}

.product-modal__subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-gray-text);
  margin-bottom: 28px;
}

.product-modal__sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.product-modal__size {
  min-width: 64px;
  height: 56px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid rgba(16, 13, 12, 0.1);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-dark-text);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product-modal__size:hover,
.product-modal__size:focus-visible {
  background: var(--gradient-card);
  border-color: transparent;
  color: var(--color-black-heading);
  transform: translateY(-3px);
  box-shadow: 0 14px 24px -10px rgba(0, 0, 0, 0.35);
}

.product-modal__empty {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--color-gray-text);
  margin-top: 8px;
}

@media (max-width: 560px) {
  .product-modal__dialog {
    padding: 44px 24px 32px;
    border-radius: 20px;
  }

  .product-modal__title {
    font-size: 22px;
  }

  .product-modal__size {
    min-width: 56px;
    height: 52px;
    font-size: 16px;
    gap: 10px;
  }
}

/* =====================================================
   RESPONSIVE -- SMALL DEVICES (<= 768px)
   Below this breakpoint the fixed 1920px canvas stops
   being scaled and each section reflows into a stacked,
   fluid mobile layout with relative sizing.
===================================================== */
@media (max-width: 768px) {

  .page-frame {
    height: auto !important;
  }

  .page-canvas {
    width: 100%;
    height: auto;
    transform: none !important;
  }

  /* ---------- 1. HERO ---------- */
  .hero {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    background-position: center;
  }

  .hero__logo {
    position: static;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 24px;
  }

  .hero__title {
    position: static;
    width: 100%;
    font-size: 40px;
    line-height: 1.15;
    white-space: normal;
    margin-bottom: 16px;
  }

  .hero__subtitle {
    position: static;
    width: 100%;
    font-size: 16px;
    line-height: 1.6;
    white-space: normal;
    margin-bottom: 28px;
  }

  /* ---------- 1B. STREETWEAR ---------- */
  .streetwear {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .streetwear__left,
  .streetwear__right {
    width: 100%;
    height: auto;
    background-position: center;
  }

  .streetwear__left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
  }

  .streetwear__tshirt {
    position: static;
    width: 100%;
    max-width: 300px;
    height: auto;
    transform: translate(-13%, 5%);
  }

  .streetwear__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
  }

  .streetwear__title {
    position: static;
    width: 100%;
    font-size: 32px;
    line-height: 1.2;
    white-space: normal;
    margin-bottom: 16px;
  }

  .streetwear__text {
    position: static;
    width: 100%;
    font-size: 16px;
    margin-bottom: 28px;
  }

  /* ---------- 2. OUR PRODUCTS ---------- */
  .products {
    width: 100%;
    height: auto;
    padding: 48px 24px;
  }

  .products__title {
    position: static;
    width: 100%;
    font-size: 40px;
    line-height: 1.15;
    white-space: normal;
    margin-bottom: 24px;
  }

  .products__grid {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    height: auto;
  }

  .feature-card {
    width: 100%;
    height: auto;
    aspect-ratio: 471 / 729;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .feature-card .feature-card__title,
  .feature-card .feature-card__text {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    white-space: normal;
  }

  .feature-card__title {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .feature-card__text {
    font-size: 15px;
    line-height: 1.6;
  }

  /* ---------- 4. OUR LATEST PRODUCTS / WEAR WHAT YOU STAND FOR ---------- */
  .latest {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    background-position: center;
  }

  .latest__title {
    position: static;
    width: 100%;
    font-size: 40px;
    line-height: 1.15;
    white-space: normal;
    margin-bottom: 24px;
  }

  .latest__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin-bottom: 32px;
    margin-left: -20%;
  }

  .latest__product {
    /* Stays a positioning context (not "static") so .latest__product__trigger
       -- absolutely positioned, inset by percentage -- still anchors to this
       box instead of the next positioned ancestor up the tree. left/top must
       be reset here: they only affect an element once it's positioned, so
       the desktop per-column pixel offsets (.latest__product--N, e.g. "left:
       518px") were inert under position:static but would otherwise now
       apply as relative offsets and shove items out of the mobile grid. */
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: auto;
  }

  .latest__product__media {
    height: auto;
    object-fit: initial;
  }

  .latest__cta-title {
    position: static;
    width: 100%;
    font-size: 36px;
    line-height: 1.15;
    white-space: normal;
    margin-bottom: 16px;
  }

  .latest__cta-text {
    position: static;
    width: 100%;
    font-size: 16px;
    line-height: 1.6;
    padding-top: 0;
    margin-bottom: 28px;
  }

  /* ---------- 5. FOOTER ---------- */
  .site-footer {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    background-position: center;
  }

  .site-footer__logo {
    position: static;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 20px;
  }

  .site-footer__disclaimer {
    position: static;
    width: 100%;
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
  }

  .site-footer__meta {
    position: static;
    width: 100%;
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .site-footer__socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .site-footer__social-link svg {
    width: 20px;
    height: 20px;
  }

  .site-footer__support-link {
    font-size: 14px;
  }

  .site-footer__support-link svg {
    width: 16px;
    height: 16px;
  }

  /* ---------- SHARED BUTTONS ---------- */
  .btn {
    position: static;
    width: 100%;
    max-width: 300px;
    height: 56px;
    font-size: 18px;
  }
}


/* =====================================================
   RESPONSIVE -- SMALL DEVICES (<= 580px)
   Below this breakpoint the fixed 1920px canvas stops
   being scaled and each section reflows into a stacked,
   fluid mobile layout with relative sizing.
===================================================== */
@media (max-width: 580px) {
  .latest__grid {
    grid-template-columns: repeat(1, 1fr);
    margin-left: -40%;
  }
}