@import url("./font/font.css");

:root{
    --ink:#1d2020;
    --ink-soft:#2A1720;
    --yellow: #fbde23;
    --lime:#D4FF3D;
    --cream:#FFF6ED;
    --rose:#E8B4C8;
    --line: rgba(255,246,237,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    background-image: url(../images/problem.jpg);
    color:var(--cream);
    font-family: "Metric", sans-serif;
    overflow-x:hidden;
    cursor:default;
  }
  ::selection{background:var(--yellow);color:var(--ink);}
  h1,h2,h3,.serif{
    font-family:'Fraunces', serif;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
  }

  /* ---------- cursor blob ---------- */
  .blob{
    position:fixed;
    width:520px;height:520px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--yellow), transparent 70%);
    filter:blur(60px);
    opacity:0.35;
    pointer-events:none;
    z-index:0;
    transition:transform 0.25s ease-out;
    top:-260px;left:-260px;
  }

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 5vw;
    background:linear-gradient(to bottom, rgba(23,13,18,0.92), transparent);
    backdrop-filter:blur(2px);
  }
  .hero-eyebrow h1{
    font-family:'Fraunces', serif;
  }
  .logo{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:22px;
    letter-spacing:0.5px;
  }
  .logo span{color:var(--yellow);}
  nav{display:flex;align-items:center;gap:36px;}
  nav a{
    font-size:14px;
    font-weight:500;
    letter-spacing:0.3px;
    position:relative;
    padding-bottom:2px;
  }
  nav a:not(.cta)::after{
    content:'';
    position:absolute;left:0;bottom:-2px;
    width:0;height:1px;
    background:var(--yellow);
    transition:width 0.25s ease;
  }
  nav a:not(.cta):hover::after{width:100%;}
  nav a.cta{
    background:var(--yellow);
    color:var(--ink);
    padding:11px 22px;
    border-radius:100px;
    font-weight:500;
    transition:transform 0.2s ease, background 0.2s ease;
  }
  nav a.cta:hover{background:var(--lime); transform:translateY(-2px);}
  .nav-toggle{display:none;}
/*----------------preloader-------------------*/

.preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: #000000;
}
.preloader img {
    position: absolute;
    left: 53%;
    top: 40%;
    height: 100px;
    width: 100px;
    margin-left: -95px;
}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:85svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 5vw;
    z-index:1;
    overflow:hidden;

  height: 100vh;
  width: 100%;
}

