:root {
  /* Backgrounds */
  --bg-main: #fff7ed;          /* peach cream */
  --bg-soft: #fff1e6;          /* cards */
  --bg-soft-alt: #fde2c8;      /* subtle sections */

  /* Accents (soft but visible on pastel) */
  --accent-primary: #ea580c;   /* warm orange */
  --accent-secondary: #f97316; /* peach orange */
  --accent-teal: #0ea5a4;      /* calm contrast */
  --accent-lime: #84cc16;      /* soft lime */

  /* Text */
  --text-main: #3a2a20;        /* dark brown (not black) */
  --text-muted: #7c5e48;      /* muted warm brown */

  /* Borders & shadows */
  --border-subtle: rgba(124, 94, 72, 0.18);
  --shadow-soft: 0 18px 45px rgba(124, 94, 72, 0.25);

  /* Radius & motion */
  --radius-lg: 18px;
  --radius-pill: 999px;
  --transition-fast: 0.25s ease;
  --transition-med: 0.4s ease;

  --container-width: 1120px;
}


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

    html {
      scroll-behavior: smooth;
    }

    body {
  font-family: "Poppins", system-ui, sans-serif;
  background: radial-gradient(circle at top left, #fff7ed 0%, #fed7aa 40%, #fed7aa 100%);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}


    /* ---------- PRELOADER ---------- */
#preloader {
  position: fixed;
  inset: 0;
  background: #DADADA;            /* dark background behind video */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader video {
  max-width: 50%;
  max-height: 50%;
  object-fit: cover;              /* make video cover the screen nicely */
  border-radius: 50px;
}

@media screen and (max-width:768px) {
    #preloader video{
          border-radius: 0px;
    }
}

