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

    :root {
      --black: #080808;
      --body-bg: #f5f3ef;
      --white: #ffffff;
      --red: #cc2200;
      --ink: #111;
      --gray: #888;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Playfair Display', Georgia, serif;
      background: var(--body-bg);
      color: var(--ink);
      overflow-x: hidden;
    }

    /* ═══════════════════════════════
       CAMERA NAV
    ═══════════════════════════════ */
    .cam-wrap {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      background: var(--body-bg);
    }

    .cam-top-rail {
      width: 100%;
      height: 9px;
      background: linear-gradient(180deg, #3c3c3c 0%, #1e1e1e 100%);
    }

    .cam-body {
      width: 100%;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px 0 0;
      position: relative;
      background: linear-gradient(180deg, #252525 0%, #181818 50%, #111 100%);
      border-top: 1px solid #3a3a3a;
      border-bottom: 2px solid #050505;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 6px 0 #0c0c0c,
        0 8px 0 #080808,
        0 10px 18px rgba(0,0,0,0.55);
    }

    /* left grip */
    .cam-grip {
      width: 56px;
      height: 100%;
      flex-shrink: 0;
      background: linear-gradient(90deg, #0e0e0e 0%, #1c1c1c 50%, #161616 100%);
      border-right: 1px solid #2e2e2e;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* grip texture lines */
    .cam-grip::after {
      content: '';
      position: absolute;
      inset: 12px 8px;
      background: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,0.03) 3px,
        rgba(255,255,255,0.03) 4px
      );
    }

    .cam-logo {
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 18px;
      color: transparent;
      text-decoration: none;
      letter-spacing: 1px;
      background: linear-gradient(180deg, #ddd 0%, #888 100%);
      -webkit-background-clip: text;
      background-clip: text;
      white-space: nowrap;
      padding: 0 28px 0 20px;
      flex-shrink: 0;
      text-transform: uppercase;
    }

    /* nav links container */
    .cam-links {
      display: flex;
      list-style: none;
      height: 100%;
      align-items: stretch;
      flex: 1;
    }

    .cam-links li {
      display: flex;
    }

    .cam-links li a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
      color: #5a5a5a;
      font-family: 'Caveat', cursive;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0 20px;
      position: relative;
      transition: color 0.2s;
    }

    .cam-links li a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 20px; right: 20px;
      height: 2px;
      background: #eee;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .cam-links li a:hover { color: #aaa; }
    .cam-links li a.active { color: #ddd; }
    .cam-links li a.active::after { opacity: 1; }

    .cam-links svg {
      width: 15px; height: 15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* right side */
    .cam-right {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;
    }

    .cam-socials {
      display: flex;
      gap: 14px;
    }
    .cam-socials a {
      font-family: 'Caveat', cursive;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: #555;
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.2s;
    }
    .cam-socials a:hover { color: #aaa; }

    .rec-dot {
      width: 10px; height: 10px;
      background: radial-gradient(circle at 35% 35%, #ff4422, #aa1100);
      border-radius: 50%;
      box-shadow: 0 0 7px rgba(200,30,0,0.6);
      flex-shrink: 0;
    }

    .cam-bottom-edge {
      width: 100%;
      height: 5px;
      background: linear-gradient(180deg, #0a0a0a, #050505);
    }

    /* ═══════════════════════════════
       SECTIONS
    ═══════════════════════════════ */
    section { min-height: 100vh; }
    .nav-h { height: 90px; }

    /* ═══════════════════════════════
       HOME
    ═══════════════════════════════ */
    #home {
      padding-top: 90px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
    }

    .home-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px 52px 60px 72px;
    }

    .home-eyebrow {
      font-family: 'Caveat', cursive;
      font-size: 15px;
      color: var(--gray);
      margin-bottom: 22px;
      letter-spacing: 0.08em;
    }

    .home-headline {
      font-size: clamp(44px, 5.5vw, 76px);
      line-height: 1.02;
      color: var(--black);
      margin-bottom: 28px;
      font-weight: 700;
    }

    .home-headline em {
      font-style: italic;
      font-weight: 400;
      color: #888;
    }

    .home-sub {
      font-family: 'Caveat', cursive;
      font-size: 19px;
      color: #777;
      line-height: 1.65;
      max-width: 330px;
      margin-bottom: 52px;
    }

    .home-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'Caveat', cursive;
      font-size: 15px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--black);
      text-decoration: none;
      border-bottom: 1.5px solid var(--black);
      padding-bottom: 5px;
      width: fit-content;
      transition: color 0.2s, border-color 0.2s;
    }
    .home-cta:hover { color: var(--red); border-color: var(--red); }

    .home-image {
      position: relative;
      overflow: hidden;
    }
    .home-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.08);
}
    .home-image-label {
      position: absolute;
      bottom: 28px; left: 28px;
      font-family: 'Caveat', cursive;
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .film-strip {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 20px;
      background: #080808;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 14px 0;
    }
    .film-hole {
      width: 9px; height: 7px;
      background: var(--body-bg);
      border-radius: 1px;
      opacity: 0.65;
    }

    /* ═══════════════════════════════
       WORK
    ═══════════════════════════════ */
    #work {
      background: #eae7e1;
      padding: 130px 64px 110px;
      min-height: 100vh;
    }

    .section-header {
      display: flex;
      align-items: baseline;
      gap: 18px;
      margin-bottom: 20px;
    }

    .section-title {
      font-size: clamp(38px, 4vw, 58px);
      color: var(--black);
      font-weight: 700;
    }

    .section-note {
      font-family: 'Caveat', cursive;
      font-size: 17px;
      color: var(--gray);
      font-style: italic;
    }

    /* category tabs */
    .category-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 52px;
      border-bottom: 1px solid #ccc;
      flex-wrap: wrap;
    }

    .cat-tab {
      font-family: 'Caveat', cursive;
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #999;
      padding: 10px 22px;
      cursor: pointer;
      border: none;
      background: transparent;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.2s, border-color 0.2s;
    }
    .cat-tab:hover { color: #555; }
    .cat-tab.active { color: var(--black); border-bottom-color: var(--black); }

    /* polaroid grid */
    .polaroid-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 52px 40px;
      justify-content: flex-start;
    }

    .polaroid {
      background: var(--white);
      padding: 10px 10px 44px;
      width: 210px;
      cursor: pointer;
      position: relative;
      transition: transform 0.4s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s ease;
      box-shadow:
        2px 3px 0 #ccc,
        4px 6px 0 #bbb,
        2px 4px 18px rgba(0,0,0,0.15);
      display: none; /* hidden by default, shown by JS */
    }

    .polaroid.visible { display: block; }

    .polaroid:nth-child(6n+1) { transform: rotate(-2deg); }
    .polaroid:nth-child(6n+2) { transform: rotate(1.5deg); }
    .polaroid:nth-child(6n+3) { transform: rotate(-0.8deg); }
    .polaroid:nth-child(6n+4) { transform: rotate(2deg); }
    .polaroid:nth-child(6n+5) { transform: rotate(-1.4deg); }
    .polaroid:nth-child(6n+6) { transform: rotate(0.7deg); }

    .polaroid:hover {
      transform: rotate(0deg) scale(1.06) translateY(-6px) !important;
      box-shadow: 0 20px 48px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.1);
      z-index: 20;
    }

    .polaroid::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%) rotate(-1deg);
      width: 48px; height: 16px;
      background: rgba(255,248,180,0.7);
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .polaroid img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
      filter: grayscale(80%) contrast(1.05) sepia(8%);
    }

    /* skeleton loader */
    .polaroid-skeleton {
      background: var(--white);
      padding: 10px 10px 44px;
      width: 210px;
      box-shadow: 2px 3px 0 #ccc, 4px 6px 0 #bbb;
    }
    .polaroid-skeleton .skel-img {
      width: 100%;
      aspect-ratio: 1/1;
      background: linear-gradient(90deg, #e0ddd8 25%, #eae7e2 50%, #e0ddd8 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
    }
    .polaroid-skeleton .skel-label {
      height: 14px;
      width: 60%;
      margin: 14px auto 0;
      background: linear-gradient(90deg, #e0ddd8 25%, #eae7e2 50%, #e0ddd8 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 4px;
    }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .polaroid-label {
      position: absolute;
      bottom: 10px;
      left: 0; right: 0;
      text-align: center;
      font-family: 'Caveat', cursive;
      font-size: 15px;
      color: #555;
    }

    .work-empty {
      font-family: 'Caveat', cursive;
      font-size: 18px;
      color: #aaa;
      padding: 40px 0;
      display: none;
    }

    /* ═══════════════════════════════
       PRICING
    ═══════════════════════════════ */
    #pricing {
      background: var(--black);
      padding: 130px 64px 110px;
      min-height: 100vh;
    }

    #pricing .section-title { color: var(--white); }
    #pricing .section-note  { color: #555; }
    #pricing .section-header { margin-bottom: 70px; }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      max-width: 1100px;
    }

    .pricing-card {
      background: #111;
      border: 1px solid #1e1e1e;
      padding: 44px 36px 40px;
      position: relative;
      transition: transform 0.3s, border-color 0.3s;
    }

    .pricing-card:hover {
      transform: translateY(-6px);
      border-color: #333;
    }

    .pricing-card.featured {
      border-color: #333;
      background: #151515;
    }

    .pricing-card.featured::before {
      content: 'Most Popular';
      position: absolute;
      top: -1px; left: 50%;
      transform: translateX(-50%);
      font-family: 'Caveat', cursive;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--black);
      background: #eee;
      padding: 4px 16px;
    }

    .pricing-tier {
      font-family: 'Caveat', cursive;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #555;
      margin-bottom: 16px;
    }

    .pricing-name {
      font-size: 28px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
    }

    .pricing-price {
      font-family: 'Caveat', cursive;
      font-size: 42px;
      color: var(--white);
      line-height: 1;
      margin-bottom: 6px;
    }

    .pricing-price span {
      font-size: 18px;
      color: #666;
    }

    .pricing-sub {
      font-family: 'Caveat', cursive;
      font-size: 13px;
      color: #444;
      margin-bottom: 36px;
    }

    .pricing-divider {
      height: 1px;
      background: #1e1e1e;
      margin-bottom: 30px;
    }

    .pricing-features {
      list-style: none;
      margin-bottom: 40px;
    }

    .pricing-features li {
      font-family: 'Caveat', cursive;
      font-size: 16px;
      color: #888;
      padding: 9px 0;
      border-bottom: 1px solid #161616;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pricing-features li::before {
      content: '—';
      color: #333;
      flex-shrink: 0;
    }

    .pricing-features li.included { color: #bbb; }
    .pricing-features li.included::before { content: '✓'; color: #888; }

    .pricing-btn {
      width: 100%;
      padding: 14px;
      font-family: 'Caveat', cursive;
      font-size: 14px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: transparent;
      color: #888;
      border: 1px solid #2a2a2a;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .pricing-card.featured .pricing-btn {
      background: var(--white);
      color: var(--black);
      border-color: var(--white);
    }

    .pricing-btn:hover {
      background: var(--white);
      color: var(--black);
      border-color: var(--white);
    }

    /* add-ons */
    .addons-wrap {
      margin-top: 64px;
      max-width: 1100px;
    }

    .addons-title {
      font-family: 'Caveat', cursive;
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #444;
      margin-bottom: 24px;
    }

    .addons-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1px;
      background: #1a1a1a;
      border: 1px solid #1a1a1a;
    }

    .addon-item {
      background: #0e0e0e;
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .addon-name {
      font-family: 'Caveat', cursive;
      font-size: 16px;
      color: #777;
    }

    .addon-price {
      font-family: 'Caveat', cursive;
      font-size: 15px;
      color: #444;
      white-space: nowrap;
    }

    /* ═══════════════════════════════
       ABOUT
    ═══════════════════════════════ */
    #about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      background: var(--black);
    }

    .about-image {
      overflow: hidden;
      position: relative;
    }

    .about-image img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(100%) contrast(1.1);
      display: block;
      opacity: 0.8;
    }

    .about-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 55%, rgba(8,8,8,0.85) 100%);
    }

    .about-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 80px 80px 60px;
    }

    .about-text .section-title { color: var(--white); margin-bottom: 32px; }

    .about-body {
      font-size: 16px;
      line-height: 1.85;
      color: #888;
      margin-bottom: 22px;
    }

    .about-body em { font-style: italic; color: #bbb; }

    .about-sig {
      font-family: 'Caveat', cursive;
      font-size: 32px;
      color: var(--white);
      margin-top: 36px;
      opacity: 0.6;
    }

    /* ═══════════════════════════════
       CONTACT
    ═══════════════════════════════ */
    #contact {
      background: var(--body-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 130px 40px;
      position: relative;
      overflow: hidden;
    }

    #contact::before {
      content: 'SS';
      position: absolute;
      bottom: -60px; right: -30px;
      font-size: 32vw;
      font-weight: 700;
      color: rgba(0,0,0,0.04);
      line-height: 1;
      pointer-events: none;
    }

    .contact-inner {
      max-width: 540px;
      width: 100%;
      position: relative;
      z-index: 1;
    }

    .contact-inner .section-title { margin-bottom: 10px; }
    .contact-inner .section-note  { margin-bottom: 56px; }

    .form-field { margin-bottom: 32px; }

    .form-field label {
      display: block;
      font-family: 'Caveat', cursive;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #999;
      margin-bottom: 10px;
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
      font-family: 'Caveat', cursive;
      font-size: 19px;
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s;
      resize: none;
    }
    .form-field input::placeholder,
    .form-field textarea::placeholder { color: #bbb; }
    .form-field input:focus,
    .form-field textarea:focus { border-bottom-color: var(--black); }

    .form-submit {
      margin-top: 44px;
      font-family: 'Caveat', cursive;
      font-size: 15px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: var(--black);
      color: var(--white);
      border: none;
      padding: 16px 44px;
      cursor: pointer;
      box-shadow: 0 4px 0 #333, 0 6px 14px rgba(0,0,0,0.18);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .form-submit:hover  { transform: translateY(2px); box-shadow: 0 2px 0 #333, 0 4px 8px rgba(0,0,0,0.18); }
    .form-submit:active { transform: translateY(4px); box-shadow: none; }

    /* ═══════════════════════════════
       FOOTER
    ═══════════════════════════════ */
    footer {
      background: var(--black);
      padding: 22px 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #1a1a1a;
    }
    footer span {
      font-family: 'Caveat', cursive;
      font-size: 13px;
      color: #444;
      letter-spacing: 0.06em;
    }
    .footer-dot {
      width: 7px; height: 7px;
      background: var(--red);
      border-radius: 50%;
      box-shadow: 0 0 6px var(--red);
    }

    /* ═══════════════════════════════
       RESPONSIVE
    ═══════════════════════════════ */
    @media (max-width: 960px) {
      .pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
    }
    @media (max-width: 820px) {
      .cam-body { padding: 0; height: 66px; }
      .cam-links li a { padding: 0 12px; font-size: 9px; }
      .cam-logo { padding: 0 16px 0 14px; font-size: 15px; }
      .cam-socials { display: none; }

      #home { grid-template-columns: 1fr; }
      .home-image { height: 52vh; }
      .home-text { padding: 40px 28px; }

      #about { grid-template-columns: 1fr; }
      .about-image { height: 48vh; }
      .about-text { padding: 48px 28px; }

      #work, #pricing { padding: 110px 24px 80px; }
      .polaroid-grid { justify-content: center; }

      footer { padding: 20px 24px; }
    }

    a.pricing-btn {
      display: block;
      text-align: center;
      text-decoration: none;
    }

    /* LIGHTBOX */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 999;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.05);
  box-shadow: 0 20px 80px rgba(0,0,0,0.8);
}
.lightbox-label {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.lightbox-close {
  position: absolute;
  top: 24px; right: 32px;
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: #444;
  cursor: pointer;
  transition: color 0.2s;
}
.lightbox-close:hover { color: #fff; }