:root{
  --ink:#2c2f1e;        /* primary dark - text, dark section bg */
  --ink-2:#2d2b25;       /* secondary dark - hover states */
  --stone:#9b9988;       /* muted accent - labels, tags, borders */
  --stone-light:#b7b5a3; /* lighter accent - hover on dark bg */
  --plaster:#d8d3c6;     /* main page background */
  --white:#ffffff;       /* card / contrast panel background */
  --line: rgba(44,47,30,0.16);
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--plaster);
  color:var(--ink);
  font-family:'Lato', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
p{ font-weight:300; }
h1,h2,h3,.display{
  font-family:'Noto Serif Bengali', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'Lato', sans-serif;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--stone);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--stone);
  display:inline-block;
}
:focus-visible{
  outline: 2px solid var(--stone);
  outline-offset: 3px;
}
button, .btn{cursor:pointer; font-family:inherit;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(216,211,198,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:'Noto Serif Bengali', serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:0.01em;
  display:flex; align-items:center; gap:10px;
}
.logo img{height:32px; width:auto;}
.logo span{color:var(--stone);}
.nav-links{
  display:flex; gap:36px; align-items:center;
  font-size:14px; font-weight:400;
}
.nav-links a{
  position:relative; padding:4px 0;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1); transform-origin:left;}
.nav-links a.active{font-weight:700;}
.cta{
  background:var(--ink); color:var(--plaster);
  padding:11px 22px; border-radius:2px; border:none;
  font-size:13px; font-weight:700; letter-spacing:0.03em;
  transition:background .25s ease;
}
.cta:hover{background:var(--ink-2);}
.nav-toggle{display:none;}

/* ---------- HERO (landing) ---------- */
.hero{
  padding:88px 0 60px;
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:40px; align-items:center;
}
.hero h1{
  font-size:clamp(38px, 5vw, 60px);
  line-height:1.05;
}
.hero h1 em{
  font-style:italic; color:var(--stone);
}
.hero p.lede{
  margin-top:22px; max-width:460px;
  font-size:17px; color:#43473a; font-weight:300;
}
.hero-ctas{margin-top:34px; display:flex; gap:16px; align-items:center;}
.btn-primary{
  background:var(--ink); color:var(--plaster);
  padding:14px 26px; font-size:14px; font-weight:700; letter-spacing:0.02em;
  border-radius:2px; border:none;
}
.btn-primary:hover{background:var(--ink-2);}
.btn-ghost{
  font-size:14px; font-weight:700; letter-spacing:0.02em;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
}

