:root{
  --brand:#ff6b00;
  --brand2:#0f172a;
  --bg:#fffaf5;
  --text:#0b1324;
  --muted:#475569;
  --card:#ffffff;
  --ring: rgba(255,107,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.navbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid #eaeaea;
}
.navbar .inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brand2);font-weight:700}
.brand .logo{width:36px;height:36px;border-radius:10px;background:var(--brand);display:grid;place-items:center;color:white;font-weight:800;box-shadow:0 6px 24px var(--ring)}
.brand-logo{
  width:40px;
  height:40px;
  object-fit:contain;   /* keeps proportions */
  border-radius:10px;   /* soften corners; use 50% for a circle */
  background:#fff;      /* keep if your JPG has no transparent bg and you want a white tile */
  padding:4px;          /* reduce/remove if you want it larger */
  box-shadow:0 6px 24px var(--ring);
}

.nav a{color:var(--brand2);text-decoration:none;font-weight:600;margin:0 10px}
.nav a:hover{color:var(--brand)}
.btn{background:var(--brand); border:none; color:white; font-weight:700;padding:12px 16px; border-radius:14px; cursor:pointer;box-shadow:0 8px 24px var(--ring); text-decoration:none; display:inline-block}
.btn.outline{background:transparent;color:var(--brand);border:2px solid var(--brand)}
/* HERO (with big Mo Prodwi logo watermark) */
/* HERO with visible logo watermark */
.hero{
  background: linear-gradient(180deg, #fff2e8, #ffffff);
  border-bottom: 1px solid #f0e7df;
  position: relative;   /* enables the ::before position */
  overflow: hidden;
}

/* ensure the content stays above the watermark */
.hero .wrap{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  position: relative;
  z-index: 1;           /* <-- key */
}

/* the big logo */
.hero::before{
  content: "";
  position: absolute;
  left: 4%;
  top: 8%;
  width: 600px;         /* bigger to be obvious */
  height: 600px;
  background: url("assets/logo.jpg") center/contain no-repeat;
  opacity: 0.20;        /* higher so you can see it now */
  pointer-events: none;
  z-index: 0;           /* sits behind .wrap */
}

/* Typography & panel (unchanged) */
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.hero p.lead{font-size:18px;color:var(--muted);margin:0 0 16px}
.hero .panel{background:var(--card); border-radius:18px; padding:16px; border:1px solid #eee;box-shadow:0 6px 24px rgba(0,0,0,.04)}

@media (max-width: 900px){
  .hero::before{ width:360px; height:360px; top:6%; left:3%; }
}


.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.card{background:var(--card); border:1px solid #eee; border-radius:18px; overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.05)}
/* Make listing photos show fully, keep natural ratio */
.card img{
  width: 100%;
  height: auto;      /* key line: no fixed height */
  display: block;
  object-fit: initial; /* or remove this line if it exists */
}
/* Sell page: "What we do" image */
/* Sell page: two-column layout for text + image */
.sell-row{
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 16px 0;
}

/* 60% text, 40% image on desktop */
.sell-col{ flex: 1 1 0; }           /* text */
.sell-col-img{ flex: 0 0 40%; }     /* image column fixed to ~40% */

.sell-what-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Mobile: stack them */
@media (max-width: 900px){
  .sell-row{
    flex-direction: column;
  }
  .sell-col-img{
    flex-basis: auto;   /* ignore 40% on small screens */
  }
}
/* Contact icons and brand colors */
.icon-img{
  width:22px; height:22px; object-fit:contain;
  vertical-align:-5px; margin-right:8px;
}

/* Buttons */
.btn.whatsapp{ background:#25D366; color:#fff; border-color:#25D366; }
.btn.whatsapp:hover{ filter:brightness(0.95); }

.btn.outline.instagram{ border-color:#E1306C; color:#E1306C; }
.btn.outline.instagram:hover{ background:#E1306C; color:#fff; }

.btn.outline.facebook{ border-color:#1877F2; color:#1877F2; }
.btn.outline.facebook:hover{ background:#1877F2; color:#fff; }

.btn.outline.tiktok{ border-color:#000; color:#000; }
.btn.outline.tiktok:hover{ background:#000; color:#fff; }

/* Subtle card accents */
.contact-card{ border:1px solid #eee; }
.contact-card.whatsapp{ border-color:rgba(37,211,102,.35); }
.contact-card.instagram{ border-color:rgba(225,48,108,.35); }
.contact-card.facebook{ border-color:rgba(24,119,242,.35); }
.contact-card.tiktok{ border-color:rgba(0,0,0,.25); }
.cat-list{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:18px 0 10px;
}
.chip{
  border:1px solid #e2e8f0; background:#fff;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  font-weight:600; color:#0f172a;
}
.chip:hover{ border-color: var(--brand); color: var(--brand); }
.chip.active{ background:#fff7ed; border-color:#ffedd5; color: var(--brand); }

.card .pad{padding:14px}
.card h3{margin:0 0 6px;font-size:18px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.badge{font-size:12px;background:#f1f5f9;color:#0f172a;padding:4px 8px;border-radius:999px;border:1px solid #e2e8f0}
.section{padding:36px 24px}
.section h2{margin-top:0}
footer{margin-top:40px;border-top:1px solid #eee;background:white}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
footer a{color:var(--brand2);text-decoration:none}
footer a:hover{color:var(--brand)}
.notice{padding:12px 16px;border-radius:12px;background:#fff7ed;border:1px solid #ffedd5}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;padding:2px 6px;border-radius:6px;border:1px solid #e5e7eb;background:white}
.form label{font-weight:700;display:block;margin:.5rem 0 .25rem}
.form input,.form textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid #e5e7eb}
.faq details{background:white;border:1px solid #e5e7eb;border-radius:12px;padding:12px 16px}
.faq details+details{margin-top:10px}
.faq summary{font-weight:700;cursor:pointer}
.small{font-size:14px;color:var(--muted)}
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 620px){ .grid{grid-template-columns:1fr} }
.nav a.active{
  color: var(--brand);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.badge-featured{
  display:inline-block;
  margin-top:8px;
  padding:4px 8px;
  font-size:12px;
  font-weight:700;
  color:#b45309;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:999px;
}
.subnote{
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.subnote a{ color: var(--brand2); text-decoration: underline; }
.subnote a:hover{ color: var(--brand); }
/* Gold highlight for featured cards */
.card.featured{
  border: 2px solid #d4af37;      /* gold border */
  box-shadow: 0 10px 28px rgba(212,175,55,.25);
  position: relative;
}

/* Optional: small gold badge */
.card.featured::before{
  content: "Featured";
  position: absolute; top:12px; left:12px;
  background: #d4af37; color:#111; font-weight:700;
  font-size:12px; padding:4px 8px; border-radius:999px;
}
/* WhatsApp-styled number link inside headings */
.call-link{
  color:#25D366;               /* WhatsApp green */
  text-decoration:none;
  font-weight:800;
  border-bottom:2px solid rgba(37,211,102,.25);
  padding-bottom:1px;
}
.call-link:hover{
  color:#1fb457;
  border-bottom-color: rgba(31,180,87,.5);
}
.purchase-cta{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  background:#fff; border:1px solid #eee; border-radius:14px;
  padding:12px 14px; margin:8px 0 16px; box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.purchase-cta .hint{ font-weight:700; margin-right:4px; }
.purchase-cta .mini-hint{ color:var(--muted); font-size:13px; }