/* QMS-PHOTO pages - dark studio theme */
/* Standalone: the qms-photo*.html pages load this file instead of styles.css. */
/* All light, smoke and grain are drawn in CSS - no photos. */

:root {
    --qp-bg: #0e0b09;
    --qp-bg-alt: #130f0c;
    --qp-ivory: #efe6d8;
    --qp-text: #cfc4b4;
    --qp-muted: #9d9182;
    --qp-brass: #c8a46a;
    --qp-brass-light: #e0c48f;
    --qp-ink: #17110c;
    --qp-line: rgba(200, 164, 106, 0.22);
    --qp-line-soft: rgba(239, 230, 216, 0.08);
    --qp-cognac: 138, 75, 42;
    --qp-fern: 63, 78, 52;
    --qp-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --qp-sans: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--qp-bg);
    color: var(--qp-text);
    font-family: var(--qp-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* Film grain over the whole page */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
    max-width: 100%;
    display: block;
}

::selection {
    background: rgba(200, 164, 106, 0.35);
    color: #fff;
}

:focus-visible {
    outline: 1px solid var(--qp-brass);
    outline-offset: 4px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 16px 32px;
    border: 1px solid var(--qp-brass);
    border-radius: 1px;
    background: transparent;
    color: var(--qp-ivory);
    font-family: var(--qp-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.btn:hover {
    background: var(--qp-brass);
    color: var(--qp-ink);
}

.btn-solid {
    background: var(--qp-brass);
    color: var(--qp-ink);
}

.btn-solid:hover {
    background: var(--qp-brass-light);
    border-color: var(--qp-brass-light);
}

/* ---------- Header (same markup as the other runqms.com pages) ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(14, 11, 9, 0.84);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--qp-line-soft);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

/* QMSLogo-white.png: a white copy of the QMS logo for the dark header */
.logo img {
    height: 46px;
    width: auto;
    opacity: 0.9;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.nav-links a {
    color: var(--qp-ivory);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--qp-brass-light);
}

.nav-links .btn {
    padding: 11px 20px;
    color: var(--qp-brass-light);
}

.nav-links .btn:hover {
    color: var(--qp-ink);
}

.dropdown {
    position: relative;
}

/* Keeps the menu open while the pointer crosses the gap */
.dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: -22px;
    min-width: 210px;
    list-style: none;
    padding: 10px 0;
    background: #17120e;
    border: 1px solid var(--qp-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dropdown-menu a {
    display: block;
    padding: 10px 22px;
    color: var(--qp-text);
    letter-spacing: 0.14em;
}

.dropdown-menu a:hover {
    background: rgba(200, 164, 106, 0.07);
}

/* ---------- Atmosphere: window light, smoke ---------- */
/* Light through a tall paned window, falling across the wall */
.qp-window {
    position: absolute;
    top: -10%;
    right: -14%;
    width: 64%;
    height: 125%;
    pointer-events: none;
    transform: perspective(1200px) rotateY(-34deg) rotateZ(-7deg);
    transform-origin: right center;
    filter: blur(9px);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 58% 46%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 58% 46%, #000 25%, transparent 78%);
}

.qp-window::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 228, 188, 0.2) 0 calc(33.333% - 16px), transparent calc(33.333% - 16px) 33.333%);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(25% - 16px), transparent calc(25% - 16px) 25%);
    mask-image: repeating-linear-gradient(180deg, #000 0 calc(25% - 16px), transparent calc(25% - 16px) 25%);
}

.qp-window--left {
    right: auto;
    left: -14%;
    transform: perspective(1200px) rotateY(34deg) rotateZ(7deg);
    transform-origin: left center;
}

/* Slow-drifting haze */
.qp-smoke {
    position: absolute;
    inset: -25%;
    pointer-events: none;
    background:
        radial-gradient(26% 16% at 34% 62%, rgba(214, 204, 190, 0.075), transparent 70%),
        radial-gradient(20% 28% at 58% 36%, rgba(190, 180, 168, 0.055), transparent 70%),
        radial-gradient(30% 13% at 72% 72%, rgba(214, 204, 190, 0.05), transparent 70%);
    filter: blur(26px);
    animation: qp-drift 40s ease-in-out infinite alternate;
}

@keyframes qp-drift {
    0% { transform: translate3d(-4%, 3%, 0) rotate(-2deg) scale(1); }
    100% { transform: translate3d(5%, -4%, 0) rotate(3deg) scale(1.1); }
}

