/* STARRFIELD FUN — ONE FRAME / CINEMA PERSPECTIVE
   One viewport. One camera. Content creates the spectacle. */

:root {
  --sf-ink: #151619;
  --sf-ivory: #F5F2EA;
  --sf-blue: #5965FF;
  --sf-coral: #FF7657;
  --sf-lime: #D8FF68;
  --sf-ease: cubic-bezier(.16,1,.3,1);
}

html { background: var(--sf-ivory); }
body.sf-film-page {
  margin: 0;
  background: var(--sf-ivory);
  color: var(--sf-ink);
  overflow-x: hidden;
  scrollbar-width: none;
}
body.sf-film-page::-webkit-scrollbar { width: 0; height: 0; }
body.sf-film-page .scroll-progress,
body.sf-film-page .project-cursor { display: none !important; }
body.sf-film-page .navbar { z-index: 5000; }

.sf-film-main { position: relative; }
.sf-film-track { height: 1480svh; position: relative; }
.sf-film-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  perspective: 1400px;
  background: var(--sf-ivory);
  color: var(--sf-ink);
}

/* Single visual world */
.sf-film-stock,
.sf-film-vignette,
.sf-film-spotlight,
.sf-film-flash,
.sf-film-letterbox {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sf-film-stock {
  z-index: 1;
  opacity: .045;
  background-image:
    radial-gradient(circle at 18% 31%, rgba(0,0,0,.7) 0 .55px, transparent .8px),
    radial-gradient(circle at 72% 66%, rgba(0,0,0,.65) 0 .55px, transparent .8px);
  background-size: 5px 5px, 7px 7px;
  transform: translate3d(var(--grain-x,0), var(--grain-y,0),0);
}
.sf-film-vignette {
  z-index: 2;
  box-shadow: inset 0 0 12vw rgba(21,22,25,.10), inset 0 0 0 1px rgba(21,22,25,.055);
  background: linear-gradient(to bottom, rgba(21,22,25,.025), transparent 16%, transparent 84%, rgba(21,22,25,.035));
}
.sf-film-spotlight {
  z-index: 0;
  inset: -24%;
  opacity: var(--spot-opacity,.78);
  transform: translate3d(var(--spot-x,16vw), var(--spot-y,-12vh),0) rotate(var(--spot-r,-12deg));
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.72) 0 6%, rgba(89,101,255,.14) 20%, rgba(255,118,87,.08) 37%, transparent 62%);
  transition: background .5s ease;
  will-change: transform;
}
.sf-film-spotlight i {
  position:absolute;
  width: 34vw;
  height: 120vh;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0));
  clip-path: polygon(46% 0,54% 0,88% 100%,12% 100%);
  filter: blur(24px);
  opacity: .55;
}
/* Exposure flash: used only at editorial cuts, never as decoration. */
.sf-film-flash {
  z-index: 90;
  background: rgba(255,255,255,.92);
  opacity: var(--flash-opacity,0);
  mix-blend-mode: screen;
  will-change: opacity;
}

/* Subtle letterbox breath creates a camera-format change at key moments. */
.sf-film-letterbox { z-index: 88; }
.sf-film-letterbox i {
  position:absolute; left:0; right:0; height:var(--bar-h,0vh);
  background:var(--sf-ink);
  transition:background .35s ease;
}
.sf-film-letterbox i:first-child { top:0; }
.sf-film-letterbox i:last-child { bottom:0; }

.sf-film-topline,
.sf-film-bottomline {
  position:absolute;
  z-index:100;
  left:4vw; right:4vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(21,22,25,.62);
  pointer-events:none;
}
.sf-film-topline { top: clamp(88px,10vh,116px); transform: translateY(-22px); }
.sf-film-bottomline { bottom: clamp(24px,3.6vh,42px); }
.sf-film-progress { position:absolute; z-index:101; left:4vw; right:4vw; bottom:14px; height:2px; background:rgba(21,22,25,.10); }
.sf-film-progress i { display:block; width:calc(var(--film-p,0) * 100%); height:100%; background:var(--sf-blue); }

.sf-film-contact {
  position:fixed;
  z-index:5100;
  right:4vw;
  bottom:clamp(36px,5vh,58px);
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 16px;
  border:1px solid rgba(21,22,25,.18);
  border-radius:999px;
  background:rgba(245,242,234,.78);
  backdrop-filter:blur(10px);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  transition:transform .35s var(--sf-ease),background .3s ease,color .3s ease;
}
.sf-film-contact:hover { transform:translateY(-3px); background:var(--sf-ink); color:var(--sf-ivory); }

