/* ==========================================================================
   Shared inner-page styles (Services, Our Work, Booking, Contact)
   ========================================================================== */

/* ---- Page hero (compact, non-video) ---- */
.page-hero {
  padding-block: clamp(var(--space-16), 12vw, var(--space-24)) clamp(var(--space-10), 6vw, var(--space-16));
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.28), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--text-2xl); margin-top: var(--space-3); max-width: 18ch; }
.page-hero-sub { margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--text-lg); max-width: 62ch; }

.section-tight { padding-block: clamp(var(--space-8), 4vw, var(--space-12)); }

/* ---- Accordion (Services page) ---- */
.accordion { display: flex; flex-direction: column; gap: var(--space-4); max-width: 880px; margin-inline: auto; }
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  scroll-margin-top: 110px;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  font: inherit;
}
.accordion-trigger .icon-badge { flex-shrink: 0; }
.accordion-title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.accordion-title h2 { font-size: var(--text-lg); margin: 0; }
.accordion-sub { font-size: var(--text-sm); color: var(--color-text-muted); font-family: var(--font-body); font-weight: 400; }
.chevron { flex-shrink: 0; color: var(--color-text-faint); transition: transform var(--transition-interactive); }
.accordion-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); color: var(--color-primary-hover); }

.accordion-panel {
  overflow: hidden;
  max-height: 0;
  padding-inline: var(--space-6);
  transition: max-height var(--transition-base);
}
.accordion-trigger[aria-expanded="true"] + .accordion-panel {
  max-height: 600px;
}
.accordion-panel p {
  color: var(--color-text-muted);
  padding-top: var(--space-1);
  padding-bottom: var(--space-4);
  max-width: 66ch;
}
.detail-list { display: grid; gap: var(--space-2); padding-bottom: var(--space-6); }
.detail-list li {
  list-style: none;
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.7);
}

/* ---- Our Work gallery ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.filter-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-interactive);
  min-height: 40px;
}
.filter-chip:hover { border-color: rgba(var(--color-primary-rgb), 0.5); color: var(--color-text); }
.filter-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 720px) { .gallery-grid { grid-template-columns: 1fr; } }

.compare-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.compare-card:hover { border-color: rgba(var(--color-primary-rgb), 0.45); transform: translateY(-2px); }
.compare-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.compare-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-media .tag {
  position: absolute;
  top: var(--space-3);
  padding: 0.2em 0.7em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: rgba(8,7,10,0.65);
  backdrop-filter: blur(6px);
  color: #fff;
}
.compare-media .tag-before { left: var(--space-3); }
.compare-media .tag-after { right: var(--space-3); background: rgba(var(--color-primary-rgb), 0.85); }
.compare-media .divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.6);
  transform: translateX(-1px);
}
.compare-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.compare-body h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.compare-body p { color: var(--color-text-muted); font-size: var(--text-sm); }
.compare-meta { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.compare-meta span {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding: 0.2em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* ---- Booking form ---- */
.booking-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 960px) { .booking-shell { grid-template-columns: 1fr; } }

.stepper {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
  counter-reset: step;
}
.stepper-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  position: relative;
}
.stepper-item::before {
  content: "";
  position: absolute;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.stepper-item:first-child::before { display: none; }
.stepper-item.is-complete::before, .stepper-item.is-active::before { background: var(--color-primary); }
.stepper-badge {
  position: relative;
  z-index: 1;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  transition: all var(--transition-interactive);
}
.stepper-item.is-active .stepper-badge { border-color: var(--color-primary); color: var(--color-primary-hover); box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.15); }
.stepper-item.is-complete .stepper-badge { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stepper-label { font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 600; }
.stepper-item.is-active .stepper-label { color: var(--color-text); }
@media (max-width: 560px) { .stepper-label { display: none; } }

.form-step { display: none; }
.form-step.is-active { display: block; animation: fade-in-up var(--transition-base) both; }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form-step h2 { font-size: var(--text-xl); }
.form-step-sub { color: var(--color-text-muted); margin-top: var(--space-2); margin-bottom: var(--space-8); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-10);
  gap: var(--space-4);
}

.summary-card { position: sticky; top: 100px; }
.summary-card h3 { font-size: var(--text-md); margin-bottom: var(--space-4); }
.summary-list { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); color: var(--color-text-muted); }
.summary-row strong { color: var(--color-text); font-weight: 600; text-align: right; }
.summary-empty { color: var(--color-text-faint); font-style: italic; }

