/* ========================================================================
   HOMEPAGE SECTIONS
   ---------------------------------------------------------------------
   About, Founders cards, Services, Process, Design Approach,
   Gold banner, Clients logos, Contact + form, SEO strip, Footer.
   ===================================================================== */


/* ── ABOUT SECTION — text + images ─────────────────────────── */
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;}
.about-visual{position:relative;height:580px;}
.av-main{position:absolute;top:0;left:0;right:80px;bottom:80px;overflow:hidden;}
.av-sub{
  position:absolute;bottom:0;right:0;
  width:54%;height:52%;overflow:hidden;
  border:8px solid var(--bg);box-shadow:var(--shadow2);
}
.av-badge{
  position:absolute;top:32px;right:64px;z-index:4;
  width:96px;height:96px;
  background:var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.av-badge b{font-family:'Italiana',serif;font-size:32px;color:#0C0A07;line-height:1;}
.av-badge small{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#0C0A07;margin-top:2px;}

/* ── FOUNDER CARDS — Manoj & Axay ki photos aur naam ───────── */


.fc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s ease;
}
.fc:hover::before{transform:scaleY(1);}

.fc strong{display:block;font-family:'Italiana',serif;font-size:17px;color:var(--text);}
.fc span{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-top:4px;display:block;}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}

/* ── ABOUT TAGS — Architecture, Interior Design... wale pills ──── */
.atag{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  padding:6px 14px;border:1px solid var(--border2);color:var(--text2);
  border-radius:30px;transition:all .3s;
}
.atag:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-bg);}

/* ── SERVICES CARDS ────────────────────────────────────────── */
.srv-head{
  display:grid;grid-template-columns:1fr 1fr;
  gap:40px;align-items:end;margin-bottom:60px;
}
.srv-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
}
.srv-card{
  background:var(--surface);padding:50px 40px;
  position:relative;overflow:hidden;
  transition:background .35s;
}
.srv-card::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--red),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease;
}
.srv-card:hover::after{transform:scaleX(1);}
.srv-card:hover{background:var(--bg2);}
.srv-no{
  font-family:'Italiana',serif;font-size:64px;
  color:var(--border);line-height:1;
  position:absolute;top:24px;right:28px;
  transition:color .3s;
}
.srv-card:hover .srv-no{color:var(--gold-bg);}
.srv-ico{font-size:32px;margin-bottom:22px;}
.srv-name{font-family:'Italiana',serif;font-size:26px;color:var(--text);margin-bottom:14px;}
.srv-body{font-size:13px;line-height:1.9;color:var(--text2);}
.srv-lnk{
  display:inline-flex;align-items:center;gap:8px;
  font-size:9px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);margin-top:26px;transition:gap .3s;
}
.srv-lnk:hover{gap:14px;}

/* ── PROCESS STEPS ─────────────────────────────────────────── */
.proc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border:1px solid var(--border);margin-top:56px;
}
.proc{
  padding:44px 32px;border-right:1px solid var(--border);
  position:relative;overflow:hidden;transition:background .3s;
}
.proc:last-child{border-right:none;}
.proc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--red),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease;
}
.proc:hover::before{transform:scaleX(1);}
.proc:hover{background:var(--bg2);}
.proc-n{
  font-family:'Italiana',serif;font-size:64px;
  color:var(--border);line-height:1;margin-bottom:20px;
}
.proc-ico{font-size:28px;margin-bottom:16px;}
.proc-title{font-family:'Italiana',serif;font-size:22px;color:var(--text);margin-bottom:12px;}
.proc-body{font-size:13px;line-height:1.88;color:var(--text2);}