/* Shots occupy the same safe canvas. No document-flow collisions. */
.sf-shot {
  position:absolute;
  z-index:20;
  inset: clamp(104px,12vh,138px) 4vw clamp(48px,7vh,72px);
  display:grid;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,0,0);
  will-change:opacity,transform,filter;
  transform-style:preserve-3d;
  transform-origin:50% 54%;
}
.sf-shot.is-visible { visibility:visible; }
.sf-shot.is-active { pointer-events:auto; }
.sf-shot-kicker {
  display:block;
  margin-bottom:clamp(18px,2.4vh,30px);
  font-size:9px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.sf-shot h2 { margin:0; }

/* Opening */
.sf-shot-opening { place-items:center; opacity:1; visibility:visible; }
.sf-opening-copy { width:100%; align-self:center; }
.sf-opening-line {
  display:block;
  font-size:clamp(72px,min(12.3vw,18vh),210px);
  line-height:.76;
  letter-spacing:-.078em;
  font-weight:750;
  text-transform:uppercase;
  white-space:nowrap;
  transform-origin:center;
}
.sf-opening-serif {
  padding-left:12vw;
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;
  font-weight:400;
  text-transform:lowercase;
  color:var(--sf-blue);
  letter-spacing:-.045em;
}

/* THINK / DESIGN / BUILD use one composition */
.sf-shot-word { align-items:center; }
.sf-word-copy { width:min(1320px,100%); }
.sf-word-copy h2 {
  font-size:clamp(105px,min(18vw,26vh),300px);
  line-height:.69;
  letter-spacing:-.085em;
  font-weight:800;
}
.sf-shot-word p {
  margin:clamp(28px,4vh,48px) 0 0 auto;
  width:min(440px,36vw);
  font-size:clamp(16px,1.45vw,24px);
  line-height:1.45;
  letter-spacing:-.025em;
}
.sf-shot[data-shot="design"] h2 { color:var(--sf-coral); }
.sf-shot[data-shot="build"] h2 { color:var(--sf-blue); }

/* title card */
.sf-shot-title { place-items:center; text-align:center; }
.sf-title-copy h2 {
  font-size:clamp(62px,min(8.6vw,14vh),146px);
  line-height:.88;
  letter-spacing:-.065em;
  font-weight:650;
}
.sf-title-copy em { font-family:"Instrument Serif",Georgia,serif; font-weight:400; color:var(--sf-blue); }

/* Perspective shift — no portrait, just the design thesis. */
.sf-shot-perspective { place-items:center; text-align:center; }
.sf-perspective-copy { width:min(1380px,100%); perspective:1100px; }
.sf-perspective-copy h2 {
  font-size:clamp(72px,min(11vw,17vh),188px);
  line-height:.72;
  letter-spacing:-.08em;
  font-weight:780;
  text-transform:uppercase;
}
.sf-perspective-copy h2 span { display:inline-block; transform-origin:50% 100%; }
.sf-perspective-copy h2 em {
  display:inline-block;
  margin-top:.04em;
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-style:italic;
  color:var(--sf-blue);
  text-transform:none;
  transform-origin:50% 0%;
}
.sf-perspective-copy p {
  margin:clamp(28px,4vh,48px) auto 0;
  max-width:520px;
  font-size:clamp(15px,1.25vw,20px);
  line-height:1.6;
}

/* Work — three frames share the exact same slot */
.sf-shot-work { grid-template-columns:.72fr 1.28fr; gap:5vw; align-items:center; }
.sf-work-heading h2 { font-size:clamp(58px,min(7vw,11vh),116px); line-height:.86; letter-spacing:-.06em; }
.sf-work-heading em { font-family:"Instrument Serif",Georgia,serif; font-weight:400; color:var(--sf-blue); }
.sf-project-stage {
  position:relative; width:100%; aspect-ratio:16/9;
  perspective:1200px; transform-style:preserve-3d;
}
.sf-project-frame {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:1fr auto;
  background:#EEECE5;
  border:1px solid rgba(21,22,25,.12);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 42px 110px rgba(21,22,25,.19);
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,28px,0) scale(.97);
  pointer-events:none;
}
.sf-project-frame.is-current { visibility:visible; pointer-events:auto; }
.sf-project-frame img { width:100%; height:100%; min-height:0; object-fit:contain; background:#F1F3F6; display:block; }
.sf-project-frame > div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:14px 18px; background:var(--sf-ivory); }
.sf-project-frame span,
.sf-project-frame b { font-size:8px; letter-spacing:.13em; }
.sf-project-frame strong { font-size:clamp(18px,1.8vw,28px); letter-spacing:-.04em; }
.sf-work-all { position:absolute; left:0; bottom:0; }

/* Services */
.sf-shot-services { align-items:center; }
.sf-services-copy { width:min(1320px,100%); margin:auto; }
.sf-service-word {
  display:grid;
  grid-template-columns:60px 1fr auto;
  align-items:end;
  gap:22px;
  padding:clamp(10px,1.8vh,18px) 0;
  border-bottom:1px solid rgba(21,22,25,.16);
}
.sf-service-word span { font-size:9px; font-weight:800; letter-spacing:.14em; }
.sf-service-word strong { font-size:clamp(55px,min(8vw,11vh),128px); line-height:.82; letter-spacing:-.07em; }
.sf-service-word small { padding-bottom:8px; font-size:12px; }
.sf-service-word:nth-child(3) strong { color:var(--sf-coral); }
.sf-service-word:nth-child(4) strong { color:var(--sf-blue); }
.sf-service-links { display:flex; gap:30px; margin-top:28px; }

/* Method */
.sf-shot-method { align-items:center; }
.sf-method-copy h2 { font-size:clamp(72px,min(11vw,17vh),190px); line-height:.72; letter-spacing:-.078em; }
.sf-method-copy h2 span { margin-left:12vw; color:var(--sf-coral); }
.sf-method-copy h2 em { display:block; margin-left:28vw; font-family:"Instrument Serif",Georgia,serif; font-weight:400; color:var(--sf-blue); }
.sf-method-copy p { margin:38px 0 0 auto; max-width:440px; font-size:15px; line-height:1.7; }

/* Photography */
.sf-shot-photo { grid-template-columns:.86fr 1.14fr; gap:6vw; align-items:center; color:var(--sf-ivory); }
.sf-photo-copy h2 { font-size:clamp(56px,min(7vw,11vh),116px); line-height:.86; letter-spacing:-.06em; }
.sf-photo-copy h2 em { font-family:"Instrument Serif",Georgia,serif; font-weight:400; color:var(--sf-lime); }
.sf-photo-copy a { display:inline-block; margin-top:34px; }
.sf-photo-stack { position:relative; width:100%; height:min(64vh,620px); }
.sf-photo-stack figure { position:absolute; margin:0; overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,.3); }
.sf-photo-stack figure:first-child { width:56%; height:82%; left:4%; top:3%; transform:rotate(-3deg); }
.sf-photo-stack figure:last-child { width:49%; height:62%; right:2%; bottom:2%; transform:rotate(4deg); }
.sf-photo-stack img { width:100%; height:100%; object-fit:cover; display:block; }

/* Finale */
.sf-shot-final { place-items:center; text-align:center; }
.sf-final-copy { width:min(1160px,100%); }
.sf-final-copy h2 { font-size:clamp(62px,min(9vw,14vh),154px); line-height:.84; letter-spacing:-.07em; }
.sf-final-copy h2 em { font-family:"Instrument Serif",Georgia,serif; font-weight:400; color:var(--sf-blue); }
.sf-final-copy > p { margin:28px auto 38px; max-width:560px; font-size:15px; line-height:1.65; }
.sf-final-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(760px,100%); margin:auto; text-align:left; }
.sf-final-actions a { padding:16px 18px; border-top:1px solid rgba(21,22,25,.22); font-size:10px; font-weight:800; letter-spacing:.12em; }
.sf-final-primary { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; font-size:clamp(18px,2vw,28px)!important; letter-spacing:-.03em!important; border-bottom:1px solid var(--sf-ink); }