.booking-success {
  display: none;
  text-align: center;
  padding: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-6);
}
.booking-success.is-active { display: block; animation: fade-in-up var(--transition-base) both; }
.success-icon {
  width: 72px; height: 72px;
  margin-inline: auto var(--space-6);
  border-radius: var(--radius-full);
  background: rgba(var(--color-primary-rgb), 0.15);
  display: grid; place-items: center;
  color: var(--color-primary-hover);
}
.booking-success h2 { font-size: var(--text-2xl); }
.booking-success p { color: var(--color-text-muted); max-width: 52ch; margin-inline: auto; margin-top: var(--space-3); }
.booking-form-wrap.is-hidden, .booking-shell .stepper.is-hidden { display: none; }

.service-area-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(var(--color-primary-rgb), 0.08);
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
}
.service-area-note.is-warning {
  background: rgba(240, 165, 60, 0.1);
  border-color: rgba(240, 165, 60, 0.35);
}
.service-area-note svg { flex-shrink: 0; margin-top: 2px; }

/* ---- Contact page ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-cards { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.contact-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.contact-card h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); margin-bottom: var(--space-1); }
.contact-card a, .contact-card p { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.hours-table { width: 100%; margin-top: var(--space-6); border-collapse: collapse; font-size: var(--text-sm); }
.hours-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text-muted); }
.hours-table td:last-child { text-align: right; color: var(--color-text); font-weight: 600; }
.map-frame {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--space-6);
}

/* ---- Our Work: category sections & real-media components ---- */
.work-category {
  padding-block: clamp(var(--space-8), 4vw, var(--space-10));
  border-top: 1px solid var(--color-divider);
}
.work-category:first-of-type { border-top: none; padding-top: 0; }
.work-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.work-category-head h2 { font-size: var(--text-xl); margin: 0; }
.work-category-count {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0.3em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.work-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 720px) { .work-media-grid { grid-template-columns: 1fr; } }

/* Real before/after slider comparison */
.slider-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.slider-card:hover { border-color: rgba(var(--color-primary-rgb), 0.45); transform: translateY(-2px); }
.slider-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.slider-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.slider-media .slider-before { z-index: 1; }
.slider-media .slider-after-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  width: 50%;
}
.slider-media .slider-after-wrap img { width: var(--slider-img-w, 200%); max-width: none; height: 100%; }
.slider-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: rgba(255,255,255,0.85);
  z-index: 3;
  transform: translateX(-1.5px);
  pointer-events: none;
}
.slider-handle::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
}
.slider-handle::after {
  content: "\2194";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  z-index: 1;
}
.slider-media .tag {
  position: absolute;
  top: var(--space-3);
  z-index: 4;
  padding: 0.2em 0.7em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: rgba(8,7,10,0.65);
  backdrop-filter: blur(6px);
  color: #fff;
  pointer-events: none;
}
.slider-media .tag-before { left: var(--space-3); }
.slider-media .tag-after { right: var(--space-3); background: rgba(var(--color-primary-rgb), 0.85); }

.work-media-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.work-media-body h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.work-media-body p { color: var(--color-text-muted); font-size: var(--text-sm); }
.work-media-badge {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding: 0.2em 0.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* Standalone real media card (single photo or process video) */
.media-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.media-card:hover { border-color: rgba(var(--color-primary-rgb), 0.45); transform: translateY(-2px); }
.media-frame {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #000;
}
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame .tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  padding: 0.2em 0.7em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: rgba(8,7,10,0.65);
  backdrop-filter: blur(6px);
  color: #fff;
}
.media-frame .play-indicator {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Intentionally pointer-events: auto (not none) — this transparent layer sits
     on top of the <video> at all times so a tap/click never reaches the video
     element directly. That keeps mobile browsers from ever surfacing their own
     native tap-to-expand / tap-to-control video UI; playback is driven only by
     scroll-into-view autoplay in our-work.js. */
  pointer-events: auto;
  cursor: default;
  transition: opacity var(--transition-interactive);
  background: rgba(8,7,10,0.18);
}
.media-frame .play-indicator svg {
  width: 52px; height: 52px;
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}
.media-card.is-playing .play-indicator { opacity: 0; }

/* Coming-soon note for placeholder categories */
.coming-soon-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding: 0.3em 0.8em;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Coming-soon media placeholder (replaces a real photo/video that hasn't been captured yet) */
.media-coming-soon {
  aspect-ratio: 16/10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-surface-offset);
  border-bottom: 1px dashed var(--color-border);
  color: var(--color-text-faint);
  text-align: center;
  padding: var(--space-4);
}
.media-coming-soon svg { opacity: 0.55; }
.media-coming-soon span {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}