.film-hero {
  --frame-top: clamp(16px, 2vw, 32px);
  --frame-side: 2.6%;
  --frame-bottom: clamp(18px, 2.5vw, 40px);
  position: relative;
  isolation: isolate;
  height: clamp(440px, calc(88svh - 125px), 760px);
  color: white;
  background: white;
}
.film-frame {
  position: absolute;
  inset: var(--frame-top) var(--frame-side) var(--frame-bottom);
  overflow: hidden;
  background: #191b1b;
}
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.film-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 15, 24, .78) 0%, rgba(8, 15, 24, .38) 32%, rgba(8, 15, 24, .08) 64%, transparent 82%);
}
.film-copy {
  position: absolute;
  left: 7%;
  right: var(--frame-side);
  bottom: calc(var(--frame-bottom) + 5vw);
}
.film-copy h1 {
  font: 700 clamp(43px, 6.65vw, 112px)/1.23 "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: -.052em;
  white-space: nowrap;
}
.film-copy p { margin: 1.8vw 0 0; font-size: clamp(12px, 1.02vw, 16px); font-weight: 500; line-height: 1.9; }
.film-copy, .film-frame::after { transition: opacity .28s ease; }
.logo-transition .film-copy, .logo-transition .film-frame::after { opacity: 0; }
.logo-shot video { object-fit: contain; object-position: center; }

@media (min-width: 801px) {
  .home-header { position: fixed; inset: 0 0 auto; }
  .home-header.over-film { background: transparent; border-color: transparent; color: white; }
  .home-header.over-film::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -40px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(12, 15, 16, .66), rgba(12, 15, 16, .32) 50%, transparent);
  }
  .home-header.over-film .brand img { filter: none; }
  .home-header.over-film .desktop-nav a > span { color: inherit; }
  .home-header.over-film .header-recruit { background: var(--orange); }
  .home-header.over-film .header-recruit:hover { background: #bd4d20; }
  .home-header.over-film nav a:hover,
  .home-header.over-film .header-recruit:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
  .film-hero {
    height: 100vh;
    height: 100dvh;
    --frame-top: 0px;
    --frame-side: 0px;
    --frame-bottom: 0px;
  }
  .film-copy { right: 7%; bottom: min(6vw, 8vh); }
  .film-copy h1 { font-size: clamp(32px, min(6.65vw, 13vh), 112px); }
}

.offering {
  padding: clamp(48px, 5.5vw, 85px) var(--pad) clamp(65px, 8vw, 120px);
  color: #20201d;
  background: white;
}
.offering-inner { max-width: 1440px; margin-inline: auto; }
.offering-heading { padding-bottom: clamp(26px, 3vw, 46px); }
.offering-heading > div { display: flex; align-items: baseline; gap: 24px; }
.offering-heading h2 { font: 700 clamp(62px, 8.2vw, 120px)/.96 Arial, sans-serif; letter-spacing: -.065em; }
.offering-heading p { font-size: 15px; font-weight: 700; line-height: 1.85; }
.offer-list { display: grid; gap: clamp(16px, 1.7vw, 28px); }
.offer {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3.2vw, 50px);
  padding: clamp(27px, 4.4vw, 72px);
  min-height: clamp(285px, 32vw, 480px);
  color: white;
  background: #2c2d2b;
}
.offer-image { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.offer-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
#ec-details img { object-position: center 60%; }
.offer-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(85deg, #0d1011e8 0%, #131616aa 38%, #15171917 84%);
}
.offer-text { max-width: 85%; }
.service-folio { display: block; margin-bottom: 18px; font: 500 11px/1.3 Arial, sans-serif; letter-spacing: .12em; }
.service-folio b { font-weight: inherit; margin-right: .65em; }
.offer-text h3 {
  font-size: clamp(30px, 4.3vw, 68px);
  letter-spacing: -.035em;
  line-height: 1.18;
  text-wrap: balance;
}
.offer-text h3 span { display: inline-block; }
.offer-text p { margin-top: 13px; max-width: 33em; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.85; }
.offer-arrow { flex-shrink: 0; font: 30px/1 Georgia, serif; transition: transform .2s ease; }
@media (hover: hover) {
  .offer:hover .offer-image img { transform: scale(1.035); }
  .offer:hover .offer-arrow { transform: translateX(3px); }
  .offer:hover h3 { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
}
@media (max-width: 740px) {
  .offering { padding-inline: 6%; }
  .offering-heading { padding-bottom: 22px; }
  .offering-heading > div { flex-wrap: wrap; gap: 6px 16px; }
  .offering-heading p { font-size: 13px; }
  .offer { min-height: clamp(260px, 57vw, 345px); padding: 20px; gap: 6px; }
  .offer-text p { font-size: 14px; line-height: 1.65; }
  .offer-arrow { font-size: 25px; line-height: 1.45; }
  .service-folio { font-size: 10px; margin-bottom: 10px; }
  .offer-image::after { background: linear-gradient(to top, #0a0c0efa, #0d0f1282 62%, #16191b15); }
}
@media (max-width: 700px) {
  .film-hero { --frame-side: 3.3%; --frame-top: 14px; --frame-bottom: 16px; height: clamp(395px, 65svh, 620px); }
  .film-copy { left: 8%; bottom: calc(var(--frame-bottom) + 58px); }
  .film-copy h1 { font-size: clamp(25px, 8.2vw, 57px); }
  .film-copy p { margin-top: 18px; max-width: 24em; padding-right: 10px; font-size: 12px; line-height: 1.75; }
}
@media (prefers-reduced-motion: reduce) {
  .film-copy, .film-frame::after, .offer-image img, .offer-arrow { transition: none; }
}