/* Dark stock for photography controlled by JS */
body.sf-film-page.is-dark .sf-film-stage { background:var(--sf-ink); color:var(--sf-ivory); }
body.sf-film-page.is-dark .sf-film-topline,
body.sf-film-page.is-dark .sf-film-bottomline { color:rgba(245,242,234,.62); }
body.sf-film-page.is-dark .sf-film-progress { background:rgba(245,242,234,.14); }
body.sf-film-page.is-dark .sf-film-contact { color:var(--sf-ink); }


/* Cinematic motion states supplied by JS. */
.sf-shot.is-active { filter:saturate(1.02); }
.sf-project-frame img {
  transform:scale(var(--project-image-scale,1));
  transition:none;
  will-change:transform,clip-path;
}
.sf-service-word,
.sf-photo-stack figure,
.sf-perspective-copy h2 span,
.sf-perspective-copy h2 em { will-change:transform,opacity,clip-path; }
.sf-film-stage::after {
  content:""; position:absolute; z-index:87; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 0 43%, rgba(255,255,255,.16) 49%, transparent 55%);
  transform:translateX(var(--sweep-x,-120%));
  opacity:var(--sweep-opacity,0);
  mix-blend-mode:screen;
}

@media (max-width: 900px) {
  .sf-film-track { height: 1160svh; }
  .sf-shot { inset: 92px 20px 48px; }
  .sf-film-topline,.sf-film-bottomline { left:20px; right:20px; }
  .sf-film-topline { top:82px; }
  .sf-film-progress { left:20px; right:20px; }
  .sf-film-contact { right:20px; bottom:34px; }
  .sf-opening-line { font-size:clamp(58px,min(16vw,13vh),112px); line-height:.80; }
  .sf-opening-serif { padding-left:6vw; }
  .sf-word-copy h2 { font-size:clamp(82px,min(22vw,20vh),150px); }
  .sf-shot-word p { width:min(88vw,420px); margin:28px 0 0; }
  .sf-title-copy h2 { font-size:clamp(48px,min(12vw,10vh),88px); }
  .sf-perspective-copy h2 { font-size:clamp(62px,min(15vw,13vh),112px); }
  .sf-perspective-copy p { font-size:14px; }
  .sf-shot-work { grid-template-columns:1fr; align-content:center; gap:24px; }
  .sf-work-heading h2 { font-size:clamp(44px,11vw,76px); }
  .sf-project-stage { aspect-ratio:16/11; }
  .sf-work-all { position:static; }
  .sf-service-word { grid-template-columns:36px 1fr; }
  .sf-service-word strong { font-size:clamp(48px,14vw,90px); }
  .sf-service-word small { display:none; }
  .sf-service-links { flex-wrap:wrap; gap:18px; }
  .sf-method-copy h2 { font-size:clamp(64px,18vw,120px); }
  .sf-method-copy h2 span { margin-left:5vw; }
  .sf-method-copy h2 em { margin-left:14vw; }
  .sf-shot-photo { grid-template-columns:.85fr 1.15fr; gap:20px; }
  .sf-photo-copy h2 { font-size:clamp(40px,9.5vw,70px); }
  .sf-photo-stack { height:48vh; }
  .sf-final-copy h2 { font-size:clamp(50px,13vw,92px); }
}

@media (max-width: 620px) {
  .sf-film-track { height: 1040svh; }
  .sf-film-bottomline .sf-film-time { display:none; }
  .sf-film-contact { padding:10px 13px; }
  .sf-shot-work { gap:18px; }
  .sf-project-frame > div { grid-template-columns:1fr auto; }
  .sf-project-frame > div span { display:none; }
  .sf-shot-photo { grid-template-columns:1fr; align-content:center; }
  .sf-photo-stack { height:36vh; margin-top:16px; }
  .sf-photo-stack figure:first-child { width:52%; }
  .sf-photo-stack figure:last-child { width:46%; }
  .sf-final-actions { grid-template-columns:1fr; }
  .sf-final-primary { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-film-track { height:auto; }
  .sf-film-stage { position:relative; min-height:100svh; }
  .sf-shot { position:relative; inset:auto; min-height:100svh; padding:110px 5vw 70px; opacity:1!important; visibility:visible!important; transform:none!important; }
  .sf-film-flash,.sf-film-letterbox,.sf-film-spotlight,.sf-film-topline,.sf-film-bottomline,.sf-film-progress { display:none; }
  .sf-project-frame { position:relative; opacity:1!important; visibility:visible!important; transform:none!important; margin-bottom:18px; }
  .sf-project-stage { aspect-ratio:auto; }
}

/* V4 — pacing/playhead refinement */
.sf-film-progress {
  overflow: visible;
}
.sf-film-progress i {
  position: relative;
}
.sf-film-progress i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  color: var(--sf-blue);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(89,101,255,.08);
}
body.sf-film-page.is-dark .sf-film-progress i::after {
  color: var(--sf-lime);
  background: var(--sf-lime);
  box-shadow: 0 0 0 4px rgba(216,255,104,.08);
}


/* ================================================================
   V5 — SECONDARY CINEMATIC INFORMATION LAYER
   Purposeful context fills negative space without introducing
   new animation styles or decorative objects.
================================================================ */