/* Soft shadow of a fern by the window, cast into the window light */
.qp-leaves {
    position: absolute;
    right: -9%;
    bottom: -2%;
    width: 42%;
    max-width: 620px;
    aspect-ratio: 1;
    pointer-events: none;
    opacity: 0.55;
    filter: blur(6px);
    transform: scaleX(-1) rotate(-8deg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cpath d='M100 410 Q96 200 108 20' stroke='black' stroke-width='3' fill='none'/%3E%3Cellipse cx='57' cy='380' rx='43' ry='9' transform='rotate(-28 100 380)'/%3E%3Cellipse cx='143' cy='370' rx='43' ry='9' transform='rotate(28 100 370)'/%3E%3Cellipse cx='59.7' cy='352' rx='40.3' ry='8.7' transform='rotate(-28 100 352)'/%3E%3Cellipse cx='140.3' cy='342' rx='40.3' ry='8.7' transform='rotate(28 100 342)'/%3E%3Cellipse cx='62.5' cy='324' rx='37.5' ry='8.3' transform='rotate(-28 100 324)'/%3E%3Cellipse cx='137.5' cy='314' rx='37.5' ry='8.3' transform='rotate(28 100 314)'/%3E%3Cellipse cx='65.2' cy='296' rx='34.8' ry='8' transform='rotate(-28 100 296)'/%3E%3Cellipse cx='134.8' cy='286' rx='34.8' ry='8' transform='rotate(28 100 286)'/%3E%3Cellipse cx='68' cy='268' rx='32' ry='7.6' transform='rotate(-28 100 268)'/%3E%3Cellipse cx='132' cy='258' rx='32' ry='7.6' transform='rotate(28 100 258)'/%3E%3Cellipse cx='70.7' cy='240' rx='29.3' ry='7.3' transform='rotate(-28 100 240)'/%3E%3Cellipse cx='129.3' cy='230' rx='29.3' ry='7.3' transform='rotate(28 100 230)'/%3E%3Cellipse cx='73.5' cy='212' rx='26.5' ry='6.9' transform='rotate(-28 100 212)'/%3E%3Cellipse cx='126.5' cy='202' rx='26.5' ry='6.9' transform='rotate(28 100 202)'/%3E%3Cellipse cx='76.2' cy='184' rx='23.8' ry='6.6' transform='rotate(-28 100 184)'/%3E%3Cellipse cx='123.8' cy='174' rx='23.8' ry='6.6' transform='rotate(28 100 174)'/%3E%3Cellipse cx='79' cy='156' rx='21' ry='6.2' transform='rotate(-28 100 156)'/%3E%3Cellipse cx='121' cy='146' rx='21' ry='6.2' transform='rotate(28 100 146)'/%3E%3Cellipse cx='81.7' cy='128' rx='18.3' ry='5.9' transform='rotate(-28 100 128)'/%3E%3Cellipse cx='118.3' cy='118' rx='18.3' ry='5.9' transform='rotate(28 100 118)'/%3E%3Cellipse cx='84.5' cy='100' rx='15.5' ry='5.5' transform='rotate(-28 100 100)'/%3E%3Cellipse cx='115.5' cy='90' rx='15.5' ry='5.5' transform='rotate(28 100 90)'/%3E%3Cellipse cx='87.2' cy='72' rx='12.8' ry='5.2' transform='rotate(-28 100 72)'/%3E%3Cellipse cx='112.8' cy='62' rx='12.8' ry='5.2' transform='rotate(28 100 62)'/%3E%3Cellipse cx='90' cy='44' rx='10' ry='4.8' transform='rotate(-28 100 44)'/%3E%3Cellipse cx='110' cy='34' rx='10' ry='4.8' transform='rotate(28 100 34)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' transform='translate(40 120) rotate(-32 100 400)'/%3E%3Cuse href='%23f' transform='translate(170 90) rotate(8 100 400) scale(0.92)'/%3E%3Cuse href='%23f' transform='translate(280 170) rotate(38 100 400) scale(0.8)'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Old brick wall, only visible where the light falls */
.qp-brick {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='72'%3E%3Crect width='120' height='72' fill='%23000'/%3E%3Cg fill='%238a4630'%3E%3Crect x='2' y='2' width='116' height='32'/%3E%3Crect x='0' y='38' width='58' height='32' opacity='.8'/%3E%3Crect x='62' y='38' width='58' height='32' opacity='.9'/%3E%3C/g%3E%3C/svg%3E") repeat;
    -webkit-mask-image: radial-gradient(ellipse 55% 75% at 18% 45%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 55% 75% at 18% 45%, #000 0%, transparent 70%);
}

/* ---------- Hero ---------- */
.qp-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: min(92vh, 920px);
    padding: 130px 0 90px;
    background:
        radial-gradient(ellipse 60% 55% at 10% 90%, rgba(var(--qp-cognac), 0.4), transparent 70%),
        radial-gradient(ellipse 45% 40% at 94% 6%, rgba(var(--qp-fern), 0.32), transparent 70%),
        radial-gradient(ellipse 70% 60% at 70% 42%, rgba(255, 214, 160, 0.05), transparent 70%),
        linear-gradient(118deg, transparent 38%, rgba(255, 224, 180, 0.035) 52%, transparent 66%),
        linear-gradient(180deg, #120e0b 0%, #0c0a08 100%);
}

/* Vignette */
.qp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 220px 40px rgba(0, 0, 0, 0.75);
}

.qp-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.qp-hero-inner {
    max-width: 780px;
}

/* qms-photo-logo-mono.png: black-and-white (ivory) QMS-Photo logo for the dark pages */
.qp-logo {
    display: block;
    width: clamp(230px, 28vw, 340px);
    height: auto;
    margin-left: -6px;
}

.qp-logo--sm {
    width: clamp(170px, 16vw, 220px);
    margin-bottom: 18px;
}

.qp-powered {
    margin: 6px 0 48px;
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--qp-muted);
}

.qp-hero h1,
.qp-h2,
.qp-quote,
.qp-cta h2 {
    text-wrap: balance;
}

.qp-hero h1 {
    margin-bottom: 30px;
    font-family: var(--qp-serif);
    font-size: clamp(2.8rem, 6.6vw, 5.8rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--qp-ivory);
}

.qp-hero h1 em,
.qp-h2 em,
.qp-quote em,
.qp-cta h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--qp-brass-light);
}

