/* ============================================================
   Shreeram Group Pvt. Ltd. — brand tokens from company PDF
   teal (footer band): #4F7D89 | blue (logo gear): #4C96D7
   grey (logo type):   #6D6E72
   ============================================================ */
:root{
  --teal:       #4F7D89;
  --teal-deep:  #2E4E58;
  --teal-ink:   #1E353C;
  --blue:       #4C96D7;
  --blue-deep:  #2F76B5;
  --grey:       #6D6E72;
  --mist:       #EEF3F5;
  --line:       #D5E0E4;
  --white:      #FFFFFF;

  --font-display: "Sora", sans-serif;
  --font-body:    "IBM Plex Sans", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;

  --radius: 10px;
  --shadow: 0 8px 28px rgba(30,53,60,.10);
  --container: 1140px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--teal-ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:22px; }

h1,h2,h3{ font-family:var(--font-display); line-height:1.15; color:var(--teal-deep); }
h1{ font-size:clamp(1.9rem, 4.6vw, 3.4rem); font-weight:800; letter-spacing:-.02em; }
h2{ font-size:clamp(1.5rem, 3vw, 2.3rem);  font-weight:700; letter-spacing:-.01em; margin-bottom:.35em; }
h3{ font-size:1.05rem; font-weight:600; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--teal);
  margin-bottom:.9em;
}
.eyebrow::before{ content:"# "; color:var(--blue); }

.section{ padding:84px 0; }
.section-tint{ background:var(--mist); }
.section-lead{ color:var(--grey); max-width:46ch; margin-bottom:2.4em; }

/* ---------------- header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand-logo{ height:44px; width:auto; }
.site-nav{ display:flex; gap:26px; align-items:center; }
.site-nav a{ color:var(--teal-ink); font-weight:500; font-size:.95rem; }
.site-nav a:hover{ color:var(--blue-deep); text-decoration:none; }
.nav-cta{
  background:var(--blue); color:var(--white) !important;
  padding:.5em 1.1em; border-radius:999px;
  transition:background .2s;
}
.nav-cta:hover{ background:var(--blue-deep); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--teal-deep); margin:5px 0; transition:.25s; }

/* ---------------- hero carousel ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--teal-deep) 0%, var(--teal) 70%, #5E8B96 100%);
  color:var(--white);
}
.gear-bg{
  position:absolute; right:-140px; top:50%; transform:translateY(-50%);
  width:560px; height:560px; color:rgba(255,255,255,.07); pointer-events:none;
}
.gear{ width:100%; height:100%; animation:spin 90s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.slides{ position:relative; min-height:460px; }
.slide{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; transform:translateX(24px);
  transition:opacity .55s ease, transform .55s ease, visibility .55s;
}
.slide.is-active{ position:relative; opacity:1; visibility:visible; transform:none; }
.slide-inner{ padding:96px 22px 60px; }
.slide h1{ color:var(--white); margin:.4em 0 .5em; }
.slide .eyebrow{ color:#BFE0F5; }
.slide .eyebrow::before{ color:#8FC6EC; }
.lead{ max-width:52ch; font-size:1.06rem; color:#E3EDF0; }
.slide-actions{ display:flex; gap:14px; margin-top:2em; flex-wrap:wrap; }

.btn{
  display:inline-block; font-weight:600; font-size:.95rem;
  padding:.75em 1.6em; border-radius:999px; border:0; cursor:pointer;
  transition:transform .15s, background .2s, box-shadow .2s;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{ background:var(--blue); color:var(--white); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-ghost{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.55); }
.btn-ghost:hover{ border-color:var(--white); background:rgba(255,255,255,.08); }

.hero-controls{
  display:flex; align-items:center; gap:18px;
  padding-bottom:34px;
}
.hero-arrow{
  background:rgba(255,255,255,.14); color:var(--white);
  border:0; width:38px; height:38px; border-radius:50%;
  font-size:1rem; cursor:pointer; transition:background .2s;
}
.hero-arrow:hover{ background:rgba(255,255,255,.28); }
.hero-dots{ display:flex; gap:9px; }
.hero-dots button{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:.2s;
}
.hero-dots button.is-active{ background:var(--white); transform:scale(1.25); }

/* ---------------- cards / grids ---------------- */
.grid{ display:grid; gap:22px; }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
.grid-5{ grid-template-columns:repeat(5, 1fr); }

.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 22px;
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

.service-card h3{ margin:.9em 0 .5em; }
.service-card p{ font-size:.92rem; color:var(--grey); }
.service-icon{
  width:46px; height:46px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--mist); color:var(--teal);
}
.service-icon svg{ width:26px; height:26px; }

/* ---------------- about ---------------- */
.about-wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start; }
.about-wrap p + p{ margin-top:1em; }
.about-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fact{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; display:flex; flex-direction:column; gap:4px;
}
.fact-num{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--blue-deep); }
.fact-label{ font-size:.82rem; color:var(--grey); }

