/* ---------- contact modal ---------- */
#modal-root{
  position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center;
  padding:0.75rem; pointer-events:none;
}
@media (min-width:640px){ #modal-root{ align-items:center; padding:1.5rem; } }
.modal-backdrop{ position:absolute; inset:0; background:rgba(10,10,10,0.5); backdrop-filter:blur(6px); opacity:0; }
.modal-panel{
  position:relative; max-height:92svh; overflow-y:auto; overscroll-behavior:contain; border-radius:var(--radius-card-lg);
  background:var(--surface-card); padding:1.5rem; max-width:32rem; width:100%; color:var(--ink);
  box-shadow:0 2rem 4rem rgba(0,0,0,0.35);
  opacity:0; transform:translateY(28px) scale(0.96);
}
@media (min-width:640px){ .modal-panel{ padding:2rem; } }
@media (min-width:900px){ .modal-panel{ max-width:48rem; } }
.modal-panel-close{ position:absolute; top:1.25rem; right:1.25rem; z-index:2; }
@media (min-width:640px){ .modal-panel-close{ top:1.75rem; right:1.75rem; } }
.modal-grid{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:900px){ .modal-grid{ grid-template-columns:1fr 15rem; } }
.modal-head{ padding-right:3rem; }
@media (min-width:900px){ .modal-head{ padding-right:0; } }
.modal-head h2{ font-size:2.25rem; font-weight:500; line-height:1.05; margin-top:0.75rem; }
@media (min-width:640px){ .modal-head h2{ font-size:3rem; } }
.icon-close{
  width:2.5rem; height:2.5rem; flex:none; border-radius:var(--radius-pill); background:var(--surface);
  display:grid; place-items:center; transition:background-color 200ms ease, transform 160ms var(--ease-out);
}
.icon-close:hover{ background:var(--hairline); }
.icon-close:active{ transform:scale(0.92); }
.icon-close svg{ width:1.1rem; height:1.1rem; transition:transform .3s; }
.modal-form{ margin-top:1.75rem; display:flex; flex-direction:column; gap:1rem; }

.modal-info-col{
  border-radius:var(--radius-card); background:var(--brand-deep); color:#fff; padding:1.5rem;
  display:flex; flex-direction:column; gap:1.25rem; height:fit-content;
}
@media (min-width:900px){ .modal-info-col{ margin-top:0.25rem; } }
.modal-info-list{ display:flex; flex-direction:column; gap:1rem; }
.modal-info-list li{ display:flex; align-items:flex-start; gap:0.75rem; font-size:0.8125rem; line-height:1.5; color:rgba(255,255,255,0.85); }
.modal-info-list svg{ flex:none; width:1.1rem; height:1.1rem; color:var(--brand-light); margin-top:0.1rem; }
.modal-info-list a{ transition:color 160ms ease; }
.modal-info-list a:hover{ color:var(--brand-light); }
.modal-info-list strong{ display:block; color:#fff; }
.field-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field label{ display:block; font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.18em; color:var(--ink-soft); margin-bottom:0.5rem; }
.field input, .field textarea{
  width:100%; border-radius:var(--radius-xl); border:1px solid var(--hairline); background:var(--background);
  padding:0.75rem 1rem; font-size:0.875rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus{ border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(224,48,58,0.18); outline:none; }
.field textarea{ resize:vertical; }
.modal-submit{
  border-radius:var(--radius-pill); background:var(--ink); color:#fff; padding:0.875rem 1.75rem;
  font-size:0.875rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em;
  transition:background-color 200ms ease, transform 160ms var(--ease-out);
}
.modal-submit:hover{ background:var(--brand); }
.modal-submit:active{ transform:scale(0.98); }

/* ---------- capability overlay ---------- */
#cap-root{
  position:fixed; inset:0; z-index:85; display:flex; align-items:center; justify-content:center;
  padding:0.75rem; pointer-events:none;
}
@media (min-width:640px){ #cap-root{ padding:1.5rem; } }
.cap-overlay-backdrop{ position:absolute; inset:0; background:rgba(10,10,10,0.55); backdrop-filter:blur(6px); opacity:0; }
.cap-overlay-panel{
  position:relative; max-height:92svh; overflow-y:auto; overscroll-behavior:contain; border-radius:var(--radius-card-lg);
  background:var(--surface-card); max-width:34rem; width:100%; color:var(--ink);
  box-shadow:0 2rem 4rem rgba(0,0,0,0.35);
  opacity:0; transform:translateY(28px) scale(0.96);
}
.cap-overlay-close{ position:absolute; top:1rem; right:1rem; z-index:2; background:rgba(255,255,255,0.9); }
.cap-overlay-art{ position:relative; aspect-ratio:16/9; }
.cap-overlay-art svg{ width:100%; height:100%; display:block; }
.cap-overlay-body{ padding:1.75rem; }
@media (min-width:640px){ .cap-overlay-body{ padding:2.25rem; } }
.cap-overlay-body h3{ font-size:1.75rem; font-weight:500; margin-top:0.6rem; letter-spacing:-0.01em; line-height:1.1; }
.cap-overlay-body > p{ font-size:0.9375rem; color:var(--ink-soft); line-height:1.65; margin-top:1rem; }
.cap-overlay-list{ display:flex; flex-direction:column; gap:0.75rem; margin-top:1.25rem; }
.cap-overlay-list li{ display:flex; align-items:flex-start; gap:0.75rem; font-size:0.875rem; color:var(--ink); line-height:1.5; }
.cap-overlay-list li::before{
  content:""; flex:none; width:0.4rem; height:0.4rem; border-radius:50%; background:var(--brand); margin-top:0.5rem;
}
.cap-overlay-body .pill-btn{ margin-top:1.75rem; }

/* ---------- animated service dropdown ---------- */
.select{ position:relative; }
.select-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
  border-radius:var(--radius-xl); border:1px solid var(--hairline); background:var(--background);
  padding:0.75rem 1rem; font-size:0.875rem; text-align:left; color:var(--ink);
  transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.select-trigger:active{ transform:scale(0.98); }
.select-trigger:focus-visible{ border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(224,48,58,0.18); outline:none; }
.select.is-open .select-trigger{ border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(224,48,58,0.18); }
.select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-value.is-placeholder{ color:var(--ink-soft); }
.select-caret{ width:1rem; height:1rem; flex:none; color:var(--ink-soft); transition:transform 200ms var(--ease-out); }
.select.is-open .select-caret{ transform:rotate(180deg); }

.select-list{
  position:absolute; left:0; right:0; top:calc(100% + 0.5rem); z-index:10;
  max-height:16rem; overflow-y:auto; overscroll-behavior:contain; list-style:none;
  border-radius:var(--radius-xl); background:var(--surface-card); border:1px solid var(--hairline);
  box-shadow:0 1rem 2.5rem rgba(0,0,0,0.16);
  padding:0.375rem;
  transform-origin:top center;
  opacity:0; transform:scale(0.95) translateY(-4px); pointer-events:none;
  transition:opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.select.is-open .select-list{
  opacity:1; transform:scale(1) translateY(0); pointer-events:auto;
  transition-duration:200ms;
}
.select-option{
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  padding:0.6rem 0.75rem; border-radius:var(--radius-xl); font-size:0.8125rem; color:var(--ink);
  cursor:pointer; transition:background-color 120ms ease;
}
.select-option:hover, .select-option.is-active{ background:var(--surface); }
.select-option svg{ width:1rem; height:1rem; color:var(--brand); opacity:0; flex:none; transition:opacity 120ms ease; }
.select-option[aria-selected="true"] svg{ opacity:1; }
.modal-submit:disabled{ opacity:0.6; cursor:default; }
.modal-success{ margin-top:2rem; border-radius:var(--radius-card); background:var(--surface); padding:1.5rem; text-align:center; display:none; }
.modal-success.show{ display:block; }
.success-check{ width:3rem; height:3rem; border-radius:var(--radius-pill); background:var(--brand); display:grid; place-items:center; margin:0 auto; color:#fff; }
.success-check svg{ width:1.4rem; height:1.4rem; }
.modal-success h3{ font-size:1.125rem; font-weight:500; margin-top:1rem; }
.modal-success p{ font-size:0.875rem; color:var(--ink-soft); margin-top:0.5rem; }
.modal-success .pill-btn{ margin-top:1.25rem; }

/* ---------- menu overlay ---------- */
#menu-root{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; pointer-events:none; }
.menu-backdrop{ position:absolute; inset:0; background:var(--brand-deep); opacity:0; }
.menu-panel{
  position:relative; height:100%; display:flex; flex-direction:column; padding:0.5rem;
  opacity:0; transform:translateY(-24px); color:#fff;
}
@media (min-width:640px){ .menu-panel{ padding:0.75rem; } }
.menu-inner{ flex:1; display:flex; flex-direction:column; padding:1.5rem; }
@media (min-width:640px){ .menu-inner{ padding:2.5rem; } }
.menu-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.menu-top-right{ display:flex; align-items:center; gap:0.75rem; }
.menu-brand{ display:flex; align-items:center; gap:0.5rem; font-size:1.25rem; }
.menu-close{ width:2.5rem; height:2.5rem; border-radius:var(--radius-pill); background:rgba(255,255,255,0.15); display:grid; place-items:center; transition:background-color .2s; }
.menu-close:hover{ background:rgba(255,255,255,0.25); }
.menu-close svg{ width:1.1rem; height:1.1rem; transition:transform .3s; }
.menu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:0.5rem; }
.menu-link{
  display:block; font-size:3rem; font-weight:500; letter-spacing:-0.01em; line-height:1.1;
  opacity:0; transform:translateY(28px); transition:color .2s;
}
@media (min-width:640px){ .menu-link{ font-size:4.5rem; } }
.menu-link:hover{ color:var(--brand-light); }
.menu-bottom{ border-top:1px solid rgba(255,255,255,0.15); padding-top:2rem; display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:640px){ .menu-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }
.menu-social{ display:flex; gap:1.25rem; font-size:0.875rem; color:rgba(255,255,255,0.7); }
.menu-social a:hover{ color:#fff; }

/* ---------- work gallery lightbox ---------- */
#work-lightbox{
  position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center;
  padding:0.75rem; pointer-events:none;
}
@media (min-width:640px){ #work-lightbox{ padding:1.5rem; } }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(10,10,10,0.82); backdrop-filter:blur(6px); opacity:0; }
.lightbox-panel{
  position:relative; max-width:56rem; width:100%; color:#fff;
  opacity:0; transform:translateY(28px) scale(0.96);
}
.lightbox-close{
  position:absolute; top:0.6rem; right:0.6rem; z-index:2;
  background:rgba(10,10,10,0.55); backdrop-filter:blur(6px);
}
.lightbox-close:hover{ background:rgba(10,10,10,0.75); }
.lightbox-close svg{ color:#fff; }
@media (min-width:768px){
  .lightbox-close{ top:-3.25rem; right:0; background:rgba(255,255,255,0.12); }
  .lightbox-close:hover{ background:rgba(255,255,255,0.22); }
}
/* fixed height (not max-height) so the stage's size — and therefore the
   nav arrows centered on it — stays put across photos of different aspect
   ratios. */
.lightbox-stage{ position:relative; height:50svh; }
@media (min-width:640px){ .lightbox-stage{ height:70svh; } }
/* scroll-snap filmstrip: swiping/scrolling through photos is the primary,
   always-reliable interaction; the arrow buttons are just a shortcut for it
   (they scrollBy one frame) instead of the only way to advance, so a missed
   click on a small button is no longer the difference between "works" and
   "doesn't work". */
.lightbox-track{
  display:flex; height:100%; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; border-radius:var(--radius-card);
}
.lightbox-track::-webkit-scrollbar{ display:none; }
.lightbox-frame{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center; height:100%; padding:0 0.5rem;
}
.lightbox-frame img{
  max-width:100%; max-height:100%; border-radius:var(--radius-card); object-fit:contain;
  background:var(--brand-deep); box-shadow:0 2rem 4rem rgba(0,0,0,0.5);
  will-change:transform, opacity;
}
.lightbox-nav{
  position:absolute; top:50%; translate:0 -50%; width:2.75rem; height:2.75rem; border-radius:50%; z-index:2;
  background:rgba(10,10,10,0.5); backdrop-filter:blur(8px); display:grid; place-items:center; color:#fff; flex:none;
  transition:background-color 160ms ease, transform 140ms var(--ease-out);
}
.lightbox-nav:hover{ background:rgba(10,10,10,0.7); }
.lightbox-nav:active{ transform:scale(0.92); }
.lightbox-nav:disabled{ opacity:0.3; pointer-events:none; }
.lightbox-nav svg{ width:1.35rem; height:1.35rem; }
.lightbox-prev{ left:0.6rem; }
.lightbox-next{ right:0.6rem; }
@media (min-width:768px){ .lightbox-nav{ width:3.25rem; height:3.25rem; } .lightbox-prev{ left:1rem; } .lightbox-next{ right:1rem; } }
.lightbox-meta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem;
  font-size:0.875rem; color:rgba(255,255,255,0.85); padding:0 0.25rem;
}
@media (min-width:640px){ .lightbox-meta{ margin-top:1.25rem; font-size:0.9375rem; padding:0; } }
.lightbox-count{ font-size:0.8125rem; color:rgba(255,255,255,0.55); flex:none; }