/* v9 "Hva vi gjør": the downward-drifting photo / film wall (shared layout with /en/what-we-do.html) in the Norwegian navy design. */
.t { position: relative; display: block; overflow: hidden; background: #111a2c; }
.t img, .t video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-hero { height: 100vh; min-height: 720px; max-height: 1060px; overflow: hidden; isolation: isolate; display: flex; align-items: center; background: var(--navy-deep); }
.fw { position: absolute; inset: -80px -60px; z-index: -3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 8px;
  transform: rotate(-4deg) scale(1.06); transform-origin: 60% 40%; }
.fw-col { min-width: 0; }
.fw-track { display: flex; flex-direction: column; animation: fwDown 72s linear infinite; will-change: transform; }
.fw .t { flex: none; aspect-ratio: 4 / 5; margin-bottom: 8px; border-radius: 2px; }
.fw .t img { filter: saturate(.75) brightness(.78); }
.fw .t video { filter: saturate(.85) brightness(1) contrast(1.04); }
@keyframes fwDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.fw-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(90deg, rgba(12, 18, 33, .97) 0%, rgba(12, 18, 33, .93) 30%, rgba(12, 18, 33, .62) 56%, rgba(12, 18, 33, .42) 100%),
  linear-gradient(0deg, var(--navy-deep) 0%, rgba(12, 18, 33, 0) 24%), linear-gradient(180deg, rgba(12, 18, 33, .9) 0%, rgba(12, 18, 33, 0) 22%); }
.fw-in { position: relative; padding-top: var(--hdr-h); }
.fw-hero .display-xl { max-width: 15ch; font-size: clamp(2.6rem, 5vw, 5rem); margin-bottom: 26px; }
.fw-hero .lead { max-width: 44ch; color: #d5dceb; }
.fw-meta { margin: 30px 0 0; max-width: 48ch; display: flex; gap: 14px; align-items: flex-start; font-size: .9rem; line-height: 1.55; color: #b9c4d6; }
.fw-meta::before { content: ""; flex: none; width: 28px; height: 2px; margin-top: .7em; background: var(--orange-vivid); }
/* stories: white and navy cards, square corners */
.story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }
.story { background: #fff; border: 1px solid #e1e6ee; padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; color: var(--body); }
.story-b { background: var(--navy); border-color: var(--navy); color: #e3e8f0; }
.story-wide { grid-column: span 2; }
.story-n { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--orange); margin-bottom: 26px; letter-spacing: -.03em; }
.story-b .story-n { color: var(--orange-soft); }
.story-t { font-family: var(--f-text); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); margin: 0 0 12px; }
.story-b .story-t { color: var(--steel); }
.story-p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.story-b .story-p { color: #fff; }
.story-wide .story-p { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.25; letter-spacing: -.01em; max-width: 30ch; }
.steps-quiet > li .box-n { font-size: 2.6rem; }
/* slim strip + in-house */
.slim-wrap { padding: 8px 0 0; }
.slim-row { overflow: hidden; padding: 6px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.slim-track { display: flex; width: max-content; animation: tick 140s linear infinite; }
.slim-row .t { flex: none; width: 108px; height: 80px; margin-right: 8px; opacity: .55; filter: saturate(.6); }
@keyframes tick { to { transform: translateX(-50%); } }
.inh2-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.strip-list { border-top: 1px solid rgba(255, 255, 255, .16); }
.strip-list li { display: flex; gap: 16px; padding: 20px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.strip-n { font-size: .74rem; font-weight: 700; color: var(--orange-soft); padding-top: 4px; }
.strip-h { font-weight: 700; color: #fff; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.strip-ih { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-soft); padding: 3px 9px; border: 1px solid rgba(232, 137, 74, .45); }
.strip-p { color: var(--steel); font-size: .95rem; margin: 0; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr 1fr; } .inh2-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fw-hero { height: auto; min-height: 100svh; max-height: none; align-items: flex-end; padding-bottom: 56px; }
  .fw { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 6px; inset: -40px -40px; }
  .fw .t { margin-bottom: 6px; }
  .fw-col[data-c="0"], .fw-col[data-c="1"], .fw-col[data-c="2"], .fw-col[data-c="3"], .fw-col[data-c="4"], .fw-col[data-c="5"] { display: none; }
  .fw-shade { background: linear-gradient(0deg, rgba(12, 18, 33, .98) 0%, rgba(12, 18, 33, .94) 55%, rgba(12, 18, 33, .78) 78%, rgba(12, 18, 33, .86) 100%); }
  .story-grid { grid-template-columns: 1fr; } .story-wide { grid-column: auto; }
  .slim-row .t { width: 84px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) { .fw-track, .slim-track { animation: none !important; } .fw-track { transform: translateY(-25%); } }

/* v11: photos only, tiles ~20% smaller -> 15 columns (desktop), 7 columns visible on phones (columns 4-10) */
.fw{grid-template-columns:repeat(15,minmax(0,1fr));column-gap:7px}
.fw .t{margin-bottom:7px}
.fw-col{display:block}
@media (max-width:640px){
 .fw{grid-template-columns:repeat(7,minmax(0,1fr));column-gap:5px}
 .fw .t{margin-bottom:5px}
 .fw-col{display:none}
 .fw-col[data-c="4"],.fw-col[data-c="5"],.fw-col[data-c="6"],.fw-col[data-c="7"],.fw-col[data-c="8"],.fw-col[data-c="9"],.fw-col[data-c="10"]{display:block}
}