.qp-hero-sub {
    max-width: 600px;
    margin-bottom: 46px;
    font-size: 1.12rem;
    color: var(--qp-text);
}

.qp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.qp-facts {
    display: flex;
    flex-wrap: wrap;
    margin-top: 90px;
    padding-top: 24px;
    list-style: none;
    border-top: 1px solid var(--qp-line);
}

.qp-facts li {
    margin-right: 28px;
    padding-right: 28px;
    border-right: 1px solid var(--qp-line-soft);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--qp-muted);
}

.qp-facts li:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

.qp-hero--sm {
    min-height: 0;
    padding: 120px 0 96px;
}

.qp-hero--sm h1 {
    font-size: clamp(2.5rem, 5.2vw, 4.4rem);
}

.qp-hero--sm .qp-hero-sub {
    margin-bottom: 0;
}

.qp-hero--sm .qp-leaves {
    width: 34%;
    opacity: 0.42;
}

/* ---------- Product sub-navigation (same markup as the shop pages) ---------- */
.product-nav {
    position: relative;
    z-index: 2;
    background: #0a0807;
    border-top: 1px solid var(--qp-line-soft);
    border-bottom: 1px solid var(--qp-line-soft);
}

.product-nav-links {
    display: flex;
    justify-content: center;
    gap: 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.product-nav-links::-webkit-scrollbar {
    display: none;
}

.product-nav-links a {
    display: block;
    padding: 20px 18px;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--qp-muted);
    transition: color 0.3s, border-color 0.3s;
}

.product-nav-links a:hover {
    color: var(--qp-ivory);
}

.product-nav-links a.active {
    color: var(--qp-brass-light);
    border-bottom-color: var(--qp-brass);
}

/* ---------- Sections and type ---------- */
.qp-section {
    position: relative;
    padding: 130px 0;
}

.qp-section--alt {
    background: var(--qp-bg-alt);
    border-top: 1px solid var(--qp-line-soft);
    border-bottom: 1px solid var(--qp-line-soft);
}

/* Warm lamp glow from one side */
.qp-section--glow {
    background:
        radial-gradient(ellipse 45% 70% at 0% 50%, rgba(var(--qp-cognac), 0.16), transparent 70%),
        var(--qp-bg);
}

.qp-section--glow-right {
    background:
        radial-gradient(ellipse 45% 70% at 100% 50%, rgba(var(--qp-fern), 0.18), transparent 70%),
        var(--qp-bg);
}

.qp-eyebrow {
    display: block;
    margin-bottom: 22px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--qp-brass);
}

