/* Homepage "Four ways to begin" showcase (change set B, glass image cards, 1 Oct 2026).
   Homepage only. Four tall cards: a picture on top that melts into a frosted, tinted lower half.
   All text is real HTML. No slider, no auto-rotation, nothing hidden.
   One row on desktop, 2 x 2 on tablets, one swipeable row on phones (all four cards stay in the page). */
.offers{border-bottom:1px solid var(--line)}
.offers__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.offers__head .eyebrow{margin:0}
.offers__head h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0}
.offers__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.4rem);list-style:none;margin:0;padding:0}
.offer{--tint:60,52,40;position:relative;display:flex;flex-direction:column;min-width:0;border-radius:26px;overflow:hidden;
  background:rgb(var(--tint));border:1px solid rgba(235,220,196,.14);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.04) inset;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.offer:hover{transform:translateY(-4px);border-color:rgba(217,185,122,.38);box-shadow:0 26px 48px -18px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.05) inset}
.offer__media{position:relative;aspect-ratio:10/9;margin:0;background:rgb(var(--tint))}
/* the picture fades out towards the bottom, so it melts into the glass below it */
.offer__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.35) 82%,transparent);mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.35) 82%,transparent)}
.offer__glass{position:relative;flex:1;display:flex;flex-direction:column;margin-top:-4.6rem;padding:3.1rem 1.15rem 1.2rem;
  background:linear-gradient(to bottom,rgba(var(--tint),0),rgba(var(--tint),.5) 2.6rem,rgba(var(--tint),.9) 6rem,rgb(var(--tint)) 9rem);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 2.6rem);mask-image:linear-gradient(to bottom,transparent,#000 2.6rem)}
.offer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.55rem}
.offer h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.24rem,1.42vw,1.42rem);text-wrap:balance;line-height:1.12;margin:0;color:#f4ead8}
.offer__chip{flex:none;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;color:#f4ead8;background:rgba(0,0,0,.42);border:1px solid rgba(217,185,122,.45);border-radius:999px;padding:.24rem .55rem;margin-top:.12rem}
.offer__promise{color:rgba(244,234,216,.78);font-size:.86rem;line-height:1.5;margin:0 0 .85rem}
.offer__tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 .95rem;padding:0}
.offer__tags li{font-family:var(--sans);font-size:.68rem;font-weight:500;color:rgba(244,234,216,.9);background:rgba(255,255,255,.11);border-radius:999px;padding:.26rem .6rem}
.offer__note{font-size:.72rem;line-height:1.45;color:rgba(244,234,216,.66);margin:-.2rem 0 .95rem}
.offer__note a{color:#f4ead8;text-decoration:underline;text-underline-offset:3px}
.offer__note a:hover{color:var(--accent)}
.offer__btn{display:flex;align-items:center;justify-content:center;margin-top:auto;min-height:46px;padding:.7rem 1rem;border-radius:999px;
  background:#f1e6d0;color:#181818;font-family:var(--sans);font-size:.84rem;font-weight:600;letter-spacing:.01em;text-align:center;transition:background .25s ease,color .25s ease}
a.offer__btn:hover,a.offer__btn:focus-visible{background:var(--accent);color:#181818}
/* Not a link yet: a label, so nobody is sent to a sign-in wall. */
.offer__btn--label{background:rgba(0,0,0,.28);color:#f4ead8;border:1px solid rgba(244,234,216,.3);font-weight:500}
/* Qi Men Ahead brand orange is #D5401C (213,64,28); this is its darker tone for the lower half */
.offer--qimen{--tint:122,38,18}
/* warm brown, carried over from the MingPath page's own texture */
.offer--mingpath{--tint:52,31,21}
.offer--yuanfen{--tint:68,18,20}
.offer--review{--tint:58,48,34}
/* the floor plan is drawn on white: warm it so it sits in the dark page */
.offer--review .offer__media img{filter:sepia(.45) brightness(.8) contrast(1.05)}
@media (max-width:1080px){
  .offers__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .offers__head{margin-bottom:1.1rem}
  /* one swipeable row: the next card peeks in so people know to swipe */
  .offers__grid{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -1.1rem;padding:.2rem 1.1rem 1.4rem;scroll-padding:0 1.1rem;scrollbar-width:none}
  .offers__grid::-webkit-scrollbar{display:none}
  .offer{flex:0 0 78%;scroll-snap-align:start}
  .offer:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.offer{transition:none}.offer:hover{transform:none}}

/* ------------------------------------------------------------------
   3D tilt on the four cards (added 1 Oct 2026). Styling only.
   Desktop pointers only: phones and tablets get no tilt, and nothing
   moves for people who ask their device for reduced motion.
   js/offers-tilt.js sets --rx, --ry (the tilt), --px, --py (pointer
   position from -1 to 1) and --gx, --gy (where the light falls).
   The card keeps its rounded clip, so depth is drawn by sliding the
   picture a few pixels against the card.
   ------------------------------------------------------------------ */
a.offer__btn:focus-visible,.offer__note a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* At rest nothing here applies, so the cards are drawn exactly as before and text stays sharp.
     The script adds .is-tilting only while the pointer is on a card, and removes it once the card is flat again. */
  .offer__media img{transform:scale(1.06)}
  .offer.is-tilting{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));z-index:2;
    transition:box-shadow .35s ease,border-color .35s ease}
  .offer.is-tilting .offer__media img{transform:translate3d(calc(var(--px,0) * -7px),calc(var(--py,0) * -7px),0) scale(1.06)}
  /* The text and buttons are not shifted on their own: moving them by part-pixels made the words look soft.
     The picture sliding against the card is what gives the depth. */
  /* a quiet light that follows the pointer; it never blocks a click */
  .offer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--glow,0);
    background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),rgba(255,244,222,.13),rgba(255,244,222,.04) 38%,transparent 62%);
    transition:opacity .45s ease}
}