.sf-scene-index {
  position: absolute;
  z-index: -1;
  right: -0.025em;
  bottom: -0.14em;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(180px, min(27vw, 38vh), 430px);
  font-style: italic;
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.08em;
  color: rgba(21,22,25,.045);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.sf-scene-credits {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 50%;
  width: min(270px, 22vw);
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  text-align: right;
  pointer-events: none;
}

.sf-scene-credits::before {
  content: "";
  width: 72px;
  height: 1px;
  margin-left: auto;
  margin-bottom: 4px;
  background: currentColor;
  opacity: .22;
}

.sf-scene-credits span {
  display: block;
  font-size: clamp(8px, .66vw, 10px);
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(21,22,25,.46);
}

.sf-scene-credits span:last-child {
  color: rgba(21,22,25,.28);
}

/* Keep the secondary layer out of the primary content's way. */
.sf-shot-opening .sf-scene-credits,
.sf-shot-title .sf-scene-credits,
.sf-shot-perspective .sf-scene-credits,
.sf-shot-final .sf-scene-credits {
  top: auto;
  bottom: clamp(10px, 2vh, 22px);
  transform: none;
}

.sf-shot-work .sf-scene-credits,
.sf-shot-photo .sf-scene-credits {
  top: auto;
  right: auto;
  left: 0;
  bottom: clamp(22px, 3vh, 38px);
  width: min(290px, 24vw);
  transform: none;
  text-align: left;
}

.sf-shot-work .sf-scene-credits::before,
.sf-shot-photo .sf-scene-credits::before {
  margin-left: 0;
}

.sf-shot-services .sf-scene-credits {
  top: auto;
  bottom: clamp(10px, 2vh, 22px);
  transform: none;
}

.sf-shot-method .sf-scene-credits {
  top: 30%;
}

/* The main typography remains dominant. */
.sf-shot-word .sf-word-copy,
.sf-shot-method .sf-method-copy {
  position: relative;
  z-index: 2;
  padding-right: min(28vw, 360px);
}

.sf-shot-work .sf-work-heading,
.sf-shot-work .sf-project-stage,
.sf-shot-services .sf-services-copy,
.sf-shot-photo .sf-photo-copy,
.sf-shot-photo .sf-photo-stack,
.sf-final-copy,
.sf-title-copy,
.sf-perspective-copy {
  position: relative;
  z-index: 2;
}

body.sf-film-page.is-dark .sf-scene-index {
  color: rgba(245,242,234,.045);
}

body.sf-film-page.is-dark .sf-scene-credits span {
  color: rgba(245,242,234,.48);
}

body.sf-film-page.is-dark .sf-scene-credits span:last-child {
  color: rgba(245,242,234,.28);
}

@media (max-width: 900px) {
  .sf-scene-index {
    right: -.02em;
    bottom: .01em;
    font-size: clamp(120px, 38vw, 220px);
    opacity: .9;
  }

  .sf-scene-credits {
    top: auto !important;
    right: 0 !important;
    left: auto !important;
    bottom: clamp(6px, 1.4vh, 14px) !important;
    width: min(250px, 68vw);
    transform: none !important;
    text-align: right !important;
    gap: 6px;
  }

  .sf-scene-credits::before {
    width: 48px;
    margin-left: auto !important;
  }

  .sf-scene-credits span {
    font-size: 7px;
    line-height: 1.45;
  }

  .sf-shot-word .sf-word-copy,
  .sf-shot-method .sf-method-copy {
    padding-right: 0;
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .sf-scene-credits {
    width: min(240px, 20vw);
  }

  .sf-scene-credits span {
    font-size: 8px;
  }

  .sf-scene-index {
    font-size: clamp(150px, min(22vw, 34vh), 320px);
  }
}


/* ================================================================
   V6 — PREMIUM DARK CINEMA
   Same motion/pacing. Darker visual world with richer depth.
================================================================ */

:root {
  --sf-ink: #0B0C10;
  --sf-ink-2: #11131A;
  --sf-ink-3: #181B24;
  --sf-ivory: #F3EFE6;
  --sf-ivory-soft: #D8D3C8;
  --sf-blue: #6E78FF;
  --sf-coral: #FF826B;
  --sf-lime: #DDFB96;
}

html {
  background: var(--sf-ink);
  color-scheme: dark;
}

body.sf-film-page,
body.sf-film-page.is-dark {
  background: var(--sf-ink);
  color: var(--sf-ivory);
}

/* Keep the homepage navigation inside the same premium visual world. */
body.sf-film-page .navbar {
  color: var(--sf-ivory);
  background: linear-gradient(180deg, rgba(11,12,16,.86), rgba(11,12,16,.30) 72%, transparent);
  border-bottom-color: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
}
body.sf-film-page .navbar .logo,
body.sf-film-page .navbar .desktop-nav a,
body.sf-film-page .navbar .menu-button {
  color: var(--sf-ivory);
}
body.sf-film-page .navbar .desktop-nav a {
  opacity: .76;
}
body.sf-film-page .navbar .desktop-nav a:hover {
  opacity: 1;
}

/* The stage is no longer flat black: it feels like a lit screening room. */
.sf-film-stage,
body.sf-film-page.is-dark .sf-film-stage {
  color: var(--sf-ivory);
  background:
    radial-gradient(circle at 50% 118%, rgba(89,101,255,.095), transparent 36%),
    radial-gradient(circle at 90% 12%, rgba(255,255,255,.026), transparent 28%),
    linear-gradient(180deg, #101219 0%, #0B0C10 58%, #08090C 100%);
}

/* A very quiet inner edge makes the viewport feel like a composed film frame. */
.sf-film-stage::before {
  content: "";
  position: absolute;
  z-index: 86;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 2px;
  pointer-events: none;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.16),
    0 0 0 1px rgba(0,0,0,.28);
}

/* Film grain is lighter on dark stock. */
.sf-film-stock {
  opacity: .095;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 18% 31%, rgba(255,255,255,.62) 0 .5px, transparent .8px),
    radial-gradient(circle at 72% 66%, rgba(255,255,255,.42) 0 .5px, transparent .8px);
}

.sf-film-vignette {
  box-shadow:
    inset 0 0 15vw rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.035);
  background:
    linear-gradient(to bottom, rgba(0,0,0,.14), transparent 17%, transparent 77%, rgba(0,0,0,.24));
}