.qp-h2 {
    margin-bottom: 24px;
    font-family: var(--qp-serif);
    font-size: clamp(2.2rem, 4.4vw, 3.5rem);
    font-weight: 500;
    line-height: 1.06;
    color: var(--qp-ivory);
}

.qp-lead {
    max-width: 620px;
    font-size: 1.08rem;
    color: var(--qp-text);
}

.qp-head {
    max-width: 760px;
    margin-bottom: 72px;
}

.qp-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.qp-head--center .qp-lead {
    margin: 0 auto;
}

.qp-note {
    max-width: 680px;
    margin: 48px auto 0;
    text-align: center;
    font-size: 0.88rem;
    color: var(--qp-muted);
}

/* ---------- Statement ---------- */
.qp-statement {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.qp-quote {
    font-family: var(--qp-serif);
    font-size: clamp(2.1rem, 3.8vw, 3.2rem);
    font-weight: 400;
    line-height: 1.12;
    color: var(--qp-ivory);
}

.qp-statement-text p {
    font-size: 1.05rem;
}

.qp-statement-text p + p {
    margin-top: 20px;
}

/* ---------- Numbered index of the suite ---------- */
.qp-index {
    list-style: none;
    border-top: 1px solid var(--qp-line);
}

.qp-index li {
    border-bottom: 1px solid var(--qp-line);
}

.qp-index a {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.5fr) 40px;
    gap: 30px;
    align-items: baseline;
    padding: 40px 0;
    color: inherit;
    text-decoration: none;
    transition: background 0.4s, padding 0.4s;
}

.qp-index a:hover {
    padding-left: 18px;
    background: linear-gradient(90deg, rgba(200, 164, 106, 0.07), transparent 70%);
}

.qp-index-num {
    font-family: var(--qp-serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--qp-brass);
}

.qp-index-title {
    font-family: var(--qp-serif);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--qp-ivory);
}

.qp-index-text {
    font-size: 1rem;
    color: var(--qp-text);
}

.qp-index-arrow {
    justify-self: end;
    font-size: 1.3rem;
    color: var(--qp-brass);
    transition: transform 0.3s;
}

.qp-index a:hover .qp-index-arrow {
    transform: translateX(6px);
}

/* ---------- Split: text beside a framed screenshot ---------- */
.qp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 90px;
    align-items: center;
}

.qp-split.reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.qp-split.reverse > :first-child {
    order: 2;
}

.qp-split p {
    font-size: 1.05rem;
}

.qp-list {
    margin: 30px 0 44px;
    list-style: none;
}

.qp-list li {
    position: relative;
    padding: 13px 0 13px 36px;
    border-bottom: 1px solid var(--qp-line-soft);
    color: var(--qp-text);
}

.qp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(13px + 0.88em);
    width: 18px;
    height: 1px;
    background: var(--qp-brass);
}

.qp-list strong {
    font-weight: 500;
    color: var(--qp-ivory);
}

/* ---------- Framed print (screenshot slots) ---------- */
.qp-frame {
    position: relative;
    margin: 0;
}

/* Warm picture light washing down the wall above the print */
.qp-frame::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: -90px;
    height: 260px;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 55% at 50% 0%, rgba(255, 214, 160, 0.13), transparent 72%);
}

.qp-frame-outer {
    position: relative;
    padding: 16px;
    background: linear-gradient(150deg, #2b211a 0%, #1a140f 45%, #110d0a 100%);
    border: 1px solid rgba(200, 164, 106, 0.32);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 20px 40px -20px rgba(0, 0, 0, 0.7);
}

/* Soft window light across the glass */
.qp-frame-outer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 230, 190, 0.07) 0%, transparent 42%);
}

.qp-frame-outer img {
    width: 100%;
    height: auto;
    border: 1px solid rgba(200, 164, 106, 0.14);
}

.qp-shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    aspect-ratio: 16 / 10;
    padding: 20px;
    background: radial-gradient(ellipse at 50% 40%, #1f1813, #0c0a08 75%);
    border: 1px solid rgba(200, 164, 106, 0.14);
    text-align: center;
}

.qp-shot svg {
    width: 46px;
    height: 46px;
    color: var(--qp-brass);
    opacity: 0.8;
}

.qp-shot-title {
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--qp-muted);
}

.qp-frame figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--qp-muted);
}

.qp-frame figcaption::before {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--qp-brass);
}