/* When we hide the preloader */
#preloader.hide {
  opacity: 0;
  visibility: hidden;
}


    .page-wrapper {
      min-height: 100vh;
      position: relative;
      isolation: isolate;
    }

    /* Background glow blobs */
    .page-wrapper::before,
    .page-wrapper::after {
      content: "";
      position: fixed;
      inset: auto;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      filter: blur(95px);
      opacity: 0.55;
      z-index: -2;
      pointer-events: none;
    }

    .page-wrapper::before {
      background: radial-gradient(circle, rgba(255, 98, 0, 0.9), transparent 70%);
      top: -80px;
      left: -120px;
    }

    .page-wrapper::after {
      background: radial-gradient(circle, rgba(255, 174, 0, 0.85), transparent 60%);
      bottom: -140px;
      right: -120px;
    }

    /* .glass-panel {
      background: linear-gradient(145deg, rgba(11, 15, 31, 0.96), rgba(9, 13, 28, 0.98));
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(28px);
    } */

    .container {
      width: 100%;
      max-width: var(--container-width);
      margin-inline: auto;
      padding-inline: 1.5rem;
    }

    /* Header / Nav */

    header {
  backdrop-filter: blur(18px);
  background: linear-gradient(
    to bottom,
    rgba(255, 247, 237, 0.92),
    rgba(254, 215, 170, 0.85),
    transparent
  );
  border-bottom: 1px solid var(--border-subtle);
}


    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 0.8rem;
      gap: 1rem;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    .logo-mark {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: conic-gradient(
        from 230deg,
        #ff5ef4,
        #41f3ff,
        #c4ff4d,
        #ff5ef4
      );
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 25px rgba(255, 94, 244, 0.7);
    }

    .logo-mark::after {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 8px;
      background: #3a2a20;
    }

    .logo-mark-inner {
      position: absolute;
      inset: 7px;
      border-radius: 7px;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-top-color: #ff5ef4;
      border-right-color: #41f3ff;
      transform: rotate(-20deg);
    }

    .logo-text {
      display: flex;
      flex-direction: column;
    }

    .logo-title {
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .logo-subtitle {
      font-size: 0.7rem;
      color: var(--text-muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.7rem;
      font-size: 0.9rem;
    }

    .nav-links a {
      position: relative;
      color: var(--text-muted);
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -0.25rem;
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent-neon), var(--accent-teal));
      transition: width var(--transition-fast);
    }

    .nav-links a:hover {
color: var(--accent-primary);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .pill-chip {
      padding: 0.2rem 0.9rem;
      border-radius: var(--radius-pill);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text-muted);
background: rgba(255, 241, 230, 0.9);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
    }

    .btn-primary {
      border-radius: var(--radius-pill);
      padding: 0.45rem 1.25rem;
      font-size: 0.85rem;
      border: none;
      cursor: pointer;
      font-weight: 600;
background: linear-gradient(135deg, #f97316, #fb923c);
color: #ffffff;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.45);
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .btn-primary span {
      font-size: 1.1rem;
    }

    .btn-primary:hover {
      transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(249, 115, 22, 0.6);
    }

    .btn-outline {
      border-radius: var(--radius-pill);
      padding: 0.45rem 1.2rem;
      font-size: 0.85rem;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      font-weight: 500;
background: rgba(255, 247, 237, 0.85);
color: var(--text-main);
      transition: background var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast), transform var(--transition-fast);
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      text-decoration: none;
    }

    .btn-outline:hover {
background: #fff1e6;
color: var(--accent-primary);
  border-color: var(--accent-primary);
        transform: translateY(-1px);
    }

    .btn-outline svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    /* Mobile nav toggle */

    .nav-toggle {
      display: none;
      background: none;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      padding: 0.35rem 0.7rem;
      cursor: pointer;
      color: var(--text-main);
      align-items: center;
      gap: 0.4rem;
      font-size: 0.85rem;
    }

    .nav-toggle-bar {
      width: 14px;
      height: 1.6px;
      border-radius: 999px;
      background: var(--text-main);
      position: relative;
      transition: transform var(--transition-fast);
    }

    .nav-toggle-bar::before,
    .nav-toggle-bar::after {
      content: "";
      position: absolute;
      left: 0;
      width: 14px;
      height: 1.6px;
      border-radius: 999px;
      background: var(--text-main);
      transition: transform var(--transition-fast), top var(--transition-fast),
        bottom var(--transition-fast), opacity var(--transition-fast);
    }

    .nav-toggle-bar::before {
      top: -4px;
    }

    .nav-toggle-bar::after {
      bottom: -4px;
    }

    .nav-open .nav-toggle-bar {
      transform: rotate(45deg);
    }

    .nav-open .nav-toggle-bar::before {
      top: 0;
      transform: rotate(90deg);
    }

    .nav-open .nav-toggle-bar::after {
      bottom: 0;
      opacity: 0;
    }

    .nav-open .nav-links,
    .nav-open .nav-cta {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    @media (max-width: 768px) {
      .nav-links,
      .nav-cta {
        position: absolute;
        left: 0;
        right: 0;
        top: 62px;
        padding: 0.8rem 1.5rem 1.1rem;
        background: linear-gradient(
          145deg,
          rgba(11, 15, 31, 0.99),
          rgba(8, 11, 25, 0.97)
        );
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity var(--transition-med), transform var(--transition-med);
      }

      .nav-links {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 0.9rem;
        margin-bottom: 0.25rem;
      }

      .nav-cta {
        padding-top: 0;
      }

      .nav-toggle {
        display: inline-flex;
      }
    }

    /* Sections */

    main {
      padding-block: 2rem 2.5rem;
    }

    section {
      padding-block: 3.5rem;
    }

    .section-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.24em;
      color: var(--accent-teal);
      margin-bottom: 0.5rem;
    }

    .section-title {
      font-size: clamp(1.6rem, 2.2vw, 2rem);
      font-weight: 600;
      margin-bottom: 0.8rem;
    }

    .section-description {
      font-size: 0.95rem;
      color: var(--text-muted);
      max-width: 34rem;
    }

    /* Hero */

    .hero {
      padding-top: 3.2rem;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
      gap: 2rem;
      align-items: center;
    }

    .eyebrow-row {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 1.1rem;
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
background: rgba(255, 241, 230, 0.9);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: radial-gradient(circle, #c4ff4d, #41f3ff);
      box-shadow: 0 0 12px rgba(196, 255, 77, 0.75);
    }

    .hero-title {
      font-size: clamp(2.6rem, 4vw, 3.4rem);
      line-height: 1.04;
      text-transform: uppercase;
      margin-bottom: 0.7rem;
      letter-spacing: 0.12em;
    }

    .hero-title span.highlight {
background: linear-gradient(
    110deg,
    #ea580c,
    #f97316,
    #fb923c
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
        display: inline-block;
    }

    .hero-subtitle {
      font-size: 1rem;
      color: var(--text-muted);
      max-width: 30rem;
      margin-bottom: 1.5rem;
    }

    .hero-subtitle strong {
      color: var(--accent-teal);
      font-weight: 500;
    }

    .hero-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      margin-bottom: 1.5rem;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .hero-meta-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .dot-pill {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent-neon), var(--accent-teal));
    }

    .hero-right {
      position: relative;
    }

    .hero-card {
      position: relative;
      overflow: hidden;
    }

    .hero-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .hero-badge {
      font-size: 0.75rem;
      padding: 0.25rem 0.8rem;
      border-radius: var(--radius-pill);
background: rgba(255, 241, 230, 0.9);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
        text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .hero-rating {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .hero-rating span.star {
      color: #ffd76a;
      font-size: 1rem;
    }

    .hero-print-grid {
      margin-top: 0.4rem;
      display: grid;
      grid-template-columns: minmax(0, 2.5fr);
      gap: 0.5rem;
    }

    @media screen and (max-width:767px) {
        
.hero-print-grid {
      margin-top: 0.4rem;
display: flex;
flex-direction: column;
justify-content: space-around;
      gap: 0.5rem;
    }
    

    }

    .print-item {
      height: 250px;
      width: 100%;
      border-radius: 16px;
      padding: 0.5rem;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      font-size: 0.7rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .print-item::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.85;
      mix-blend-mode: screen;
    }

    .print-item span {
      position: relative;
      z-index: 1;
    }

    .hero-print-grid2 {
      margin-top: 0.4rem;
display: flex;
justify-content: center;
      gap: 2.5rem;
    }

    @media screen and (max-width:910px) {
        .hero-print-grid2 {
      margin-top: 0.4rem;
display: flex;
flex-direction: column;
justify-content: center;
      gap: 1.5rem;
    }
    }

    .print-item2 {
      height: 100%;
      border-radius: 16px;
      padding: 8.5rem;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      font-size: 0.7rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .print-item2::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.85;
      mix-blend-mode: screen;
    }

    .print-item2 span {
      position: relative;
      z-index: 1;
    }

.type{
    display: flex;
    justify-content: center;
    justify-content: space-around;
    text-align: center;
}

    .types{
        font-size: 12px;
        text-align: center;
    }

    .type2{
    display: flex;
    justify-content: center;
    justify-content: space-around;
    text-align: center;
}

    .types2{
        text-align: center;
    }

    .print-item--neon-magenta {
      background: radial-gradient(circle at top left, #ff5ef4, #5e1548);
    }

    .print-item--sunset {
      background: radial-gradient(circle at top, #ffbe5e, #843d1d);
    }

    .print-item--teal {
      background: radial-gradient(circle at top right, #41f3ff, #175c66);
    }

    .print-item2--neon-magenta {
      background: radial-gradient(circle at top left, #ff5ef4, #5e1548);
    }

    .print-item2--sunset {
      background: radial-gradient(circle at top, #ffbe5e, #843d1d);
    }

    .print-item2--teal {
      background: radial-gradient(circle at top right, #41f3ff, #175c66);
    }

    .hero-card-footer {
      margin-top: 1.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .hero-card-footer strong {
      color: var(--accent-teal);
    }

    .hero-pulse-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #c4ff4d;
      box-shadow: 0 0 12px rgba(196, 255, 77, 0.8);
      position: relative;
    }

    .hero-pulse-dot::after {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: inherit;
      border: 1px solid rgba(196, 255, 77, 0.6);
      animation: ping 1.5s infinite;
    }

    @keyframes ping {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(1.7);
        opacity: 0;
      }
    }

    /* Services */

    .services-inner {
      /* display: grid; */
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
      gap: 2rem;
      align-items: center;
    }

    .services-list {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }

    @media screen and (max-width:767px) {
        .services-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1rem;
    }
    }

    .service-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.9rem;
      padding: 0.95rem 1rem;
      border-radius: 16px;
border: 1px solid var(--border-subtle);
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );    
box-shadow: var(--shadow-soft);
}

    .service-icon-pill {
      width: 42px;
      height: 42px;
      border-radius: 14px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .service-icon-pill svg {
      width: 22px;
      height: 22px;
    }

    .service-title {
      font-size: 0.95rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
    }

    .service-desc {
      font-size: 0.82rem;
      color: var(--text-muted);
    }

    .service-tags {
      margin-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-bottom: 1rem;
    }

    .tag-pill {
      font-size: 0.68rem;
      padding: 0.16rem 0.7rem;
      border-radius: 999px;
background: rgba(255, 241, 230, 0.9);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
        text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
    }

    .services-right {
      display: grid;
      gap: 1.1rem;
    }

    .metrics-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.85rem;
    }

    .metric-card {
      padding: 0.9rem 1rem;
      border-radius: 14px;
background: rgba(255, 255, 255, 0.85);
  border: 1px dashed var(--border-subtle);
color: var(--text-muted);
        font-size: 0.75rem;

    }

    .metric-card strong {
      font-size: 1.1rem;
      display: block;
      margin-bottom: 0.15rem;
color: var(--accent-primary);
    }

    .business-hours-card {
      padding: 1rem 1.1rem;
      border-radius: 16px;
background: rgba(255, 255, 255, 0.85);
  border: 1px dashed var(--border-subtle);
color: var(--text-muted);
      font-size: 0.82rem;
    }

    .hours-row {
      display: flex;
      gap: 1rem;
      margin-top: 0.4rem;
    }

    .hours-row span.label {
      color: var(--text-muted);
    }

    .hours-row span.value {
      font-weight: 500;
    }

    .hours-note {
      margin-top: 0.5rem;
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    /* Process */

    .process {
      scroll-margin-top: 90px;
    }

    .process-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
      gap: 2.3rem;
      align-items: flex-start;
    }

    .process-steps-wrapper {
      position: relative;
      padding-top: 0.7rem;
    }

    .process-line {
      position: absolute;
      top: 23px;
      left: 15px;
      right: 15px;
      height: 2px;
      background: linear-gradient(90deg, rgba(255, 94, 244, 0.4), rgba(65, 243, 255, 0.3));
      opacity: 0.4;
      pointer-events: none;
    }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      position: relative;
      z-index: 1;
    }

    .process-step {
      text-align: left;
      padding: 1rem 0.9rem 1rem;
      border-radius: 16px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
      font-size: 0.8rem;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .step-index {
      width: 26px;
      height: 26px;
      border-radius: 999px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      color: var(--accent-teal);
      position: absolute;
      top: -16px;
      left: 0.9rem;
    }

    .step-icon {
      width: 26px;
      height: 26px;
      border-radius: 999px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-icon svg {
      width: 18px;
      height: 18px;
    }

    .step-title {
      font-weight: 500;
      font-size: 0.9rem;
    }

    .step-text {
      color: var(--text-muted);
      font-size: 0.78rem;
    }

    .process-note {
      margin-top: 1.3rem;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    /* Work / Portfolio */

    .products{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    }


    .work-grid {
      margin-top: 1.4rem;
      /* display: grid; */
      grid-template-columns: 2.1fr 2.3fr;
      gap: 1.3rem;
    }

    .work-primary {
      padding: 1.2rem 1.1rem;
      border-radius: 16px;
border: 1px solid var(--border-subtle);
 background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  box-shadow: var(--shadow-soft);
        display: flex;
      flex-direction: column;
      gap: 0.7rem;
      font-size: 0.85rem;
    }

    .work-primary h3 {
      font-size: 1rem;
      margin-bottom: 0.1rem;
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.2rem;
    }

    .badge-soft {
      border-radius: 999px;
      padding: 0.2rem 0.65rem;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--text-muted);
    }

    .sample-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.45rem;
      margin-top: 0.6rem;
    }

    .sample-card {
      height: 82px;
      border-radius: 14px;
      position: relative;
      overflow: hidden;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      display: flex;
      align-items: flex-end;
      padding: 0.5rem;
    }

    .sample-card span {
      position: relative;
      z-index: 1;
    }

    .sample-card::before {
      content: "";
      position: absolute;
      inset: 0;
      mix-blend-mode: screen;
      opacity: 0.8;
    }

    .sample-card--pink {
      background: linear-gradient(135deg, #ff5ef4, #ff8a8a);
    }

    .sample-card--cyan {
      background: linear-gradient(135deg, #41f3ff, #3c7fff);
    }

    .sample-card--lime {
      background: linear-gradient(135deg, #c4ff4d, #65b52f);
    }

    .work-secondary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem;
      margin-top: 25px;
    }

    .work-tile {
      padding: 0.9rem 0.9rem 1rem;
      border-radius: 16px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
        font-size: 0.8rem;
      color: var(--text-muted);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .work-tile strong {
      font-size: 0.9rem;
      color: var(--text-main);
    }

    /* About */

    .about-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
      gap: 2rem;
      align-items: center;
    }

    .about-copy {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin-top: 0.8rem;
      display: grid;
      gap: 0.55rem;
    }

    .about-highlight {
      padding: 1rem 1.1rem;
      border-radius: 16px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
        font-size: 0.82rem;
      display: grid;
      gap: 0.4rem;
    }

    .about-highlight h3 {
      font-size: 0.95rem;
    }

    .about-highlight ul {
      list-style: none;
      display: grid;
      gap: 0.25rem;
    }

    .about-highlight li::before {
      content: "•";
      color: var(--accent-teal);
      margin-right: 0.3rem;
    }

    /* Contact */

    .contact-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
      gap: 2rem;
    }

    .contact-card {
      padding: 1.1rem 1.2rem;
      border-radius: 18px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
        font-size: 0.85rem;
      display: grid;
      gap: 0.7rem;
    }

    .contact-group-title {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.13em;
color: var(--accent-primary);
      margin-bottom: 0.25rem;
    }

    .contact-list {
      list-style: none;
      display: grid;
      gap: 0.2rem;
    }

    .contact-list a {
      color: var(--accent-teal);
      text-decoration: none;
      font-weight: 500;
    }

    .contact-list a:hover {
      text-decoration: underline;
    }

    .address-text {
      white-space: pre-line;
    }

    .social-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-top: 0.2rem;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.8rem;
      padding: 0.35rem 0.9rem;
      border-radius: 999px;
background: rgba(255, 241, 230, 0.9);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
      text-decoration: none;
    }

    .social-link span.icon {
      font-size: 1rem;
    }

    .map-card {
      padding: 1rem 1.1rem;
      border-radius: 16px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
      font-size: 0.82rem;
      display: grid;
      gap: 0.5rem;
      margin-top: 25px;
    }

    .map-tag {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-muted);
    }

    .map-preview {
      margin-top: 0.4rem;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(255, 94, 244, 0.3), rgba(65, 243, 255, 0.4));
      padding: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 500;
      color: #050612;
    }

    .mini-contact-form {
      padding: 1.1rem 1.2rem;
      border-radius: 18px;
background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 241, 230, 0.9)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
      font-size: 0.84rem;
      display: grid;
      gap: 0.7rem;
    }

    .mini-contact-form label {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .mini-contact-fields {
      display: grid;
      gap: 0.6rem;
    }

    .mini-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
    }

    .mini-contact-form input,
    .mini-contact-form textarea {
      width: 100%;
      border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
        padding: 0.5rem 0.6rem;
      font-family: inherit;
      font-size: 0.8rem;
      outline: none;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
        background var(--transition-fast);
    }

    .mini-contact-form input::placeholder,
    .mini-contact-form textarea::placeholder {
      color: rgba(158, 163, 201, 0.5);
    }

    .mini-contact-form input:focus,
    .mini-contact-form textarea:focus {
border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
        background: rgba(2, 4, 15, 0.98);
    }

    .mini-contact-form textarea {
      min-height: 80px;
      resize: vertical;
    }

    .mini-submit {
      justify-self: flex-start;
      margin-top: 0.3rem;
    }



    .insta-slider-section {
  margin-top: 2rem;
  padding: 1.5rem;
}

.insta-title {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 1rem;
}

.insta-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(400px * 8); /* 8 slides total (4 original + 4 duplicate) */
  animation: scrollInfinite 22s linear infinite;
}

.slide {
  min-width: 400px;
  margin-right: 12px;
}

.slide img {
  width: 100%;
  height: 260px;
  border-radius: 16px;
  object-fit: cover;
}

/* Infinite continuous scroll */
@keyframes scrollInfinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-400px * 4)); /* move original set */
  }
}