/* ---------------- team ---------------- */
.leaders{ display:flex; flex-direction:column; gap:22px; margin-bottom:44px; }
.leader-card{
  display:grid; grid-template-columns:200px 1fr; gap:30px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; transition:transform .2s, box-shadow .2s;
}
.leader-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.leader-photo{
  width:200px; height:200px; border-radius:14px; object-fit:cover;
  border:3px solid var(--mist); box-shadow:0 0 0 2px var(--line);
}
.leader-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; flex-wrap:wrap; margin-bottom:.8em;
}
.leader-head h3{ font-size:1.25rem; }
.leader-role{
  font-family:var(--font-mono); font-size:.78rem; color:var(--blue-deep); margin-top:.3em;
}
.leader-note{ font-size:.93rem; color:#3D555D; }
.leader-card .li-tag{ margin-top:0; }
.leader-card .li-tag:hover{ background:var(--blue); border-color:var(--blue); color:var(--white); text-decoration:none; }

.grid-3{ grid-template-columns:repeat(3, 1fr); max-width:820px; margin-inline:auto; }
.team-card{ text-align:center; color:inherit; }
.team-card:hover{ text-decoration:none; }
.team-card h3{ margin-top:.9em; font-size:.98rem; }
.role{ font-size:.82rem; color:var(--grey); margin-top:.25em; min-height:2.6em; }
.avatar{
  width:84px; height:84px; margin-inline:auto; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--teal) 0%, var(--blue) 100%);
  color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.35rem;
}
img.avatar{
  object-fit:cover; display:block;
  border:3px solid var(--mist);
  box-shadow:0 0 0 2px var(--line);
  transition:box-shadow .2s;
}
.team-card:hover img.avatar{ box-shadow:0 0 0 2px var(--blue); }
span.avatar::after{ content:attr(data-initials); }
.li-tag{
  display:inline-block; margin-top:.9em;
  font-family:var(--font-mono); font-size:.72rem; color:var(--blue-deep);
  border:1px solid var(--line); border-radius:999px; padding:.3em .9em;
}
.team-card:hover .li-tag{ background:var(--blue); border-color:var(--blue); color:var(--white); }

/* ---------------- clients ---------------- */
.clients-row{
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center;
}
.client{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  width:200px; padding:16px 16px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .2s, box-shadow .2s;
}
.client:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.logo-stage{
  width:100%; height:92px; border-radius:8px;
  display:grid; place-items:center; padding:14px 16px;
  background:var(--white);
}
.logo-stage--dark{
  background:linear-gradient(145deg, var(--teal-deep) 0%, var(--teal) 100%);
}
.logo-stage img{
  max-height:60px; max-width:150px; width:auto; height:auto; object-fit:contain;
}
.client figcaption{ font-size:.85rem; color:var(--grey); margin-top:auto; }

/* ---------------- contact ---------------- */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contact-list{ list-style:none; }
.contact-list li{
  display:flex; gap:18px; padding:13px 0; border-bottom:1px solid var(--line);
  font-size:.96rem;
}
.contact-key{
  font-family:var(--font-mono); font-size:.78rem; color:var(--teal);
  min-width:74px; padding-top:.2em;
}
.contact-form{ display:flex; flex-direction:column; gap:16px; }
.contact-form label{ font-size:.85rem; font-weight:600; color:var(--teal-deep); display:flex; flex-direction:column; gap:6px; }
.contact-form input, .contact-form textarea{
  font:inherit; font-size:.95rem; padding:.7em .9em;
  border:1px solid var(--line); border-radius:8px; background:var(--mist);
  color:var(--teal-ink); resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:2px solid var(--blue); background:var(--white);
}
.form-note{ font-size:.78rem; color:var(--grey); }

/* ---------------- footer (mirrors PDF footer band) ---------------- */
.site-footer{ background:var(--teal); color:#E8F0F2; }
.footer-inner{
  display:grid; grid-template-columns:1.4fr 1fr 1fr .8fr; gap:36px;
  padding:56px 22px 44px;
}
.footer-logo{ height:52px; width:auto; background:var(--white); border-radius:8px; padding:6px 10px; margin-bottom:14px; }
.footer-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--white); }
.footer-head{ font-family:var(--font-mono); font-size:.78rem; color:#BFD6DC; margin-bottom:.8em; text-transform:lowercase; }
.site-footer p{ font-size:.9rem; margin-bottom:.35em; }
.site-footer a{ color:#FFFFFF; }
.footer-bar{ background:var(--teal-deep); padding:14px 0; }
.footer-bar p{ font-size:.8rem; color:#B9CDD3; }

/* ---------------- responsive ---------------- */
@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
  .grid-5{ grid-template-columns:repeat(3, 1fr); }
  .grid-3{ grid-template-columns:repeat(3, 1fr); }
  .leader-card{ grid-template-columns:150px 1fr; gap:22px; }
  .leader-photo{ width:150px; height:150px; }
  .about-wrap, .contact-wrap{ grid-template-columns:1fr; gap:36px; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .gear-bg{ width:420px; height:420px; right:-180px; }
}
@media (max-width: 640px){
  .section{ padding:60px 0; }
  .grid-4, .grid-5{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:1fr; max-width:340px; }
  .team-grid{ grid-template-columns:1fr; }
  .leader-card{ grid-template-columns:1fr; text-align:left; padding:22px; }
  .leader-photo{ margin-inline:auto; width:180px; height:180px; }
  .slide-inner{ padding:72px 22px 48px; }
  .slides{ min-height:520px; }
  .footer-inner{ grid-template-columns:1fr; }
  .clients-row .client{ width:calc(50% - 11px); }

  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; top:70px; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .site-nav.open{ max-height:320px; }
  .site-nav a{ padding:14px 22px; border-top:1px solid var(--mist); }
  .nav-cta{ border-radius:0; margin:0; text-align:center; }
}
@media (max-width: 440px){
  .grid-4, .grid-5, .team-grid{ grid-template-columns:1fr; }
  .clients-row .client{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .gear{ animation:none; }
  *, *::before, *::after{ transition-duration:.01ms !important; }
}