/* ============================================================
   Mani J — UGC Creator site
   Design system pulled from her Canva media kit:
   sand/cream background, mocha-brown display serif,
   sage-green script accents, black nav, white photo frames.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Alex+Brush&family=Jost:wght@300;400;500;600;700&family=Courier+Prime:ital@0;1&display=swap');

:root{
  --sand:        #e7dbca;
  --sand-alt:    #ded0bc;
  --sand-deep:   #d6c6ae;
  --mocha:       #7a5838;
  --mocha-soft:  #cbb59a;
  --sage:        #2b3c22;
  --sage-soft:   #6c7d5c;
  --ink:         #1c1a17;
  --white:       #ffffff;
  --max-w: 1180px;
  --radius: 2px;
}

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

body{
  margin:0;
  font-family:'Jost', sans-serif;
  background: var(--sand);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* textured sand background used behind every section */
.texture-bg{
  position:relative;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 7px),
    linear-gradient(135deg, var(--sand) 46%, var(--sand-alt) 47%, var(--sand) 54%);
}

h1,h2,h3,h4{
  font-family:'Playfair Display', serif;
  margin:0 0 .4em;
  color: var(--mocha);
  font-weight:600;
  letter-spacing:.02em;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.script{
  font-family:'Alex Brush', cursive;
  color: var(--sage);
  font-size:2.6rem;
  line-height:1;
  display:inline-block;
}

.eyebrow{
  font-family:'Jost', sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  color: var(--sage);
  font-weight:600;
}

.quote-font{ font-family:'Courier Prime', monospace; }

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

/* ---------------- NAV ---------------- */
.site-nav{
  background: var(--ink);
  color:#f2ede3;
  position:sticky; top:0; z-index:50;
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 32px;
  gap: 20px;
}
.brand-mark{
  font-family:'Playfair Display', serif;
  font-size:1.35rem;
  letter-spacing:.14em;
  color:#f2ede3;
  white-space:nowrap;
}
.brand-mark span{ color: #cbb59a; }
.nav-links{
  display:flex; gap:28px; list-style:none; margin:0; padding:0;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  flex-wrap:wrap;
}
.nav-links a{
  opacity:.82; padding-bottom:3px; border-bottom:1px solid transparent;
  transition:.2s;
}
.nav-links a:hover, .nav-links a.active{
  opacity:1; border-color:#cbb59a; color:#f6e9d8;
}
.nav-social{ display:flex; gap:14px; align-items:center; }
.nav-social a{ opacity:.85; }
.nav-social a:hover{ opacity:1; }
.nav-social svg{ width:18px; height:18px; fill:#f2ede3; display:block; }

/* Hamburger button (hidden on desktop) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:26px; height:18px;
  background:none; border:none;
  cursor:pointer; padding:0;
  flex-shrink:0;
}
.nav-toggle span{
  display:block; width:100%; height:2px;
  background:#f2ede3; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav: hamburger visible, links hidden until toggled */
@media (max-width: 860px){
  .site-nav .wrap{
    flex-wrap:nowrap; padding:12px 16px; gap:12px;
    align-items:center;
  }
  .brand-mark{ font-size:1.2rem; }
  .nav-social{ gap:10px; }
  .nav-social svg{ width:16px; height:16px; }
  .nav-toggle{ display:flex; margin-left:auto; }

  .nav-links{
    display:none;
    position:absolute; left:0; right:0;
    top:100%;
    background:var(--ink);
    flex-direction:column; align-items:center;
    gap:0; padding:8px 0 14px;
    border-top:1px solid rgba(255,255,255,.12);
    z-index:200;
    width:100%;
    margin:0;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; text-align:center; }
  .nav-links li a{
    display:block; padding:12px 20px;
    font-size:.84rem; letter-spacing:.14em;
    border-bottom:none !important;
    opacity:.85;
  }
  .nav-links li a:hover,
  .nav-links li a.active{
    opacity:1; color:#f6e9d8;
    background:rgba(255,255,255,.06);
    border-bottom:none !important;
  }
}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 14px 30px;
  border: 1px solid var(--sage);
  color: var(--sage);
  font-family:'Jost', sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:600;
  background:transparent;
  border-radius: var(--radius);
  transition:.2s ease;
  box-shadow: 0 0 0 0 rgba(43,60,34,0);
}
.btn:hover{ background: var(--sage); color:#f6efe3; box-shadow: 0 6px 18px rgba(43,60,34,.25); }
.btn.dark{ border-color: var(--ink); color: var(--ink); }
.btn.dark:hover{ background: var(--ink); color:#fff; }
.btn.filled{ background: var(--sage); color:#f6efe3; }
.btn.filled:hover{ opacity:.88; }

/* ---------------- HERO ---------------- */
.hero{
  padding: 64px 0 90px;
  position:relative;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  align-items:center;
  gap: 40px;
}
.hero-visual{ position:relative; max-width:340px; }
.phone-frame{
  border: 10px solid var(--ink);
  border-radius: 34px;
  overflow:hidden;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.35);
  aspect-ratio: 240/508;
}
.phone-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-circle{
  position:absolute;
  right:-8%; bottom:-6%;
  width:46%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  border: 6px solid var(--sand);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.35);
}
.hero-circle img{ width:100%; height:100%; object-fit:cover; }

.hero-copy .eyebrow{ margin-bottom:10px; display:block; }
.hero-title{
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height:.98;
  margin-bottom:6px;
  color: var(--mocha-soft);
}
.hero-title strong{ display:block; color: var(--mocha); }
.hero-name{
  font-family:'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing:.22em;
  color: var(--ink);
  margin: 10px 0 26px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }

.trusted-strip{
  border-top: 1px solid rgba(122,88,56,.25);
  margin-top:56px; padding-top:30px;
}
.trusted-strip .eyebrow{ display:block; margin-bottom:16px; }
.logo-row{
  display:flex; flex-wrap:wrap; align-items:center; gap: 34px;
  opacity:.85;
}
.logo-row img{ height:34px; width:auto; object-fit:contain; }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ margin: 0 auto 20px; }
}

/* ---------------- SECTION HEADERS ---------------- */
.section{ padding: 80px 0; }
.section.alt{ background: var(--sand-alt); }
.section-head{ text-align:center; margin-bottom:48px; }
.section-head .script{ display:block; margin-bottom:4px; }
.section-head h2{ font-size: clamp(2rem,4vw,3rem); letter-spacing:.05em; }
.section-head p{ color: var(--sage-soft); max-width:560px; margin:14px auto 0; }

/* ---------------- WHY / BIO ---------------- */
.bio{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:center;
}
.bio-visual{ display:grid; grid-template-columns: .8fr 1.2fr; gap:18px; align-items:end; }
.bio-visual .phone-frame{ border-width:8px; border-radius:28px; }
.bio-photo{ border-radius:4px; overflow:hidden; box-shadow:0 20px 40px -18px rgba(0,0,0,.35); }
.bio-photo img{ width:100%; }
.bio-list{ list-style:none; margin: 18px 0 26px; padding:0; }
.bio-list li{
  padding: 9px 0 9px 22px; position:relative;
  font-size:1.02rem; letter-spacing:.03em; color: var(--mocha);
  border-bottom:1px solid rgba(122,88,56,.15);
}
.bio-list li::before{
  content:''; position:absolute; left:0; top:17px;
  width:7px; height:7px; border-radius:50%; background: var(--sage);
}
blockquote.pull{
  font-family:'Courier Prime', monospace;
  font-style:italic;
  color: var(--sage);
  font-size:1.05rem;
  line-height:1.6;
  border-left: 3px solid var(--sage);
  padding: 4px 0 4px 20px;
  margin: 22px 0 0;
}
@media (max-width: 900px){
  .bio{ grid-template-columns:1fr; }
  .bio-visual{ grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
}

/* ---------------- STATS ---------------- */
.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap: 28px; text-align:center; margin: 40px 0;
}
.stat-row .num{
  font-family:'Playfair Display',serif; font-size:2.6rem; color: var(--mocha); line-height:1;
}
.stat-row .label{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--sage-soft); margin-top:8px; display:block;
}