/* Responsive for mobile */
@media (max-width: 600px) {
  .slide {
    min-width: 260px;
  }
  .slide img {
    height: 200px;
  }
  .slide-track {
    animation: scrollInfinite 16s linear infinite;
    width: calc(260px * 8);
  }
  @keyframes scrollInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-260px * 4)); }
  }
}


    /* Footer */

    footer {
      padding-block: 1.6rem 2.1rem;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .map{
        display: flex;
        justify-content: center;
    }
    .map iframe{
        border-radius: 10px;
    }

    .footer-bar {
  border-top: 1px solid #2e2e2e;  
  margin-top: 2rem;                
  padding-top: 1rem;   
  text-align: center;
  font-size: 0.875rem;             
  color: #5a5a5a;                 
}

.footer-line {
  display: inline-flex;            
  align-items: center;             
  justify-content: center;         
  gap: 0.25rem;  
  color: white;                 
}

.heart-icon {
  width: 1rem;                     
  height: 1rem;
  fill: #ef4444;                  
  margin: 0 0.25rem;               
  vertical-align: -2px;
}

.brand-link {
  display: inline-flex;            
  align-items: center;             
  gap: 0.25rem;                    
  text-decoration: none;
  color: #ea580c;                  
  font-weight: 500;
}

.brand-link:hover {
  text-decoration: underline;      
}

.brand-logo {
  width: 1.25rem;                  
  height: 1.25rem;                 
  object-fit: contain;             
}



.insta-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(400px * 8);
  animation: scrollInfinite 22s linear infinite;
}

