/* A physical cabinet, glass windows and seven-sided rotating review drums. */
.slot-section { padding: 80px 0 88px; position: relative; overflow: hidden; }
.slot-machine-wrapper { max-width: 1360px; width: calc(100% - clamp(48px, 10vw, 160px)); margin: 48px auto 0; padding: 0 16px 30px 0; perspective: 1600px; }
.slot-machine { position: relative; isolation: isolate; transform: rotateX(3deg); transform-style: preserve-3d; }
.slot-machine::before { content: ''; position: absolute; inset: 15% 4% -44px; border-radius: 50%; background: #000; filter: blur(32px); opacity: .75; z-index: -2; }
.slot-cab { position: relative; padding: 10px; border-radius: 42px 42px 24px 24px; background: linear-gradient(125deg, #e0e3d9 0%, #7a817c 4%, #2a322e 13%, #a6aba3 26%, #434e47 40%, #111916 63%, #859088 87%, #b8bdb2 97%, #4a554c); box-shadow: 0 10px 0 #252d28, 0 14px 0 #111914, 10px 17px 0 #090d0b, 0 32px 48px #0009, inset 0 1px 1px #fff9; }
.slot-cab::after { content: ''; position: absolute; inset: 5px; border: 1px solid #f3f8e938; border-radius: 37px 37px 19px 19px; pointer-events: none; }
.slot-cab-inner { position: relative; padding: 26px 32px 18px; border: 1px solid #0b100d; border-radius: 32px 32px 16px 16px; background: repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px), linear-gradient(135deg, #2b3730, #151e19 40%, #0d1410 75%, #27332b); box-shadow: inset 0 2px 4px #000c, inset 0 -1px 0 #8b9b8950; }
.slot-cab-inner::before, .slot-cab-inner::after { content: ''; position: absolute; width: 7px; height: 7px; border: 1px solid #0a0c0a; border-radius: 50%; background: linear-gradient(135deg, #8c968b 42%, #101710 43% 57%, #626b60 58%); box-shadow: 0 1px 2px #000; top: 20px; }
.slot-cab-inner::before { left: 14px; }
.slot-cab-inner::after { right: 14px; }
.slot-display-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 4px 22px; font: 500 10px/1.5 var(--font-body); letter-spacing: .15em; text-transform: uppercase; }
.slot-display-name { display: inline-flex; align-items: center; gap: 10px; color: #c6d1c2; }
.slot-display-name::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #00ff8880; }
.slot-display-readout { display: flex; gap: 18px; align-items: center; border: 1px solid #59685655; border-radius: 5px; background: #08130c; padding: 7px 12px; box-shadow: inset 0 2px 4px #0009, 0 1px 0 #ffffff0d; }
#slotState { color: #99bf9e; text-transform: none; letter-spacing: .02em; }
#slotPosition { color: #c9eeaf; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.slot-reels { position: relative; display: grid; grid-template-columns: 1fr 2.5fr 1fr; gap: 9px; padding: 7px; border: 1px solid #b4beb24d; border-radius: 18px; background: linear-gradient(#030705, #5b675c 50%, #070b08); box-shadow: 0 1px 0 #e8f0db44, 0 -2px 2px #000, inset 0 0 0 3px #060b07; }
.slot-reel { position: relative; height: 252px; border-radius: 10px; overflow: hidden; background: #d8dfcc; perspective: 1000px; box-shadow: 0 0 0 1px #000, 0 1px 0 #d8e2cb66; }
.slot-reel::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(#07120ee8 0%, #17291c7d 9%, #30452b20 23%, transparent 37% 63%, #30452b20 77%, #14291c7d 91%, #07120ee8); box-shadow: inset 5px 0 8px #14201750, inset -5px 0 8px #14201750; }
.slot-reel::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, #ffffff20 5%, #fff1 21%, transparent 21.5% 65%, #ffffff08 65.5% 74%, transparent 74.5%); box-shadow: inset 0 1px 2px #fff8; border-radius: inherit; }
.slot-reel-highlight { position: absolute; z-index: 7; inset: 28% 0; pointer-events: none; border-block: 1px solid #3e765717; background: linear-gradient(transparent, #c4efbe0c, transparent); }
.slot-reel-strip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.slot-reel-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #162b1e; background: linear-gradient(90deg, #d0d5c1, #f0efdc 16%, #e9edda 50%, #e0e5cf 85%, #c5ceb6); border-block: 1px solid #abb79a; }
.slot-name-content, .slot-quote-content, .slot-rating-content { text-align: center; width: 100%; }
.slot-initials { width: 54px; height: 54px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; font: 700 .9rem var(--font-heading); color: #14221a; border: 3px solid #f8faeac0; box-shadow: 0 2px 6px #17271538, inset 0 -4px 7px #0002; }
.slot-client-name { font: 700 .95rem/1.35 var(--font-heading); margin-bottom: 6px; }
.slot-client-company { font: 500 .6rem/1.6 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #53664e; }
.slot-quote-content { max-width: 630px; padding: 0 12px; }
.slot-quote-mark { font: 700 2rem/1 var(--font-heading); color: #508260; height: 26px; margin-bottom: 6px; }
.slot-quote-text { font: 500 clamp(14px, 1.2vw, 18px)/1.65 var(--font-body); color: #263c2c; }
.slot-stars { color: #40623d; font-size: 1.15rem; letter-spacing: 3px; white-space: nowrap; margin-bottom: 12px; text-shadow: 0 1px 0 #ffff; }
.slot-project-tag { display: inline-block; border: 1px solid #71916766; border-radius: 3px; padding: 5px 9px; color: #42653e; font: 600 .55rem/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.slot-cab-arrow { position: absolute; top: 52%; z-index: 8; width: 0; height: 0; border-block: 6px solid transparent; filter: drop-shadow(0 0 5px #00ff8870); }
.slot-cab-arrow--left { left: 14px; border-left: 8px solid var(--accent); }
.slot-cab-arrow--right { right: 14px; border-right: 8px solid var(--accent); }
.slot-counter { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.slot-counter-dot { position: relative; width: 26px; height: 26px; display: grid; place-items: center; background: transparent; cursor: pointer; }
.slot-counter-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #07110a; border: 1px solid #727e6a80; box-shadow: 0 1px 0 #ffffff18; }
.slot-counter-dot.active::before { background: var(--accent); border-color: #9affa7; box-shadow: 0 0 8px #00ff8860; }
.slot-counter-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 50%; }
/* The console projects forward, with an extruded lower lip and mechanical keys. */
.slot-console { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 32px; width: 88%; margin: -1px auto 0; padding: 22px 30px 26px; border: 1px solid #81917d60; border-radius: 8px 8px 24px 24px; background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px), linear-gradient(175deg, #657260, #303c31 12%, #19251d 55%, #2f3d30); box-shadow: inset 0 2px 1px #dceacb55, inset 0 -2px 0 #0009, 0 9px 0 #111b13, 0 11px 0 #485740, 0 24px 25px #000b; transform: perspective(900px) rotateX(12deg); transform-origin: top; }
.slot-console::before, .slot-console::after { content: ''; position: absolute; top: 45%; width: clamp(30px, 7vw, 90px); height: 26px; border-radius: 4px; }
.slot-console::before { left: 5%; background: repeating-linear-gradient(0deg, #050c07 0 2px, #85907960 2px 3px, transparent 3px 6px); }
.slot-console::after { right: 6%; width: 44px; height: 12px; background: #040a05; border: 3px solid #7c8d7290; box-shadow: 0 2px 0 #000, inset 0 1px 2px #000; }
.slot-btn-mini { position: relative; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 50%; border: 3px solid #19251a; background: radial-gradient(ellipse at 40% 20%, #5b6b55, #28382c 60%, #102015); color: #bdcbb6; box-shadow: 0 0 0 1px #84917c88, 0 5px 0 #09120b, 0 8px 8px #0008, inset 0 2px 3px #fff2; cursor: pointer; transition: transform .15s, color .2s; }
.slot-btn-mini svg { width: 20px; height: 20px; }
.slot-btn-mini::after { position: absolute; top: calc(100% + 13px); white-space: nowrap; font: 600 8px/1 var(--font-body); letter-spacing: .12em; color: #b2c1a8; }
#slotAutoBtn::after { content: 'AUTO OFF'; }
#slotAutoBtn.active::after { content: 'AUTO ON'; color: #a8efb6; }
#slotMuteBtn::after { content: 'SOUND ON'; }
#slotMuteBtn.muted::after { content: 'SOUND OFF'; }
.slot-btn-mini:active { transform: translateY(3px); }
.slot-btn-mini:hover { color: #d9f0ca; }
.slot-btn-mini:disabled { opacity: .45; cursor: default; }
#slotAutoBtn.active { color: #94f6a7; }
.slot-btn-dot { position: absolute; top: 0; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px #00ff8880; opacity: 0; }
#slotAutoBtn.active .slot-btn-dot { opacity: 1; }
#slotMuteBtn .slot-ico-muted, #slotMuteBtn.muted .slot-ico-sound { display: none; }
#slotMuteBtn.muted .slot-ico-muted { display: block; }
.slot-spin-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 102px; height: 102px; border-radius: 50%; border: 6px solid #19271c; outline: 1px solid #adbaa090; color: #073b21; background: radial-gradient(ellipse at 40% 15%, #c5f9be, #61e99a 32%, #08bf69 70%, #046b3a); box-shadow: 0 7px 0 #081b10, 0 12px 12px #000a, inset 0 3px 4px #f3ffeccc, inset 0 -5px 5px #00592a88, 0 0 25px #00ff881c; cursor: pointer; transition: transform .15s, filter .2s; }
.slot-spin-main { font: 700 1rem/1 var(--font-heading); letter-spacing: .14em; }
.slot-spin-sub { font: 600 .4rem/1.5 var(--font-body); letter-spacing: .1em; }
.slot-spin-btn:hover { filter: brightness(1.08); }
.slot-spin-btn:active, .slot-spin-btn.spinning { transform: translateY(4px); }
.slot-spin-btn:disabled { cursor: wait; }
.slot-lever { position: absolute; right: -42px; top: 23%; width: 54px; height: 210px; z-index: -1; cursor: pointer; background: none; }
.slot-lever-hub { position: absolute; left: 0; bottom: 30px; width: 36px; height: 54px; border-radius: 0 12px 12px 0; background: linear-gradient(#8c9587, #2b382d 25%, #0b150f 65%, #53634b); box-shadow: 3px 5px 4px #000a; }
.slot-lever-stick { position: absolute; bottom: 54px; left: 30px; width: 12px; height: 130px; border-radius: 6px; background: linear-gradient(90deg, #19241b, #dce5d2 38%, #77876a 54%, #20321f); transform-origin: center bottom; transition: transform .45s cubic-bezier(.2,.8,.3,1); }
.slot-lever-ball { position: absolute; top: -22px; left: -15px; width: 42px; height: 42px; border: 1px solid #51835a; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #dcffe0, #53e18e 22%, #069d51 54%, #01391c 88%); box-shadow: inset -5px -7px 8px #00291499, 3px 7px 8px #0008; }
.slot-machine.lever-pull .slot-lever-stick { transform: rotateX(-58deg) rotate(12deg); }
.slot-machine[aria-busy="true"] .slot-display-name::before { background: #eed79c; box-shadow: 0 0 12px #eed79c66; }
.slot-machine.won .slot-display-readout { border-color: #00ff8860; }
.slot-machine.won .slot-reel-highlight { animation: slotLandLight .7s ease-out; }
@keyframes slotLandLight { from { background: #a0ff941f; } to { background: transparent; } }
@media (max-width: 1024px) {
    .slot-machine-wrapper { width: calc(100% - 64px); }
    .slot-cab-inner { padding: 22px 20px 14px; }
    .slot-reels { grid-template-columns: 1fr 2.2fr 1fr; }
    .slot-reel-item { padding: 12px; }
    .slot-quote-content { padding: 0; }
    .slot-client-name { font-size: .85rem; }
    .slot-stars { font-size: .85rem; letter-spacing: 1px; }
    .slot-lever { right: -30px; transform: scale(.85); transform-origin: left center; }
    .slot-cab-arrow { display: none; }
}
@media (max-width: 600px) {
    .slot-section { padding-block: 56px 64px; }
    .slot-machine-wrapper { width: calc(100% - 32px); padding: 0 0 24px; margin-top: 30px; }
    .slot-machine { transform: none; }
    .slot-cab { padding: 6px; border-radius: 26px 26px 16px 16px; box-shadow: 0 6px 0 #293429, 0 9px 0 #0c130e, 0 22px 30px #0008; }
    .slot-cab::after { inset: 3px; border-radius: 23px 23px 13px 13px; }
    .slot-cab-inner { padding: 17px 12px 10px; border-radius: 20px 20px 10px 10px; }
    .slot-cab-inner::before, .slot-cab-inner::after { display: none; }
    .slot-display-top { gap: 10px; margin: 0 2px 14px; font-size: 8px; letter-spacing: .08em; }
    .slot-display-name { gap: 6px; }
    .slot-display-readout { gap: 8px; padding: 5px 7px; }
    #slotState { font-size: 8px; }
    .slot-reels { grid-template-columns: 1fr 1fr; gap: 7px; padding: 5px; border-radius: 12px; }
    .slot-reel { height: 146px; border-radius: 6px; }
    #slotReel2 { grid-column: 1 / -1; grid-row: 2; height: 208px; }
    .slot-reel-item { padding: 13px; }
    .slot-initials { width: 38px; height: 38px; margin-bottom: 7px; font-size: .7rem; border-width: 2px; }
    .slot-client-name { font-size: .75rem; }
    .slot-client-company { font-size: .5rem; letter-spacing: .04em; }
    .slot-stars { font-size: 1rem; letter-spacing: 2px; }
    .slot-project-tag { font-size: .5rem; }
    .slot-quote-content { max-width: 350px; padding: 0 6px; }
    .slot-quote-text { font-size: .85rem; line-height: 1.6; }
    .slot-quote-mark { font-size: 1.6rem; height: 20px; }
    .slot-counter { gap: 5px; margin-top: 6px; }
    .slot-console { width: 92%; padding: 18px 14px 23px; gap: 24px; border-radius: 4px 4px 20px 20px; }
    .slot-console::before, .slot-console::after, .slot-lever { display: none; }
    .slot-btn-mini { width: 44px; height: 44px; border-width: 2px; }
    .slot-btn-mini svg { width: 16px; height: 16px; }
    .slot-btn-mini::after { font-size: 7px; }
    .slot-spin-btn { width: 82px; height: 82px; border-width: 5px; }
    .slot-spin-main { font-size: .9rem; }
    .slot-spin-sub { font-size: .33rem; }
}
@media (prefers-reduced-motion: reduce) {
    .slot-machine { transform: none; }
    .slot-machine *, .slot-machine *::before, .slot-machine *::after { animation: none !important; transition: none !important; }
}

/* Lower page base: a grey rectangle begins behind the review machine and carries
   on through Labs, Contact and the footer, giving the end of the page its own
   colour. It belongs to the section, not the machine, so the machine's 3D layers
   are never enlarged or regrouped by it. slot-machine.js sets --slot-base-top to
   halfway down the machine. The machine itself is unchanged. */
:root { --page-base: #1b1d1c; }
.slot-section::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    top: var(--slot-base-top, 60%);
    background: var(--page-base);
    border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
    pointer-events: none;
}
.slot-section > .section-header, .slot-section > .slot-machine-wrapper { position: relative; }
#labs, #contact, .footer { background: var(--page-base); }