/* ---------------- PORTFOLIO GRID ---------------- */
.portfolio-category{ margin-bottom: 74px; }
.category-head{ text-align:center; margin-bottom: 30px; }
.category-head h3{ font-size: clamp(1.6rem,3.4vw,2.4rem); }
.category-head .script{ font-size:1.7rem; }
.thumb-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
.thumb{
  position:relative; border-radius:4px; overflow:hidden;
  background:#fff; padding:8px; box-shadow: 0 16px 34px -20px rgba(0,0,0,.4);
  aspect-ratio: 3/4.6;
}
.thumb img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.thumb video{
  width:100%; height:100%; object-fit:cover; border-radius:2px;
  display:block;
}
.thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.thumb .play span{
  width:52px; height:52px; border-radius:50%;
  background:rgba(28,26,23,.55);
  display:flex; align-items:center; justify-content:center;
}
.thumb .play svg{ width:18px; height:18px; fill:#fff; margin-left:3px; }
.coming-soon-badge{
  position:absolute; top:16px; left:16px;
  background: var(--ink); color:#f6efe3;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px; border-radius:2px;
  z-index:10;
}

/* Video thumb — no inner padding so video fills the frame */
.thumb.video-thumb{ padding:0; }
.thumb.video-thumb video{
  width:100%; height:100%;
  object-fit:cover; display:block;
  border-radius:2px;
}

@media (max-width: 760px){
  .thumb-row{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .thumb-row{ grid-template-columns: 1fr 1fr; gap:12px; }
}

/* ---------------- SERVICES ---------------- */
.services-layout{
  display:grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items:center;
}
.service-list{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0 30px;
  list-style:none; margin:0 0 28px; padding:0;
}
.service-list li{
  padding: 10px 0; border-bottom:1px solid rgba(122,88,56,.18);
  font-size:.98rem; letter-spacing:.05em; color: var(--mocha);
  text-transform:uppercase;
}
.service-notes{
  border: 1px solid var(--mocha-soft);
  padding: 22px 24px; border-radius:2px; margin-top: 18px;
}
.service-notes h4{ font-size:1rem; letter-spacing:.06em; }
.service-notes ul{ margin:10px 0 0; padding-left:18px; color: var(--sage); font-size:.92rem; line-height:1.7; }
.device-stack{ position:relative; min-height:360px; }
.device-laptop{
  position:absolute; right:0; top:0; width:70%;
  border-radius:8px; overflow:hidden; box-shadow:0 24px 50px -22px rgba(0,0,0,.4);
  border: 4px solid var(--ink);
}
.device-tablet{
  position:absolute; left:0; bottom:0; width:46%;
  border-radius:10px; overflow:hidden; box-shadow:0 20px 40px -18px rgba(0,0,0,.4);
  border: 4px solid var(--ink);
}
@media (max-width: 900px){
  .services-layout{ grid-template-columns:1fr; }
  .service-list{ grid-template-columns:1fr; }
  .device-stack{ min-height:280px; margin-top:20px; }
}

/* ---------------- PROCESS TIMELINE ---------------- */
.timeline{ max-width:760px; margin:0 auto; position:relative; padding-left: 34px; }
.timeline::before{
  content:''; position:absolute; left:6px; top:8px; bottom:8px; width:1px;
  background: var(--sage); opacity:.4;
}
.timeline-step{ position:relative; padding-bottom: 34px; }
.timeline-step:last-child{ padding-bottom:0; }
.timeline-step::before{
  content:''; position:absolute; left:-34px; top:6px;
  width:13px; height:13px; border-radius:50%; background: var(--sage);
  border: 3px solid var(--sand);
  box-shadow:0 0 0 1px var(--sage);
}
.timeline-step h4{
  font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; color: var(--mocha);
}
.timeline-step p{ margin:0; color: var(--ink); opacity:.82; line-height:1.6; }
.timeline-step .step-no{
  font-family:'Courier Prime',monospace; color: var(--sage-soft); font-size:.78rem; letter-spacing:.1em;
}

/* ---------------- RATES ---------------- */
.rate-table{ width:100%; border-collapse:collapse; max-width:720px; margin:0 auto; }
.rate-table tr{ border-bottom:1px solid rgba(122,88,56,.22); }
.rate-table td{ padding: 18px 8px; font-size:1.02rem; }
.rate-table td:first-child{ color: var(--mocha); letter-spacing:.05em; text-transform:uppercase; font-size:.92rem; }
.rate-table td:last-child{
  text-align:right; font-family:'Playfair Display',serif; font-size:1.5rem; color: var(--sage);
}
.rate-note{ text-align:center; max-width:560px; margin: 30px auto 0; color: var(--sage-soft); font-size:.92rem; }

.demo-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:26px; text-align:center; margin-top:48px;
}
.demo-grid .icon{ font-size:1.6rem; margin-bottom:8px; }
.demo-grid .label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--mocha); }
@media (max-width:700px){ .demo-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- BRAND LOGO CIRCLES ---------------- */
.brand-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:22px; max-width: 880px; margin: 0 auto;
}
.brand-circle{
  aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.35);
}
.brand-circle img{ width:100%; height:100%; object-fit:cover; }
.brand-circle.placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#fff; color: var(--mocha); font-family:'Playfair Display',serif;
  font-size:.85rem; letter-spacing:.05em; padding:10px;
}

