/* Premium documentary gallery and image-free customer stories. */
.gallery{background:#f7f6f7;color:var(--ink);overflow:hidden}
.gallery-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.65fr);gap:80px;align-items:end;margin-bottom:54px}
.gallery-heading h2{margin-bottom:0}
.gallery-heading>p{max-width:480px;margin:0 0 8px;color:var(--muted);font-size:1.03rem;line-height:1.7}
.gallery-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:184px;gap:12px}
.gallery-item{position:relative;grid-column:span 4;grid-row:span 1;min-width:0;margin:0;padding:0;overflow:hidden;border:0;border-radius:18px;background:#18131a;cursor:zoom-in;isolation:isolate}
.gallery-item:nth-child(1){grid-column:span 7;grid-row:span 2}
.gallery-item:nth-child(2){grid-column:span 5;grid-row:span 2}
.gallery-item:nth-child(6),.gallery-item:nth-child(7),.gallery-item:nth-child(8){grid-column:span 4;grid-row:span 2}
.gallery-item:nth-child(n+9){grid-column:span 3;grid-row:span 2}
.gallery-item:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 36%,rgba(13,9,14,.78));opacity:.68;transition:opacity .45s ease}
.gallery-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.04) brightness(1.02);transform:scale(1.015);transition:transform 1.15s cubic-bezier(.2,.75,.2,1),filter .6s ease}
.gallery-item:nth-child(2) img,.gallery-item:nth-child(6) img,.gallery-item:nth-child(7) img{object-position:center 35%}
.gallery-item:nth-child(9) img{object-position:center 28%}
.gallery-caption{position:absolute;z-index:2;left:20px;right:18px;bottom:18px;display:grid;grid-template-columns:1fr auto;align-items:end;color:#fff;text-align:left;transform:translateY(8px);transition:transform .45s ease}
.gallery-caption small{grid-column:1/-1;margin-bottom:5px;color:var(--lilac);font-size:.68rem;font-weight:650;letter-spacing:.11em;text-transform:uppercase}
.gallery-caption b{font-size:.94rem;font-weight:550;line-height:1.25}
.gallery-caption i{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.42);border-radius:50%;font-style:normal;opacity:0;transform:scale(.75);transition:opacity .35s ease,transform .35s ease}
.gallery-item:hover img,.gallery-item:focus-visible img{filter:saturate(1) contrast(1.03) brightness(1.05);transform:scale(1.075)}
.gallery-item:hover:after,.gallery-item:focus-visible:after{opacity:.9}
.gallery-item:hover .gallery-caption,.gallery-item:focus-visible .gallery-caption{transform:none}
.gallery-item:hover .gallery-caption i,.gallery-item:focus-visible .gallery-caption i{opacity:1;transform:none}
.gallery-item:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}
.gallery-note{display:flex;justify-content:space-between;gap:20px;margin:18px 0 0;color:var(--muted);font-size:.78rem}
.gallery-note span{color:var(--purple);font-weight:650;text-transform:uppercase;letter-spacing:.08em}
.gallery-note button{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;border-bottom:1px solid #bdb4bf;background:transparent;color:var(--ink);font-size:.78rem;font-weight:650;cursor:pointer}
.gallery-note button i{font-style:normal;transition:transform .2s ease}.gallery-note button:hover i{transform:translate(2px,-2px)}

.gallery-dialog{width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;border:0;background:#0e0a10;color:#fff;overflow:hidden}
.gallery-dialog[open]{display:grid;grid-template-rows:1fr auto;animation:galleryOpen .35s ease both}
.gallery-dialog::backdrop{background:rgba(8,5,9,.96)}
.gallery-ambient{position:absolute;inset:-8%;overflow:hidden;opacity:.25;pointer-events:none}
.gallery-ambient:after{content:"";position:absolute;inset:0;background:rgba(10,6,11,.62)}
.gallery-ambient img{width:100%;height:100%;object-fit:cover;filter:blur(64px) saturate(.72);transform:scale(1.18)}
.gallery-close{position:absolute;z-index:5;top:24px;right:26px;display:grid;width:48px;height:48px;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(18,12,20,.45);backdrop-filter:blur(12px);color:#fff;font-size:1.7rem;cursor:pointer}
.gallery-autoplay-toggle{position:absolute;z-index:5;top:26px;left:28px;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(18,12,20,.45);backdrop-filter:blur(12px);color:#fff;font-size:.72rem;font-weight:650;letter-spacing:.04em;cursor:pointer}
.gallery-autoplay-toggle span{font-size:.65rem;letter-spacing:-.12em}
.gallery-viewer{position:relative;z-index:2;display:grid;grid-template-columns:70px minmax(0,1fr) 70px;gap:22px;align-items:center;min-height:0;padding:68px 34px 24px}
.gallery-frame{position:relative;justify-self:center;width:min(1120px,100%);height:min(76svh,760px);margin:0;overflow:hidden;border-radius:24px;background:#171218;box-shadow:0 40px 100px rgba(0,0,0,.48)}
.gallery-frame>img{width:100%;height:100%;object-fit:contain;transform-origin:center;will-change:transform}
.gallery-frame>img.is-panning{animation:galleryPan 7s cubic-bezier(.16,.7,.22,1) both}
.gallery-frame figcaption{position:absolute;inset:auto 0 0;padding:82px 34px 30px;background:linear-gradient(transparent,rgba(10,7,11,.92));opacity:0;transform:translateY(16px);transition:opacity .38s ease,transform .38s ease}
.gallery-frame:hover figcaption,.gallery-frame:focus-within figcaption{opacity:1;transform:none}
.gallery-frame figcaption small{display:block;margin-bottom:8px;color:var(--lilac);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.gallery-frame figcaption h2{margin:0;font-size:clamp(1.7rem,3vw,3rem);line-height:1.05;letter-spacing:-.045em}
.gallery-frame figcaption p{max-width:680px;margin:10px 0 0;color:rgba(255,255,255,.72);line-height:1.55}
.gallery-arrow{display:grid;width:52px;height:52px;place-items:center;justify-self:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:1.25rem;cursor:pointer;transition:background .25s ease,color .25s ease}
.gallery-arrow:hover,.gallery-close:hover{background:var(--lilac);color:var(--ink)}
.gallery-progress{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(120px,260px) auto;gap:18px;align-items:center;justify-content:center;padding:0 28px 26px;color:rgba(255,255,255,.62);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.gallery-progress i{display:block;height:1px;background:rgba(255,255,255,.25);overflow:hidden}
.gallery-progress b{display:block;width:8.333%;height:100%;background:var(--lilac);transition:width .4s ease}

.testimonials{position:relative;background:#35103e;color:#fff;overflow:hidden}
.testimonials:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(transparent 5%,#000 28%,#000 78%,transparent)}
.testimonial-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.48fr);gap:70px;align-items:end}
.testimonial-head h2{margin-bottom:0}
.testimonial-head>p{max-width:420px;margin:0 0 7px;color:rgba(255,255,255,.62);font-size:1rem;line-height:1.7}
.testimonial-shell{position:relative;z-index:1;display:block;min-height:0;margin-top:64px;padding:0;border:0}
.story-stack{position:relative;width:min(900px,calc(100% - 120px));height:430px;margin:0 auto}
.quote{position:absolute;inset:0;display:flex;flex-direction:column;margin:0;padding:38px 42px 34px;border:1px solid rgba(57,18,65,.15);border-radius:26px;background:#fbfafb;color:var(--ink);text-align:left;box-shadow:0 28px 70px rgba(8,3,10,.28);opacity:.7;transform:translate(48px,22px) rotate(1.2deg) scale(.94);transition:transform .6s cubic-bezier(.2,.72,.2,1),opacity .4s ease;pointer-events:none}
.quote.is-prev{z-index:1;transform:translate(-48px,22px) rotate(-1.2deg) scale(.94);opacity:.58}
.quote.is-next{z-index:2;transform:translate(48px,22px) rotate(1.2deg) scale(.94);opacity:.76}
.quote.active{z-index:3;display:flex;opacity:1;transform:none;pointer-events:auto;animation:none}
.story-meta{display:flex;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid #e5dfe7;color:#766d78;font-size:.69rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.story-meta span:last-child{color:var(--purple)}
.quote blockquote{max-width:720px;margin:auto 0;font:450 clamp(2rem,4.15vw,3.65rem)/1.12 var(--body);letter-spacing:-.052em}
.quote figcaption{display:flex;align-items:center;gap:13px}
.quote figcaption>span:last-child{display:flex;flex-direction:column}
.quote figcaption b{color:var(--ink);font-size:.9rem;font-weight:680}
.quote figcaption small{margin-top:3px;color:#7f7581;font-size:.73rem}
.quote figcaption .story-monogram{display:grid;width:46px;height:46px;place-items:center;margin:0;border-radius:50%;background:#ead0ef;color:#4d1055;font-size:.73rem;font-weight:750;letter-spacing:.04em}
.story-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:48px}
.story-controls .quote-nav{position:static;display:grid;width:48px;height:48px;place-items:center;transform:none;border-color:rgba(255,255,255,.3)}
.story-controls .quote-dots{position:static;display:flex;gap:8px}
.story-controls .quote-dots button{width:30px;height:3px;border-radius:4px;cursor:pointer;transition:background .25s ease}
.story-controls .quote-dots button.active{background:var(--lilac)}
.quote-toggle{margin-left:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:transparent;color:rgba(255,255,255,.78);font-size:.7rem;font-weight:650;letter-spacing:.04em;cursor:pointer}
.quote-toggle:hover,.gallery-autoplay-toggle:hover{background:var(--lilac);color:var(--ink)}

@keyframes galleryOpen{from{opacity:0}to{opacity:1}}
@keyframes galleryPan{0%{transform:scale(1.06) translate3d(-.8%,-.4%,0)}100%{transform:scale(1) translate3d(0,0,0)}}

@media(max-width:900px){
  .gallery-heading,.testimonial-head{grid-template-columns:1fr;gap:24px}
  .gallery-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:180px}
  .gallery-item,.gallery-item:nth-child(n){grid-column:span 3;grid-row:span 2}
  .gallery-item:nth-child(1),.gallery-item:nth-child(5),.gallery-item:nth-child(9){grid-column:span 6}
  .story-stack{width:calc(100% - 70px)}
  .gallery-viewer{grid-template-columns:52px minmax(0,1fr) 52px;gap:10px;padding-inline:16px}
}
@media(max-width:600px){
  .gallery-grid{display:flex;gap:12px;margin-inline:-22px;padding-inline:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .gallery-grid::-webkit-scrollbar{display:none}
  .gallery-item,.gallery-item:nth-child(n){flex:0 0 82vw;height:58svh;min-height:430px;scroll-snap-align:center}
  .gallery-note{display:block;line-height:1.7}.gallery-note span{display:block}.gallery-note button{margin-top:8px}
  .gallery-caption i{opacity:1;transform:none}
  .gallery-viewer{display:block;padding:68px 14px 80px}
  .gallery-frame{height:calc(100svh - 160px);border-radius:18px}
  .gallery-frame figcaption{opacity:1;transform:none;padding:90px 22px 22px}
  .gallery-arrow{position:absolute;z-index:4;bottom:24px;width:46px;height:46px}.gallery-prev{left:calc(50% - 58px)}.gallery-next{right:calc(50% - 58px)}
  .gallery-close{top:16px;right:16px;width:44px;height:44px}.gallery-autoplay-toggle{top:18px;left:16px}
  .gallery-progress{display:none}
  .testimonial-shell{margin-top:46px}
  .story-stack{width:calc(100% - 24px);height:410px}
  .quote{padding:28px 24px 26px;border-radius:22px;transform:translate(13px,13px) rotate(.8deg) scale(.96)}
  .quote.is-prev{transform:translate(-13px,13px) rotate(-.8deg) scale(.96)}
  .quote.is-next{transform:translate(13px,13px) rotate(.8deg) scale(.96)}
  .quote blockquote{font-size:clamp(1.75rem,8.2vw,2.45rem)}
}
@media(prefers-reduced-motion:reduce){.gallery-item img,.gallery-caption,.quote{transition:none}.gallery-frame>img.is-panning{animation:none}}
