/* MSS glass UI: web approximation using frosted layers, not Apple's native material.
   Local Tabler outline icons, MIT license in assets/icons/tabler/LICENSE. */
:root {
  --ui-radius: 26px;
  --ui-pill: 999px;
  --ui-glass: linear-gradient(145deg, #ffffff18, #ffffff04 48%, #eee9e20b), #242222bf;
  --ui-ivory: linear-gradient(150deg, #fffdf8f5, #eee9e2e0 55%, #d8d1c6ed);
  --ui-edge: #fff9ed33;
  --ui-shadow: inset 0 1px 0 #ffffff2e, inset 0 -1px 0 #ffffff08, 0 12px 30px #00000018;
}

/* Icons use a mask so every stroke inherits its control's contrast color. */
.ui-icon, .round-button .ui-icon, .project-arrow .ui-icon {
  display: inline-block; width: 22px; height: 22px; flex: 0 0 22px;
  vertical-align: middle; background: currentColor; transform: none;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
  mask: var(--ui-icon) center / contain no-repeat;
  transition: translate .25s ease;
}
[data-icon="chevron-right"] { --ui-icon: url('data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M9%206l6%206l-6%206%22%20%2F%3E%0A%3C%2Fsvg%3E'); }
[data-icon="chevron-left"] { --ui-icon: url('data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M15%206l-6%206l6%206%22%20%2F%3E%0A%3C%2Fsvg%3E'); }
[data-icon="arrow-up-right"] { --ui-icon: url('data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M17%207l-10%2010%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M8%207l9%200l0%209%22%20%2F%3E%0A%3C%2Fsvg%3E'); }
[data-icon="arrow-down"] { --ui-icon: url('data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M12%205l0%2014%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%2013l-6%206%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M6%2013l6%206%22%20%2F%3E%0A%3C%2Fsvg%3E'); }
[data-icon="arrow-up"] { --ui-icon: url('data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M12%205l0%2014%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%2011l-6%20-6%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M6%2011l6%20-6%22%20%2F%3E%0A%3C%2Fsvg%3E'); }
[data-icon="message-circle"] { --ui-icon: url('data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M3%2020l1.3%20-3.9c-2.324%20-3.437%20-1.426%20-7.872%202.1%20-10.374c3.526%20-2.501%208.59%20-2.296%2011.845%20.48c3.255%202.777%203.695%207.266%201.029%2010.501c-2.666%203.235%20-7.615%204.215%20-11.574%202.293l-4.7%201%22%20%2F%3E%0A%3C%2Fsvg%3E'); }
[data-icon="x"] { --ui-icon: url('data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%3E%0A%20%20%3Cpath%20d%3D%22M18%206l-12%2012%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M6%206l12%2012%22%20%2F%3E%0A%3C%2Fsvg%3E'); }

/* Bright primary actions retain an opaque enough base over every video frame. */
.journey-first-cta, .journey-film .journey-service a, .footer-cta, .button {
  display: inline-flex; justify-content: space-between; align-items: center;
  gap: 20px; min-height: 58px; padding: 14px 22px;
  border: 1px solid #fffdf8b3; border-radius: var(--ui-pill);
  background: var(--ui-ivory); color: #242120;
  box-shadow: inset 0 2px 1px #ffffffcf, inset 0 -2px 2px #a79c8e35, 0 8px 24px #0002;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  font-weight: 600; line-height: 1.35;
  transition: box-shadow .25s ease, background .25s ease, translate .25s ease;
}
.journey-first-cta:hover, .journey-film .journey-service a:hover, .footer-cta:hover, .button:hover {
  background: linear-gradient(150deg, #fffefa, #f3eee6ed);
  box-shadow: inset 0 2px 1px #fff, inset 0 -2px 2px #a79c8e28, 0 12px 30px #0003;
  translate: 0 -2px; transform: none;
}
.journey-first-cta:active, .journey-film .journey-service a:active, .footer-cta:active { translate: 0 0; }
.journey-first-cta>span, .journey-service a>span, .footer-cta>span {
  display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px;
  border: 1px solid #fff9; border-radius: 50%; background: #ffffff42;
  box-shadow: inset 0 1px 2px #fff9, 0 2px 6px #52463810;
}
.journey-film .journey-service a { width: 100%; gap: 10px; font-size: 16px; padding: 12px 16px; }
.footer-cta { min-height: 64px; }

/* Frosted hero modules: curved edges, restrained highlights, warm graphite. */
.journey-film .journey-service, .journey-film .journey-project-link {
  background: var(--ui-glass); color: #fffaf3;
  border: 1px solid var(--ui-edge); border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(.8); backdrop-filter: blur(22px) saturate(.8);
}
.journey-film .journey-service { padding: 26px; }
@media(min-width:1101px) { .journey-film .journey-cards { width: 360px; } }
@media(min-width:601px) and (max-width:1100px) {
  .journey-film .journey-service { padding: 20px; }
  .journey-film .journey-service a { font-size: 14px; padding: 11px 12px; }
}
.journey-service .eyebrow { color: #eee5da; }
.journey-film .journey-project-link { padding: 24px 26px; transition: border-color .25s, background .25s; }
.journey-film .journey-project-link:hover { border-color: #fff9ed70; background: linear-gradient(145deg,#ffffff24,#ffffff06),#242222db; }
.journey-project-link>span:nth-child(2) {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(145deg,#ffffff29,#ffffff08); border: 1px solid #ffffff40;
  box-shadow: inset 0 1px 1px #fff4, 0 4px 12px #0002;
}
.journey-project-link:hover .ui-icon { translate: 2px -2px; }

/* One navigation control, with a light variant on the ivory section. */
.style-controls button, .portfolio-footer button, .round-button, .features-tabs button,
.project-arrow, #project-dialog .close-dialog, .close-dialog {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0;
  border: 1px solid var(--ui-edge); border-radius: var(--ui-pill);
  background: var(--ui-glass); color: #f9f4ec; box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .25s, border-color .25s, box-shadow .25s, translate .25s;
}
.style-controls { gap: 12px; }
.style-controls button, #project-dialog .round-button, #project-dialog .close-dialog {
  background: linear-gradient(145deg,#fffdf5b3,#fffaf330); color: #35302b;
  border-color: #fffdf5d9; box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #87745a20, 0 5px 14px #3b302b10;
}
.portfolio-footer button:hover:not(:disabled), .round-button:hover:not(:disabled),
.features-tabs button:hover, .features-tabs button[aria-pressed="true"] {
  background: var(--ui-ivory); color: #242120; border-color: #fff9edb3;
}
.style-controls button:hover:not(:disabled), #project-dialog .round-button:hover:not(:disabled),
#project-dialog .close-dialog:hover { background: #fffaf3e6; color: #242120; }
.style-controls button:disabled, .portfolio-footer button:disabled, .round-button:disabled {
  opacity: .35; cursor: default; box-shadow: none;
}
button:hover:not(:disabled)>.ui-icon[data-icon="chevron-right"] { translate: 2px 0; }
button:hover:not(:disabled)>.ui-icon[data-icon="chevron-left"] { translate: -2px 0; }

/* Photography stays clear; only its frame and supporting surfaces take the glass language. */
.portfolio-section .project { border-radius: var(--ui-radius); background: var(--ui-glass); box-shadow: inset 0 0 0 1px #fff2; }
.portfolio-section .project-info { background: linear-gradient(125deg,#ffffff0c,#ffffff02); }
.portfolio-section .project-info .ui-icon { color: inherit; }
.project-open-label { display: inline-flex; align-items: center; gap: 10px; }
.project-open-label .ui-icon { width: 20px; height: 20px; flex-basis: 20px; }
.project-media-note { border: 1px solid #fff3; border-radius: var(--ui-pill); background: #242222c9; backdrop-filter: blur(12px); }
.style-photo { border-radius: var(--ui-radius); box-shadow: 0 1px 0 #fff9, 0 10px 28px #3b302b10; }
.features-stage { border-radius: var(--ui-radius); }
.portfolio-toolbar a, .feature-copy a {
  display: inline-flex; align-items: center; gap: 14px; min-height: 48px;
  padding: 12px 20px; border: 1px solid var(--ui-edge); border-radius: var(--ui-pill);
  background: var(--ui-glass); box-shadow: var(--ui-shadow); color: #fffaf3;
  backdrop-filter: blur(14px); transition: border-color .25s, background .25s;
}
.portfolio-toolbar a:hover, .feature-copy a:hover { background: #ffffff16; border-color: #fff7; }
.journey-scroll .ui-icon, .scroll-hint .ui-icon { width: 18px; height: 18px; margin-left: 5px; }
:is(a,button):focus-visible { outline: 3px solid #cba898; outline-offset: 5px; }

@media(max-width:600px) {
  :root { --ui-radius: 22px; }
  .journey-first-cta { font-size: 15px; padding: 12px 18px; gap: 14px; }
  .journey-film .journey-service { padding: 20px; }
  .journey-film .journey-service a { font-size: 14px; padding: 11px 14px; min-height: 54px; }
  .journey-film .journey-project-link { padding: 19px 20px; }
  .journey-project-link>span:nth-child(2) { width: 44px; height: 44px; }
  .footer-cta { font-size: 14px; padding: 14px 18px; gap: 12px; }
  .feature-copy a { font-size: 14px; padding: 10px 16px; }
  .sections-animated .features-real-media .feature-copy a { padding: 10px 16px; }
}
@media(prefers-reduced-transparency:reduce) {
  .journey-film .journey-service, .journey-film .journey-project-link,
  .portfolio-toolbar a, .feature-copy a, .portfolio-footer button, .features-tabs button { background: #292725; backdrop-filter: none; }
  .journey-first-cta, .journey-film .journey-service a, .footer-cta,
  .style-controls button, .features-tabs button[aria-pressed="true"] { background: #eee9e2; backdrop-filter: none; }
}
@media(prefers-reduced-motion:reduce) {
  .ui-icon, .journey-first-cta, .journey-service a, .footer-cta,
  .style-controls button, .portfolio-footer button { transition: none; }
}