/* The existing spotlight now actually reads like cinema against dark stock. */
.sf-film-spotlight {
  opacity: var(--spot-opacity,.78);
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,250,238,.34) 0 5%,
      rgba(110,120,255,.19) 16%,
      rgba(110,120,255,.075) 31%,
      rgba(255,130,107,.035) 43%,
      transparent 66%);
  filter: saturate(.92);
}
.sf-film-spotlight i {
  width: 30vw;
  background:
    linear-gradient(180deg,
      rgba(255,248,231,.115),
      rgba(110,120,255,.045) 58%,
      rgba(255,255,255,0));
  filter: blur(30px);
  opacity: .62;
}

/* Exposure flashes stay editorial instead of turning the screen white. */
.sf-film-flash {
  background: rgba(242,238,228,.72);
  mix-blend-mode: screen;
}

/* Global film metadata */
.sf-film-topline,
.sf-film-bottomline,
body.sf-film-page.is-dark .sf-film-topline,
body.sf-film-page.is-dark .sf-film-bottomline {
  color: rgba(243,239,230,.54);
}

.sf-film-progress,
body.sf-film-page.is-dark .sf-film-progress {
  background: rgba(243,239,230,.12);
}
.sf-film-progress i {
  background: linear-gradient(90deg, var(--sf-blue), #98A0FF);
}
.sf-film-progress i::after,
body.sf-film-page.is-dark .sf-film-progress i::after {
  color: #A6ADFF;
  background: #A6ADFF;
  box-shadow:
    0 0 0 4px rgba(110,120,255,.09),
    0 0 18px rgba(110,120,255,.38);
}

/* Premium glass contact capsule. */
.sf-film-contact,
body.sf-film-page.is-dark .sf-film-contact {
  color: var(--sf-ivory);
  border: 1px solid rgba(243,239,230,.15);
  background: rgba(18,20,27,.66);
  box-shadow:
    0 10px 35px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.sf-film-contact:hover {
  color: var(--sf-ink);
  background: var(--sf-ivory);
  border-color: var(--sf-ivory);
}

/* Opening + editorial typography */
.sf-shot-kicker {
  color: rgba(243,239,230,.58);
}
.sf-opening-serif,
.sf-title-copy em,
.sf-perspective-copy h2 em,
.sf-work-heading em,
.sf-method-copy h2 em,
.sf-final-copy h2 em {
  color: #8992FF;
}
.sf-shot[data-shot="design"] h2,
.sf-service-word:nth-child(3) strong,
.sf-method-copy h2 span {
  color: #FF8B75;
}
.sf-shot[data-shot="build"] h2,
.sf-service-word:nth-child(4) strong {
  color: #7C86FF;
}

/* Project frames become illuminated artefacts instead of grey cards. */
.sf-project-frame {
  background: #0E1016;
  border: 1px solid rgba(243,239,230,.12);
  box-shadow:
    0 48px 120px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.025),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.sf-project-frame img {
  background: #E9EAEF;
}
.sf-project-frame > div {
  color: var(--sf-ivory);
  background:
    linear-gradient(180deg, rgba(26,28,37,.98), rgba(14,16,22,.98));
  border-top: 1px solid rgba(243,239,230,.08);
}
.sf-project-frame span,
.sf-project-frame b {
  color: rgba(243,239,230,.56);
}
.sf-project-frame strong {
  color: var(--sf-ivory);
}

/* Hairlines and links now work on dark stock. */
.sf-service-word {
  border-bottom-color: rgba(243,239,230,.15);
}
.sf-service-word span,
.sf-service-word small {
  color: rgba(243,239,230,.58);
}
.sf-service-links a,
.sf-work-all,
.sf-photo-copy a,
.sf-final-actions a {
  color: var(--sf-ivory);
}
.sf-final-actions a {
  border-top-color: rgba(243,239,230,.16);
}
.sf-final-primary {
  border-bottom-color: rgba(243,239,230,.34);
}

/* Photography stays dark, but now belongs to the same world rather than switching worlds. */
.sf-shot-photo {
  color: var(--sf-ivory);
}
.sf-photo-stack figure {
  border: 1px solid rgba(243,239,230,.10);
  box-shadow:
    0 32px 90px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.02);
}
.sf-photo-copy h2 em {
  color: var(--sf-lime);
}

/* The secondary information layer is a little more present on dark stock. */
.sf-scene-index,
body.sf-film-page.is-dark .sf-scene-index {
  color: rgba(243,239,230,.060);
  text-shadow: 0 0 70px rgba(110,120,255,.025);
}
.sf-scene-credits span,
body.sf-film-page.is-dark .sf-scene-credits span {
  color: rgba(243,239,230,.52);
}
.sf-scene-credits span:last-child,
body.sf-film-page.is-dark .sf-scene-credits span:last-child {
  color: rgba(243,239,230,.30);
}
.sf-scene-credits::before {
  opacity: .30;
}

/* Links feel like restrained editorial controls rather than default anchors. */
.sf-service-links a,
.sf-work-all,
.sf-photo-copy a,
.sf-final-actions a {
  text-decoration: none;
  transition: opacity .25s ease, color .25s ease, transform .25s var(--sf-ease);
}
.sf-service-links a:hover,
.sf-work-all:hover,
.sf-photo-copy a:hover,
.sf-final-actions a:hover {
  opacity: .72;
}

/* Keep the light sweep elegant on dark stock. */
.sf-film-stage::after {
  background:
    linear-gradient(100deg,
      transparent 0 43%,
      rgba(243,239,230,.085) 49%,
      transparent 55%);
  mix-blend-mode: screen;
}

@media (max-width: 900px) {
  .sf-film-stage::before {
    inset: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sf-film-page,
  .sf-film-stage {
    background: #0B0C10 !important;
    color: var(--sf-ivory) !important;
  }
}


/* ================================================================
   V7 — CLEAN CUTS / REFINED PROJECT DISPLAY
   - No exposure flashes between scenes.
   - Project imagery is slightly smaller inside the display cage.
   - PromptChecker receives a dedicated full-fit treatment.
================================================================ */

/* Remove the bright scene-change flash completely. */
.sf-film-flash {
  display: none !important;
  opacity: 0 !important;
}

/* Give the imagery a little breathing room inside the premium cage. */
.sf-project-frame img {
  transform: scale(var(--project-image-scale,.955));
  transform-origin: 50% 50%;
  border-radius: 8px;
}

/* PromptChecker is a taller 16:10 capture.
   Keep the entire interface visible rather than cropping it. */
.sf-project-prompt img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(var(--prompt-image-scale,.925)) !important;
}

/* On smaller screens keep the insets restrained. */
@media (max-width: 900px) {
  .sf-project-frame img {
    transform: scale(var(--project-image-scale,.97));
  }
  .sf-project-prompt img {
    transform: scale(var(--prompt-image-scale,.95)) !important;
  }
}

@media (max-width: 620px) {
  .sf-project-frame img {
    transform: scale(var(--project-image-scale,.985));
  }
  .sf-project-prompt img {
    transform: scale(var(--prompt-image-scale,.97)) !important;
  }
}


/* ================================================================
   V8 — HIERARCHY / CLEAR CTA PASS
   Scene numbers stay decorative and unobstructed.
   Every clickable action gets one simple, consistent visual language.
================================================================ */

/* ---------- SCENE NUMBERS ---------- */

/* Pull every scene number into the safe canvas so the accent is never
   visibly chopped by the viewport edge. */
.sf-scene-index,
body.sf-film-page.is-dark .sf-scene-index {
  right: .035em;
  bottom: .055em;
  line-height: .76;
}

/* WORK / 06:
   Keep the scene accent on the typography side, away from the project cage. */
.sf-shot-work .sf-scene-index {
  left: -.005em;
  right: auto;
  bottom: .03em;
  font-size: clamp(170px, min(25vw, 35vh), 395px);
}

/* PHOTOGRAPHY / 09:
   Move the scene accent into the copy-side negative space so the second
   photograph can never cover it. */
.sf-shot-photo .sf-scene-index {
  left: .005em;
  right: auto;
  bottom: .035em;
  font-size: clamp(170px, min(24vw, 34vh), 385px);
}

/* Keep the actual content above the number accents. */
.sf-shot-work .sf-work-heading,
.sf-shot-work .sf-project-stage,
.sf-shot-photo .sf-photo-copy,
.sf-shot-photo .sf-photo-stack {
  position: relative;
  z-index: 3;
}

/* ---------- ONE CTA LANGUAGE ---------- */

.sf-film-contact,
.sf-work-all,
.sf-service-links a,
.sf-photo-copy a,
.sf-final-actions a {
  box-sizing: border-box;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 17px;
  border: 1px solid rgba(243,239,230,.22);
  border-radius: 999px;
  background: rgba(18,20,27,.66);
  color: var(--sf-ivory);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 30px rgba(0,0,0,.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition:
    transform .28s var(--sf-ease),
    background .24s ease,
    color .24s ease,
    border-color .24s ease,
    box-shadow .28s ease;
}

.sf-film-contact:hover,
.sf-work-all:hover,
.sf-service-links a:hover,
.sf-photo-copy a:hover,
.sf-final-actions a:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(243,239,230,.55);
  background: rgba(34,37,48,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 34px rgba(0,0,0,.25);
}

.sf-film-contact:focus-visible,
.sf-work-all:focus-visible,
.sf-service-links a:focus-visible,
.sf-photo-copy a:focus-visible,
.sf-final-actions a:focus-visible,
.sf-project-frame:focus-visible {
  outline: 2px solid #98A0FF;
  outline-offset: 4px;
}

/* Primary actions: unmistakably clickable without becoming loud. */
.sf-film-contact,
.sf-service-links a:last-child,
.sf-final-actions .sf-final-primary {
  background: var(--sf-ivory);
  color: var(--sf-ink);
  border-color: var(--sf-ivory);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 12px 34px rgba(0,0,0,.24);
}

.sf-film-contact:hover,
.sf-service-links a:last-child:hover,
.sf-final-actions .sf-final-primary:hover {
  background: #FFFFFF;
  color: var(--sf-ink);
  border-color: #FFFFFF;
  box-shadow:
    0 15px 40px rgba(0,0,0,.28),
    0 0 0 3px rgba(110,120,255,.09);
}

/* Work CTA now belongs to the Work heading rather than floating at the
   bottom of the scene. */
.sf-work-all {
  position: static;
  width: fit-content;
  margin-top: clamp(24px, 3.5vh, 38px);
}

/* Service CTAs read as a deliberate pair. */
.sf-service-links {
  gap: 12px;
  align-items: center;
}

/* Photography action gets the same obvious control treatment. */
.sf-photo-copy a {
  margin-top: 30px;
  width: fit-content;
}

/* Final actions are button tiles rather than ambiguous horizontal rules. */
.sf-final-actions {
  gap: 12px;
}
.sf-final-actions a {
  width: 100%;
  justify-content: space-between;
  min-height: 52px;
  padding: 15px 18px;
  border-top: 1px solid rgba(243,239,230,.22);
}
.sf-final-actions .sf-final-primary {
  min-height: 60px;
  border-bottom: 1px solid var(--sf-ivory);
  font-size: clamp(16px,1.7vw,24px) !important;
}

/* Make the project-card VIEW cue read like a control too. The whole card
   remains clickable, but this removes any ambiguity. */
.sf-project-frame b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--sf-ivory);
  color: var(--sf-ink) !important;
  border: 1px solid rgba(243,239,230,.8);
  font-weight: 850;
  letter-spacing: .11em;
}

