/* ============================================================
   About Us — page-specific styles (Lux Massage)
   Reuses lux.css tokens: --gold1/2/3, --cream, --panel, --line,
   --muted, --ease, --shadow, --r, fonts Fraunces/Inter/Great Vibes.
   GUTTER RULE: never `padding:Npx 0`; use padding-block/padding-inline.
   Every block sits inside .container (symmetric ~24px+ gutter).
   ============================================================ */

/* ---------- HERO ---------- */
.about-hero{position:relative;padding-block:150px 70px;overflow:hidden}
.about-hero .a-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);
  align-items:center}
.about-hero .a-copy{max-width:560px}
.about-hero h1{font-size:clamp(40px,6vw,72px);line-height:1.04;margin:16px 0 18px}
.about-hero .lead{color:var(--muted);font-size:clamp(15px,2vw,17px);max-width:520px}
.about-hero .a-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- HERO COLLAGE (desktop offset cluster) ---------- */
.a-collage{position:relative;height:clamp(420px,52vw,560px)}
.a-collage figure{
  position:absolute;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.a-collage figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.a-collage figure:hover{transform:translateY(-6px) scale(1.015);
  box-shadow:0 44px 100px -40px rgba(201,161,90,.5);z-index:6}
.a-collage figure:hover img{transform:scale(1.06)}
.a-collage .c1{top:0;left:2%;width:46%;height:56%;z-index:2}
.a-collage .c2{top:8%;right:0;width:44%;height:44%;z-index:3}
.a-collage .c3{bottom:0;left:0;width:40%;height:40%;z-index:4}
.a-collage .c4{bottom:4%;right:4%;width:48%;height:50%;z-index:1}
.a-collage .c-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  text-align:center;background:var(--grad-gold);color:#20160a;
  font-family:'Fraunces',serif;box-shadow:0 20px 50px -18px rgba(201,161,90,.7)}
.a-collage .c-badge b{font-size:22px;line-height:1;display:block}
.a-collage .c-badge span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin-top:3px}

/* ---------- STORY ---------- */
.a-story .a-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:center}
.a-story .a-story-img{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:5/4}
.a-story .a-story-img img{width:100%;height:100%;object-fit:cover;display:block}
.a-story .a-prose p{color:var(--muted);margin-bottom:16px;font-size:15.5px}
.a-story .a-prose p.lead-p{color:var(--cream);font-family:'Fraunces',serif;font-size:20px;line-height:1.45}
.a-story .a-sign{margin-top:22px;font-family:'Great Vibes',cursive;font-size:34px;color:var(--gold1);line-height:1}

/* ---------- VALUES ---------- */
.a-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.a-val{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--panel);
  backdrop-filter:blur(10px);padding:30px 26px;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.a-val::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.a-val:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 30px 66px -34px rgba(90,66,38,.45)}
.a-val:hover::after{transform:scaleX(1)}
.a-val .v-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:rgba(201,161,90,.12);border:1px solid var(--line);margin-bottom:16px;
  transition:transform .4s var(--ease),background-color .3s ease}
.a-val:hover .v-ic{transform:scale(1.06);background:rgba(201,161,90,.18)}
.a-val .v-ic svg{width:24px;height:24px;stroke:var(--gold1);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.a-val h3{font-size:19px;margin-bottom:8px}
.a-val p{color:var(--muted);font-size:14px;line-height:1.6}

/* ---------- SIGNATURE EXPERIENCES ---------- */
.a-sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.a-sig{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  min-height:340px;display:flex;align-items:flex-end;transition:.4s var(--ease)}
.a-sig:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow)}
.a-sig .s-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.5) saturate(1.1);transition:.6s var(--ease);z-index:0}
.a-sig:hover .s-bg{transform:scale(1.06)}
.a-sig::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 30%,rgba(12,8,4,.9))}
.a-sig .s-body{position:relative;z-index:2;padding:32px 30px}
.a-sig .s-body h3{font-size:30px;margin:6px 0 8px;color:#f3e9d9}
.a-sig .s-body p{color:#d9cbb2;font-size:14px;max-width:340px;margin-bottom:16px}
.a-sig .s-body .s-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold1);
  font-size:13px;letter-spacing:.04em;font-weight:500}
.a-sig .s-body .s-link:hover{gap:12px}

/* ---------- WHY / DIFFERENTIATORS ---------- */
.a-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px}
.a-why-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.a-why-item .w-no{font-family:'Fraunces',serif;font-size:20px;color:var(--gold2);flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.a-why-item h4{font-size:16.5px;margin-bottom:4px;color:var(--cream)}
.a-why-item p{color:var(--muted);font-size:13.5px;line-height:1.55}

/* ---------- CLOSING OFFER ---------- */
.a-offer{position:relative;border-radius:28px;overflow:hidden;padding-block:70px;padding-inline:40px;
  text-align:center;background:linear-gradient(120deg,#241a0d,#3a2b12 45%,#241a0d);border:1px solid var(--line)}
html[data-theme="light"] .a-offer{background:linear-gradient(120deg,#f3e7d3,#efdec6 45%,#f3e7d3)}
.a-offer .tag{font-family:'Fraunces',serif;font-size:clamp(56px,8vw,80px);color:var(--gold1);line-height:1}
.a-offer h2{font-size:clamp(30px,4.5vw,44px);margin:6px 0 14px}
.a-offer p{color:var(--muted);max-width:460px;margin:0 auto 28px}
.a-offer .code{display:inline-block;font-family:'Inter';letter-spacing:.22em;font-weight:600;
  color:var(--gold1);border:1px dashed var(--line2);border-radius:100px;padding:8px 22px;margin-bottom:24px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .about-hero .a-hero-grid{grid-template-columns:1fr;gap:40px}
  .about-hero .a-copy{max-width:none}
  .a-story .a-story-grid{grid-template-columns:1fr}
  .a-values-grid{grid-template-columns:1fr 1fr}
  .a-sig-grid{grid-template-columns:1fr}
  .a-why-grid{grid-template-columns:1fr;gap:0 0}
}
@media(max-width:640px){
  .about-hero{padding-block:120px 50px}
  /* collage → elegant asymmetric grid on mobile (no absolute overlap) */
  .a-collage{position:relative;height:auto;display:grid;grid-template-columns:1fr 1fr;
    gap:12px;margin-top:6px}
  .a-collage figure{position:static;width:auto!important;height:auto!important;
    top:auto;left:auto;right:auto;bottom:auto;margin:0;border-radius:16px;
    box-shadow:0 20px 50px -30px rgba(90,66,38,.45)}
  /* c1 spans full-width feature strip; c2/c3/c4 form a 3-cell cluster below */
  .a-collage .c1{grid-column:1 / -1;aspect-ratio:16/10}
  .a-collage .c2{aspect-ratio:1/1}
  .a-collage .c3{aspect-ratio:1/1}
  .a-collage .c4{grid-column:1 / -1;aspect-ratio:16/9}
  /* keep the Est. badge as a small floating chip over the feature image */
  .a-collage .c-badge{position:absolute;display:grid;left:auto;right:14px;top:14px;bottom:auto;transform:none;z-index:5;
    width:64px;height:64px;box-shadow:0 14px 34px -14px rgba(201,161,90,.7)}
  .a-collage .c-badge b{font-size:16px}
  .a-collage .c-badge span{font-size:8px}
  .a-values-grid{grid-template-columns:1fr}
  .about-hero .a-cta .btn{flex:1 1 auto;justify-content:center}
}