.beauty-section{ padding:70px 0 90px; position:relative; overflow:hidden; }
.beauty-heading{ text-align:center; max-width:560px; margin:0 auto 40px; }
.beauty-heading .eyebrow{ justify-content:center; display:flex; align-items:center; gap:8px; }

/* A clean, deliberately-sized bento grid — named areas with fixed row
   heights, not fragile auto-placed spans, so it lays out predictably
   in every browser instead of leaving gaps or collapsing tiles. */
.beauty-mosaic{
  display:grid; gap:18px;
  grid-template-columns:1.3fr 1fr 1fr;
  grid-template-rows:230px 230px;
  grid-template-areas:
    "a b c"
    "a d d";
  margin-bottom:34px;
}
.beauty-tile--a{ grid-area:a; }
.beauty-tile--b{ grid-area:b; }
.beauty-tile--c{ grid-area:c; }
.beauty-tile--d{ grid-area:d; }

.beauty-tile{
  border-radius:26px; overflow:hidden; position:relative; cursor:pointer;
  display:flex; align-items:flex-end; border:none; padding:0; width:100%; height:100%;
  font-family:inherit; text-align:left; background:none; -webkit-appearance:none; appearance:none;
  transition:transform 420ms var(--ease-clay), box-shadow 420ms var(--ease-clay);
}
.beauty-tile:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -16px rgba(18,29,26,.4); }
.beauty-tile:active{ transform:translateY(-1px) scale(.99); }
.beauty-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 5s cubic-bezier(.16,.9,.3,1); }
.beauty-tile:hover img{ transform:scale(1.12); }
[data-motion="reduce"] .beauty-tile img{ transition:none !important; }
.beauty-tile::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(18,29,26,.78)); }
.beauty-tile-cap{ position:relative; z-index:1; padding:18px 20px; color:#F9F6EE; width:100%; }
.beauty-tile-cap .tag{ display:inline-flex; align-items:center; gap:6px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#EADFC4; margin-bottom:4px; }
.beauty-tile-cap p{ margin:0; font-size:.85rem; color:#F4F1EA; text-align:left; }
.beauty-tile-hint{ position:absolute; top:14px; right:14px; z-index:1; width:30px; height:30px; border-radius:50%; background:rgba(249,246,238,.85); display:flex; align-items:center; justify-content:center; font-size:.85rem; opacity:0; transform:scale(.8); transition:all 300ms var(--ease-clay); }
.beauty-tile:hover .beauty-tile-hint, .beauty-tile:focus-visible .beauty-tile-hint{ opacity:1; transform:scale(1); }

/* The quote is its own clean banner — not squeezed into a grid cell. */
.beauty-quote{
  text-align:center; padding:36px 40px; border-radius:28px;
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow:-6px -6px 14px var(--clay-hi), 8px 8px 18px var(--clay-lo);
}
.beauty-quote blockquote{ margin:0; font-family:var(--font-head); font-style:italic; font-size:clamp(1.05rem, 2.2vw, 1.3rem); color:var(--gold-strong); }

@media(max-width:860px){
  .beauty-mosaic{
    grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px;
    grid-template-areas: "a a" "b c" "d d";
  }
}
@media(max-width:560px){
  .beauty-mosaic{
    grid-template-columns:1fr; grid-template-rows:repeat(4, 210px);
    grid-template-areas: "a" "b" "c" "d";
  }
}

/* Persuasive "come see it" modal opened by clicking a tile */
.beauty-modal .modal{ max-width:460px; text-align:center; }
.beauty-modal-photo{ width:100%; height:170px; object-fit:cover; border-radius:18px; margin-bottom:18px; }
.beauty-modal h3{ font-size:1.3rem; margin-bottom:10px; }
.beauty-modal p{ margin-bottom:20px; }


/* Keep the Beauty section balanced and fully readable; no inner clipping or forced scrolling. */
.beauty-section{padding:clamp(42px,5vw,58px) 0 clamp(48px,5vw,64px);overflow:visible}
.beauty-heading{margin-bottom:clamp(20px,2.5vw,30px)}
.beauty-mosaic{gap:14px;grid-template-rows:clamp(165px,19vw,205px) clamp(165px,19vw,205px);margin-bottom:22px}
.beauty-tile-cap{padding:14px 16px}
.beauty-quote{padding:clamp(22px,3vw,30px) clamp(18px,3vw,34px)}
@media(max-width:860px){.beauty-mosaic{gap:12px;grid-template-rows:170px 170px 170px;margin-bottom:20px}}
@media(max-width:560px){.beauty-section{padding:36px 0 44px}.beauty-mosaic{gap:12px;grid-template-rows:repeat(4,minmax(165px,42vw));margin-bottom:18px}.beauty-heading{margin-bottom:20px}.beauty-quote{padding:22px 18px}}