/* The project cards themselves get a subtle interactive edge. */
.sf-project-frame {
  transition:
    border-color .26s ease,
    box-shadow .3s ease;
}
.sf-project-frame.is-current:hover {
  border-color: rgba(152,160,255,.46);
  box-shadow:
    0 52px 130px rgba(0,0,0,.58),
    0 0 0 1px rgba(152,160,255,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Tablet/mobile:
   keep accents fully inside the canvas and make controls easy to hit. */
@media (max-width: 900px) {
  .sf-shot-work .sf-scene-index,
  .sf-shot-photo .sf-scene-index {
    left: .01em;
    right: auto;
    bottom: .055em;
    font-size: clamp(112px, 34vw, 205px);
  }

  .sf-film-contact,
  .sf-work-all,
  .sf-service-links a,
  .sf-photo-copy a,
  .sf-final-actions a {
    min-height: 42px;
    padding: 11px 14px;
  }

  .sf-work-all {
    margin-top: 20px;
  }
}

@media (max-width: 620px) {
  .sf-scene-index,
  body.sf-film-page.is-dark .sf-scene-index {
    bottom: .09em;
  }

  .sf-service-links {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 330px);
  }

  .sf-service-links a,
  .sf-photo-copy a,
  .sf-work-all {
    width: fit-content;
    max-width: 100%;
  }

  .sf-final-actions a {
    min-height: 48px;
  }
}


/* ================================================================
   V9 — STORY / UNBOXING BASELINE
   V8 motion and premium-dark art direction are preserved.
   This pass adds narrative hierarchy so every scroll reveals new meaning.
================================================================ */

/* Midpoint summary gets one quiet explanatory line. */
.sf-title-copy p {
  margin: clamp(24px,3.5vh,38px) auto 0;
  max-width: 620px;
  font-size: clamp(14px,1.15vw,18px);
  line-height: 1.65;
  color: rgba(243,239,230,.62);
}

/* Work now unpacks the design decision beside each project screen. */
.sf-work-stories {
  position: relative;
  min-height: 132px;
  margin-top: clamp(22px,3vh,32px);
  width: min(100%, 450px);
}

.sf-work-story {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,14px,0);
  transition: none;
  pointer-events: none;
}

