:root{
  --bg:#f7f8f6;
  --paper:#ffffff;
  --ink:#12181b;
  --ink-soft:#4b5459;
  --teal:#2f5d62;
  --aqua:#8fd9d0;
  --amber:#c77b4f;
  --line:#d8dad3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--bg); color:var(--ink); font-family:'Newsreader', serif; font-size:18px; line-height:1.55; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;} }
h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.02em; line-height:1.08; }
.mono{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; }
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
section{position:relative;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
::selection{background:var(--aqua); color:var(--ink);}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* ---------- URDU / RTL ---------- */
body.lang-ur [data-en]{ font-family:'Noto Nastaliq Urdu', serif; line-height:2.1; letter-spacing:0; }
html[dir="rtl"] .nav-links{ flex-direction:row-reverse; }
html[dir="rtl"] .eyebrow::before{ order:2; }
html[dir="rtl"] .hero-cta, html[dir="rtl"] .foot-row, html[dir="rtl"] .filter-row{ flex-direction:row-reverse; }
html[dir="rtl"] .process-item{ grid-template-columns:1fr 60px; }
html[dir="rtl"] .process-num{ order:2; text-align:left; }

/* ---------- NAV ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(247,248,246,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
nav{ display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:16px 32px; gap:18px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:19px; }
.logo-mark{width:26px; height:26px; flex:none;}
.logo .dot{color:var(--amber);}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0; }
.nav-links a.active{color:var(--ink);}
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--teal); transition:width .3s ease; }
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:16px;}
.lang-toggle{display:flex; border:1px solid var(--line); font-family:'Space Grotesk', sans-serif; font-size:12px; font-weight:600;}
.lang-toggle button{background:none; border:none; padding:7px 12px; cursor:pointer; color:var(--ink-soft);}
.lang-toggle button.active{background:var(--ink); color:var(--paper);}
.btn{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14px; padding:11px 20px; border-radius:2px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink); transition:all .25s ease; cursor:pointer; background:none; white-space:nowrap; }
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--teal); border-color:var(--teal);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.btn-sm{padding:8px 14px; font-size:13px;}
.btn-wa{background:#1f6b4d; border-color:#1f6b4d; color:var(--paper);}
.btn-wa:hover{background:#184f39; border-color:#184f39;}
.mobile-toggle{display:none; background:none; border:1px solid var(--line); padding:8px 10px; cursor:pointer;}

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; filter:blur(6px); transform:translateY(18px); transition:opacity .8s ease, filter .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; filter:blur(0); transform:translateY(0); }

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{ padding:150px 0 70px; background:radial-gradient(circle at 85% 20%, rgba(143,217,208,0.3), transparent 45%), var(--bg); border-bottom:1px solid var(--line); }
.eyebrow{ color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--teal); flex:none;}
.page-hero h1{font-size:clamp(34px,5vw,58px);}
.page-hero p{color:var(--ink-soft); max-width:560px; margin-top:16px; font-size:18px;}
.crumb{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; display:block;}
.crumb a{color:var(--teal);}

/* ---------- MARQUEE ---------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; padding:16px 0; background:var(--paper); }
.marquee-track{display:inline-block; animation:scroll-left 26s linear infinite;}
.marquee-track span{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:500; letter-spacing:0.06em; margin-right:40px; color:var(--ink-soft); }
.marquee-track span em{color:var(--amber); font-style:normal;}
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- SECTION HEAD ---------- */
.section-head{max-width:640px; margin-bottom:56px;}
.section-head .mono{color:var(--teal); margin-bottom:14px; display:block;}
.section-head h2{font-size:clamp(30px,4vw,44px);}
.section-head p{color:var(--ink-soft); margin-top:14px; font-size:17px;}

/* ---------- PRODUCT GRID (real photos) ---------- */
.filter-row{display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap;}
.filter-btn{ font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; padding:9px 16px; border:1px solid var(--line); background:var(--paper); cursor:pointer; transition:all .25s ease; }
.filter-btn:hover{border-color:var(--teal); color:var(--teal);}
.filter-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.product-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.product-card{ background:var(--paper); border:1px solid var(--line); overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; position:relative; }
.product-card.hide{display:none;}
.product-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px rgba(18,24,27,0.1); }
.product-photo{height:190px; overflow:hidden; position:relative; background:#eee;}
.product-photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.product-card:hover .product-photo img{transform:scale(1.06);}
.wish-btn{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.9); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink-soft); transition:all .2s ease; }
.wish-btn.active{color:#c14b4b;}
.product-body{padding:16px 18px 20px;}
.product-tag{font-size:11px; color:var(--amber); display:block; margin-bottom:6px;}
.product-name{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15.5px;}
.product-meta{color:var(--ink-soft); font-size:12.5px; margin:4px 0 10px;}
.product-price{font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--teal);}

/* ---------- PHOTO STRIP (about/index) ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:150px; gap:10px; }
.photo-grid .p-item:nth-child(3n+1){grid-row:span 2;}
.p-item{ position:relative; overflow:hidden; border:1px solid var(--line); }
.p-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.p-item:hover img{transform:scale(1.07);}
.p-item .p-caption{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600;
  color:#fff; background:linear-gradient(to top, rgba(18,24,27,0.75), transparent); opacity:0; transform:translateY(8px); transition:all .4s ease; }
.p-item:hover .p-caption{opacity:1; transform:translateY(0);}

/* ---------- OFFERINGS ---------- */
.offer-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
.offer-card{background:var(--paper); transition:background .35s ease;}
.offer-card:hover{background:#fbfdfa;}
.offer-photo{height:140px; overflow:hidden;}
.offer-photo img{width:100%; height:100%; object-fit:cover;}
.offer-body{padding:36px 40px 42px;}
.offer-icon{width:46px; height:46px; margin-bottom:22px;}
.offer-card h3{font-size:24px; margin-bottom:12px;}
.offer-card p{color:var(--ink-soft); font-size:15.5px; margin-bottom:18px;}
.offer-list{list-style:none; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);}
.offer-list li{padding:6px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between;}
.offer-list li:first-child{border-top:none;}

