/* Layout: one full-bleed still behind everything; a bowed title list at left, nav at top right. Single dark look. */
/* Base: same as the page the approved mockup ran in */
:root { box-sizing: border-box; }
body { margin: 0; padding: 0; font: 14px -apple-system, BlinkMacSystemFont, sans-serif; }
img { max-width: 100%; }
:root {
  --ink: #0b0b0c;
  --paper: #efece6;
  --dim: rgba(239, 236, 230, 0.48);
  --faint: rgba(239, 236, 230, 0.26);
  --shade: rgba(8, 8, 9, 0.62);
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --title: "Familjen Grotesk", "Helvetica Neue", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gutR: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
html, body { height: 100%; }
body { background: var(--ink); color: var(--paper); font-family: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; }
body.scroll { overflow: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }

/* stills */
.stage { position: fixed; inset: 0; z-index: 0; background: var(--ink); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.stage.cut img { transition: none; }
.stage img.on { opacity: 1; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,9,.55) 0, rgba(8,8,9,0) 140px), linear-gradient(0deg, rgba(8,8,9,.45) 0, rgba(8,8,9,0) 90px), linear-gradient(90deg, rgba(8,8,9,.66) 0%, rgba(8,8,9,.38) 45%, rgba(8,8,9,.22) 100%); }

/* header */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutR) 0 var(--gut); }
.name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.name small { display: block; font-weight: 400; font-size: 11px; letter-spacing: .2em; color: var(--dim); margin-top: 2px; }
nav { display: flex; gap: 26px; flex-wrap: wrap; justify-content: flex-end; }
nav a { font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
nav a:hover { color: var(--paper); }
nav a[aria-current="page"] { color: var(--paper); text-decoration: line-through; text-decoration-thickness: 1px; }

/* bowed list */
.list { position: fixed; z-index: 3; left: var(--gut); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; }
.item { display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.item button { display: block; text-align: left; font-family: var(--title); font-weight: 500; text-transform: uppercase; letter-spacing: .035em;
  font-size: clamp(24px, 2.7vw, 40px); line-height: 1.04; color: var(--dim); transition: font-size .55s cubic-bezier(.2,.7,.2,1), color .4s; }
.item.active button { color: var(--paper); }
.list.bowed .item.active button { font-size: clamp(38px, 5vw, 80px); line-height: .98; }
.meta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1), opacity .4s; opacity: 0; }
.meta > div { overflow: hidden; }
.list.bowed .item.active .meta { grid-template-rows: 1fr; opacity: 1; }
.meta p { margin: 0; padding: 6px 0 16px; display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
.meta span em { font-style: normal; color: var(--dim); margin-right: 8px; }

/* project page: frames edge to edge, title and credits fixed over them */
.proj { position: relative; z-index: 4; background: var(--ink); }
.frames { display: block; }
.frames picture { display: block; }
.frames img { display: block; width: 100%; max-width: 100%; height: auto; }
.frames > img:first-child, .vid { height: 100vh; height: 100svh; width: 100%; object-fit: cover; }
.vid { position: relative; display: block; overflow: hidden; background: var(--ink); cursor: pointer; }
.vid img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.vid:hover img { transform: scale(1.015); }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; display: grid; place-items: center; transition: transform .3s, opacity .3s; filter: drop-shadow(0 2px 14px rgba(0,0,0,.45)); }
.play::before { content: ""; margin-left: 10px; border-style: solid; border-width: 30px 0 30px 50px; border-color: transparent transparent transparent var(--paper); }
.vid:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.vid.playing { cursor: default; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; }
.cap { position: fixed; z-index: 4; left: var(--gut); top: calc(108px + env(safe-area-inset-top, 0px)); max-width: min(560px, calc(100% - 40px)); pointer-events: none;
  text-shadow: 0 1px 18px rgba(0,0,0,.55); transition: opacity .4s; }
.cap a { pointer-events: auto; }
.cap h1 { font-family: var(--title); font-weight: 500; text-transform: uppercase; letter-spacing: .035em; font-size: clamp(34px, 4.4vw, 68px); line-height: .96; margin: 0 0 16px; text-wrap: balance; }
.psub { font-family: var(--display); font-size: 15px; letter-spacing: .16em; text-transform: uppercase; margin: -8px 0 16px; }
.cap dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-family: var(--display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.cap dt { color: var(--dim); }
.cap dd { margin: 0; }
.back { font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); display: inline-block; margin-bottom: 18px; }
.back:hover { color: var(--paper); }
.proj::before { content: ""; position: fixed; z-index: 4; inset: 0 auto 0 0; width: min(640px, 100%); pointer-events: none;
  background: linear-gradient(90deg, rgba(8,8,9,.42), rgba(8,8,9,0)); transition: opacity .4s; }
body.vplay .cap, body.vplay .proj::before { opacity: 0; }
body.vplay .cap a { pointer-events: none; }

[hidden] { display: none !important; }
body.scroll header { padding-bottom: 36px; background: linear-gradient(180deg, rgba(8,8,9,.6), rgba(8,8,9,0)); }