.sf-work-story.is-current {
  visibility: visible;
}

.sf-work-story > span {
  display: block;
  margin-bottom: 9px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
  color: rgba(243,239,230,.46);
  text-transform: uppercase;
}

.sf-work-story strong {
  display: block;
  max-width: 410px;
  font-size: clamp(19px,1.65vw,27px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 680;
  color: var(--sf-ivory);
}

.sf-work-story p {
  margin: 10px 0 0;
  max-width: 420px;
  font-size: clamp(12px,.95vw,15px);
  line-height: 1.55;
  color: rgba(243,239,230,.58);
}

.sf-work-heading h2 {
  font-size: clamp(52px,min(6.3vw,10vh),104px);
}

/* The service/hiring reveal now has explicit actions. */
.sf-method-actions {
  margin: 30px 0 0 auto;
  width: min(440px,100%);
}

/* Photography is no longer an isolated hobby beat; it explains visual judgement. */
.sf-photo-copy p {
  margin: 24px 0 0;
  max-width: 420px;
  font-size: clamp(13px,1vw,16px);
  line-height: 1.65;
  color: rgba(243,239,230,.60);
}

/* Keep the narrative copy compact on shorter screens. */
@media (max-height: 760px) and (min-width: 901px) {
  .sf-work-stories {
    min-height: 112px;
    margin-top: 16px;
  }
  .sf-work-story strong {
    font-size: 19px;
  }
  .sf-work-story p {
    margin-top: 7px;
    font-size: 12px;
  }
  .sf-title-copy p,
  .sf-photo-copy p {
    font-size: 13px;
  }
  .sf-method-actions {
    margin-top: 18px;
  }
}

@media (max-width: 900px) {
  .sf-work-stories {
    min-height: 112px;
    margin-top: 16px;
  }
  .sf-work-story strong {
    font-size: clamp(17px,3.4vw,22px);
  }
  .sf-work-story p {
    font-size: 12px;
  }
  .sf-method-actions {
    margin: 22px 0 0;
    width: min(100%,430px);
  }
  .sf-photo-copy p {
    margin-top: 16px;
    max-width: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-work-stories {
    min-height: 0;
  }
  .sf-work-story {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin: 0 0 18px;
  }
}


/* ================================================================
   V10 — ATMOSPHERE + MOBILE SAFE PASS
   - Background stays in one premium world, but the lighting evolves.
   - Case studies introduce subtle accents into that world.
   - Mobile safe-area / text-fit fixes for the first "QUESTION" scene
     and the rest of the homepage copy compositions.
   - Work scene number becomes intentionally visible again.
================================================================ */

/* ---------- SAME WORLD / DIFFERENT LIGHTING ---------- */

:root {
  --sf-bg-top: #101219;
  --sf-bg-mid: #0B0C10;
  --sf-bg-bottom: #08090C;
  --sf-bg-left: rgba(255,130,107,.045);
  --sf-bg-right: rgba(110,120,255,.078);
  --sf-bg-bottom-glow: rgba(110,120,255,.090);
  --sf-bg-project: rgba(110,120,255,0);
  --sf-vignette-top: rgba(0,0,0,.14);
  --sf-vignette-bottom: rgba(0,0,0,.24);
}

.sf-film-stage,
body.sf-film-page.is-dark .sf-film-stage {
  background:
    radial-gradient(circle at 16% 22%, var(--sf-bg-left) 0, transparent 31%),
    radial-gradient(circle at 82% 18%, var(--sf-bg-right) 0, transparent 34%),
    radial-gradient(circle at 72% 78%, var(--sf-bg-bottom-glow) 0, transparent 38%),
    radial-gradient(circle at 74% 56%, var(--sf-bg-project) 0, transparent 27%),
    linear-gradient(180deg, var(--sf-bg-top) 0%, var(--sf-bg-mid) 58%, var(--sf-bg-bottom) 100%);
  transition: background .42s linear;
}

.sf-film-vignette {
  background:
    linear-gradient(to bottom, var(--sf-vignette-top), transparent 17%, transparent 77%, var(--sf-vignette-bottom));
}

/* Keep the spotlight elegant, but let the atmosphere do more of the work. */
.sf-film-spotlight {
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,250,238,.28) 0 5%,
      rgba(110,120,255,.15) 16%,
      rgba(110,120,255,.060) 31%,
      rgba(255,130,107,.030) 43%,
      transparent 66%);
}

/* ---------- WORK SCENE NUMBER VISIBILITY ---------- */

.sf-shot-work .sf-scene-index {
  z-index: 1;
  left: clamp(4px, .55vw, 16px);
  right: auto;
  bottom: clamp(6px, 1vh, 12px);
  color: rgba(243,239,230,.105);
  text-shadow:
    0 0 34px rgba(110,120,255,.10),
    0 0 68px rgba(255,255,255,.02);
}