.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
  z-index: 2; 
}
.hero-content {
   position: relative;
  z-index: 3; 
  color: #fff;
}
  .hero-eyebrow{
    display:flex;align-items:center;gap:10px;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--rose);
    margin-bottom:28px;
  }
  .hero-eyebrow .dot{
    width:7px;height:7px;border-radius:50%;background:var(--lime);
    box-shadow:0 0 0 0 rgba(212,255,61,0.6);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(212,255,61,0.5);}
    70%{box-shadow:0 0 0 10px rgba(212,255,61,0);}
    100%{box-shadow:0 0 0 0 rgba(212,255,61,0);}
  }
  .hero h1{
    font-size:clamp(46px, 9vw, 128px);
    line-height:0.94;
    font-weight:600;
    max-width:16ch;
  }
  .hero h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--yellow);
  }
  .hero-sub{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-top:44px;
    flex-wrap:wrap;
  }
  .hero-sub p{
    max-width:65ch;
    font-size:30px;
    line-height:1.6;
    color:rgba(255,246,237,0.75);
  }
  .hero-btns{display:flex;gap:16px;align-items:center;flex-shrink:0;}
  .btn-primary{
    background:var(--yellow);
    color:var(--ink);
    padding:17px 30px;
    border-radius:100px;
    font-weight:500;
    font-size:15px;
    display:inline-block;
    transition:transform 0.25s ease, background 0.25s ease;
  }
  .btn-primary:hover{background:var(--lime); transform:translateY(-3px) rotate(-1deg);}
  .btn-ghost{
    width:56px;height:56px;
    border:1px solid var(--line);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:border-color 0.25s ease, transform 0.25s ease;
  }
  .btn-ghost:hover{border-color:var(--yellow); transform:rotate(45deg);}

  .scroll-cue{
    position:absolute;
    bottom:28px;right:5vw;
    writing-mode:vertical-rl;
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,246,237,0.45);
    display:flex;align-items:center;gap:10px;
  }
  .scroll-cue::after{
    content:'';
    width:1px;height:50px;
    background:linear-gradient(to bottom, var(--yellow), transparent);
    animation:drip 1.8s infinite;
  }
  @keyframes drip{
    0%{transform:scaleY(0); transform-origin:top;}
    50%{transform:scaleY(1); transform-origin:top;}
    50.1%{transform-origin:bottom;}
    100%{transform:scaleY(0); transform-origin:bottom;}
  }

  /* ---------- marquee ribbon (signature) ---------- */
  .ribbon-wrap{
    position:relative;
    padding:22px 0;
    background:var(--yellow);
    color:var(--ink);
    transform:rotate(-1.6deg);
    margin:70px 0;
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
    z-index:2;
  }
  .ribbon{
    display:flex;
    white-space:nowrap;
    animation:scroll-left 26s linear infinite;
    width:max-content;
  }
  .ribbon span{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-style:italic;
    font-size:26px;
    padding:0 28px;
    display:flex;
    align-items:center;
    gap:28px;
  }
  @keyframes scroll-left{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ---------- client logo marquee ---------- */
  .clients{
    padding:40px 0 90px;
    position:relative;
    z-index:1;
  }
  .clients-label{
    text-align:center;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:rgba(255,246,237,0.4);
    margin-bottom:34px;
  }
  .logo-track{
    display:flex;
    width:max-content;
    animation:scroll-left 34s linear infinite;
    gap:70px;
    align-items:center;
  }
  .logo-track span{
    font-family:'Fraunces', serif;
    font-size:24px;
    font-weight:600;
    color:rgba(255,246,237,0.28);
    white-space:nowrap;
    letter-spacing:0.5px;
  }
.content-image
{
    width:75px;
}
  section{position:relative; z-index:1;}
  .section-pad{padding:120px 5vw;}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:64px;
    flex-wrap:wrap;
  }
  .eyebrow{
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--yellow);
    margin-bottom:14px;
    display:block;
  }
  .section-head h2{
    font-size:clamp(34px, 4.5vw, 58px);
    font-weight:600;
    max-width:14ch;
  }
  .section-head p{
    max-width:32ch;
    color:rgba(255,246,237,0.65);
    font-size:15px;
    line-height:1.6;
  }
  #work
  {
    padding-top: 30px;
  }
  /*--------------our story ---------------------*/


  /* ---------- portfolio ---------- */
  .work-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:50px;
  }
  .work-card{
    position:relative;
    aspect-ratio:4/5;
    border-radius:18px;
    overflow:hidden;
    background:var(--ink-soft);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:26px;
    isolation:isolate;
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1);
  }
  .work-card::before{
    content:'';
    position:absolute; inset:0;
    background:var(--bg, linear-gradient(135deg, var(--yellow), var(--ink)));
    opacity:0.9;
    z-index:-1;
    transition:transform 0.5s ease;
  }
  .work-card:hover{transform:translateY(-8px);}
  .work-card:hover::before{transform:scale(1.08);}
  .work-tag{
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:0.8;
    margin-bottom:8px;
  }
  .work-card h3{
    font-size:26px;
    font-weight:600;
  }
  .work-card.tall{grid-row:span 2; aspect-ratio:auto;}

  /* ---------- services ---------- */
  .services{background:var(--cream); color:var(--ink);}
  .service-row{
    display:grid;
    grid-template-columns:90px 1fr 1fr;
    gap:24px;
    align-items:center;
    padding:34px 0;
    border-top:1px solid rgba(23,13,18,0.12);
    transition:padding-left 0.3s ease;
  }
  .service-row:last-child{border-bottom:1px solid rgba(23,13,18,0.12);}
  .service-row:hover{padding-left:14px; background:rgba(255,61,127,0.06);}
  .service-num{
    font-family:'Fraunces', serif;
    font-size:16px;
    font-weight:600;
  }
  .service-row h3{
    font-size:clamp(24px, 3vw, 36px);
    font-weight:600;
  }
  .service-row p{
    color:rgba(23,13,18,0.65);
    font-size:18px;
    line-height:1.6;
  }

  /* ---------- team ---------- */
  .team-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:22px;
  }
  .team-card{
    text-align:center;
  }
  .team-avatar{
    aspect-ratio:1;
    border-radius:50%;
    background:linear-gradient(160deg, var(--yellow), var(--ink-soft));
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fraunces', serif;
    font-size:34px;
    font-weight:600;
    position:relative;
    overflow:hidden;
    transition:transform 0.3s ease;
    background-image: url(https://t3.ftcdn.net/jpg/03/76/78/26/360_F_376782614_IzSx0h5hlyuQz8UtGMl3W996OGXN5m9D.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .team-card:hover .team-avatar{transform:scale(1.05) rotate(-3deg);}
  .team-card h4{font-size:17px; font-weight:600; margin-bottom:4px;}
  .team-card span{font-size:13px; color:rgba(255,246,237,0.5);}
  .grid-2
  {
    grid-template-columns: 75% 25% !important;
  }
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

  /* ---------- quote ---------- */
  .quote-section{
    padding:140px 5vw;
    text-align:center;
    position:relative;
  }
  .quote-mark{
    font-family:'Fraunces', serif;
    font-size:110px;
    color:var(--yellow);
    line-height:0.5;
    opacity:0.6;
  }
  blockquote{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(24px, 3.4vw, 42px);
    line-height:1.35;
    max-width:20ch;
    margin:20px auto 34px;
  }
  .quote-attr{font-size:14px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,246,237,0.55);}
.team-card:hover img {
  transform: scale(1.03);
}
  /* ---------- CTA band ---------- */
  .cta-band{
    background:var(--yellow);
    color:var(--ink);
    padding:110px 5vw;
    text-align:center;
    border-radius:36px;
    margin:0 5vw 40px;
  }
  .cta-band h2{
    font-size:clamp(32px, 6vw, 72px);
    font-weight:600;
    max-width:16ch;
    margin:0 auto 34px;
  }
  .cta-band .btn-primary{
    background:var(--ink);
    color:var(--cream);
  }
  .cta-band .btn-primary:hover{background:var(--ink-soft);}

  /* ---------- footer ---------- */
  footer{padding:80px 5vw 40px;}
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr repeat(3, 0.8fr);
    gap:40px;
    padding-bottom:60px;
    border-bottom:1px solid var(--line);
  }
  .footer-top h3{font-size:26px; margin-bottom:12px;}
  .footer-top p{color:rgba(255,246,237,0.55); font-size:20px; max-width:30ch;}
  .footer-col h5{
    font-size:20px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:rgba(255,246,237,0.45);
    margin-bottom:18px;
  }
  .footer-col a{
    display:block;
    font-size:15px;
    padding:6px 0;
    color:rgba(255,246,237,0.8);
    transition:color 0.2s ease, transform 0.2s ease;
  }
  .footer-col a:hover{color:var(--yellow); transform:translateX(4px);}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:28px;
    font-size:13px;
    color:rgba(255,246,237,0.4);
    flex-wrap:wrap;
    gap:14px;
  }
  .footer-tagline{
    font-family:'Fraunces', serif;
    font-style:italic;
    color:var(--rose);
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .work-grid{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:repeat(3,1fr);}
    .footer-top{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:680px){
    nav{
      position:fixed; top:70px; left:0; right:0;
      flex-direction:column;
      background:var(--ink);
      padding:20px 5vw 30px;
      gap:18px;
      border-bottom:1px solid var(--line);
      transform:translateY(-130%);
      transition:transform 0.3s ease;
    }
    nav.open{transform:translateY(0);}
    .nav-toggle{
      display:flex;
      flex-direction:column;
      gap:5px;
      background:none;
      border:none;
      cursor:pointer;
      z-index:101;
    }
    .nav-toggle span{width:24px;height:2px;background:var(--cream);}
    .work-grid{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:repeat(2,1fr);}
    .footer-top{grid-template-columns:1fr;}
    .service-row{grid-template-columns:50px 1fr; row-gap:10px;}
    .service-row p{grid-column:1/-1;}
    .hero-sub{flex-direction:column; align-items:flex-start;}
  }
  /* Work Card */
  .work-card {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.work-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.work-video.default {
  opacity: 1;
  z-index: 1;
}

.work-video.hover {
  opacity: 0;
  z-index: 2;
}

.work-card:hover .work-video.default {
  opacity: 0;
}

.work-card:hover .work-video.hover {
  opacity: 1;
}

/* keep text above videos */
.work-tag,
.work-card h3 {
  position: relative;
  z-index: 3;
}

/* Newsletter*/
.newsletter-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
}

.newsletter-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.newsletter-inner .eyebrow {
  display: inline-block;
}

.newsletter-inner h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
}

