/* ==========================================================================
   Jacob Haws Photography & Film — base stylesheet
   Brand name lives in one place: the .logo text in each HTML file's nav.
   ========================================================================== */

/* Brand palette: charcoal #242424, light gray #d9d9d9, white #ffffff, cyan #22c3e8 */
:root {
  --bg: #242424;
  --bg-alt: #2b2b2b;
  --surface: #2f2f2f;
  --border: #3d3d3d;
  --text: #ffffff;
  --text-muted: #b3b3b3;
  --accent: #22c3e8;
  --accent-ink: #22c3e8;    /* accent color when used as small text/links */
  --accent-on: #14181a;     /* text color placed on top of solid accent fills */
  --nav-bg: rgba(36, 36, 36, 0.92);
  --on-hero-text: #ffffff;        /* always-light text over the video hero, regardless of theme */
  --on-hero-muted: rgba(255, 255, 255, 0.75);
  --nav-h: 84px;
  --max: 1400px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Bebas Neue", var(--sans);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #f6f6f6;
  --surface: #d9d9d9;
  --border: #d9d9d9;
  --text: #242424;
  --text-muted: #5c5c5c;
  --accent-ink: #0c8aa8;    /* deeper cyan so accent text stays readable on white */
  --nav-bg: rgba(255, 255, 255, 0.92);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}

/* ---------------- Top navigation ---------------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, height 0.35s ease;
}

.site-nav.solid,
.site-nav:not(.on-hero) {
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--border);
}

/* Hero video is always dark, so nav content stays light while transparent over
   it — but not once the links have opened into the full-screen mobile drawer,
   which is an opaque themed panel, not a see-through bar over the video. */
.site-nav.on-hero:not(.solid) .logo,
.site-nav.on-hero:not(.solid) .nav-links:not(.mobile-open) a,
.site-nav.on-hero:not(.solid) .btn-client,
.site-nav.on-hero:not(.solid) .theme-toggle {
  color: var(--on-hero-text);
}
.site-nav.on-hero:not(.solid) .btn-client { border-color: rgba(255, 255, 255, 0.9); }
.site-nav.on-hero:not(.solid) .theme-toggle { border-color: rgba(255, 255, 255, 0.9); }
.site-nav.on-hero:not(.solid) .nav-toggle span,
.site-nav.on-hero:not(.solid) .nav-toggle span::before,
.site-nav.on-hero:not(.solid) .nav-toggle span::after {
  background: var(--on-hero-text);
}

.site-nav .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* Nav header logo: both images are stacked in the same spot and crossfade
   via opacity (not display, which can't be transitioned) so the swap is in
   sync with .site-nav's own background-color transition below. */
.nav-logo-wrap {
  position: relative;
  height: 36px;
  aspect-ratio: 2000 / 535; /* matches the logo artwork's own proportions */
}
.nav-logo-img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease;
}
.nav-logo-img--for-light-theme { opacity: 0; }
:root[data-theme="light"] .nav-logo-img--for-dark-theme { opacity: 0; }
:root[data-theme="light"] .nav-logo-img--for-light-theme { opacity: 1; }

/* The hero video is always dark regardless of site theme (see the on-hero
   text-color rules above), so force the light-colored (for-dark-theme) logo
   there too — the dark-colored variant would be invisible over the video. */
.site-nav.on-hero:not(.solid) .nav-logo-img--for-dark-theme { opacity: 1; }
.site-nav.on-hero:not(.solid) .nav-logo-img--for-light-theme { opacity: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo .mark {
  width: 34px; height: 34px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0;
  font-family: var(--sans);
  font-weight: 700;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
  padding: 8px 0;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.btn-client {
  border: 1px solid var(--text);
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-client:hover {
  background: var(--text);
  color: var(--bg);
}

.theme-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  padding: 0;
}
.theme-toggle:hover {
  background: var(--text);
  color: var(--bg);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 30px; height: 22px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--text);
}
.nav-toggle span { top: 10px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

/* ---------------- Buttons (general) ---------------- */

.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--text);
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
  background: transparent;
  color: var(--text);
}
.btn:hover { background: var(--text); color: var(--bg); }

.btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.btn-solid:hover { opacity: 0.85; background: var(--accent); color: var(--accent-on); }

/* ---------------- Hero (home) ---------------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh; /* accounts for mobile browser chrome so the hero doesn't jump on scroll */
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: var(--bg-alt);
}

/* Short viewports (landscape phones, small laptops in split-screen): don't
   force a tall hero the user has to scroll past just to reach real content.
   (Full override, including repositioning the fallback note and hiding the
   scroll cue, lives in the Responsive section below, since it must come
   after the base rules it overrides.) */
@media (max-height: 500px) {
  .hero { min-height: 420px; }
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background: radial-gradient(circle at 30% 20%, #2f2f2f, #181818 70%);
}
.hero-fallback.show { display: block; }

.hero-fallback .note {
  position: absolute;
  left: 24px;
  bottom: 90px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px 10px 10px;
  backdrop-filter: blur(6px);
}

.hero-fallback .play {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.hero-fallback .play svg { width: 13px; height: 13px; margin-left: 2px; }
.hero-fallback p {
  color: var(--on-hero-muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  text-align: left;
}
.hero-fallback code {
  color: var(--accent);
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

@media (max-width: 640px) {
  .hero-fallback .note { left: 16px; right: 16px; bottom: 76px; max-width: none; }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.hero-content .eyebrow { margin-bottom: 18px; color: var(--accent); }

.hero-content h1 {
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.95;
  color: var(--on-hero-text);
}

.hero-content .sub {
  margin-top: 22px;
  font-size: 16px;
  color: var(--on-hero-muted);
  letter-spacing: 1px;
  max-width: 520px;
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 18px;
}

.hero-actions .btn:not(.btn-solid) {
  border-color: var(--on-hero-text);
  color: var(--on-hero-text);
}

.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--on-hero-muted);
  text-transform: uppercase;
}
.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse {
  0% { transform: scaleY(0.3); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.3); opacity: 0.4; }
}

/* ---------------- Page hero (inner pages) ---------------- */

.page-hero {
  padding: calc(var(--nav-h) + 90px) 0 60px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { font-size: clamp(40px, 6vw, 72px); margin-top: 14px; }
.page-hero .sub { color: var(--text-muted); max-width: 560px; margin-top: 18px; font-size: 15px; }

/* ---------------- Sections ---------------- */

section { position: relative; }

.section-pad { padding: 110px 0; }
.section-pad-sm { padding: 70px 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(32px, 4.5vw, 54px); margin-top: 12px; }
.section-head .desc { color: var(--text-muted); max-width: 420px; font-size: 15px; }

/* ---------------- Featured strip (home) ---------------- */

.featured {
  background: var(--bg-alt);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.featured-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}
.featured-item img,
.featured-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.featured-item:hover img,
.featured-item:hover video { transform: scale(1.06); }

.featured-item .tag {
  position: absolute;
  left: 18px; bottom: 18px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--on-hero-text);
  background: rgba(0,0,0,0.45);
  padding: 8px 14px;
  border-radius: 999px;
}

.featured-cta {
  text-align: center;
  margin-top: 50px;
}

/* ---------------- About (home section + dedicated content) ---------------- */

.about {
  background: var(--bg);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: center;
}

.about-photo {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.about-photo::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--accent);
  pointer-events: none;
}

.about-copy .eyebrow { margin-bottom: 16px; }
.about-copy h2 { font-size: clamp(32px, 4.5vw, 50px); margin-bottom: 22px; }
.about-copy p { color: var(--text-muted); font-size: 16px; max-width: 540px; margin: 0 0 18px; }

.about-stats {
  display: flex;
  gap: 44px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.about-stats div strong {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  color: var(--accent-ink);
  letter-spacing: 1px;
}
.about-stats div span {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------- Contact strip (home) ---------------- */

.cta-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 90px 0;
  text-align: center;
}
.cta-strip h2 { font-size: clamp(30px, 5vw, 56px); margin-bottom: 24px; }
.cta-strip p { color: var(--text-muted); max-width: 480px; margin: 0 auto 34px; }

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--bg);
  padding: 70px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--border);
}

