/* Consistent art direction for live builds and app explorations. */
body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; }
.live-projects .project-visual { background: #b9c0ad; }
.live-projects .visual-caption { display: none; }
.live-projects .project-visual > img,
.live-projects .project-media > img { object-fit: cover; }
.live-projects > .project:last-child .project-visual,
.concept-projects > .project:last-child .project-visual { aspect-ratio: 4 / 3; }
.live-projects > .project:last-child,
.concept-projects > .project:last-child { grid-column: auto; }
.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-tags { flex-wrap: wrap; }
.project h3 button { text-align: left; }
@media (min-width: 761px) {
  .live-projects > .project:last-child,
  .concept-projects > .project:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: end; }
  .live-projects > .project:last-child .project-info,
  .concept-projects > .project:last-child .project-info { padding: 24px 0; }
  .live-projects > .project:last-child h3,
  .concept-projects > .project:last-child h3 { font-size: clamp(30px, 3vw, 44px); }
  .live-projects > .project:last-child .project-info > p,
  .concept-projects > .project:last-child .project-info > p { margin-top: 16px; }
}

/* Native select remains the form value and the no-script fallback. */
.service-field-label { display: block; }
.service-picker { display: block; position: relative; margin-top: 4px; }
.service-trigger { width: 100%; min-height: 50px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #14151388; text-align: left; color: #29231d; font-size: 14px; }
.service-trigger.has-value { color: #141513; }
.select-chevron { display: block; width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); margin: -5px 5px 0 0; flex: none; }
.service-trigger[aria-expanded="true"] .select-chevron { transform: rotate(225deg); margin-top: 4px; }
.service-trigger[aria-expanded="true"] { border-bottom-color: #141513; }
.service-options { position: absolute; z-index: 30; display: block; left: 0; right: 0; top: calc(100% + 8px); max-height: min(280px, var(--picker-room, 60svh)); padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #929889 #f2f0e9; background: #f2f0e9; color: #141513; border: 1px solid #76786e; box-shadow: 0 12px 32px #241b2033; }
.service-picker.opens-up .service-options { top: auto; bottom: calc(100% + 8px); }
.service-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; min-height: 46px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.service-option[aria-selected="true"]:after { content: ''; width: 5px; height: 5px; background: currentColor; flex: none; }
.service-option.is-active { background: #d7ddcd; color: #141513; }
#project-form:focus-within { clip-path: none !important; }
.contact input:focus-visible, .contact textarea:focus-visible, .service-trigger:focus-visible { outline: 2px solid #141513; outline-offset: 5px; }

/* Intrinsic sizes must be allowed to shrink inside every layout column. */
.intro > *, .intro-bottom > *, .services > *, .stack > *, .faq > *, .contact-layout > *, .form-row > *, .project, .process-grid article { min-width: 0; }
.section-top > div { min-width: 0; }
.contact form { min-width: 0; }
.form-submit .button { max-width: 100%; }
.service-list summary h3 { min-width: 0; }
.service-description { overflow-wrap: anywhere; }
.contact-outline { display: inline-block; }
.footer { flex-wrap: wrap; }
.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
.skip:focus { top: 12px; }

@media (min-width: 761px) and (max-width: 1000px) {
  .intro { grid-template-columns: 1fr; gap: 32px; }
  .intro h2 { font-size: clamp(44px, 6vw, 60px); }
  .services, .faq { grid-template-columns: 1fr; gap: 48px; }
  .service-heading { max-width: 680px; }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; }
  .contact h2 { font-size: clamp(60px, 8.5vw, 85px); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .process-grid { gap: 20px; }
  .process-grid h3 { font-size: 22px; }
  .stack { grid-template-columns: 1fr; gap: 28px; }
  .header { gap: 16px; }
  .desktop-nav { gap: 18px; }
}
@media (max-width: 760px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .live-projects > .project:last-child .project-visual,
  .concept-projects > .project:last-child .project-visual { aspect-ratio: 4 / 3; }
  .project-visual { aspect-ratio: 4 / 3; }
  .contact-top { gap: 20px; }
  .contact input, .contact textarea, .contact select, .service-trigger { font-size: 16px; }
  .service-option { font-size: 14px; }
  .hero-bottom > .button { min-width: 0; width: min(100%, 300px); }
  .dialog-header > div { min-width: 0; }
  dialog h2 { overflow-wrap: anywhere; }
  .dialog-header { align-items: start; gap: 16px; }
  .close-button { white-space: nowrap; flex: none; }
}
@media (max-width: 370px) {
  .header { gap: 10px; }
  .header-name { max-width: 75px; }
  .menu-button { gap: 7px; }
  .menu-lines { width: 17px; }
  .contact h2 { font-size: clamp(52px, 18vw, 64px); }
  .contact-top > span { font-size: 7px; }
}
@media (hover: hover) and (pointer: fine) {
  .service-option:hover { background: #d7ddcd; }
}
@media (max-height: 500px) and (max-width: 760px) and (min-width: 500px) {
  /* Give the existing hero composition room in phone landscape. */
  .hero { min-height: 800px; }
  .hero-scene { min-height: calc(800px + 24svh); }
  .mobile-nav { max-height: calc(100svh - 80px); overflow-y: auto; }
}