.slide {
  min-width: 400px;
  margin-right: 12px;
  position: relative;
}

.slide img,
.slide video {
  width: 100%;
  height: 260px;
  border-radius: 16px;
  object-fit: cover;
}


/* Infinite animation */
@keyframes scrollInfinite {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-400px * 4)); }
}

/* Mobile */
@media (max-width: 600px) {
  .slide { min-width: 260px; }
  .slide img, .slide video { height: 200px; }

  .slide-track {
    width: calc(260px * 8);
    animation: scrollInfinite 16s linear infinite;
  }

  @keyframes scrollInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-260px * 4)); }
  }
}



    /* Reveal animations */

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.75s ease-out, transform 0.75s ease-out;
    }

    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive tweaks */

    @media (max-width: 960px) {
      .hero-grid,
      .services-inner,
      .process-inner,
      .work-grid,
      .about-inner,
      .contact-inner {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero {
        padding-top: 2.4rem;
      }

      .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .work-grid {
        gap: 1rem;
      }
    }

    @media (max-width: 640px) {
      section {
        padding-block: 2.6rem;
      }

      .hero-title {
        letter-spacing: 0.08em;
      }

      .process-steps {
        grid-template-columns: minmax(0, 1fr);
      }

      .hours-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .mini-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero-card {
        margin-top: 0.5rem;
      }
    }