/* ============================================================
   CPR VISION — Industry pages (Beauty & Hospitality)
   Richer, more emotional. Industry accent palettes layered over
   the black & gold identity. Loaded after style.css + mockups.css.
   ============================================================ */

.ind { /* industry accent palette set per-page on this wrapper */ }
.ind-beauty { --acc1: #F6D6D6; --acc2: #F8E7C9; --acc3: #C98A8A; --deep: #2A1018; --ivory: #FFF9F2; }
.ind-hosp   { --acc1: #D8B98A; --acc2: #C9A96E; --acc3: #0F3D35; --deep: #07111F; --ivory: #F8F2E7; }

/* ---- emotional hero ---- */
.ihero { position: relative; overflow: hidden; padding-top: clamp(128px,15vw,196px); padding-bottom: clamp(64px,8vw,110px); }
.ind-beauty .ihero { background: linear-gradient(180deg, var(--ivory), #fff 70%); }
.ind-hosp .ihero { background: linear-gradient(180deg, var(--ivory), #fff 70%); }
.ihero__glow { position: absolute; inset: 0; pointer-events: none; }
.ihero__glow::before { content:""; position:absolute; top:-20%; right:-6%; width:52%; height:90%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc1) 60%, transparent), transparent 70%); }
.ihero__glow::after { content:""; position:absolute; bottom:-30%; left:-10%; width:46%; height:80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc2) 55%, transparent), transparent 70%); }
.ihero .eyebrow { color: color-mix(in srgb, var(--acc3) 60%, var(--accent-2)); }
.ihero h1 { font-size: clamp(38px,5.2vw,66px); letter-spacing:-0.035em; line-height:1.0; margin-bottom:22px; }