/* ---------- Leather panels ---------- */
.qp-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.qp-panel {
    position: relative;
    padding: 52px 46px;
    background:
        radial-gradient(ellipse 120% 80% at 0% 0%, rgba(var(--qp-cognac), 0.24), transparent 60%),
        linear-gradient(160deg, #211a15, #15100d);
    border: 1px solid var(--qp-line);
}

/* Stitched edge */
.qp-panel::after,
.qp-price::after {
    content: "";
    position: absolute;
    inset: 9px;
    pointer-events: none;
    border: 1px dashed rgba(200, 164, 106, 0.17);
}

.qp-panel h3 {
    margin-bottom: 8px;
    font-family: var(--qp-serif);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--qp-ivory);
}

.qp-panel .qp-list {
    margin: 22px 0 0;
}

.qp-panel .qp-list li:last-child {
    border-bottom: 0;
}

/* ---------- Steps ---------- */
.qp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    list-style: none;
}

.qp-step {
    padding-top: 30px;
    border-top: 1px solid var(--qp-line);
}

.qp-step-num {
    display: block;
    margin-bottom: 18px;
    font-family: var(--qp-serif);
    font-size: 2.6rem;
    font-style: italic;
    line-height: 1;
    color: var(--qp-brass);
}

.qp-step h3 {
    margin-bottom: 10px;
    font-family: var(--qp-serif);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--qp-ivory);
}

.qp-step p {
    font-size: 0.97rem;
}

/* ---------- Tiles with hairline borders ---------- */
.qp-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--qp-line);
    border-left: 1px solid var(--qp-line);
}

.qp-tiles--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qp-tile {
    padding: 46px 40px;
    border-right: 1px solid var(--qp-line);
    border-bottom: 1px solid var(--qp-line);
    transition: background 0.4s;
}

.qp-tile:hover {
    background: rgba(200, 164, 106, 0.035);
}

.qp-tile h3 {
    margin-bottom: 12px;
    font-family: var(--qp-serif);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--qp-ivory);
}

.qp-tile p {
    font-size: 0.97rem;
}

/* ---------- Genres ---------- */
.qp-genres {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--qp-serif);
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--qp-ivory);
}

.qp-genres span {
    white-space: nowrap;
}

.qp-genres .qp-dot {
    margin-left: 0.3em;
    font-style: normal;
    color: var(--qp-brass);
}

/* ---------- Payment providers ---------- */
.qp-providers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    border-top: 1px solid var(--qp-line);
    border-bottom: 1px solid var(--qp-line);
}

.qp-providers li {
    padding: 34px 60px;
    font-family: var(--qp-serif);
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 500;
    color: var(--qp-ivory);
}

.qp-tiles--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qp-tiles--4 .qp-tile {
    padding: 40px 30px;
}

/* ---------- Spec rows: title on the left, details on the right ---------- */
.qp-rows {
    border-top: 1px solid var(--qp-line);
}

.qp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 64px;
    padding: 58px 0;
    border-bottom: 1px solid var(--qp-line);
}

.qp-row-num {
    display: block;
    margin-bottom: 12px;
    font-family: var(--qp-serif);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--qp-brass);
}

.qp-row h3 {
    margin-bottom: 12px;
    font-family: var(--qp-serif);
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--qp-ivory);
}

.qp-row p {
    font-size: 1.02rem;
}

.qp-row .qp-list {
    margin: 0;
}

.qp-row .qp-list li:first-child {
    padding-top: 4px;
}

.qp-row .qp-list li:first-child::before {
    top: calc(4px + 0.88em);
}

.qp-row .qp-list li:last-child {
    border-bottom: 0;
}

.qp-gap-top {
    margin-top: 72px;
}

.qp-center {
    margin-top: 56px;
    text-align: center;
}

/* ---------- Pricing ---------- */
.qp-price {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 66px 58px;
    text-align: center;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--qp-cognac), 0.22), transparent 70%),
        linear-gradient(170deg, #1e1813, #120e0b);
    border: 1px solid rgba(200, 164, 106, 0.4);
}

.qp-price-amount {
    margin: 4px 0 10px;
    font-family: var(--qp-serif);
    font-size: clamp(2.3rem, 4.6vw, 3.3rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--qp-ivory);
}

.qp-price-note {
    margin-bottom: 30px;
    color: var(--qp-muted);
}

.qp-price .qp-list {
    display: inline-block;
    margin: 0 0 42px;
    text-align: left;
}

.qp-fine {
    margin-top: 26px;
    font-size: 0.82rem;
    color: var(--qp-muted);
}