.sf-shot-work .sf-work-heading,
.sf-shot-work .sf-project-stage {
  z-index: 3;
}

/* ---------- MOBILE SAFE LAYOUT / COPY FIT ---------- */

@media (max-width: 900px) {
  .sf-shot {
    inset:
      max(88px, calc(82px + env(safe-area-inset-top, 0px)))
      clamp(18px, 4.7vw, 24px)
      max(52px, calc(40px + env(safe-area-inset-bottom, 0px)));
  }

  .sf-film-topline,
  .sf-film-bottomline,
  .sf-film-progress {
    left: clamp(18px, 4.7vw, 24px);
    right: clamp(18px, 4.7vw, 24px);
  }

  .sf-opening-copy,
  .sf-word-copy,
  .sf-title-copy,
  .sf-perspective-copy,
  .sf-work-heading,
  .sf-services-copy,
  .sf-method-copy,
  .sf-photo-copy,
  .sf-final-copy {
    width: min(100%, 560px);
    max-width: 100%;
  }

  /* Scene 01 / QUESTION:
     reduce the risk of right-edge clipping and keep the composition readable. */
  .sf-shot-word {
    align-content: center;
  }

  .sf-word-copy h2 {
    max-width: 100%;
    font-size: clamp(70px, 16.5vw, 124px);
    line-height: .78;
    letter-spacing: -.068em;
    text-wrap: balance;
  }

  .sf-shot-word p {
    width: min(100%, 350px);
    margin-top: 20px;
    font-size: clamp(13px, 2.05vw, 16px);
    line-height: 1.55;
  }

  .sf-shot-kicker {
    margin-bottom: 16px;
  }

  .sf-scene-credits {
    width: min(220px, 66vw) !important;
  }

  .sf-title-copy p,
  .sf-photo-copy p,
  .sf-final-copy p,
  .sf-method-copy p,
  .sf-perspective-copy p {
    max-width: min(100%, 380px);
    font-size: 13px;
    line-height: 1.6;
  }

  .sf-shot-work {
    align-content: center;
    gap: 20px;
  }

  .sf-work-heading h2 {
    max-width: 11ch;
  }

  .sf-work-stories {
    min-height: 104px;
    width: min(100%, 420px);
  }

  .sf-project-stage {
    aspect-ratio: 16 / 10.8;
  }

  .sf-service-links,
  .sf-method-actions {
    width: min(100%, 420px);
  }

  .sf-shot-photo {
    gap: 16px;
  }

  .sf-photo-stack {
    height: min(45vh, 420px);
  }

  .sf-final-actions {
    width: min(100%, 420px);
  }
}

@media (max-width: 620px) {
  .sf-film-track {
    height: 1080svh;
  }

  .sf-shot {
    inset:
      max(86px, calc(80px + env(safe-area-inset-top, 0px)))
      18px
      max(56px, calc(44px + env(safe-area-inset-bottom, 0px)));
  }

  .sf-film-topline,
  .sf-film-bottomline,
  .sf-film-progress {
    left: 18px;
    right: 18px;
  }

  .sf-film-bottomline {
    bottom: max(18px, calc(14px + env(safe-area-inset-bottom, 0px)));
  }

  .sf-opening-line {
    font-size: clamp(50px, 14.2vw, 86px);
    line-height: .82;
  }

  .sf-opening-serif {
    padding-left: 4vw;
  }

  .sf-word-copy h2 {
    font-size: clamp(62px, 18vw, 96px);
    line-height: .80;
    letter-spacing: -.062em;
  }

  .sf-shot-word p {
    width: min(100%, 310px);
    margin-top: 16px;
    font-size: 12.5px;
  }

  .sf-scene-credits {
    width: min(196px, 64vw) !important;
    gap: 5px;
  }

  .sf-scene-credits span {
    font-size: 6.5px;
    letter-spacing: .14em;
  }

  .sf-title-copy h2,
  .sf-perspective-copy h2,
  .sf-final-copy h2 {
    text-wrap: balance;
  }

  .sf-title-copy p,
  .sf-photo-copy p,
  .sf-final-copy p,
  .sf-method-copy p,
  .sf-perspective-copy p {
    max-width: 300px;
    font-size: 12.5px;
  }

  .sf-work-heading h2 {
    font-size: clamp(38px, 10.2vw, 54px);
    max-width: 10ch;
  }

  .sf-work-stories {
    min-height: 110px;
    margin-top: 14px;
    width: min(100%, 300px);
  }

  .sf-work-story strong {
    font-size: clamp(17px, 5.1vw, 21px);
    line-height: 1.10;
  }

  .sf-work-story p {
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.5;
    max-width: 290px;
  }

  .sf-project-stage {
    aspect-ratio: 16 / 11.3;
  }

  .sf-shot-work .sf-scene-index {
    left: 6px;
    bottom: 16px;
    font-size: clamp(116px, 33vw, 170px);
    color: rgba(243,239,230,.115);
  }

  .sf-shot-photo .sf-scene-index {
    left: 6px;
    bottom: 14px;
  }

  .sf-service-word strong {
    font-size: clamp(40px, 12vw, 58px);
  }

  .sf-method-copy h2 {
    font-size: clamp(54px, 15vw, 88px);
  }

  .sf-photo-copy h2 {
    font-size: clamp(34px, 9vw, 54px);
  }

  .sf-photo-stack {
    height: min(35vh, 270px);
  }

  .sf-final-actions a {
    min-height: 50px;
  }
}

/* Very small devices: give QUESTION even more safety. */
@media (max-width: 390px) {
  .sf-word-copy h2 {
    font-size: clamp(58px, 17.5vw, 84px);
    letter-spacing: -.055em;
  }

  .sf-shot-word p {
    width: min(100%, 284px);
  }

  .sf-work-stories {
    min-height: 118px;
  }

  .sf-film-contact {
    right: 16px;
    bottom: max(18px, calc(16px + env(safe-area-inset-bottom, 0px)));
  }
}