/* ---------------- CONTACT ---------------- */
.contact-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
}
.contact-photo{ border-radius:4px; overflow:hidden; box-shadow:0 26px 55px -22px rgba(0,0,0,.4); }
.contact-photo img{ width:100%; }
.contact-methods{ list-style:none; margin: 26px 0; padding:0; }
.contact-methods li{ padding:14px 0; border-bottom:1px solid rgba(122,88,56,.2); display:flex; align-items:center; gap:14px; }
.contact-methods svg{ width:20px; height:20px; fill: var(--sage); flex-shrink:0; }
.contact-methods a{ font-size:1.05rem; letter-spacing:.02em; }
@media (max-width: 900px){ .contact-layout{ grid-template-columns:1fr; } .contact-photo{ order:-1; max-width:360px; margin:0 auto; } }

/* ---------------- CTA BAND ---------------- */
.cta-band{
  background: var(--ink); color:#f2ede3; text-align:center; padding: 70px 0;
}
.cta-band h2{ color:#f2ede3; }
.cta-band .script{ color:#cbb59a; }
.cta-band p{ color:#d8cdbd; max-width:480px; margin:14px auto 26px; }
.cta-band .btn{ border-color:#cbb59a; color:#f2ede3; }
.cta-band .btn:hover{ background:#cbb59a; color:var(--ink); }

/* ---------------- FOOTER ---------------- */
footer{ background: var(--ink); color:#c9c1b4; padding: 28px 0; }
footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.78rem; letter-spacing:.05em;
}
footer .foot-social{ display:flex; gap:16px; }
footer .foot-social svg{ width:16px; height:16px; fill:#c9c1b4; }
footer .foot-social a:hover svg{ fill:#fff; }

/* ---------------- PAGE HERO (inner pages) ---------------- */
.page-hero{ padding: 56px 0 20px; text-align:center; }
.page-hero .eyebrow{ display:block; margin-bottom:10px; }
.page-hero h1{ font-size: clamp(2.2rem,5vw,3.4rem); }

/* ============================================================
   MOBILE OVERRIDES — 375px / 390px / 414px
   ============================================================ */

@media (max-width: 600px){
  /* Tighter side padding on small phones */
  .wrap{ padding: 0 16px; }

  /* Hero */
  .hero{ padding: 36px 0 52px; }
  .hero .wrap{ gap: 24px; }
  .hero-visual{ max-width: 210px; margin: 0 auto 8px; }
  .hero-circle{ right:-10%; bottom:-4%; width:52%; border-width:4px; }
  .hero-title{ font-size: 2.3rem; }
  .hero-name{ font-size: 1.35rem; margin: 8px 0 18px; }
  .hero-actions{
    flex-direction: column; gap: 10px;
  }
  .hero-actions .btn{ width: 100%; justify-content: center; }

  /* Trusted strip */
  .trusted-strip{ margin-top: 36px; padding-top: 20px; }
  .logo-row{
    gap: 10px 16px;
    justify-content: center;
  }

  /* Section spacing */
  .section{ padding: 48px 0; }
  .cta-band{ padding: 48px 0; }
  .cta-band p{ font-size: .92rem; }
  .cta-band .btn{ display: block; width: 100%; max-width: 280px; margin: 0 auto; }

  /* Bio visual */
  .bio{ gap: 28px; }
  .bio-visual{ grid-template-columns: 90px 1fr; gap: 10px; }
  .bio-list li{ font-size: .95rem; padding: 8px 0 8px 18px; }
  blockquote.pull{ font-size: .95rem; }

  /* Stats */
  .stat-row{ gap: 14px; margin: 20px 0; }
  .stat-row .num{ font-size: 1.9rem; }
  .stat-row .label{ font-size: .68rem; }

  /* Services */
  .service-list{ grid-template-columns: 1fr; }
  .service-list li{ font-size: .92rem; }
  .device-stack{ min-height: 180px; }
  .service-notes{ padding: 16px 18px; }
  .service-notes ul{ font-size: .88rem; }

  /* Rate table — make it work on narrow screens */
  .rate-table{ font-size: .9rem; }
  .rate-table td{ padding: 12px 4px; }
  .rate-table td:first-child{ font-size: .84rem; }
  .rate-table td:last-child{ font-size: 1.2rem; }

  /* Demo grid */
  .demo-grid{ grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }

  /* Brand grid — 3 per row on mobile */
  .brand-grid{ grid-template-columns: repeat(3,1fr); gap: 12px; }

  /* Page hero */
  .page-hero{ padding: 36px 0 12px; }
  .page-hero h1{ font-size: 2rem; }

  /* Contact */
  .contact-photo{ order:-1; max-width: 260px; margin: 0 auto; }
  .contact-methods a{ font-size: .92rem; }
  .contact-methods li{ gap: 10px; padding: 11px 0; }
  .hero-actions.contact-actions{ flex-direction: column; }
  .hero-actions.contact-actions .btn{ width: 100%; justify-content: center; }

  /* Footer */
  footer .wrap{ flex-direction: column; align-items: center; text-align: center; gap: 14px; }

  /* Timeline */
  .timeline{ padding-left: 22px; }
  .timeline-step{ padding-bottom: 26px; }
  .timeline-step h4{ font-size: 1rem; }

  /* Script font scale */
  .script{ font-size: 2rem; }
  .section-head h2{ font-size: 1.8rem; }
}