.footer-grid h4 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
  font-weight: 600;
}

.footer-grid p { color: var(--text-muted); font-size: 14px; max-width: 300px; }

.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 14px; color: var(--text-muted); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--text); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------- Portfolio page ---------------- */

.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.filter-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-btn:hover { border-color: var(--accent); color: var(--text); }
.filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}
.portfolio-item img,
.portfolio-item video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portfolio-item:hover img,
.portfolio-item:hover video { transform: scale(1.05); }

.video-badge {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}
.featured-item .video-badge { top: 18px; right: 18px; }
.portfolio-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  color: var(--on-hero-text);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-item:hover .overlay { opacity: 1; }
.portfolio-item .overlay .cat { font-size: 11px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; }
.portfolio-item .overlay .title { font-family: var(--display); font-size: 20px; letter-spacing: 1px; margin-top: 4px; }
.portfolio-item[data-hidden="true"] { display: none; }

/* ---------------- Shop page ---------------- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-media { aspect-ratio: 4/3; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-media img { transform: scale(1.05); }
.product-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-cat { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-ink); }
.product-title { font-family: var(--display); font-size: 22px; letter-spacing: 1px; }
.product-desc { color: var(--text-muted); font-size: 14px; flex: 1; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.product-price { font-size: 18px; font-weight: 600; }
.btn-add {
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-add:hover { background: var(--text); color: var(--bg); }

.shop-note {
  margin-top: 60px;
  padding: 26px 30px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

.empty-note { color: var(--text-muted); font-size: 14px; padding: 20px 0; }
.shop-note strong { color: var(--text); }

/* toast */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---------------- Contact page ---------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.contact-info h3 { font-size: 26px; margin-bottom: 20px; }
.contact-info p { color: var(--text-muted); margin-bottom: 30px; max-width: 420px; }
.contact-list { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-list li { display: flex; flex-direction: column; gap: 4px; }
.contact-list .label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-ink); }
.contact-list .value { font-size: 16px; }
.social-row { display: flex; gap: 16px; }
.social-row a {
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}
.social-row a:hover { border-color: var(--accent); color: var(--accent-ink); }

.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; }

/* ---------------- Client login page ---------------- */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 40px) 24px 60px;
  background:
    radial-gradient(circle at 15% 20%, rgba(34,195,232,0.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(34,195,232,0.07), transparent 40%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 48px 40px;
}

.login-card .mark-lg {
  width: 54px; height: 54px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  margin: 0 auto 26px;
}

.login-card h1 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 8px;
}
.login-card .sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 34px;
}

.login-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 13px;
}
.login-foot a { color: var(--accent-ink); }
.login-foot label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-card .btn { width: 100%; margin-top: 26px; }

.login-card .form-field input { width: 100%; }

.login-help {
  text-align: center;
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-muted);
}
.login-help a { color: var(--text); border-bottom: 1px solid var(--accent); }

/* ---------------- Reel mute toggle ---------------- */