.blueprint-frame{
  position:relative; aspect-ratio: 1/1;
  background: var(--white);
  border:1px solid var(--line);
}
.blueprint-frame svg{width:100%; height:100%;}
.bp-line{
  fill:none; stroke:var(--ink); stroke-width:1.4;
  stroke-dasharray: 900; stroke-dashoffset:900;
  animation: draw 2.6s ease forwards;
}
.bp-fill{
  opacity:0;
  animation: fadein 1.4s ease forwards;
  animation-delay: 2.2s;
}
.bp-dim{
  fill:var(--stone); font-family:'Lato'; font-size:9px; letter-spacing:0.04em;
  opacity:0; animation: fadein 1s ease forwards; animation-delay:2.6s;
}
@keyframes draw{ to { stroke-dashoffset:0; } }
@keyframes fadein{ to { opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .bp-line{ animation:none; stroke-dashoffset:0; }
  .bp-fill,.bp-dim{ animation:none; opacity:1; }
}

/* ---------- PAGE INTRO (sub-pages) ---------- */
.page-intro{padding:64px 0 20px;}
.page-intro h1{font-size:clamp(32px,4.4vw,48px);}
.page-intro p.lede{margin-top:16px; max-width:520px; font-size:16px; color:#43473a; font-weight:300;}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:96px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:52px; border-bottom:1px solid var(--line); padding-bottom:28px;
}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head p{max-width:360px; color:#5c5f4f; font-size:15px;}

/* ---------- PHILOSOPHY / STRIP ---------- */
.philosophy{
  background:var(--ink); color:var(--plaster);
}
.philosophy .wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px;
}
.philosophy h2{
  color:var(--plaster); font-size:clamp(26px,3vw,34px); line-height:1.3;
}
.philosophy .stats{display:flex; flex-direction:column; gap:26px;}
.stat{border-top:1px solid rgba(216,211,198,0.24); padding-top:14px;}
.stat .num{font-family:'Noto Serif Bengali',serif; font-size:34px; color:var(--stone-light);}
.stat .label{font-size:13px; color:#c7c4b6; margin-top:4px;}

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service-card{
  background:var(--white); padding:40px 32px; min-height:280px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.service-card .icon{width:38px; height:38px; margin-bottom:26px;}
.service-card h3{font-size:22px; margin-bottom:10px;}
.service-card p{font-size:14px; color:#5c5f4f;}
.service-card ul{margin:14px 0 0; padding-left:18px; font-size:13.5px; color:#5c5f4f;}
.service-card li{margin-bottom:6px;}

/* ---------- PROCESS ---------- */
.process-line{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.process-line::before{
  content:''; position:absolute; top:13px; left:0; right:0; height:1px; background:var(--line);
}
.step{position:relative; padding-top:44px;}
.step .marker{
  position:absolute; top:0; left:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--plaster); border:1px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif Bengali',serif; font-size:12px;
}
.step h3{font-size:18px; margin-bottom:8px;}
.step p{font-size:14px; color:#5c5f4f;}

/* ---------- PORTFOLIO / PROJECTS ---------- */
.portfolio-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.project-card{
  background:var(--white); border:1px solid var(--line);
  overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;
}
.project-card:hover{transform:translateY(-4px); box-shadow:0 18px 30px -18px rgba(44,47,30,0.35);}
.project-art{aspect-ratio:4/3; width:100%;}
.project-body{padding:22px 24px 26px;}
.project-body .tag{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); font-weight:700;}
.project-body h3{font-size:19px; margin-top:8px;}
.project-body p{font-size:13px; color:#5c5f4f; margin-top:6px;}
.swatches{display:flex; gap:6px; margin-top:16px;}
.swatch{width:16px; height:16px; border-radius:50%; border:1px solid rgba(44,47,30,0.15);}

/* ---------- TESTIMONIALS ---------- */
.testimonials{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px;}
.testi blockquote{
  font-family:'Noto Serif Bengali',serif; font-size:19px; font-style:italic; line-height:1.5;
  margin:0 0 18px;
}
.testi cite{font-style:normal; font-size:13px; color:#5c5f4f; font-weight:700;}

/* ---------- ABOUT / MISSION-VISION ---------- */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.about-grid p{color:#43473a; font-size:15.5px; margin-bottom:16px; font-weight:300;}
.credentials{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.pill{
  border:1px solid var(--line); padding:7px 14px; font-size:12px; font-weight:700;
  letter-spacing:0.02em; border-radius:20px; color:#5c5f4f;
}
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px;}
.mv-grid p{font-size:14px; color:#5c5f4f; margin-top:8px; font-weight:300;}

/* ---------- FAQ ACCORDION ---------- */
.faq-list{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{
  width:100%; text-align:left; background:none; border:none;
  padding:26px 0; display:flex; justify-content:space-between; align-items:center;
  font-family:'Noto Serif Bengali',serif; font-size:19px; color:var(--ink);
}
.faq-question .plus{
  font-family:'Lato'; font-size:22px; font-weight:300; color:var(--stone);
  transition:transform .25s ease; flex-shrink:0; margin-left:20px;
}
.faq-item.open .faq-question .plus{transform:rotate(45deg);}
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.faq-answer-inner{padding:0 0 26px; font-size:14.5px; color:#5c5f4f; max-width:640px;}
.faq-item.open .faq-answer{max-height:300px;}

/* ---------- CONTACT ---------- */
.contact{background:var(--ink); color:var(--plaster);}
.contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.contact h2{color:var(--plaster); font-size:clamp(28px,3.4vw,38px);}
.contact p.lede{color:#c7c4b6; margin-top:16px; max-width:380px; font-size:15px; font-weight:300;}
.contact-detail{margin-top:36px; font-size:14px; color:#c7c4b6; line-height:2;}
.contact-detail strong{color:var(--plaster); display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-top:16px;}
form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:#c7c4b6;}
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid rgba(216,211,198,0.32);
  color:var(--plaster); font-family:inherit; font-size:15px; padding:10px 2px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--stone-light);
}
.field select option{color:var(--ink);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.submit-btn{
  margin-top:10px; background:var(--stone); color:var(--ink); border:none;
  padding:15px 22px; font-size:14px; font-weight:700; letter-spacing:0.02em;
  border-radius:2px; align-self:flex-start;
}
.submit-btn:hover{background:var(--stone-light);}
.form-note{font-size:12px; color:#a9a695; margin-top:4px;}

/* ---------- FOOTER ---------- */
footer{padding:36px 0; border-top:1px solid var(--line);}
footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:#5c5f4f; flex-wrap:wrap; gap:12px;
}
footer .foot-links{display:flex; gap:24px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .nav-links{display:none;}
  .hero{grid-template-columns:1fr; padding-top:52px;}
  .hero p.lede{max-width:100%;}
  .philosophy .wrap, .about-grid, .contact .wrap{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .process-line{grid-template-columns:1fr; row-gap:36px;}
  .process-line::before{display:none;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr; gap:32px;}
  .mv-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .row2{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .wrap{padding:0 20px;}
  .portfolio-grid{grid-template-columns:1fr;}
  .section-head{flex-direction:column; align-items:flex-start;}
}

/* ---------- ALTERNATING MAGAZINE ROWS (Studio page) ---------- */
.alt-row{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:80px 0; border-bottom:1px solid var(--line);}
.alt-row:last-child{border-bottom:none;}
.alt-row.reverse .alt-media{order:2;}
.alt-row.reverse .alt-text{order:1;}
.alt-media svg{width:100%; height:auto;}
.alt-text h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:18px;}
.alt-text p{font-size:15.5px; color:#43473a; margin-bottom:14px;}

/* ---------- VALUES GRID ---------- */
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.value-card{background:var(--white); padding:34px 26px;}
.value-card .num{font-family:'Noto Serif Bengali',serif; font-size:22px; color:var(--stone);}
.value-card h3{font-size:17px; margin:14px 0 8px;}
.value-card p{font-size:13.5px; color:#5c5f4f;}

/* ---------- CATEGORY TABS (Projects) ---------- */
.cat-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.cat-tab{
  padding:9px 18px; border:1px solid var(--line); border-radius:20px;
  font-size:13px; font-weight:700; letter-spacing:0.02em; background:transparent; color:#5c5f4f;
  transition:all .2s ease;
}
.cat-tab.active, .cat-tab:hover{background:var(--ink); color:var(--plaster); border-color:var(--ink);}
.category-block{margin-bottom:70px;}
.category-block h2{font-size:clamp(22px,2.6vw,28px); margin-bottom:8px;}
.category-block .cat-count{font-size:13px; color:var(--stone); margin-bottom:30px; display:block;}

/* ---------- PROJECT DETAIL PAGE ---------- */
.project-hero{padding:60px 0 40px;}
.project-hero .meta-row{display:flex; gap:40px; flex-wrap:wrap; margin-top:26px; padding-top:26px; border-top:1px solid var(--line);}
.meta-item .eyebrow{margin-bottom:6px;}
.meta-item p{font-size:14.5px; font-weight:400;}
.project-gallery{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.project-gallery svg{width:100%; aspect-ratio:4/3;}
.project-gallery .full{grid-column:1/-1; aspect-ratio:16/9;}

/* ---------- CONSULTATION FORM EXTRAS ---------- */
.success-state{
  display:none; text-align:center; padding:50px 20px;
}
.success-state.show{display:block;}
.success-state .check{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--stone-light);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.form-hidden{display:none;}
.hours-block{margin-top:30px; font-size:14px; color:#c7c4b6;}
.social-row{display:flex; gap:16px; margin-top:24px;}
.social-row a{font-size:13px; font-weight:700; border-bottom:1px solid rgba(216,211,198,0.4); padding-bottom:2px;}

@media (max-width: 860px){
  .alt-row{grid-template-columns:1fr; gap:30px; padding:56px 0;}
  .alt-row.reverse .alt-media, .alt-row.reverse .alt-text{order:initial;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .project-gallery{grid-template-columns:1fr;}
}