/* 316 Web Works — homepage scroll-film (light concrete world) */
section.film2{position:relative;background:#cfcac3;padding:0}
.film2 .film-pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#cfcac3}
.film2-media,.film2-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#cfcac3}
.film2 .film-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(236,232,226,.92) 0%,rgba(236,232,226,.7) 16%,rgba(236,232,226,.36) 32%,rgba(236,232,226,.1) 50%,rgba(236,232,226,0) 64%),linear-gradient(to bottom,rgba(233,229,223,.55) 0%,rgba(233,229,223,.2) 9%,rgba(233,229,223,0) 20%)}
.film2-caps{position:absolute;inset:0;pointer-events:none}
.film2-cap{position:absolute;left:max(28px,calc((100vw - 1160px)/2 + 28px));bottom:14vh;max-width:820px;opacity:0;will-change:opacity,transform;padding:8px 4px}
.film2-cap .label{display:block;margin-bottom:14px;color:#7a5c2e}
.film2-cap h2{font-family:Sora,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.02;font-size:clamp(2.4rem,6vw,5rem);color:#12100e}
.film2-cap h2 .o{color:#d2711f}
.film2-cap p{margin-top:16px;max-width:520px;font-size:clamp(1rem,1.3vw,1.15rem);color:#3a342e;line-height:1.5}
.film-final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;pointer-events:none;will-change:opacity,transform;background:linear-gradient(to top,rgba(233,229,223,1) 0%,rgba(233,229,223,.94) 30%,rgba(233,229,223,.8) 60%,rgba(233,229,223,.55) 100%);text-align:center;padding:0 24px}
.film-final img{height:clamp(54px,8vw,84px);width:auto;filter:drop-shadow(0 6px 24px rgba(18,16,14,.18))}
.film-final .line{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.02em;font-size:clamp(1.4rem,3vw,2.4rem);color:#12100e}
.film-final .sub2{color:#3a342e;max-width:520px;font-size:1.05rem}
.film-final .go{pointer-events:auto}
.film-progress{position:absolute;bottom:30px;right:max(28px,calc((100vw - 1160px)/2 + 28px));width:130px;height:2px;background:rgba(18,16,14,.18)}
.film-progress i{display:block;height:100%;width:0;background:#d2711f}
.film-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:Sora,sans-serif;letter-spacing:.3em;text-transform:uppercase;font-size:.64rem;color:rgba(18,16,14,.6);animation:bob316 1.9s ease-in-out infinite;white-space:nowrap}
@keyframes bob316{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
/* floating pill CTA */
.pill-cta{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);z-index:55;display:flex;align-items:center;gap:10px;background:#12100e;color:#f1ebe2;border-radius:999px;padding:12px 8px 12px 22px;font-family:Sora,sans-serif;font-size:.8rem;font-weight:600;box-shadow:0 10px 34px rgba(0,0,0,.28);transition:transform .55s cubic-bezier(.22,.8,.24,1),opacity .4s;opacity:0}
.pill-cta i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#d2711f;color:#12100e;font-style:normal;font-size:1rem}
.pill-cta.show{transform:translate(-50%,0);opacity:1}
@media(hover:hover){.pill-cta:hover{background:#d2711f;color:#12100e}}
@media(prefers-reduced-motion:reduce){
  .pill-cta{display:none}
  .film2{height:auto !important}
  .film2 .film-pin{position:relative}
  .film2-cap{display:none}
  .film-final{opacity:1;pointer-events:auto}
  .film-hint{display:none}
}
@media(max-width:760px){
  .film2 .film-pin{height:100vh;height:100dvh}
  .film2-cap{bottom:calc(112px + env(safe-area-inset-bottom));left:22px;right:22px;padding:0}
  .film2-cap h2{font-size:clamp(1.9rem,8.6vw,2.7rem)}
  .film2-cap p{font-size:.95rem;margin-top:10px}
  .film2-cap .label{font-size:10px;margin-bottom:10px}
  .film-progress{display:none}
  .film-hint{bottom:calc(58px + env(safe-area-inset-bottom));font-size:.56rem;letter-spacing:.22em}
  .pill-cta{bottom:calc(16px + env(safe-area-inset-bottom));padding:10px 7px 10px 16px;font-size:.72rem}
  .pill-cta i{width:28px;height:28px}
  .film-final{gap:14px}
  .film-final .line{font-size:1.3rem}
}

/* ── phone: the film plays through inside a normal full-screen hero ── */
.film2.film2-play{height:auto!important}
.film2.film2-play .film-pin{position:relative;height:100vh;height:100svh}
.film2.film2-play .film-progress,.film2.film2-play .film-hint{display:none}
.film2.film2-play .film2-cap{transition:none}
/* phones: the film is a canvas frame sequence; keep the poster underneath until it draws */
.film2-media{background:url("posters/film-home.jpg") center/cover no-repeat #cfcac3}
.film2-canvas{position:absolute;inset:0;width:100%;height:100%}

/* touch: the page owns vertical scrolling; the film never captures a touch */
section.film2{touch-action:pan-y}
.film2-media,.film2-media video,.film2-canvas{pointer-events:none;-webkit-touch-callout:none}