/* plain list until the first hover (or first scroll on phones) */
.list:not(.bowed) .item { transform: none !important; }
.list:not(.engaged) .item button { color: var(--paper); }
.count { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); font-family: var(--display); font-size: 11px; letter-spacing: .18em; color: var(--dim); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s; pointer-events: none; }
body.scroll .count { display: none; }
.engaged-on .count { opacity: 1; }

/* phone: the list rolls with the page scroll */
body.roll, body.scroll { overflow-x: hidden; overflow-y: auto; height: auto; }
#spacer { display: none; }
body.roll #spacer { display: block; }
body.roll .list { right: var(--gutR); }
body.roll .list.engaged { transition: none; }
body.roll .list.bowed .item.active button { font-size: clamp(30px, 9.5vw, 46px); }

@media (max-width: 700px) {
  header { flex-direction: column; gap: 14px; }
  nav { justify-content: flex-start; gap: 16px; }
  .list { top: 54%; right: var(--gutR); }
  .cap { top: calc(130px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .stage img, .item, .item button, .meta { transition: none; }
}

/* about + contact: full-bleed frame behind */
.bgpage { position: relative; z-index: 4; min-height: 100vh; padding: calc(130px + env(safe-area-inset-top, 0px)) var(--gutR) 90px var(--gut); }
.bgpage .bg { position: fixed; inset: 0; z-index: -1; }
.bgpage .bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bgpage .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,9,.82), rgba(8,8,9,.5) 60%, rgba(8,8,9,.35)); }
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); max-width: 1180px; align-items: start; }
.about h1, .contact h1 { font-family: var(--title); font-weight: 500; text-transform: uppercase; letter-spacing: .035em; font-size: clamp(40px, 5.5vw, 84px); line-height: .95; margin: 0 0 26px; }
.about p { font-size: 18px; line-height: 1.55; margin: 0 0 14px; max-width: 54ch; }
.about h2 { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 34px 0 10px; }
.gear { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: var(--display); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.inquire { display: inline-block; margin-top: 34px; font-family: var(--display); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--paper); padding-bottom: 4px; }
.bts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 70px; max-width: 1180px; }
.bts img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.bts img:hover { filter: none; }
.contact { max-width: 560px; }
form { display: grid; gap: 18px; }
label { display: grid; gap: 7px; font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
input, textarea { font: inherit; font-family: var(--text); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--paper); background: rgba(8,8,9,.35); border: 0; border-bottom: 1px solid var(--dim); padding: 10px 2px; border-radius: 0; }
textarea { min-height: 150px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-bottom-color: var(--paper); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* laurels */
.laurels { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; pointer-events: none; }
.laurel { display: flex; align-items: center; gap: 6px; }
.laurel svg { width: 18px; height: 46px; flex: none; fill: none; stroke: var(--paper); stroke-width: 1.1; opacity: .9; }
.laurel svg.r { transform: scaleX(-1); }
.laurel div { text-align: center; font-family: var(--display); text-transform: uppercase; line-height: 1.2; }
.laurel b { display: block; font-weight: 500; font-size: 10px; letter-spacing: .16em; color: var(--dim); }
.laurel span { display: block; font-size: 11.5px; letter-spacing: .1em; max-width: 15ch; }
.cap dd a { pointer-events: auto; border-bottom: 1px solid var(--faint); }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .bts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* contact form: frosted boxes, label inside the top of each box */
.cf-a .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-a label { position: relative; display: block; background: rgba(239,236,230,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 3px; padding: 12px 14px 6px; transition: background .25s; }
.cf-a label:focus-within { background: rgba(239,236,230,.16); }
.cf-a label span { display: block; font-size: 11px; }
.cf-a input, .cf-a textarea { width: 100%; background: none; border: 0; padding: 6px 0 8px; }
.cf-a textarea { min-height: 160px; }
.cf-a .hp { position: absolute; }
.ts:empty { display: none; }
@media (max-width: 760px) { .cf-a .row2 { grid-template-columns: 1fr; } }

/* camera-style record button: flat, right under the form */
.rec { justify-self: end; display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 12px; margin-top: 4px; }
.rec-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #b5453c; transition: transform .12s, background .2s; }
.rec-btn b { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: #fff; margin-left: 2px; }
.rec-lab { font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); transition: color .2s; }
.rec:hover .rec-lab { color: var(--paper); }
.rec:hover .rec-btn { background: #c4524a; }
.rec:active .rec-btn { transform: scale(.94); }
.rec:disabled { cursor: default; }
.rec.busy .rec-btn { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { background: #8e3a33; } }
.rec.done { cursor: default; }
.rec.done .rec-lab { color: var(--paper); }
.rec.done .rec-btn { background: #8e3a33; }

/* phone: credit line stacked */
@media (max-width: 700px), (hover: none) {
  .meta p { flex-direction: column; gap: 1px; padding: 4px 0 12px; line-height: 1.25; }
}