/* ---------- Closing call to action ---------- */
.qp-cta {
    position: relative;
    overflow: hidden;
    padding: 170px 0;
    text-align: center;
    background:
        radial-gradient(ellipse 60% 70% at 50% 100%, rgba(var(--qp-cognac), 0.34), transparent 70%),
        #0b0907;
    border-top: 1px solid var(--qp-line-soft);
}

.qp-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 200px 30px rgba(0, 0, 0, 0.7);
}

.qp-cta .container {
    position: relative;
    z-index: 2;
}

.qp-cta h2 {
    margin-bottom: 24px;
    font-family: var(--qp-serif);
    font-size: clamp(2.5rem, 5.6vw, 4.8rem);
    font-weight: 500;
    line-height: 1.04;
    color: var(--qp-ivory);
}

.qp-cta p {
    max-width: 560px;
    margin: 0 auto 46px;
    font-size: 1.08rem;
}

/* ---------- Footer (same markup as the other runqms.com pages) ---------- */
footer {
    padding: 84px 0 36px;
    background: #090706;
    border-top: 1px solid var(--qp-line);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-logo img {
    height: 40px;
    width: auto;
    opacity: 0.85;
}

.footer-section p {
    font-size: 0.9rem;
}

.footer-section h4 {
    margin-bottom: 22px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--qp-brass);
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 12px;
}

.footer-section a {
    font-size: 0.92rem;
    color: var(--qp-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--qp-ivory);
}

.footer-bottom {
    max-width: 1200px;
    margin: 64px auto 0;
    padding: 30px 24px 0;
    border-top: 1px solid var(--qp-line-soft);
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--qp-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .product-nav-links {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .qp-split,
    .qp-split.reverse,
    .qp-statement {
        grid-template-columns: minmax(0, 1fr);
        gap: 56px;
    }

    .qp-split.reverse > :first-child {
        order: 0;
    }

    .qp-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qp-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    .qp-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qp-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 46px 0;
    }

    .qp-index a {
        grid-template-columns: 56px minmax(0, 1fr) 30px;
        gap: 10px 20px;
    }

    .qp-index-text {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    .qp-index-arrow {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .logo img {
        height: 40px;
    }

    .qp-section {
        padding: 88px 0;
    }

    .qp-hero {
        min-height: 0;
        padding: 96px 0 72px;
    }

    .qp-hero--sm {
        padding: 84px 0 68px;
    }

    .qp-window {
        width: 110%;
        right: -40%;
        opacity: 0.8;
    }

    .qp-window--left {
        left: -40%;
    }

    .qp-powered {
        margin-bottom: 36px;
    }

    .qp-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
        margin-top: 64px;
    }

    .qp-facts li {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .product-nav-links {
        -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
        mask-image: linear-gradient(90deg, #000 82%, transparent);
    }

    .qp-head {
        margin-bottom: 52px;
    }

    .qp-panel {
        padding: 42px 28px;
    }

    .qp-price {
        padding: 50px 24px;
    }

    .qp-providers li {
        padding: 22px 28px;
    }

    .qp-cta {
        padding: 110px 0;
    }

    .qp-frame-outer {
        padding: 10px;
    }
}

@media (max-width: 600px) {
    .qp-steps,
    .qp-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .qp-tile {
        padding: 36px 26px;
    }

    .qp-index a {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 32px 0;
    }

    .qp-index-arrow {
        display: none;
    }

    .qp-actions .btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .qp-smoke {
        animation: none;
    }

    .qp-index a,
    .qp-index-arrow,
    .btn {
        transition: none;
    }
}

/* ---------- Added 2026-10-16: hero plate, exhibition grid, lightbox, reveal ---------- */
.qp-hero-plate {
    position: relative;
    z-index: 3;
    max-width: 1020px;
    margin: 0 auto;
    padding: 34px 24px 0;
}

.qp-hero-plate .qp-frame {
    margin: 0;
}

.qp-plates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 30px;
}

.qp-plates .qp-frame {
    margin: 0;
}

.qp-plates .qp-frame-outer img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    width: 100%;
}

.zoomable {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(10, 8, 6, 0.93);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    cursor: zoom-out;
}

.lightbox.open {
    display: flex;
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--qp-line);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
}

.lightbox .lb-caption {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--qp-muted);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

.lightbox .lb-close {
    position: absolute;
    top: 16px;
    right: 26px;
    font-size: 2rem;
    color: var(--qp-muted);
    cursor: pointer;
    line-height: 1;
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.dropdown.open .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
}