/* ===== Built Titling ===== */
@font-face {
  font-family: 'Built Titling';
  src: url('../fonts/built-titling-el.otf') format('opentype');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Built Titling';
  src: url('../fonts/built-titling-lt.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Built Titling';
  src: url('../fonts/built-titling-rg.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Built Titling';
  src: url('../fonts/built-titling-sb.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Built Titling';
  src: url('../fonts/built-titling-bd.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

/* ===== Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0a0a0a;
  --text: #ede8df;
  --dim: rgba(237,232,223,0.62);
  --muted: rgba(237,232,223,0.3);
  --gold: #c8a96e;
  --border: rgba(237,232,223,0.09);
  --nav-font: 'Built Titling', 'Oswald', sans-serif;
  --body-font: 'Oswald', system-ui, sans-serif;
  --nav-size: 13px;
  --nav-tracking: 0.18em;
}

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  transition: opacity 0.35s ease;
}

body.ready { opacity: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* ===== Shared Nav ===== */
.nav-top,
.nav-top-grad {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  z-index: 100;
}

.nav-top-grad {
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.nav-bottom,
.nav-bottom-grad {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px 20px;
  z-index: 100;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
}

.nav-bottom-grad {
  background: var(--bg);
}

/* When drawer is open, push the entire viewport content UP by drawer
   height — bottom nav, top nav, and main body all shift, freeing space
   at the bottom for the social drawer. Mirrors the original site. */
:root { --drawer-height: 110px; }

body.social-open .nav-bottom-grad,
body.social-open .nav-bottom {
  transform: translateY(calc(var(--drawer-height) * -1));
}
body.social-open .nav-top-grad,
body.social-open .nav-top {
  transform: translateY(calc(var(--drawer-height) * -1));
}
body.social-open main,
body.social-open .home-stage,
body.social-open .about-wrap {
  transform: translateY(calc(var(--drawer-height) * -1));
}

.nav-top-grad,
.nav-top,
main,
.home-stage,
.about-wrap {
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
}

.nav-link {
  font-family: var(--nav-font);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f0f0e0;
  cursor: pointer;
  transition: color 0.2s;
}

.nav-link:hover { color: var(--gold); }
.nav-link.active { color: #f0f0e0; }

.logo-link { display: flex; align-items: center; }
.nav-logo { height: 38px; width: auto; }

/* ===== Footer Toggle =====
   The source image (images/x.png) is an X. Default = rotated 45° so it
   reads as "+"; when drawer opens, rotate to 0° so it morphs to "X". */
.footer-toggle {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-toggle:hover { opacity: 1; }
.footer-toggle img {
  width: 20px;
  height: 20px;
  transform: rotate(0deg);                     /* source is +; closed = + */
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
body.social-open .footer-toggle img {
  transform: rotate(45deg);                    /* rotated 45° looks like X */
}

/* ===== Social Drawer ===== */
.social-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--drawer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 20px;
  box-sizing: border-box;
  background: transparent;
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  z-index: 90;
  pointer-events: none;
}

body.social-open .social-drawer {
  transform: translateY(0);
  pointer-events: all;
}

/* Cream circular badges holding the social glyphs */
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0f0e0;
  transition: transform 0.2s, background 0.2s;
}
.social-link:hover {
  background: #fff;
  transform: translateY(-2px);
}
.social-link img {
  width: 22px;
  height: 22px;
  filter: brightness(0);
}

/* ===== HOME ===== */
.home-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-logo {
  height: clamp(220px, 28vw, 320px);
  width: auto;
}

/* ===== ABOUT ===== */
.about-wrap {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.about-photo-banner {
  width: 100%;
  height: 35vh;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo-banner img {
  width: 100%;
  height: auto;
  position: absolute;
  display: block;
}

.about-text-block {
  padding: 2.5rem 2rem 8rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.about-body {
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
}

.about-body p + p { margin-top: 1.5em; }

/* ===== SERVICES (mirrors original amirjamm.com Webflow layout) ===== */
.services-layout {
  min-height: 100vh;
  padding: 90px 0 120px;
}

.services-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  max-width: 855px;       /* matches Webflow w-container 940px × col-11 */
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Service body (heading + description in one block) */
.services-list-body {
  color: #fff;
  text-align: left;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  padding-top: 30px;
}

.services-list-heading {
  color: #f0f0e0;
  font-family: var(--nav-font);  /* Built Titling */
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 4px;
}

/* Accordion */
.accordion-item {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid rgba(240,240,224,0.18);
}

.accordion-toggle {
  width: 100%;
  align-items: center;
  height: 80px;
  display: flex;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: #f0f0e0;
}

.accordion-icon {
  color: #f0f0e0;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s ease;
}

.accordion-item.open .accordion-icon { transform: rotate(180deg); }

.text-block-2 {
  color: #f0f0e0;
  white-space: normal;
  width: 100%;
  font-family: var(--nav-font);   /* Built Titling */
  font-size: 23px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Why-choose dropdown body — collapsible.
   No padding here: padding-bottom would sit outside max-height (content-box)
   or render its full height anyway (border-box quirk), leaking content
   through when "closed". Use children's margins for internal spacing. */
.dropdown-list {
  background-color: transparent;
  padding: 0;
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(.4,0,.2,1);
}

.dropdown-list > * { margin-left: 20px; margin-right: 20px; }
.dropdown-list > *:first-child { margin-top: 0; padding-top: 0; }
.dropdown-list > *:last-child { margin-bottom: 20px; }

.accordion-item.open .dropdown-list { /* JS sets inline max-height to scrollHeight */ }

.dropdown-link {
  color: #f0f0e0;
  display: block;
  padding-left: 0;
  font-family: var(--nav-font);   /* Built Titling */
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: lowercase;
  text-decoration: none;
}

.services-examples {
  color: #f0f0e0;
  margin-top: 10%;
  font-family: var(--nav-font);   /* Built Titling */
  font-size: 25px;
  font-weight: 400;
  text-transform: lowercase;
  line-height: 1.3;
}

.services-examples-link { text-decoration: none; }

.text-span {
  color: #fff;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 18px;
}

.services-examples-link:hover .text-span { color: var(--gold); }

.services-book-button {
  display: inline-block;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 5px;
  margin-top: 10%;
  padding: 12px 28px;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}

.services-book-button:hover {
  background-color: #fff;
  color: #0a0a0a;
}

/* ===== CREDITS ===== */
.credits-layout {
  min-height: 100vh;
  padding: 70px 0 100px;
  position: relative;
}

/* Artist names — 2 columns */
.credits-artists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1rem 2rem 2rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.credits-artists-left { text-align: center; }
.credits-artists-right { text-align: center; }

.credits-artist-name {
  font-family: var(--nav-font);
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  display: block;
}

/* Horizontal carousel */
.credits-carousel-wrap {
  position: relative;
  overflow: hidden;
}

.credits-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding: 0 2rem 1rem;
  scrollbar-width: none;
}
.credits-carousel::-webkit-scrollbar { display: none; }

.credit-card {
  flex: 0 0 clamp(220px, 26vw, 300px);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: #111;
  scroll-snap-align: start;
  border-radius: 4px;
}

.credit-card img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.42s ease, filter 0.42s ease;
}

.credit-card:hover img.cover {
  transform: scale(1.06);
  filter: grayscale(0);
}

/* Dark gradient overlay for text legibility on hover */
.credit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0) 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.credit-card:hover::after { opacity: 1; }

.credit-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.credit-card:hover .credit-info { opacity: 1; }

.credit-artist {
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.credit-title {
  font-family: var(--nav-font);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.7rem;
}

.credit-stream {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
}

.credit-stream img {
  height: 28px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.credit-stream a:hover img { opacity: 1; transform: scale(1.08); }

/* Nav link rendered as a button (for the Playlist trigger on Credits) */
.nav-link-as-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ===== Playlist Modal ===== */
.playlist-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.playlist-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}

.playlist-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

.playlist-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 56px 36px 32px;
  min-width: 280px;
  background: transparent;
  z-index: 1;
  transform: translateY(10px);
  transition: transform 0.25s ease;
}
.playlist-modal[aria-hidden="false"] .playlist-modal__panel {
  transform: translateY(0);
}

.playlist-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: #f0f0e0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.2s;
}
.playlist-modal__close:hover { opacity: 1; transform: scale(1.1); }

.playlist-modal__title {
  font-family: var(--nav-font);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0f0e0;
  margin: 0;
}

.playlist-modal__choices {
  display: flex;
  gap: 14px;
}

.playlist-modal__choice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 56px;
  border-radius: 4px;
  background: #f0f0e0;
  transition: background 0.2s, transform 0.2s;
}
.playlist-modal__choice:hover {
  background: #fff;
  transform: translateY(-2px);
}
.playlist-modal__choice img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0);
}

/* ===== CONTACT (mirrors original amirjamm.com Webflow form) ===== */
.contact-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 110px 20px 120px;
  box-sizing: border-box;
}

.form-block {
  width: 100%;
  max-width: 400px;
}

.contact-form { display: block; }

/* Labels — owners-wide 15px 500 white */
.form-field-label,
.form-field-label-2 {
  display: block;
  color: #fff;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-field-label-2 { padding-top: 25px; }

/* Inputs — transparent bg, light gray border, 3px radius, owners-wide */
.form-text-field,
.textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 25px;
  background-color: transparent;
  border: 1px solid #cccccc;
  border-radius: 3px;
  color: #fff;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
}

.form-text-field:focus,
.textarea:focus { border-color: #fff; }

.textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

.textarea::placeholder { color: rgba(255,255,255,0.45); }

/* Custom checkboxes — small white-bordered squares */
.w-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}

.w-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.w-checkbox-input {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: transparent;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 80%;
  transition: background-color 0.15s, border-color 0.15s;
}

/* :has() selects the box regardless of DOM order (it sits BEFORE the
   input in the markup, so a sibling combinator can't reach it). */
.w-checkbox:has(input[type="checkbox"]:checked) .w-checkbox-input {
  background-color: #f0f0e0;
  border-color: #f0f0e0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'><path fill='%230a0a0a' d='M4.1 7.6 1.4 4.9.3 6l3.8 3.8L11.7 2.2 10.6 1.1z'/></svg>");
}

/* DOM order in our markup is .w-checkbox-input THEN <input>, so the
   :checked + sibling rule above won't fire for the visual box that
   precedes the input. Reorder visually via flex to make the box appear
   first and live AFTER the input in the DOM. */
.w-checkbox { display: flex; align-items: center; }
.w-checkbox > input[type="checkbox"] { order: -2; }
.w-checkbox > .w-checkbox-input { order: -1; }
.w-checkbox > .checkbox-label { order: 0; }

.checkbox-label {
  color: #fff;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 14px;
  font-weight: 500;
}

/* Submit — cream pill, black text */
.submit-button {
  display: inline-block;
  margin-top: 20px;
  padding: 9px 50px;
  background-color: #f0f0e0;
  color: #000;
  border: none;
  border-radius: 3px;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.submit-button:hover:not(:disabled) { background-color: #fff; }
.submit-button:disabled { opacity: 0.5; cursor: not-allowed; }

.w-form-done,
.w-form-fail {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 3px;
  font-family: "owners-wide", var(--body-font), sans-serif;
  font-size: 14px;
}
.w-form-done { background: rgba(240,240,224,0.1); color: #f0f0e0; }
.w-form-fail { background: rgba(229,85,85,0.12); color: #ff8a8a; }

/* ===== 404 ===== */
.not-found {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  padding: 2rem;
}

.not-found-num {
  font-family: var(--nav-font);
  font-size: clamp(80px, 20vw, 160px);
  color: rgba(237,232,223,0.07);
  letter-spacing: 0.1em;
  line-height: 1;
}

.not-found-msg {
  font-family: var(--nav-font);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.not-found-back {
  font-family: var(--nav-font);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.not-found-back:hover { color: var(--text); border-color: var(--text); }

/* ===== Responsive tweaks ===== */
@media (max-width: 479px) {
  .nav-link { font-size: 25px; }
  .form-row { grid-template-columns: 1fr; }
}