/* E346. Scoped customer stories; original Storm Glass tokens and typography. */
.ref-section { scroll-margin-top: 100px; }
.ref-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:30px; }
.ref-heading>div { max-width:780px; }
body[data-page=landing] .ref-heading :is(h1,h2) { font-size:clamp(28px,3vw,42px); line-height:1.13; margin:12px 0 16px; }
body[data-page=landing] .ref-intro { color:var(--leise); max-width:620px; font-size:15px; }
.ref-heading>.hp-text-link { flex-shrink:0; border-bottom:1px solid var(--rand); }
.ref-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ref-card { overflow:hidden; min-width:0; border:1px solid var(--rand); border-radius:18px; background:var(--panel); box-shadow:0 10px 30px #0c244007; transition:transform .2s,box-shadow .2s; }
.ref-card:hover { transform:translateY(-4px); box-shadow:0 18px 36px #0c244015; }
.ref-preview { display:block; position:relative; aspect-ratio:4/5; overflow:hidden; background:#12202d; }
.ref-portrait { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.ref-preview:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 55%,#081321cc); pointer-events:none; }
.ref-preview:hover .ref-portrait { transform:scale(1.035); }
.ref-play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:54px; height:54px; padding-left:3px; border-radius:50%; color:#fff; background:#0c24404d; border:1px solid #ffffffae; backdrop-filter:blur(9px); box-shadow:0 4px 22px #0003; z-index:1; }
.ref-duration { position:absolute; top:13px; right:13px; color:white; background:#10171bc4; padding:3px 9px; border-radius:7px; font-size:11px; font-variant-numeric:tabular-nums; z-index:1; }
.ref-watch { position:absolute; bottom:16px; left:18px; right:18px; color:#fff; display:flex; justify-content:space-between; font-size:12px; font-weight:650; z-index:1; }
.ref-card-body { padding:18px 16px 22px; }
.ref-identity { display:block; }
.ref-identity>img { display:block; width:100%; height:128px; object-fit:contain; padding:12px; border-radius:7px; background:#fff; border:1px solid #e7ebef; margin-bottom:13px; }
#serdar .ref-identity>img { padding:32px 24px; }
#robin .ref-identity>img { padding:38px 14px; }
#akil .ref-identity>img { padding:0; background:#000; }
body[data-page=landing] .ref-identity h3 { font-size:17px; line-height:1.3; }
body[data-page=landing] .ref-identity p { margin-top:3px; font-size:11px; line-height:1.5; color:var(--leise); }
.ref-card blockquote { border:0; padding:0; margin:20px 0 0; font-size:15px; line-height:1.55; font-weight:500; color:var(--text); }
body[data-page=landing] .ref-note { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:25px; font-size:12px; color:var(--leise); text-align:center; }
.ref-note>span { border:1px solid var(--rand); border-radius:4px; padding:0 4px; font-size:9px; font-weight:750; }
.ref-gallery { padding-top:70px; }
.ref-gallery .ref-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ref-fallback { width:100%; max-height:500px; }
.ref-dialog { padding:0; width:min(900px,calc(100% - 28px)); max-height:calc(100dvh - 28px); border:1px solid var(--rand); border-radius:20px; background:var(--panel); color:var(--text); overflow:auto; box-shadow:0 25px 90px #0005; }
.ref-dialog::backdrop { background:#07101bd9; backdrop-filter:blur(6px); }
.ref-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 22px; }
body[data-page=landing] .ref-dialog h2 { font-size:20px; line-height:1.3; letter-spacing:-.02em; }
.ref-dialog-head p { color:var(--leise); font-size:12px; }
.ref-close { display:grid; place-items:center; border:1px solid var(--rand); border-radius:50%; width:40px; height:40px; background:var(--bg); color:var(--text); font-size:27px; cursor:pointer; flex-shrink:0; }
.ref-screen { background:#050608; display:flex; justify-content:center; }
#ref-player { display:block; width:100%; height:min(64dvh,650px); object-fit:contain; background:#050608; }
#ref-player::cue,.ref-fallback::cue { color:white; background:rgba(0,0,0,.86); font-family:Inter,Arial,sans-serif; font-size:clamp(15px,2.2vw,22px); line-height:1.4; }
.ref-controls { display:flex; align-items:center; gap:10px; padding:14px 22px 8px; flex-wrap:wrap; font-size:12px; }
.ref-controls select { background:var(--bg); color:var(--text); border:1px solid var(--rand); border-radius:8px; padding:8px; max-width:100%; font:inherit; }
#ref-original { margin-left:auto; color:var(--leise); }
body[data-page=landing] .ref-error { margin:6px 22px; color:var(--text); padding:10px; border:1px solid var(--rand); border-radius:8px; font-size:13px; }
body[data-page=landing] .ref-dialog-foot { display:flex; justify-content:space-between; gap:12px; margin:0; padding:8px 22px 16px; font-size:11px; }
#ref-retry { border:0; background:none; color:var(--chip-teal); cursor:pointer; font:inherit; }
html.ref-playing { overflow:hidden; }
.ref-section :is(a,button):focus-visible,.ref-dialog :is(button,select,a):focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
@media(max-width:1000px) { .ref-grid,.ref-gallery .ref-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ref-preview { aspect-ratio:5/4; } }
@media(max-width:600px) { .ref-heading { display:block; } .ref-heading>.hp-text-link { margin-top:12px; } .ref-grid,.ref-gallery .ref-grid { gap:12px; } .ref-preview { aspect-ratio:3/4; } .ref-card-body { padding:13px 11px 17px; } .ref-identity>img { height:52px; padding:6px; } .ref-card blockquote { margin-top:12px; font-size:13px; } .ref-identity p { min-height:33px; } .ref-play { width:44px; height:44px; } .ref-watch { font-size:11px; left:11px; right:11px; bottom:12px; } .ref-dialog { width:calc(100% - 12px); max-height:calc(100dvh - 12px); border-radius:14px; } .ref-dialog-head { padding:12px 14px; } #ref-player { height:57dvh; } .ref-controls { padding:12px 14px 4px; gap:6px 10px; } #ref-original { width:100%; margin:0; } .ref-dialog-foot { padding:8px 14px 12px!important; } .ref-gallery { padding-top:38px; } }
@media(prefers-reduced-motion:reduce) { .ref-card,.ref-portrait { transition:none; } .ref-card:hover,.ref-preview:hover .ref-portrait { transform:none; } }
/* Keep square/portrait company marks readable, including on small phones. */
@media(max-width:600px) {
  .ref-identity>img { height:112px; padding:8px; }
  #serdar .ref-identity>img { padding:29px 8px; }
  #robin .ref-identity>img { padding:34px 8px; }
}
/* Captions stay in a per-speaker safe area inside the object-fit video picture. */
.ref-screen { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; justify-content:stretch; width:100%; color:#fff; }
.ref-picture { position:relative; min-height:0; overflow:hidden; }
.ref-screen:not(:fullscreen) .ref-landscape #ref-player { height:auto; aspect-ratio:var(--video-ratio); }
.ref-dialog.ref-immersive .ref-landscape #ref-player { height:100%; aspect-ratio:auto; }
#ref-player { height:max(180px,min(66dvh,calc(100dvh - 245px),680px)); min-height:0; }
#ref-captions { position:absolute; box-sizing:border-box; padding:4px 6px; text-align:center; background:rgba(5,12,20,.82); border-radius:5px; color:#fff; font:650 20px/1.2 Inter,Arial,sans-serif; text-shadow:0 1px 2px #000; pointer-events:none; visibility:hidden; }
#ref-captions.ref-caption-active { visibility:visible; }
#ref-captions>span { display:block; margin:0; white-space:pre; font:inherit; }
.ref-playback { background:#101820; padding:0 16px 8px; }
.ref-playback-row { display:flex; gap:10px; align-items:center; }
.ref-playback button { flex-shrink:0; width:40px; height:36px; padding:0; border:1px solid #ffffff30; border-radius:7px; background:#ffffff0a; color:white; font-size:19px; cursor:pointer; }
.ref-playback button svg { display:block; width:20px; height:20px; margin:auto; }
.ref-playback input { accent-color:#27ccdf; cursor:pointer; }
#ref-seek { width:100%; height:20px; margin:0; display:block; padding:0; }
#ref-volume { width:75px; margin:0; }
#ref-time { margin-right:auto; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ref-playback :is(button,input):focus-visible { outline:3px solid #27ccdf; outline-offset:2px; }
.ref-screen:fullscreen { width:100vw; height:100dvh; grid-template-rows:minmax(0,1fr) auto; }
.ref-screen:fullscreen .ref-picture, .ref-screen:fullscreen #ref-player { height:100%; width:100%; }
.ref-dialog.ref-immersive { position:fixed; inset:0; margin:0; width:100vw; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; }
.ref-immersive>:not(.ref-screen) { display:none!important; }
.ref-immersive .ref-screen { height:100dvh; grid-template-rows:minmax(0,1fr) auto; }
.ref-immersive .ref-picture, .ref-immersive #ref-player { height:100%; }
@media(max-width:600px) {
  #ref-player { height:max(144px,min(65dvh,calc(100dvh - 280px))); }
  .ref-playback { padding:0 12px 8px; }
  #ref-volume { display:none; }
}