/* ── DESIGN APPROACH — image grid ──────────────────────────── */
.appr{display:grid;grid-template-columns:1fr 1fr;min-height:560px;}
.appr-imgs{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.appr-imgs img{filter:brightness(.82);transition:filter .4s;}
.appr-imgs img:hover{filter:brightness(1);}
.appr-txt{
  padding:80px 64px;background:var(--bg3);
  display:flex;flex-direction:column;justify-content:center;
}
.appr-txt p{font-size:13.5px;line-height:2;color:var(--text2);margin-top:14px;}

/* ── GOLD BANNER — "Ready to create something..." ──────────── */
.banner{
  background:linear-gradient(110deg,#1A1408 0%,#2E2010 45%,#1A1408 100%);
  padding:80px 64px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:48px;
  position:relative;overflow:hidden;
}
.banner::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(184,137,42,.12) 0%,transparent 70%);
}
.banner h2{
  font-family:'Italiana',serif;
  font-size:clamp(28px,3.5vw,50px);
  color:#EDE8DC;line-height:1.18;
  position:relative;z-index:1;
}
.banner h2 em{font-style:italic;color:var(--gold);}
.banner-btn{
  position:relative;z-index:1;
  font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  padding:15px 32px;
  background:var(--gold);color:#0C0A07;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:all .3s;
}
.banner-btn:hover{background:var(--gold2);transform:translateY(-2px);}

/* ── CONTACT — address, phone, email cards ─────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:580px;}
.contact-left{
  padding:80px 64px;background:var(--bg2);
  display:flex;flex-direction:column;justify-content:center;
}
.contact-left p{font-size:13.5px;line-height:2;color:var(--text2);margin:20px 0 32px;}
.ci-list{display:flex;flex-direction:column;gap:12px;}
.ci{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px 18px;border:1px solid var(--border);
  transition:all .3s;
}
.ci:hover{border-color:var(--gold);background:var(--gold-bg);}
.ci-ico{font-size:18px;flex-shrink:0;}
.ci-lbl{font-size:8px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:3px;}
.ci-val{font-size:13px;color:var(--text);}
.ci-val a{color:var(--gold);}
.contact-right{
  padding:80px 64px;background:var(--surface);
  display:flex;flex-direction:column;justify-content:center;
}
.contact-right h3{
  font-family:'Italiana',serif;font-size:26px;color:var(--text);margin-bottom:28px;
}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.flb{font-size:9px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--text3);}
.fg input,.fg select,.fg textarea{
  background:var(--bg);border:1px solid var(--border);
  padding:12px 16px;font-family:'Jost',sans-serif;font-size:13px;font-weight:300;
  color:var(--text);outline:none;resize:vertical;appearance:none;
  transition:border-color .3s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);}
.fg input::placeholder,.fg textarea::placeholder{color:var(--text3);}
.fg select option{background:var(--bg);color:var(--text);}
.fg textarea{min-height:96px;}

/* ── ENQUIRY FORM ──────────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px;}
.sbtn{
  margin-top:8px;
  font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  padding:14px 36px;background:var(--gold);color:#0C0A07;
  border:none;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:all .3s;align-self:flex-start;
}
.sbtn:hover{background:var(--gold2);transform:translateY(-2px);}
footer{
  background:var(--bg3);border-top:1px solid var(--border);
  padding:64px 64px 36px;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.ft-top{
  display:grid;grid-template-columns:2.2fr 1fr 1fr 1.4fr;
  gap:48px;margin-bottom:48px;
  padding-bottom:48px;border-bottom:1px solid var(--border);
}
.ft-logo img{height:60px;width:auto;object-fit:contain;display:block;}
.ft-tagline{font-size:12px;line-height:1.9;color:var(--text2);margin-top:16px;max-width:200px;}
.ft-col h5{
  font-size:9px;font-weight:500;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.ft-col ul a{font-size:13px;color:var(--text2);transition:color .3s;}
.ft-col ul a:hover{color:var(--gold);}
.ft-col address{font-style:normal;font-size:13px;color:var(--text2);line-height:2;}
.ft-col address a{color:var(--text2);transition:color .3s;}
.ft-col address a:hover{color:var(--gold);}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.ft-copy{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);}
.ft-soc{display:flex;gap:20px;}
.ft-soc a{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);transition:color .3s;}
.ft-soc a:hover{color:var(--gold);}
.ft-logo img,.footer-logo img{height:46px;width:auto;}

/* ── CLIENT LOGOS — grayscale, hover pe colour ─────────────── */
.cli-head{display:grid;grid-template-columns:1fr minmax(0,440px);gap:30px;align-items:end;margin-bottom:40px;}
.cli-note{font-size:13.5px;line-height:1.85;color:var(--text2);}
.cli-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;}
.cli{display:flex;align-items:center;justify-content:center;
  padding:26px 22px;min-height:132px;background:var(--surface);
  border:1px solid var(--border);position:relative;overflow:hidden;
  transition:border-color .3s,background .3s,transform .3s;}