/* hero floating composition */
.float-stage { position: relative; min-height: 460px; }
.float-stage .fs-base { position: absolute; inset: 0; border-radius: var(--r-xl); border:1px solid var(--border); overflow:hidden;
  background: linear-gradient(135deg, color-mix(in srgb,var(--acc1) 45%, #fff), color-mix(in srgb,var(--acc2) 40%, #fff)); }
.float-stage .fs-base .fs-label { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-family:ui-monospace,monospace; font-size:11px; color:var(--fg-muted); background:rgba(255,255,255,.8); padding:6px 11px; border-radius:999px; border:1px solid var(--border); white-space:nowrap; }
.float-stage .fs-base .fs-stripes { position:absolute; inset:0; opacity:.5; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 1px, transparent 1px 16px); }
.float-stage .fs-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.float-stage .fs-card { position: absolute; z-index: 3; background: var(--card); border:1px solid var(--card-border); border-radius:14px; box-shadow: var(--shadow-pop); padding:14px 16px; }
.float-card-anim { animation: floaty 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .float-card-anim{animation:none} }

/* ---- journey rail (flowing luxury path) ---- */
.jrail { position: relative; margin-top: 8px; }
.jrail__track { display: flex; justify-content: space-between; align-items: flex-start; position: relative; gap: 6px; }
.jrail__track::before { content:""; position:absolute; left: 32px; right: 32px; top: 31px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent-2) 88%, transparent); opacity:.7; }
.jstep2 { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; position: relative; z-index: 1; text-align: center; }
.jstep2 .jd { width: 64px; height: 64px; border-radius: 50%; background: var(--card); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(4,7,7,0.07); position: relative; }
.jstep2 .jd svg { width: 24px; height: 24px; color: var(--accent-2); }
.jstep2 .jnum { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--gold-grad); color:var(--ink); font-size:10px; font-weight:700; display:grid; place-items:center; font-family:var(--font-head); }
.jstep2 .jl { font-weight: 600; font-size: 13.5px; }
@media (max-width: 760px){
  .jrail__track { flex-direction: column; gap: 0; align-items: flex-start; }
  .jrail__track::before { left: 31px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .jstep2 { flex-direction: row; gap: 16px; text-align: left; padding: 10px 0; width: 100%; }
  .jstep2 .jd { width: 56px; height: 56px; flex: 0 0 auto; }
}

/* ---- solution block ---- */
.sblock { padding: clamp(56px,7vw,96px) 0; }
.sblock .eyebrow { margin-bottom: 16px; }
.sblock h2 { font-size: clamp(26px,3vw,38px); margin-bottom: 16px; }
.sblock p.body { font-size: 16.5px; color: var(--fg-muted); line-height: 1.6; max-width: 480px; }

/* ---- Beauty loyalty member card ---- */
.memcard { position: relative; width: 100%; max-width: 430px; aspect-ratio: 1.62/1; border-radius: 20px; padding: 26px 28px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #3a1622, #160309 78%); border: 1px solid rgba(250,198,0,0.28); box-shadow: 0 36px 80px rgba(0,0,0,0.42); display: flex; flex-direction: column; justify-content: space-between; }
.memcard__sheen { position:absolute; inset:0; background: radial-gradient(130% 90% at 88% -10%, rgba(248,231,201,0.22), transparent 55%); pointer-events:none; }
.memcard > * { position: relative; }
.memcard .mc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.memcard .mc-tier { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.memcard .mc-chip { width: 42px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #f6e3a8, #d9b24e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.memcard .mc-name { font-family: var(--font-head); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.memcard .mc-row { display: flex; gap: 28px; margin-top: 10px; }
.memcard .mc-row .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.memcard .mc-row .v { font-size: 14px; font-weight: 600; margin-top: 3px; }
.memcard .mc-brand { display:flex; justify-content:space-between; align-items:flex-end; }
.memcard .mc-brand img { height: 22px; }

/* ---- Hospitality guest passport ---- */
.passport { width: 100%; max-width: 520px; border-radius: 18px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #07111F, #0F2E2A 90%); border: 1px solid rgba(201,169,110,0.34); box-shadow: 0 36px 80px rgba(0,0,0,0.45); }
.passport__head { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.passport__head .pt { font-family: var(--font-head); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 12.5px; color: var(--acc2, #C9A96E); display:flex; align-items:center; gap:9px; }
.passport__head .pt svg { width: 17px; height: 17px; }
.passport__head .pno { font-family: ui-monospace, monospace; font-size: 11.5px; color: rgba(255,255,255,0.45); }
.passport__body { padding: 22px 24px; display: grid; grid-template-columns: 92px 1fr; gap: 22px; }
.passport .pphoto { width: 92px; height: 112px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb,#C9A96E 40%, #0F3D35), #07111F); border: 1px solid rgba(201,169,110,0.3); display: grid; place-items: center; position: relative; }
.passport .pphoto .pav { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg,#C9A96E,#D8B98A); color: #07111F; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:19px; }
.passport .pstamp { position: absolute; bottom: 6px; right: -16px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(201,169,110,0.6); color: rgba(201,169,110,0.85); display: grid; place-items: center; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-align: center; transform: rotate(-12deg); background: rgba(7,17,31,0.6); line-height: 1.1; }
.passport .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.passport .pf .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.passport .pf .v { font-size: 14px; font-weight: 600; margin-top: 3px; }
.passport .pf.full { grid-column: 1 / -1; }
.passport .pf .v.gold { color: var(--acc2, #C9A96E); }
.passport__foot { padding: 13px 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.passport__foot svg { width: 15px; height: 15px; color: var(--accent); }
.passport__foot .gold { color: var(--accent); font-weight: 600; }

/* ---- featured visuals gallery ---- */
.fviz-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 860px){ .fviz-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .fviz-grid { grid-template-columns: 1fr; } }
.fviz { border: 1px solid var(--card-border); border-radius: var(--r-md); overflow: hidden; background: var(--card); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.fviz:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--accent) 30%, var(--card-border)); }
.fviz__prev { height: 116px; background: linear-gradient(135deg, var(--bg-alt), var(--bg-alt2)); border-bottom: 1px solid var(--border); display: grid; place-items: center; position: relative; overflow: hidden; }
.fviz__prev .pv-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--gold-grad-soft); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); display: grid; place-items: center; }
.fviz__prev .pv-ico svg { width: 21px; height: 21px; color: var(--accent-2); }
.fviz__prev::after { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(135deg, color-mix(in srgb,var(--accent) 7%, transparent) 0 1px, transparent 1px 18px); opacity:.7; }
.fviz__body { padding: 16px 18px; }
.fviz__body h4 { font-size: 15px; margin-bottom: 4px; }
.fviz__body p { font-size: 12.5px; color: var(--fg-muted); margin: 0; line-height: 1.45; }

/* AI concierge prompt callout */
.concierge { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--gold-grad-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.concierge .ch { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--accent-2); margin-bottom:9px; }
.concierge .ch svg { width:14px; height:14px; }
.concierge p { margin:0; font-size:14.5px; color: var(--fg); font-style: italic; line-height:1.45; }

@media (max-width: 920px){ .float-stage { min-height: 380px; } }