.newsletter-inner p {
  margin: 0;
  opacity: 0.7;
  max-width: 460px;
}

.newsletter-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-top: 10px;
}

.newsletter-input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.newsletter-btn {
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #0a0a0a;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}

.newsletter-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.newsletter-note {
  font-size: 13px;
  opacity: 0.45;
  margin-top: 4px;
}

@media (max-width: 520px) {
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-btn {
    width: 100%;
  }
}
/***********Follow us on Instagram-------------------*/
.follow-section{
    padding: 56px 0 0;
    overflow: hidden;
  }
 
  .follow-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 24px;
    padding: 0 clamp(20px, 4vw, 56px);
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
 
  .eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    color: var(--yellow);
    font-weight:500;
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .eyebrow::before{
    content:"";
    width: 22px;
    height: 2px;
    background: var(--yellow);
    display:inline-block;
  }
 
  .handle{
    font-weight: 400;
    color: var(--yellow);
    font-size: clamp(34px, 6vw, 74px);
    line-height: 0.92;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
  }
 
  .follow-btn{
    appearance:none;
    background: transparent;
    border: 1.5px solid var(--yellow);
    color: var(--yellow);
    font-weight:700;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 999px;
    cursor:pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .12s ease;
    margin-bottom: 6px;
  }
  .follow-btn:hover{
    background: var(--yellow);
    color:#fff;
    transform: translateY(-1px);
  }
  .follow-btn:focus-visible{
    outline: 3px solid var(--yellow-deep);
    outline-offset: 3px;
  }
 
  .gallery-wrap{
    position: relative;
  }
 
  .gallery{
    display:flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0 4px;
    scrollbar-width: thin;
  }
  .gallery::-webkit-scrollbar{ height: 8px; }
  .gallery::-webkit-scrollbar-track{ background: #f2eef1; }
  .gallery::-webkit-scrollbar-thumb{ background: var(--yellow); border-radius: 999px; }
 
  .card{
    position: relative;
    flex: 0 0 auto;
    width: clamp(220px, 22vw, 305px);
    aspect-ratio: 3.5 / 4.4;
    overflow: hidden;
    scroll-snap-align: start;
    background: #f4f0f2;
  }
  .card img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  }
  .card::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(238,28,119,0) 55%, rgba(196,18,95,.55) 100%);
    opacity:0;
    transition: opacity .35s ease;
  }
  .card:hover img{ transform: scale(1.06); }
  .card:hover::after{ opacity:1; }
 
  .card .tag{
    position:absolute;
    left:16px; bottom:14px;
    color:#fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size: 12px;
    letter-spacing:.06em;
    text-transform: uppercase;
    opacity:0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .card:hover .tag{ opacity:1; transform: translateY(0); }
 
  .nav-arrow{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:44px; height:44px;
    border-radius:50%;
    border:1px solid var(--hairline);
    background: rgba(255,255,255,.92);
    color: var(--ink);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index: 2;
    box-shadow: 0 6px 18px rgba(23,18,26,.08);
    transition: background .15s ease, color .15s ease;
  }
  .nav-arrow:hover{ background: var(--yellow); color:#fff; border-color: var(--yellow); }
  .nav-arrow.left{ left: 14px; }
  .nav-arrow.right{ right: 14px; }
  @media (max-width: 640px){ .nav-arrow{ display:none; } }
 
  .gallery-pad{ padding-bottom: 26px; }
 
  @media (prefers-reduced-motion: reduce){
    .card img, .card::after, .card .tag, .follow-btn{ transition: none; }
  }