/* =========================
   LOCAL FONTS (from /fonts)
   ========================= */

/* Helvetica Neue (OTF) */
@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeueLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeueMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeueBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaNeue";
  src: url("../fonts/HelveticaNeueBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Inter Variable (TTF) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

    
    
    :root {
      --pad: 48px;
      --gap: 20px;
      --border: 1px solid #e6e6e6;
      --text: #111;
      --muted: #666;
      --bg: #fff;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
     font-family: "Inter", system-ui, sans-serif;
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
    }

    /* HEADER */
    header {
      position: fixed;
      inset: 0 0 auto 0;
      height: 64px;
      border-bottom: var(--border);
      background: #fff;
      z-index: 10;
      display: flex;
      align-items: center;
    }

    .header-inner {
      width: 100%;
      padding: 0 var(--pad);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      width: 50px;
      height: 50px;
      background: #eee;
    }

    main {
      padding-top: 88px;
    }

    .container {
      padding: 0 var(--pad);
      z-index: 99;
    }

    /* TITLE */
    h1 {
      font-size: 56px;
      line-height: 1;
      margin: 0 0 10px;
      text-transform: lowercase;
    }

    .sub {
      margin: 0 0 24px;
      color: var(--muted);
    }

    /* =========================
       PORTFOLIO STRIP (POLISHED)
       ========================= */

    .portfolio-wrap {
      position: relative;
    }

    /* subtle edge fade */
    .portfolio-wrap::before,
    .portfolio-wrap::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 32px;
      pointer-events: none;
      z-index: 2;
    }

    .portfolio-wrap::before {
      left: 0;

    }

    .portfolio-wrap::after {
      right: 0;

    }

    .portfolio-strip {
      display: flex;
      gap: var(--gap);
      overflow-x: auto;
      overflow-y: hidden;
      cursor: grab;
      user-select: none;
      padding-bottom: 10px;

      scrollbar-width: none;
      -ms-overflow-style: none;
       touch-action: pan-x;
  -webkit-overflow-scrolling: touch; /* iOS smooth swipe */
    }

    .portfolio-strip::-webkit-scrollbar {
      display: none;
    }

    .portfolio-strip.is-dragging {
      cursor: grabbing;
    }

    /* HEIGHT-LOCKED, ASPECT-HONEST TILES */
    .shot-btn {
      flex: 0 0 auto;
      height: 70vh;
      max-height: 70vh;
      border: var(--border);
      background: #f4f4f4;
      padding: 0;
      display: block;
      cursor: pointer;
    }

    .shot-btn img {
      height: 100%;
      width: auto;
      display: block;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    /* STATS */
    .stats {
      margin-top: 20px;
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .stats::-webkit-scrollbar {
      display: none;
    }

    .stat {
      min-width: 140px;
      border: var(--border);
      padding: 5px 5px;
    }

    .stat-blank {
      min-width: 140px;
      padding: 5px 5px;
    }

    .statsocial {
      min-width: 140px;
      padding: 5px 5px;
    }

    .label {
      font-size: 11px;
      color: var(--muted);
      text-transform: lowercase;
    }

    .value {
      font-weight: 700;
      text-transform: lowercase;
    }

    .social .iconify {
      width: 18px;
      height: 18px;
      color: #1c1c1c;
      transition: color 0.2s ease;
    }

    .social:hover .iconify {
      color: #d2b878;
    }

.back-text {
  flex:box ;
  position: relative;
  z-index:-99;
}
.back-text-txt{
  font-family: "HelveticaNeue", sans-serif;
  font-weight: 900; /* Black */
  font-size: 15rem;
  letter-spacing: -10%;
}


    /* FOOTER */
    footer {
      margin-top: 80px;
      padding: 40px var(--pad);
      border-top: var(--border);
      font-size: 12px;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    /* =========================
       LIGHTBOX (TRUE ASPECT)
       ========================= */

    .lb {
      position: fixed;
      inset: 0;
      background: #fff;
      display: none;
      z-index: 999;
    }

    .lb.is-open {
      display: block;
    }

    .lb-top {
      height: 64px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      padding: 0 var(--pad);
      border-bottom: var(--border);
    }

    .lb-title {
      justify-self: center;
      font-weight: 700;
      text-transform: lowercase;
    }

    .lb-close {
      border: 0;
      background: none;
      font-weight: 700;
      cursor: pointer;
      text-transform: uppercase;
    }

    .lb-stage {
      height: calc(100vh - 64px);
      display: grid;
      place-items: center;
      padding: 24px var(--pad);
      position: relative;
    }

    .lb-spread {
      width: min(1100px, 92vw);
      height: min(70vh, 680px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .lb-spread img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
    }

    .lb-zone {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      background: none;
      border: 0;
    }

    .lb-left {
      left: 0;
      cursor: w-resize;
    }

    .lb-right {
      right: 0;
      cursor: e-resize;
    }

    @media (max-width:760px) {
      :root {
        --pad: 16px;
      }

      h1 {
        font-size: 32px;
      }

      .shot-btn {
        height: 60vh;
      }

      .lb-spread {
        grid-template-columns: 1fr;
      }
    }

    .sub-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

    .sub {
      margin: 0;
      font-size: 14px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .scroll-hint {
      margin: 0;
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text);
      opacity: .45;

      display: inline-flex;
      align-items: center;
      gap: 6px;

      pointer-events: none;
      /* 👈 not interactive */
      user-select: none;

      /* hidden by default */
      visibility: hidden;
    }

    .scroll-hint .arrow {
      font-size: 14px;
      line-height: 1;
    }

    /* =========================
   MOBILE / TOUCH OPTIMIZATION
   ========================= */

/* iOS viewport sanity */
html {
  -webkit-text-size-adjust: 100%;
}

/* ---------- ≤ 1024px (tablet + mobile) ---------- */
@media (max-width: 1024px) {
  :root {
    --pad: 20px;
    --gap: 14px;
  }

  header {
    height: 56px;
  }

  main {
    padding-top: 72px;
  }

  .logo {
    width: 40px;
    height: 40px;
  }

  h1 {
    font-size: clamp(28px, 6vw, 40px);
  }

  .sub {
    font-size: 14px;
  }

  /* Portfolio feels more swipe-native */
  .portfolio-strip {
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }

  .shot-btn {
    scroll-snap-align: center;
    height: 65vh;
    max-height: 65vh;
  }

  /* Stats become proper swipe cards */
  .stats {
    gap: 10px;
  }

  .stat,
  .stat-blank,
  .statsocial {
    min-width: 130px;
  }
}

/* ---------- ≤ 760px (phones) ---------- */
@media (max-width: 760px) {
  :root {
    --pad: 14px;
  }

  header {
    height: 52px;
  }

  main {
    padding-top: 64px;
  }

  h1 {
    font-size: 28px;
    line-height: 1.05;
  }

  .sub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .scroll-hint {
    visibility: visible;
  }

  /* Portfolio strip = hero experience */
  .shot-btn {
    height: 58vh;
    max-height: 58vh;
    border-radius: 6px;
  }

  .shot-btn img {
    max-width: 100%;
  }

  /* Background typography safety */
  .back-text-txt {
    font-size: 7rem;
    letter-spacing: -0.04em;
  }

  /* Footer stacks clean */
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Lightbox goes single-image */
  .lb-top {
    height: 52px;
    padding: 0 var(--pad);
  }

  .lb-stage {
    height: calc(100svh - 52px); /* mobile-safe viewport */
    padding: 12px;
  }

  .lb-spread {
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lb-zone {
    display: none; /* swipe instead */
  }
}

/* ---------- ≤ 420px (small phones) ---------- */
@media (max-width: 420px) {
  h1 {
    font-size: 24px;
  }

  .stat,
  .stat-blank,
  .statsocial {
    min-width: 120px;
  }

  .back-text-txt {
    font-size: 5.5rem;
  }
}