/* The Gallery page. Loads after /styles.css and uses its tokens. The frame and slider rules are shared with the home
   page's Gallery row (further down). */

/* ===== The hall: the navy damask at full strength under a 10% navy shade, a soft gold glow, a navy band behind the
   nav and a 160px blend into the cream below. The title, then the before and afters as a wall of gold frames (three to
   a row, the last row centred; made bigger, Nik 27 Oct 2026), each its own slider, with no words but Before and After (Unity, 27 Oct 2026). ===== */
.hall{position:relative;isolation:isolate;overflow:clip;color:var(--cream);scroll-margin-top:60px;background:linear-gradient(180deg,rgba(245,240,232,0) 0,rgba(245,240,232,.6) 62%,var(--ground) 100%) bottom/100% 160px no-repeat,linear-gradient(rgba(21,35,89,.1),rgba(21,35,89,.1)),url(../results/damask-navy.webp?v=7e5b0451) 50% 50%/620px 620px repeat,var(--navy)}
.hall::before{content:"";position:absolute;z-index:-1;top:20px;right:-7%;width:min(900px,62vw);aspect-ratio:1;background:radial-gradient(closest-side,rgba(216,194,154,.2) 0,rgba(216,194,154,0) 100%);pointer-events:none}
.hall::after{content:"";position:absolute;inset:0 0 auto;height:240px;z-index:0;background:linear-gradient(180deg,rgba(15,26,69,.92) 0,rgba(15,26,69,.7) 42%,rgba(15,26,69,0) 100%);pointer-events:none}
.hall__inner{position:relative;z-index:1;padding-block:158px 220px}
.hall__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:64px 40px;max-width:1440px;margin:64px auto 0;padding:0;list-style:none}
.hall__item{flex:0 0 calc((100% - 80px) / 3);min-width:0}
.hall__item .case__frame::before{display:none}
.hall__item .case__gilt{filter:drop-shadow(0 18px 22px rgba(5,10,34,.45))}
.hall__item .case__tag{top:10px;padding:5px 10px;font-size:10px;line-height:12px}
.hall__item .case__tag--before{left:10px}
.hall__item .case__tag--after{right:10px}
.hall__item .case__knob{width:40px;height:40px;margin:-20px 0 0 -20px}
.hall__item .case__knob svg{width:18px;height:10px;stroke-width:1.8}
.hall__ahpra{margin-top:34px;text-align:center}
.hall__title{margin-top:22px;text-align:center;font-size:clamp(60px,7.8vw,112px);line-height:.93;letter-spacing:-.02em;white-space:nowrap}
.hall__title em{display:inline;color:#d8c29a}
.hall__head .crumbs{justify-content:center}

/* The slider in the gold frame (the treatment pages' frame): drag anywhere on the photo, or focus the handle and use
   the arrow keys */
.case__frame{--pos:43%;position:relative;width:100%;aspect-ratio:540/677}
.case__frame::before{content:"";position:absolute;top:-10%;left:-30%;width:160%;height:120%;border-radius:50%;background:radial-gradient(closest-side,rgba(216,194,154,.14) 0,rgba(216,194,154,0) 100%);pointer-events:none}
.case__window{position:absolute;left:17%;top:16.9%;width:67.3%;height:67.4%;overflow:hidden;border-radius:3px;background:#040f2d;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}
.case__window img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.case__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.case__tag{position:absolute;top:12px;z-index:1;padding:5px 10px;border-radius:999px;font-family:var(--caps);font-size:11px;letter-spacing:.16em;line-height:12px;text-transform:uppercase;pointer-events:none;background:rgba(21,35,89,.75);color:var(--cream)}
.case__tag--before{left:12px}
.case__tag--after{right:12px}
.case__handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;width:2px;margin-left:-1px;background:#d8c29a;outline:none}
.case__knob{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#d8c29a;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:transform .25s var(--ease-out)}
.case__knob svg{width:22px;height:12px;fill:none;stroke:var(--navy);stroke-width:1.6}
.case__window:hover .case__knob,.case__frame.is-dragging .case__knob{transform:scale(1.06)}
.case__handle:focus-visible .case__knob{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--gold-light)}
.case__gilt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(5,10,34,.55))}
.case__ahpra{padding-top:18px;font-size:13px;line-height:20px;color:rgba(245,240,232,.65)}

/* Reviews: the home page's review cards on cream, kept apart from the results */
.results-reviews{padding-block:40px 120px;background:var(--ground);overflow:hidden}
.results-reviews .reviews{margin-top:0}
.results-reviews .reviews__marquee{margin-top:24px}

/* ===== Between desktop and phone ===== */
@media (max-width:1180px){
  .hall__item{flex-basis:calc((100% - 40px) / 2)}
}

/* ===== Phone (and narrow tablets): two frames to a row, then one on small phones ===== */
@media (max-width:900px){
  .hall__inner{padding-block:100px 150px}
  .hall .crumbs{font-size:12px;letter-spacing:.12em}
  .hall__title{margin-top:16px;font-size:clamp(52px,17.4vw,68px);line-height:.94}
  .hall__grid{gap:36px 24px;margin-top:36px}
  .hall__item{flex-basis:calc((100% - 24px) / 2)}
  .hall__ahpra{margin-top:20px;font-size:12px;line-height:18px}
  .hall{background-size:100% 150px,auto,460px 460px}
  .hall::before{display:none}
  .hall::after{height:160px}
  .results-reviews{padding-block:30px 50px}
  .results-reviews .reviews__marquee{margin-top:6px}
}

@media (max-width:600px){
  .hall__item{flex-basis:100%;max-width:440px}
}

@media (prefers-reduced-motion:reduce){
  .case__knob{transition:none}
}

/* ===== Home page Gallery row (23 Oct 2026): each card in the sideways row is a gold frame with its own before/after
   slider (the frame and slider rules above). The card loses the photo card's crop, wash and zoom. ===== */
.real__track--frames{padding-block:24px 36px;margin-top:12px}
.real__card--frame{flex:0 0 clamp(300px,27vw,380px);aspect-ratio:auto;overflow:visible;border-radius:0;background:none}
.real__card--frame::after{display:none}
.real__card--frame:hover img{transform:none}
.real__card--frame .case__tag{top:8px;padding:4px 8px;font-size:9px;line-height:11px}
.real__card--frame .case__tag--before{left:8px}
.real__card--frame .case__tag--after{right:8px}
.real__card--frame .case__knob{width:40px;height:40px;margin:-20px 0 0 -20px}
.real__card--frame .case__knob svg{width:18px;height:10px;stroke-width:1.8}
/* Phones: each frame snaps to the middle of the screen, the first and last included */
@media (max-width:900px){
  .real__track--frames{padding-inline:calc(50vw - min(39vw,170px));scroll-padding-inline:0}
  .real__card--frame{flex-basis:min(78vw,340px);scroll-snap-align:center}
}
.real__card--frame .case__gilt{filter:drop-shadow(0 14px 16px rgba(5,10,34,.28))}
.real__card--frame .case__frame::before{display:none}
/* The treatment under each frame on the home page */
.real__treatment{margin-top:14px;text-align:center;font-family:var(--caps);font-size:12px;letter-spacing:.16em;line-height:16px;text-transform:uppercase;color:var(--navy)}
.real__treatment span{display:block;margin-top:6px;font-family:var(--display);font-size:22px;font-style:italic;letter-spacing:0;line-height:24px;text-transform:none;color:#7a6642}