/*
  Layout of olivermorocz.com (design/README.md, "Layout").
  Phone first: the three bars run as columns, left to right.
  Desktop (768 px wide and up, and tall enough): the same object turned 90 degrees, bars run top to bottom.
  The breakpoint isn't designed yet; 768 is the README's suggested starting point.
*/
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--om-panel); color: var(--om-ink);
  font-family: var(--om-body); font-size: 16px; line-height: 1.5;
  overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
/* Phones: the object covers the whole page, so the body only shows in the strip behind the notch,
   which newer iPhones colour from it. Orange, matching the theme-color in base.njk. */
@media (max-width: 767px) { html, body { background: var(--om-orange); } }
img, video { display: block; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }

/* ================= the object: phone ================= */
.om-object {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-columns: 66px var(--om-chamfer) minmax(0, 1fr) var(--om-chamfer) 28px;
}

/* interface bar */
.om-ui { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0 22px; }
.om-ui-center, .om-ui-keys { display: contents; } /* desktop: logo + display, and the two keys, are centered rows */
.om-logo { width: 42px; height: 42px; flex: none; }
.om-ui-display { flex: 1 1 auto; min-height: 0; width: 44px; }
.om-ui-display .om-digital { font-size: 22px; }
.om-ui-about { width: 46px; height: 140px; }
.om-ui-about .om-rot { top: calc(50% + 18px); font-size: 15px; font-weight: 600; }
/* Pixel portrait: multiplied into the key, so its white disappears and the black takes the key's colour. */
.om-portrait { display: block; width: var(--om-portrait-size); height: var(--om-portrait-size); flex: none; image-rendering: pixelated; mix-blend-mode: multiply; opacity: var(--om-portrait-opacity); pointer-events: none; }
.om-ui-about .om-portrait { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); }
.om-ui-arrow, .om-legal-email, .om-logo-name { display: none; }
.om-ui-start { width: 50px; height: 184px; }
.om-ui-start .om-rot { font-size: 14px; }
.om-ui-arrow { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* feed bar */
.om-feed-wrap { position: relative; min-width: 0; min-height: 0; }
.om-feed {
  --post-w: 232px; --post-h: 232px; --gap: 68px;
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; outline: none;
  overscroll-behavior: contain;
}
.om-feed-list {
  margin: 0; padding: 32px 0; list-style: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--gap);
  will-change: transform; /* the feed script shifts it by fractions of a pixel while drifting */
}
.om-feed-item { flex: none; }
/* Each post has the shape of its picture. The page gives two sets: --ratio-p/--shape-p/--round-p for the
   phone picture and --ratio-d/--shape-d/--round-d for the desktop one (ratio = width ÷ height).
   Phones: every post is the same width, one column. */
.om-feed .om-tile {
  --shape: var(--shape-p, var(--om-shape-rsquare)); --round: var(--round-p, 11%); --edge: var(--om-glass-edge-sm); --bevel: var(--om-glass-bevel-sm);
  --tile-w: var(--post-w); --tile-h: calc(var(--post-w) / var(--ratio-p, 1));
  --fillet: calc(min(var(--tile-w), var(--tile-h)) * .11); /* the post's corner, same as the shape and the glass */
  width: var(--tile-w); height: var(--tile-h);
  isolation: isolate; /* keeps the label tab behind this post's own glass */
}
.om-feed-item.is-stack { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }

/* Title tab: a frosted glass layer as wide as the post, behind the picture. Its top is hidden under the
   post and its bottom corners use the post's fillet, so it reads as the glass shape continuing downward.
   Closed: one row with the title (client/year goes first when it's tight, then the title is cut with "...").
   Hovering the post pulls the tab further out: the title gets its own row, and the client/year and the
   coloured type pills (at the end of the title) follow in the second row. */