.cli::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.cli:hover{border-color:var(--border2);background:var(--bg2);transform:translateY(-2px);}
.cli:hover::after{transform:scaleX(1);}
.cli img{max-width:100%;max-height:78px;width:auto;height:auto;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.68;transition:filter .4s,opacity .4s;}
.cli:hover img{filter:none;opacity:1;}
.contact-grid,.form-row,.about-wrap,.appr,.banner,.cli-head,.proj-body,.pf-top,.footer-grid{min-width:0;}
.contact-grid>*,.form-row>*,.about-wrap>*,.appr>*,.banner>*,.cli-head>*,
.proj-body>*,.pf-top>*,.footer-grid>*,.plate,.cli,.jt{min-width:0;}
.banner{padding:clamp(44px,7vw,80px) clamp(20px,5vw,64px);}
.contact-left,.contact-right{padding:clamp(40px,6vw,80px) clamp(20px,5vw,64px);}





.fc:hover 




/* ── SEO STRIP — areas served text (Google ke liye) ────────── */
.seo-strip{background:var(--bg2);border-top:1px solid var(--border);
  padding:clamp(48px,6vw,76px) clamp(20px,5vw,64px);}
.seo-inner{max-width:1400px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(26px,4vw,52px);}
.seo-col{min-width:0;}
.seo-col h3{font-family:'Italiana',serif;font-weight:400;font-size:19px;color:var(--text);
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.seo-col p{font-size:13px;line-height:1.95;color:var(--text2);}
.seo-col strong{color:var(--text);font-weight:400;}


/* ── FORM MESSAGE — submit ke baad thank-you / error ──────── */
.form-note{margin:16px 0 0;padding:13px 16px;font-size:13px;line-height:1.6;
  border-left:3px solid var(--gold);background:var(--bg2);color:var(--text);}
.form-note.err{border-left-color:var(--red,#B81C1C);}


/* ── FOUNDER CARDS — Manoj & Axay (chhoti, animated) ─────────── */
.founder-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;margin-top:30px;max-width:460px;}

.fc{position:relative;background:var(--surface);border:1px solid var(--border);
  padding:11px 11px 13px;
  /* scroll pe niche se upar aate hain, ek-ek karke */
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) calc(var(--d,0) * 140ms),
             transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--d,0) * 140ms),
             border-color .35s, box-shadow .35s;}
.rv.in .fc,.rv.vis .fc{opacity:1;transform:none;}

.fc:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(26,23,20,.09);}

/* gold line jo hover pe upar se khinchti hai */
.fc::before{content:'';position:absolute;top:-1px;left:-1px;height:2px;width:0;
  background:var(--gold);transition:width .45s cubic-bezier(.22,.61,.36,1);}
.fc:hover::before{width:calc(100% + 2px);}

.fc-img-wrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--bg2);}
.fc-photo-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 18%;display:block;
  filter:grayscale(1) contrast(1.04);
  transition:filter .5s ease, transform .9s cubic-bezier(.22,.61,.36,1);}
.fc:hover .fc-photo-img{filter:grayscale(0) contrast(1);transform:scale(1.06);}

.fc-info{padding-top:11px;margin-top:10px;border-top:1px solid var(--border);}
.fc-info strong{display:block;font-family:'Italiana',serif;font-weight:400;
  font-size:15.5px;line-height:1.25;color:var(--text);}
.fc-info span{display:block;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);margin-top:4px;}

@media(max-width:900px){.founder-cards{max-width:100%;}}
@media(max-width:560px){
  .founder-cards{gap:12px;}
  .fc{padding:8px 8px 11px;}
  .fc-info strong{font-size:13.5px;}
  .fc-info span{font-size:8.5px;letter-spacing:1.2px;}
}
@media(prefers-reduced-motion:reduce){
  .fc{opacity:1;transform:none;transition:none;}
}