/* ourwork4.css (2026-10-15): "Our work" block (home + /work/) and the plain closing section.
   Additive. Used by tools/ourwork.py. No engine, video or audio rules are touched here. */

.ow, .ow-close { position: relative; background: #000; color: #F4F4F4; padding: 72px 0; box-sizing: border-box; overflow: hidden;
  font-family: var(--sw-font-body, "Familjen Grotesk", sans-serif); }
.ow *, .ow *::before, .ow *::after, .ow-close *, .ow-close *::before, .ow-close *::after { box-sizing: border-box; }
.ow--page { padding-top: 56px; }
.ow-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.ow-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #00FFFF; }
.ow-title { margin: 0 0 14px; font-family: var(--sw-font-display, "Bricolage Grotesque", sans-serif); font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02; font-weight: 700; letter-spacing: -.01em; }
.ow-dek { margin: 0 0 22px; max-width: 62ch; font-size: 17px; line-height: 1.55; color: #B8B3C7; }

/* jump links: three anchors to the groups, 44px tall */
.ow-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ow-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; color: #F4F4F4; text-decoration: none; font-weight: 600; font-size: 15px; }
.ow-jump a:hover, .ow-jump a:focus-visible { border-color: #00FFFF; color: #00FFFF; }

/* buttons: 46px tall, thumb-sized */
.ow-actions-top { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 56px; }
.ow-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #F4F4F4; font: 700 15px/1.2 var(--sw-font-body, sans-serif);
  text-decoration: none; text-align: center; cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.ow-btn--solid { background: #00FFFF; border-color: #00FFFF; color: #000; }
.ow-btn:hover, .ow-btn:focus-visible { border-color: #00FFFF; color: #00FFFF; transform: translateY(-2px); }
.ow-btn--solid:hover, .ow-btn--solid:focus-visible { color: #000; background: #7DFFFF; }
.ow-jump a:focus-visible, .ow-link:focus-visible, .ow-card__img:focus-visible { outline: 2px solid #00FFFF; outline-offset: 3px; }

/* groups */
.ow-group { margin: 0 0 64px; scroll-margin-top: 90px; }
.ow-group:last-child { margin-bottom: 0; }
.ow-group__head { margin: 0 0 22px; }
.ow-group__head h3 { margin: 0 0 6px; font-family: var(--sw-font-display, sans-serif); font-size: 28px; line-height: 1.1; }
.ow-group__head p { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.5; color: #B8B3C7; }

/* cards */
.ow-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ow-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ow-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  overflow: hidden; background: rgba(0,0,0,.82); }
.ow-card__img { position: relative; display: block; aspect-ratio: 16 / 10; background: #0b0b10; overflow: hidden; }
.ow-card--film .ow-card__img { aspect-ratio: 16 / 9; }
.ow-card__img img, .ow-card__img video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ow-tag { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.8);
  color: #00FFFF; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ow-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px; min-width: 0; }
.ow-meta { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #B8B3C7; }
.ow-card__name { margin: 0; font-family: var(--sw-font-display, sans-serif); font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.ow-card__line { margin: 0; font-size: 15px; line-height: 1.5; color: #B8B3C7; }
.ow-card__acts, .ow-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto; padding-top: 8px; }
.ow-card__acts .ow-btn { flex: 1 1 180px; }
.ow-link { display: inline-flex; align-items: center; min-height: 44px; color: #00FFFF; font-weight: 700; font-size: 15px;
  text-decoration: underline; text-underline-offset: 4px; }

/* plain close */
.ow-close { border-top: 1px solid rgba(0,255,255,.5); padding: 88px 0 96px; }
.ow-close .ow-title { font-size: clamp(38px, 6vw, 72px); }
.ow-socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.ow-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); color: #F4F4F4; }
.ow-socials a:hover, .ow-socials a:focus-visible { border-color: #00FFFF; color: #00FFFF; }
.ow-socials svg { width: 20px; height: 20px; }

/* phones: one column per group, full-width buttons, no sideways scroll */
@media (max-width: 1000px) {
  .ow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ow, .ow-close { padding: 56px 0; }
  .ow-shell { width: calc(100% - 32px); }
  .ow-grid, .ow-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ow-group { margin-bottom: 48px; }
  .ow-actions-top { margin-bottom: 40px; }
  .ow-actions-top .ow-btn { flex: 1 1 100%; }
  .ow-card__acts .ow-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ow-btn { transition: none; } .ow-btn:hover, .ow-btn:focus-visible { transform: none; } }

/* engine nav items that are real links now (Our work, Prices, Contact): match the engine's buttons (2026-10-15) */
.sw-nav a.sw-nav__item { text-decoration: none; color: inherit; }

/* /work/: the portfolio starts on the first screen (the hero was 78svh of empty black, 2026-10-15) */
.w3 .w3-hero { min-height: 0; padding-top: 48px; padding-bottom: 8px; align-items: start; }
.w3 .w3-hero .g3-shell { padding-top: 0; }
@media (max-width: 560px) { .w3 .w3-hero { padding-top: 28px; } }

/* 2026-10-15 owner-session fix: anchor jumps landed with headings hidden under the fixed logo badge + nav (~125px). */
#need, #work, .ow-group, #prices, #start-small, #build-it, #go-big, #how-it-works, #close { scroll-margin-top: 150px; }
@media (max-width: 720px) { #need, #work, .ow-group, #prices, #start-small, #build-it, #go-big, #how-it-works, #close { scroll-margin-top: 140px; } }
/* below the scroll world the engine still highlights its last scene ("Contact"); don't show a wrong active item there */
html.pf-past .sw-nav__item.is-active { background: transparent !important; color: inherit !important; box-shadow: none !important; }