/* ---------- STATS ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.stat-card{background:var(--paper); padding:30px 24px;}
.stat-num{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:38px; color:var(--teal);}
.stat-label{font-size:12.5px; color:var(--ink-soft); margin-top:6px;}

/* ---------- TIMELINE (about) ---------- */
.timeline{border-top:1px solid var(--line);}
.tl-item{display:grid; grid-template-columns:110px 1fr; gap:26px; padding:26px 0; border-bottom:1px solid var(--line);}
.tl-year{font-family:'IBM Plex Mono', monospace; color:var(--amber); font-size:14px;}
.tl-item h4{font-size:19px; margin-bottom:6px;}
.tl-item p{color:var(--ink-soft); font-size:15px;}

/* ---------- LOCATIONS (contact) ---------- */
.loc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.loc-card{background:var(--paper); padding:32px 34px;}
.loc-city{font-size:21px; margin-bottom:6px;}
.loc-addr{color:var(--ink-soft); font-size:14.5px; margin-bottom:14px;}
.loc-meta{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft); line-height:1.9;}
.loc-badge{display:inline-block; font-size:10.5px; color:var(--teal); border:1px solid var(--teal); padding:3px 8px; margin-bottom:12px;}

/* ---------- FORM ---------- */
.form-box{background:var(--paper); border:1px solid var(--line); padding:38px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; margin-bottom:6px;}
.form-row input, .form-row select, .form-row textarea{ width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--bg); font-family:'Newsreader', serif; font-size:15px; color:var(--ink); }
.form-row textarea{min-height:110px; resize:vertical;}
.form-success{display:none; margin-top:14px; font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--teal);}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:16.5px; font-weight:500; color:var(--ink); }
.faq-q .plus{transition:transform .3s ease; color:var(--teal); font-size:20px;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-item.open .faq-a{max-height:220px;}
.faq-a p{padding:0 4px 20px; color:var(--ink-soft); font-size:15px; max-width:600px;}

/* ---------- TESTIMONIALS ---------- */
.testi-carousel{position:relative; max-width:760px; margin:0 auto; min-height:200px;}
.testi-slide{ position:absolute; inset:0; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; pointer-events:none; text-align:center; }
.testi-slide.active{opacity:1; transform:translateY(0); pointer-events:auto;}
.testi-slide p{font-size:21px; line-height:1.4; margin-bottom:24px;}
.testi-who{display:flex; align-items:center; justify-content:center; gap:12px;}
.avatar{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--paper); background:var(--teal);}
.testi-name{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14px;}
.testi-role{color:var(--ink-soft); font-size:12.5px;}
.testi-dots{display:flex; gap:8px; justify-content:center; margin-top:32px;}
.testi-dots button{width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:background .3s ease;}
.testi-dots button.active{background:var(--teal);}

/* ---------- NEWSLETTER ---------- */
.news-box{ background:var(--teal); color:var(--bg); padding:52px; display:flex; justify-content:space-between; align-items:center; gap:36px; flex-wrap:wrap;
  background-image:radial-gradient(circle at 15% 20%, rgba(143,217,208,0.25), transparent 55%); }
.news-box h3{color:var(--paper); font-size:24px; margin-bottom:8px;}
.news-box p{color:#d7e6e4; font-size:14.5px;}
.news-form{display:flex; gap:10px; flex-wrap:wrap;}
.news-form input{ padding:13px 16px; border:1px solid rgba(247,248,246,0.4); background:rgba(247,248,246,0.06); color:var(--bg); font-family:'IBM Plex Mono', monospace; font-size:13px; min-width:230px; }
.news-form input::placeholder{color:#c6d3d1;}
.news-form .btn-primary{background:var(--aqua); color:var(--ink); border-color:var(--aqua);}
.news-form .btn-primary:hover{background:var(--paper); border-color:var(--paper);}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:50px 0 30px; background:var(--paper);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px;}
.foot-col h5{font-family:'Space Grotesk', sans-serif; font-size:13px; margin-bottom:14px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase;}
.foot-col p{color:var(--ink-soft); font-size:14px; margin-top:10px; max-width:220px;}
.foot-col a{display:block; color:var(--ink-soft); font-size:14.5px; margin-bottom:10px;}
.foot-col a:hover{color:var(--teal);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid var(--line); padding-top:24px;}
.foot-row .mono{color:var(--ink-soft);}

/* ---------- STICKY CTA ---------- */
#stickyCta{ position:fixed; bottom:26px; right:26px; z-index:90; opacity:0; transform:translateY(16px) scale(0.96); pointer-events:none; transition:all .4s cubic-bezier(.2,.8,.2,1); box-shadow:0 16px 34px rgba(18,24,27,0.22); }
#stickyCta.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
html[dir="rtl"] #stickyCta{right:auto; left:26px;}

@media (max-width: 900px){
  .nav-links{display:none;}
  .mobile-toggle{display:block;}
  .offer-grid, .testi-carousel, .loc-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .photo-grid{grid-template-columns:repeat(2,1fr);}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .tl-item{grid-template-columns:1fr;}
}