.om-feed .om-tile .om-cap {
  --tab-h: 34px;
  z-index: -1; left: 0; right: 0; top: calc(100% - var(--fillet)); bottom: auto; transform: none; max-width: none;
  /* the visible strip is --tab-h tall and the labels sit in its middle */
  min-height: calc(var(--fillet) + var(--tab-h)); max-height: calc(var(--fillet) + var(--tab-h)); overflow: hidden;
  display: flex; align-items: center; align-content: center; justify-content: center; text-align: center; flex-wrap: nowrap; gap: 7px;
  padding: var(--fillet) var(--tab-pr) 0 var(--tab-pl); box-sizing: border-box;
  --tab-pl: 10px; --tab-pr: calc(12px + var(--fillet) * .35); /* keeps text clear of the rounded right corner */
  font-size: 12.5px; border-radius: 0 0 var(--fillet) var(--fillet);
  /* frosted glass, drawn without a live blur so the moving feed stays light */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22)),
    rgba(244, 238, 229, .55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 10px 22px -14px rgba(26, 23, 18, .6);
  container-type: inline-size;
  transition: max-height .45s var(--om-ease), padding .45s var(--om-ease);
}
.om-feed .om-tile .om-cap::before, .om-feed .om-tile .om-cap::after { content: none; }
.om-feed .om-tile:hover, .om-feed .om-tile:focus-visible { z-index: 2; }
.om-feed .om-tile:hover .om-cap, .om-feed .om-tile:focus-visible .om-cap {
  max-height: calc(var(--fillet) + 160px); flex-wrap: wrap; row-gap: 5px; padding-top: calc(var(--fillet) + 9px); padding-bottom: 11px;
}
.om-feed .om-cap > .om-types { flex: none; display: none; gap: 4px; overflow: visible; min-width: auto; }
.om-feed .om-tile:hover .om-cap > .om-types, .om-feed .om-tile:focus-visible .om-cap > .om-types { display: flex; }
.om-feed .om-tile .om-cap > .om-cap-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-feed .om-tile .om-cap > .om-cap-meta { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.om-feed .om-tile:hover .om-cap > span, .om-feed .om-tile:focus-visible .om-cap > span { white-space: normal; overflow: visible; }
.om-feed .om-tile:hover .om-cap > .om-cap-title, .om-feed .om-tile:focus-visible .om-cap > .om-cap-title { flex-basis: 100%; }
.om-feed .om-tile:hover .om-cap > .om-cap-meta, .om-feed .om-tile:focus-visible .om-cap > .om-cap-meta { flex: 0 1 auto; }

/* Project type: a small pill, one colour per type (Motion, Viz, CAD, Design; any other word is grey). */
.om-tile .om-type {
  --tc: #CFC8BD; --tt: var(--om-ink);
  flex: none; padding: 3px 8px 2px; border-radius: var(--om-r-pill, 999px);
  font: 600 10px/1.2 var(--om-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--tt); background: var(--tc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.om-type.t-motion { --tc: var(--om-pink); }
.om-type.t-viz { --tc: var(--om-blue); --tt: #fff; }
.om-type.t-cad { --tc: var(--om-yellow); }
.om-type.t-design { --tc: var(--om-green); --tt: #fff; }
.om-feed-empty { margin: auto; padding: 32px; text-align: center; }

/* info bar */
.om-info { position: relative; min-height: 0; font-size: 11px; font-weight: 500; line-height: 1; }
.om-clientbar { display: none; } /* desktop only */
.om-bottom { display: contents; } /* phone: the footer is its own grid item */
.om-legal { margin: 0; display: flex; gap: 16px; position: absolute; left: 50%; top: 50%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }

/* ================= the object: desktop ================= */
@media (min-width: 768px) and (min-height: 521px) {
  body { overflow-x: hidden; overflow-y: auto; }
  /* The page is as tall as the window, or taller when the posts need it (then it scrolls).
     The feed row has the height feed.js gives it (--feed-band). When the window is tall enough, the rest is shared
     equally between the top bar (--top-row) and the bottom block (client logos + footer), so the moving strip sits
     exactly in the middle; in a small window the top bar keeps its minimum. */
  .om-object {
    --header-min: 88px;
    height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible;
    grid-template-columns: none;
    grid-template-rows: var(--top-row, var(--header-min)) var(--om-chamfer) var(--feed-band, 520px) var(--om-chamfer) minmax(auto, 1fr);
  }
  .om-bottom { display: flex; flex-direction: column; min-width: 0; }
  .om-bottom > .om-clientbar { flex: none; }
  .om-bottom > .om-info { flex: 1 1 auto; min-height: 42px; }
  .om-ui-groove, .om-info-groove { --cdir: 180deg; --cv: 0px; --ch: 1px; }
  .om-clientbar { display: flex; }
  .om-object .om-ui .om-rot { position: static; transform: none; }

  /* Narrower windows: one row. Logo + display on the left, the two keys on the right. */
  .om-ui { min-width: 0; flex-direction: row; justify-content: space-between; align-items: center; gap: 22px; padding: 14px 22px 14px 34px; }
  .om-ui-keys { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex: none; }
  /* Extra room around the logo, so it doesn't touch the display. */
  .om-logo { width: 50px; height: 50px; }
  /* Name hidden for now: remove this line to show it again. */
  .om-ui-center { display: flex; align-items: center; justify-content: flex-start; gap: 22px; min-width: 0; flex: 1 1 auto; }
  /* The display stops at --display-max; About and Start a project sit at the right end. */
  /* A fixed-size display like a real one: it never follows the text width, only the window width. */
  .om-ui-display { width: clamp(160px, calc(100vw - 600px), 765px); height: 50px; flex: none; min-width: 0; display: flex; align-items: center; justify-content: safe center; padding: 0 22px; }
  .om-ui-display .om-digital { font-size: 26px; white-space: nowrap; }
  .om-ui-about { width: 164px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; }
  .om-ui-about .om-portrait { position: static; transform: none; }
  .om-ui-about .om-rot { font-size: 16px; }
  .om-ui-start { width: 236px; height: 54px; display: flex; align-items: center; justify-content: center; }
  .om-ui-start .om-rot { display: flex; align-items: center; gap: 10px; font-size: 15px; }
  .om-ui-arrow { display: block; }

  .om-feed { --feed-dir: 180deg; --post-h: 480px; --post-w: 360px; --gap: calc(45px * var(--belt-scale, 1)); overflow-x: auto; overflow-y: hidden; }
  .om-feed-list { flex-direction: row; height: 100%; padding: 0 0 calc(38px * var(--belt-scale, 1)); } /* post + title tab are centred together: the tab (38px) is kept free at the bottom */
  /* Desktop: every post is the same height; wide posts are stacked two to a column at half height. */
  .om-feed .om-tile {
    --shape: var(--shape-d, var(--om-shape-rportrait)); --round: var(--round-d, 11% / 8.25%); --edge: var(--om-glass-edge); --bevel: var(--om-glass-bevel);
    --tile-h: var(--post-h); --tile-w: calc(var(--tile-h) * var(--ratio-d, .75));
  }
  /* Two stacked posts get the same width: w = (column height - gap) / (1/ratio1 + 1/ratio2). */
  .om-feed-item.is-stack { --stack-gap: calc(64px * var(--belt-scale, 1)); gap: var(--stack-gap); justify-content: flex-start; height: var(--post-h); }
  .om-feed .is-stack .om-tile {
    --tile-w: calc((var(--post-h) - var(--stack-gap) + 4px * var(--belt-scale, 1)) / var(--inv, 2)); --tile-h: calc(var(--tile-w) / var(--ratio-d, 1.5));
    --edge: var(--om-glass-edge-sm); --bevel: var(--om-glass-bevel-sm);
  }
  .om-feed .om-tile .om-cap { --tab-h: calc(38px * var(--belt-scale, 1)); --tab-pl: 12px; font-size: 14px; }
  .om-feed .is-stack .om-tile .om-cap { --tab-h: calc(34px * var(--belt-scale, 1)); --tab-pl: 10px; font-size: 12.5px; }

  .om-info.om-panel { background: var(--om-texture) 0 0 / var(--om-texture-size) repeat var(--om-panel); } /* flat: no light gradient */
  .om-info { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 26px; font-size: 12.5px; }
  .om-legal { position: static; transform: none; gap: 18px; }
  .om-legal-email { display: inline; font-weight: 600; text-decoration: none; }
  .om-legal-email:hover { text-decoration: underline; }
}
/* Smaller windows: smaller logos, so the bottom block stays low. */
@media (max-width: 1099px) {
  .om-clientbar { --logo-scale: .45; padding-top: 18px; padding-bottom: 10px; }
  .om-clientlist { gap: 14px 28px; }
}
/* Wide windows: logo + display centred, the two keys centred underneath. */
@media (min-width: 1400px) and (min-height: 521px) {
  .om-object { --header-min: 150px; }
  .om-ui { flex-direction: column; justify-content: center; gap: 14px; padding: 14px 22px; }
  .om-ui-center { flex: none; justify-content: center; max-width: 100%; }
  .om-ui-display { width: clamp(300px, 52vw, 765px); }
  .om-ui-keys { justify-content: center; }
}
/* Client stripe under the feed (desktop): logos as engraved shapes, then the names that have no logo yet. */
.om-clientbar.om-panel { background: var(--om-texture) 0 0 / var(--om-texture-size) repeat var(--om-panel); } /* flat: no light gradient */
.om-clientbar { min-width: 0; align-items: center; justify-content: center; overflow: hidden; padding: 26px 26px 14px; } 
.om-clientlist { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 44px; }
.om-clientlist li { flex: none; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); }
.om-client-logo { display: block; height: calc(var(--h) * 1px * var(--logo-scale, .75)); /* .75 = 25 % smaller than the first version; narrow windows set .45 */ aspect-ratio: var(--r); background: var(--om-ink-2); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.om-client-name { font-family: var(--om-display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--om-ink-2); }

/* ================= windows ================= */
.om-layer {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 2.4vw, 32px);
}
.om-scrim { position: absolute; inset: 0; background: var(--om-scrim); -webkit-backdrop-filter: blur(var(--om-scrim-blur)); backdrop-filter: blur(var(--om-scrim-blur)); cursor: default; }
.om-window {
  position: relative; width: min(var(--window-w, 1160px), 100%); max-height: 100%;
  overflow: auto; overscroll-behavior: contain; container-type: inline-size; outline: none;
}
.om-layer.is-entering .om-window { animation: om-window-in .35s var(--om-ease); }
.om-layer.is-entering .om-scrim { animation: om-fade-in .3s ease-out; }
@keyframes om-window-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes om-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Blur the object behind an open window with a plain filter instead of the scrim's backdrop-filter.
   The feed is still while a window is open, so the browser blurs it once instead of on every
   frame of the film playing on top (backdrop-filter made playback stutter). */
@supports selector(:has(a)) {
  body:has(.om-layer) .om-object { filter: blur(var(--om-scrim-blur)); }
  body:has(.om-layer) .om-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.om-window-head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(14px, 2.4cqi, 22px) clamp(14px, 2.4cqi, 22px) clamp(14px, 2cqi, 18px) clamp(18px, 3.4cqi, 36px);
  border-radius: var(--om-r-window) var(--om-r-window) 0 0;
}
.om-window-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.om-window-kicker { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; font-weight: 600; }
.om-window-url { font-weight: 500; }
.om-window-title {
  margin: 0; font-family: var(--om-display); font-weight: 400; text-transform: uppercase; overflow-wrap: anywhere;
  font-size: clamp(29px, 6.4cqi, 77px); line-height: .92; text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.om-window-title.is-m { font-size: clamp(24px, 4.8cqi, 58px); line-height: .95; }
.om-close { width: 52px; height: 52px; display: grid; place-items: center; }
.om-close svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.om-window .om-chamfer { height: var(--om-chamfer); }
/* The groove under the title belongs to the sticky title strip, so it stays with the title when the window scrolls. */
.om-window-head { margin-bottom: var(--om-chamfer); }
.om-window-head > .om-chamfer { position: absolute; left: 0; right: 0; top: 100%; }

.om-window-body {
  display: flex; flex-direction: column; gap: clamp(22px, 3.4cqi, 38px);
  padding: clamp(14px, 2.6cqi, 28px) clamp(12px, 3cqi, 32px) clamp(16px, 3cqi, 32px);
}
.om-window-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: clamp(16px, 2.4cqi, 22px) clamp(16px, 2.4cqi, 22px) clamp(16px, 2.4cqi, 22px) clamp(20px, 3.4cqi, 36px);
  border-radius: 0 0 var(--om-r-window) var(--om-r-window);
}
.om-foot-line { margin: 0; font-family: var(--om-display); font-size: clamp(16px, 1.9cqi, 20px); line-height: 1.15; max-width: 26ch; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.om-foot-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.om-key-text { height: 50px; padding: 0 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.om-key-text.is-orange { padding: 0 22px; font-size: 14px; }

/* film in a sunken screen */
.om-film { --ratio: 1.7778; margin: 0 auto; width: min(100%, max(240px, calc((100vh - 400px) * var(--ratio) + 20px))); }
/* More films of a project: one row, scroll sideways (arrows below on desktop). Each keeps its own shape. */
.om-film-strip { display: flex; gap: 16px; margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; justify-content: safe center; }
.om-film-strip .om-film { --h: min(70vh, 560px); flex: none; margin: 0; scroll-snap-align: center; width: min(88%, calc(var(--h) * var(--ratio) + 20px)); }
.om-film-nav { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.om-film-nav .om-key { min-width: 54px; height: 38px; display: flex; align-items: center; justify-content: center; }
.om-film-title { margin: 8px 4px 0; font-size: 12.5px; }
.om-screen-in > video, .om-screen-in > img, .om-screen-in > iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.film { background: #000; }
/* Full screen (the video's own button): show the whole picture, upright films too. */
.film__video:fullscreen { object-fit: contain; background: #000; }
.film__video:-webkit-full-screen { object-fit: contain; background: #000; }
.film--embed > iframe, .film--embed > .om-film-poster { position: absolute; inset: 0; }
.om-film-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 4px 2px; }
.om-film-play { height: 46px; padding: 0 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.om-film-status { font-size: 16px; }
.om-film.is-full .om-film-play { display: none; }
.film-missing { margin: 0; padding: 16px; border-radius: var(--om-r-well); background: var(--om-well); color: var(--om-ink-2); }
/* loading ring over the still, until the video plays */
.film::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 1;
  width: var(--loader-size); height: var(--loader-size); margin: calc(var(--loader-size) / -2);
  border: var(--loader-thickness) solid var(--loader-track); border-top-color: var(--loader-color);
  border-radius: 50%; background: var(--loader-backdrop); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--om-ease);
}
.film.is-loading::before { opacity: 1; animation: film-spin var(--loader-speed) linear infinite; }
@keyframes film-spin { to { transform: rotate(360deg); } }

/* summary and facts */
.om-project-intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px 56px; align-items: start;
  padding: 0 clamp(6px, 1.2cqi, 12px);
}
.om-lead { margin: 0; font-size: clamp(19px, 2.3cqi, 26px); line-height: 1.38; font-weight: 450; text-wrap: pretty; max-width: 34ch; }
.om-facts { margin: 0; display: flex; flex-direction: column; }
.om-facts > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; padding: 14px 0 12px; font-size: 15px; line-height: 1.4; }
.om-facts dt { font-weight: 500; }
.om-facts dd { margin: 0; font-weight: 600; }
.om-still .om-screen-in { aspect-ratio: 16 / 7; }

/* case-study extras (not in the design yet: built from the same parts) */
.om-prose { max-width: 68ch; padding: 0 clamp(6px, 1.2cqi, 12px); font-size: 17px; line-height: 1.55; }
.om-prose > :first-child { margin-top: 0; }
.om-prose > :last-child { margin-bottom: 0; }
.om-prose h2, .om-prose h3, .om-section-title { font-family: var(--om-display); font-weight: 400; font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.om-prose img { max-width: 100%; height: auto; border-radius: var(--om-r-well); }
/* About me: round photo beside the opening line; stacks on narrow windows. */
.om-about-head { display: flex; align-items: center; gap: clamp(18px, 3cqi, 32px); padding: 0 clamp(6px, 1.2cqi, 12px); }
.om-about-photo { width: clamp(110px, 20cqi, 180px); height: auto; flex: none; border-radius: 50%; }
@container (max-width: 520px) { .om-about-head { flex-direction: column; align-items: flex-start; } .om-about-photo { align-self: center; } }
/* Pinned bottom strip (About me): the groove and the strip stick to the window's lower edge,
   so the call to action stays visible and the text visibly runs on underneath it. */
.om-window-dock { position: sticky; bottom: 0; z-index: 3; }
.om-section { display: flex; flex-direction: column; gap: 16px; padding: 0 clamp(6px, 1.2cqi, 12px); }
.om-section-title { margin: 0; }
.om-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 8px 32px; }
.om-steps li { padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.om-steps h3 { margin: 0; font-size: 17px; }
.om-steps p { margin: 0; }
.om-sketches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.om-sketches figure { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.om-section img { width: 100%; height: auto; }

/* start a project */
.om-window-body.om-start {
  flex-direction: row; flex-wrap: wrap; gap: 28px 36px;
  padding: clamp(18px, 3cqi, 32px) clamp(16px, 3.4cqi, 36px) clamp(20px, 3.4cqi, 36px);
}
.om-form { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.om-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.om-choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.om-choices legend { padding: 0; }
.om-choices-row { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.om-form-attach { display: flex; flex-wrap: wrap; gap: 12px; }
.om-form-attach .om-well { flex: 1 1 260px; width: auto; }
.om-form-attach .om-choice { flex: none; max-width: 100%; }
.om-form-attach .om-choice svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.om-form-attach [data-file-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-form-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 4px; }
.om-send { height: 54px; padding: 0 30px; font-size: 15px; }
.om-send[disabled] { opacity: .7; cursor: progress; }
.om-send.is-sent { opacity: 1; cursor: default; } /* after sending: "I will reach out soon", pressed in */
.om-send.is-sent .om-ui-arrow { display: none; }
.om-small { font-size: 13px; font-weight: 500; }
.om-start-side { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.om-start-display { height: 64px; display: flex; align-items: center; padding: 0 18px; }
.om-start-display .om-digital { font-size: 18px; white-space: nowrap; }
.om-side-block { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; font-size: 15px; }
.om-side-block .om-field-label { margin: 0; }
.om-side-email { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.om-side-links { display: flex; gap: 18px; font-weight: 600; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  .om-layer.is-entering .om-window, .om-layer.is-entering .om-scrim { animation: none; }
  .film.is-loading::before { animation: none; }
}