/* Four Questions: the 15-second film in the homepage About section.
   These rules style only the film. The rest of the page is unchanged.
   The film sits in the text column; its controls sit quietly on the cream page below it. */
.about-clarity { position:relative; width:100%; margin:0 0 52px; scroll-margin-top:110px; }
.about-clarity-picture { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--charcoal,#1a1510); }
.about-clarity-still,.about-clarity-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.about-clarity-video { opacity:0; }
.about-clarity.has-played .about-clarity-video { opacity:1; }
.about-clarity-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0 0; }
.about-clarity-duration { color:var(--text-muted,#6b5d4e); font-family:'DM Sans',sans-serif; font-size:.62rem; letter-spacing:.2em; white-space:nowrap; }
.about-clarity-buttons { display:flex; align-items:center; gap:6px; margin-left:auto; }
.about-clarity-controls button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 12px; border:1px solid rgba(126,100,64,.32); border-radius:24px; background:transparent; color:var(--brown,#7e6440); font-family:'DM Sans',sans-serif; font-size:11px; font-weight:400; letter-spacing:.025em; cursor:pointer; transition:background-color .2s ease,border-color .2s ease; }
.about-clarity-controls button:hover { background:var(--cream-mid,#ede7d9); border-color:var(--brown,#7e6440); color:var(--text,#2a2218); }
.about-clarity-controls button:focus-visible { outline:2px solid var(--brown,#7e6440); outline-offset:2px; }
.about-clarity-sound[aria-pressed='false'] .about-clarity-waves { opacity:.3; }
.about-clarity-pause-icon { font-size:15px; line-height:1; }
.about-clarity-controls .about-clarity-replay { min-width:40px; padding:0; font-size:20px; }
.about-clarity-status,.about-clarity-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:767px){ .about-clarity-controls button { min-height:44px; } .about-clarity-controls .about-clarity-replay { min-width:44px; } }
@media(max-width:420px){ .about-clarity-duration { display:none; } }
@media(prefers-reduced-motion:reduce){ .about-clarity-controls button { transition:none; } }