.reel-mute-toggle[hidden] { display: none; }
.reel-mute-toggle {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 90px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.reel-mute-toggle:hover { background: rgba(0,0,0,0.7); border-color: var(--accent); }
.reel-mute-toggle svg { width: 20px; height: 20px; }
.reel-mute-toggle .icon-unmuted { display: none; }
.reel-mute-toggle.is-muted .icon-muted { display: block; }
.reel-mute-toggle.is-muted .icon-unmuted { display: none; }
.reel-mute-toggle:not(.is-muted) .icon-muted { display: none; }
.reel-mute-toggle:not(.is-muted) .icon-unmuted { display: block; }
@media (max-width: 640px) {
  .reel-mute-toggle { right: 16px; bottom: 76px; width: 40px; height: 40px; }
}

/* ---------------- Google Reviews ---------------- */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-stars { color: var(--accent-ink); font-size: 16px; letter-spacing: 2px; }
.review-text { color: var(--text); font-size: 15px; line-height: 1.6; flex: 1; }
.review-author { font-family: var(--display); font-size: 15px; letter-spacing: 1px; color: var(--text-muted); }

/* ---------------- Client logos strip ---------------- */

.client-logos-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin-top: 8px;
}
.client-logos-strip img {
  max-height: 56px;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.client-logos-strip a:hover img,
.client-logos-strip img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* ---------------- Passion Projects layouts ---------------- */

.passion-grid.layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.passion-grid.layout-grid .passion-item { aspect-ratio: 4/3; }

.passion-grid.layout-masonry {
  columns: 3;
  column-gap: 24px;
}
.passion-grid.layout-masonry .passion-item {
  break-inside: avoid;
  margin-bottom: 24px;
}
.passion-grid.layout-masonry .passion-item img,
.passion-grid.layout-masonry .passion-item video { height: auto; }

.passion-grid.layout-story {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}
.passion-grid.layout-story .passion-item { aspect-ratio: 16/9; }

.passion-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.passion-item img,
.passion-item video { width: 100%; height: 100%; object-fit: cover; }
.passion-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.passion-item:hover .overlay { opacity: 1; }
.passion-item .overlay .title { font-family: var(--display); font-size: 18px; letter-spacing: 1px; }

/* ---------------- Portfolio lightbox + filmstrip ---------------- */

.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10,10,10,0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 140px;
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.lightbox-close:hover { color: var(--accent); }
.lightbox-title {
  position: absolute;
  top: 26px; left: 30px;
  color: #fff;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 1px;
}
.lightbox-stage {
  max-width: min(1100px, 90vw);
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox-filmstrip {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  gap: 10px;
  padding: 18px 24px;
  overflow-x: auto;
  background: linear-gradient(0deg, rgba(0,0,0,0.9), transparent);
}
.filmstrip-item {
  flex: 0 0 auto;
  width: 90px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.55;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.filmstrip-item img,
.filmstrip-item video { width: 100%; height: 100%; object-fit: cover; }
.filmstrip-item:hover { opacity: 0.85; }
.filmstrip-item.active { opacity: 1; border-color: var(--accent); }

/* ---------------- Shop: disabled print-link state ---------------- */

.btn-add[href] { display: inline-block; text-decoration: none; }
.btn-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .passion-grid.layout-grid { grid-template-columns: repeat(2, 1fr); }
  .passion-grid.layout-masonry { columns: 2; }
}
@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .passion-grid.layout-grid { grid-template-columns: 1fr; }
  .passion-grid.layout-masonry { columns: 1; }
  .lightbox-title { left: 16px; top: 16px; font-size: 15px; }
  .lightbox-close { right: 16px; top: 12px; }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 980px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.mobile-extra { display: none; }

/* Tablets and below: a full text nav no longer fits comfortably (common at
   iPad-portrait widths ~768-900px), so switch to the drawer earlier than
   the phone breakpoint below. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .mobile-extra { display: block; }
  .nav-right { gap: 14px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
  .featured-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-actions { flex-direction: column; }
  .about-stats { gap: 30px; }
}

@media (max-width: 480px) {
  .btn-client { display: none; }
}

/* Short viewports: there isn't reliably clear space for the fallback note
   or scroll cue next to the centered hero content, and both are decorative
   (the note disappears entirely once a real reel.mp4 is added), so hide
   rather than fight for a spot that collides at some aspect ratio. */
@media (max-height: 500px) {
  .scroll-cue { display: none; }
  .hero-content .sub { margin-top: 10px; }
  .hero-actions { margin-top: 20px; }
  .hero-fallback .note { display: none; }
}

.mobile-extra a {
  color: var(--accent-ink) !important;
}

/* mobile nav drawer */
.nav-links.mobile-open {
  display: flex;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  bottom: 0;
  background: var(--bg);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 40px;
  gap: 28px;
  z-index: 999;
  overflow-y: auto; /* safety net on short screens instead of clipping/overlapping items */
}
.nav-links.mobile-open a { font-size: 20px; }

@media (max-height: 500px) {
  .nav-links.mobile-open { padding: 20px 40px; gap: 16px; }
  .nav-links.mobile-open a { font-size: 17px; }
}