/* One visual language for the cottonbro film series. */
:root{--film-radius:22px;--film-ink:#173c36;--film-accent:#65dfc4}
.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:44px}
.film-card,.adaptive-reel{display:flex;flex-direction:column;isolation:isolate;min-width:0;width:100%;padding:0;overflow:hidden;text-align:left;background:#fff;border:1px solid #244e3d14;border-radius:var(--film-radius);box-shadow:0 12px 35px #1f544309;transition:transform .35s,box-shadow .35s}
.film-card:hover,.adaptive-reel:hover{transform:translateY(-4px);box-shadow:0 18px 45px #1f544314}
.film-visual{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;background:#dceae4}
.film-visual>video,.adaptive-reel .film-visual>video{display:block;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .7s ease}
.film-card:hover .film-visual>video,.adaptive-reel:hover .film-visual>video{transform:scale(1.018)}
.film-visual:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #14262508}
.film-chip{position:absolute;top:18px;left:18px;padding:7px 11px;border:1px solid #ffffff80;border-radius:20px;background:#f5fffae8;color:var(--film-ink);font-size:11px;font-weight:650;line-height:1.2;letter-spacing:.07em;backdrop-filter:blur(10px)}
.film-card-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:116px;padding:24px 26px;color:var(--film-ink)}
.film-card-caption-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.film-card-caption strong{font-size:clamp(20px,1.65vw,26px);line-height:1.25;font-weight:650;letter-spacing:-.035em}
.film-card-caption small{font-size:12px;font-weight:500;line-height:1.5;color:#52746a}
.film-play,.adaptive-reel .film-play{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:50%;background:var(--film-accent);color:#153b33;transition:background .25s,transform .25s}
.film-play svg{width:18px;height:18px;margin-left:2px;fill:currentColor}
.film-card:hover .film-play,.adaptive-reel:hover .film-play{background:#89ecd5;transform:rotate(-8deg)}
.film-card:focus-visible,.adaptive-reel:focus-visible{outline:3px solid #087762;outline-offset:5px}
.adaptive-reel,.with-roadster .adaptive-reel{aspect-ratio:auto;transform:none;max-width:100%;margin:0;border-color:#133b3226;box-shadow:0 14px 40px #164d3b12}
.adaptive-reel .film-visual{aspect-ratio:4/3}
.adaptive-reel .film-visual>video{object-position:50% 45%}
.adaptive-reel .film-card-caption{background:#f5fcf8}
.adaptive-reel:hover{transform:translateY(-4px)}
.hero-film-picture,.with-roadster .hero-film-picture{border-radius:12px}
.hero-film-picture video{object-position:67% 43%}
.candidate-picture{aspect-ratio:1.08;border-radius:var(--film-radius);box-shadow:0 14px 40px #164d3b0c}
.candidate-picture video{object-position:70% 43%;filter:none}
.candidate-picture:after{inset:58% 0 0;background:linear-gradient(transparent,#123b35c9)}
.candidate-picture-note{font-weight:600;max-width:70%;text-shadow:0 1px 8px #0d31263d}
.candidate-play,.round-play{background:var(--film-accent);color:#153b33;border:0;box-shadow:none}
.candidate-play:hover,.round-play:hover{background:#89ecd5}
.cinema-video{object-position:50% 40%;filter:none}
.cinema-shade{background:linear-gradient(90deg,#082e27cf 0%,#082e2780 50%,#082e2712 100%)}
@media(max-width:1000px){
 .film-grid{gap:22px}.film-card-caption{padding:20px;gap:15px;min-height:112px}.film-card-caption strong{font-size:21px}
}
@media(max-width:720px){
 :root{--film-radius:17px}
 .film-grid{grid-template-columns:1fr;gap:24px;margin-top:30px}
 .film-card-caption{padding:20px;min-height:104px}.film-card-caption strong{font-size:21px}.film-card-caption small{font-size:12px}
 .film-chip{top:14px;left:14px;font-size:10px;padding:6px 9px}
 .film-play,.adaptive-reel .film-play{width:44px;height:44px;flex-basis:44px}
 .adaptive-reel .film-visual{aspect-ratio:16/11}
 .candidate-picture{aspect-ratio:1.2;border-radius:var(--film-radius)}
 .cinema-video{object-position:58% 40%}
 .cinema-shade{background:linear-gradient(0deg,#082e27eb 0%,#082e2780 57%,#082e272e 100%)}
}
@media(max-width:380px){.film-card-caption{padding:17px;gap:12px}.film-card-caption strong{font-size:19px}.film-card-caption small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.film-card,.adaptive-reel,.film-visual>video,.film-play{transition:none}.film-card:hover,.adaptive-reel:hover,.film-card:hover .film-visual>video,.adaptive-reel:hover .film-visual>video,.film-card:hover .film-play,.adaptive-reel:hover .film-play{transform:none}}

/* Short explanations with the same content available without playback. */
.film-explainer-card{min-width:0;display:flex;flex-direction:column}
.film-explainer-card .film-card{height:100%;border-radius:22px 22px 0 0}
.film-visual>img{display:block;width:100%;height:100%;object-fit:cover}
.film-card-caption-copy .film-audience{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#347266;font-weight:700}
.film-card-caption-copy .film-description{font-size:15px;line-height:1.55;color:#41665b;max-width:44ch}
.film-explainer-card .film-card-caption{min-height:210px;align-items:flex-end}
.film-explainer-card .film-card-caption-copy{gap:12px}
.film-transcript{border:1px solid #244e3d1c;border-top:0;border-radius:0 0 22px 22px;background:#f4faf6;padding:0 26px}
.film-transcript summary{padding:18px 0;font-size:14px;font-weight:650;cursor:pointer;list-style-position:inside}
.film-transcript ol{padding:0 0 20px 20px;margin:0}
.film-transcript li{padding:0 0 14px 7px;font-size:14px;line-height:1.65;color:#41665b}
.film-transcript li:last-child{padding-bottom:0}.film-transcript li strong{display:block;color:#173c36}
.film-transcript li::marker{color:#1c7c66;font-weight:650}
.film-transcript summary:focus-visible{outline:3px solid #087762;outline-offset:4px}
figure.adaptive-reel{cursor:default}.with-roadster figure.adaptive-reel:hover{transform:none;box-shadow:0 14px 40px #164d3b12}
#film-dialog{width:min(94vw,1060px);border-radius:20px;padding:26px}
#film-dialog .dialog-top{margin-bottom:12px;align-items:flex-start}
#film-dialog .dialog-top h2{font-size:clamp(21px,2.2vw,28px);line-height:1.25;max-width:29ch;letter-spacing:-.035em;margin:0}
#film-dialog-description{font-size:15px;line-height:1.55;color:#41665b;margin:0 0 20px;max-width:70ch}
#brand-film{display:block;max-height:48dvh;border-radius:10px}
.film-summary{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:3px;padding:20px 0 0;min-height:98px}
.film-summary>span{grid-row:1/3;align-self:start;font-size:12px;font-weight:700;letter-spacing:.08em;color:#287b68;padding-top:5px}
.film-summary h3{font-size:20px;line-height:1.35;letter-spacing:-.025em;margin:0}
.film-summary p{font-size:15px;line-height:1.55;margin:0;color:#41665b}
#film-dialog .film-controls{padding-top:14px;gap:12px}
#film-dialog #film-status{font-size:12px}
#film-dialog .film-next{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding-top:20px;border-top:1px solid #244e3d26}
#film-next{font-size:14px;min-height:48px;max-width:100%;white-space:normal;line-height:1.45;text-align:center}
#film-dialog .film-caption{padding:0;font-size:11px;max-width:36ch;line-height:1.5}
#film-dialog.film-ended .film-next{border-color:#1b977a}
#film-dialog .film-transcript{margin-top:18px;border:1px solid #244e3d1c;border-radius:12px;padding:0 18px}
@media(max-width:720px){
 .film-explainer-card .film-card{border-radius:17px 17px 0 0}.film-transcript{border-radius:0 0 17px 17px;padding:0 20px}
 .film-explainer-card .film-card-caption{min-height:0;align-items:center}.film-card-caption-copy .film-description{font-size:15px}
 #film-dialog{padding:18px;width:calc(100vw - 20px);max-height:94dvh;border-radius:16px}
 #brand-film{max-height:40dvh}.film-summary{column-gap:10px;min-height:118px}.film-summary h3{font-size:18px}
 #film-dialog .film-next{flex-direction:column;align-items:stretch;gap:12px}#film-next{justify-content:center}
 #film-dialog .film-caption{max-width:none}#film-direct{font-size:12px}.film-controls .button{min-width:116px}
}
