:root {
  --chola-blue: #00aeef;
  --chola-dark: #0a1628;
  --chola-navy: #0d1f3c;
  --white: #ffffff;
  --off-white: #f4f7fa;
  --light-blue: #e8f4fd;
  --steel: #8899aa;
  --concrete: #c5cdd6;
  --warm: #f0e6d3;
  --accent-gold: #d4a843;
}

/* filepath: [styles.css](http://_vscodecontentref_/0) */

/* Playfair Display Regular */
@font-face {
  font-family: 'Playfair Display';
  src: url('./fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Playfair Display Bold */
@font-face {
  font-family: 'Playfair Display';
  src: url('./fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Sora Regular */
@font-face {
  font-family: 'Sora';
  src: url('./fonts/Sora-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Sora Bold */
@font-face {
  font-family: 'Sora';
  src: url('./fonts/Sora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Apply the fonts */
body {
  font-family: 'Playfair Display', serif;
}

h1, h2, h3 {
  font-family: 'Sora', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Sora', sans-serif;
  background: var(--white);
  color: var(--chola-dark);
  overflow-x: hidden;
}

/* ═══ NAVBAR ═══ */
nav {
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 5%;
  background: rgba(10,22,40,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,174,239,0.1);
  transition: 0.4s;
}
nav.scrolled { padding: 0.5rem 5%; background: rgba(10,22,40,0.98); }
.nav-logo img { height: 42px; }

/* Navbar logo always visible — left aligned (default flex behaviour) */
.nav-links { display:flex; gap:1.5rem; list-style:none; align-items:center; }
.nav-links a {
  color: var(--concrete); text-decoration:none; font-size:0.82rem;
  font-weight:500; letter-spacing:1.8px; text-transform:uppercase;
  position:relative; transition:0.3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--chola-blue); transition:0.3s;
}
.nav-links a:hover { color:var(--chola-blue); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  padding: 0.6rem 1.8rem;
  background: var(--chola-blue); color: var(--white) !important;
  font-weight: 600; letter-spacing: 1px;
  border: none; cursor: pointer; transition: 0.3s;
  text-decoration: none; font-size: 0.8rem; text-transform: uppercase;
}
.nav-cta:hover { background: #0098d4; }
.nav-cta::after { display:none !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { width:26px; height:2px; background:var(--chola-blue); transition:0.3s; }

/* ═══ HERO ═══ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative;
  background: var(--chola-dark);
  overflow: hidden;
  padding-top: 72px; /* clear fixed navbar */
}

/* Animated blueprint grid */
.blueprint-grid {
  position: absolute; inset:0; opacity: 0.08;
  background-image:
    linear-gradient(var(--chola-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--chola-blue) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridPan 20s linear infinite;
}
@keyframes gridPan {
  0% { transform: translate(0,0); }
  100% { transform: translate(50px,50px); }
}

/* Animated beam/structure lines */
.beam-lines {
  position: absolute; inset:0; overflow:hidden;
}
.beam {
  position: absolute; background: var(--chola-blue); opacity: 0.06;
}
.beam-h1 { width:100%; height:1px; top:30%; animation: beamSlide 8s ease-in-out infinite; }
.beam-h2 { width:100%; height:1px; top:65%; animation: beamSlide 10s ease-in-out infinite reverse; }
.beam-v1 { width:1px; height:100%; left:20%; animation: beamSlideV 9s ease-in-out infinite; }
.beam-v2 { width:1px; height:100%; left:75%; animation: beamSlideV 7s ease-in-out infinite reverse; }
@keyframes beamSlide { 0%,100% { opacity:0.03; } 50% { opacity:0.12; } }
@keyframes beamSlideV { 0%,100% { opacity:0.02; } 50% { opacity:0.1; } }

/* Floating structure particles */
.particles {
  position: absolute; inset:0;
}
.particle {
  position: absolute;
  border: 1px solid rgba(0,174,239,0.15);
  animation: floatParticle 15s ease-in-out infinite;
}
.p1 { width:80px; height:80px; top:15%; left:10%; animation-delay:0s; }
.p2 { width:50px; height:50px; top:60%; left:80%; animation-delay:3s; }
.p3 { width:120px; height:40px; top:75%; left:15%; animation-delay:6s; }
.p4 { width:40px; height:100px; top:20%; left:70%; animation-delay:2s; }
.p5 { width:60px; height:60px; top:45%; left:45%; animation-delay:5s; border:1px solid rgba(0,174,239,0.08); }
@keyframes floatParticle {
  0%,100% { transform: translate(0,0) rotate(0deg); opacity:0.3; }
  25% { transform: translate(20px,-15px) rotate(5deg); opacity:0.6; }
  50% { transform: translate(-10px,20px) rotate(-3deg); opacity:0.3; }
  75% { transform: translate(15px,10px) rotate(3deg); opacity:0.5; }
}

/* Crane animation */
.crane-container {
  position: absolute; right:8%; top:10%; opacity:0.07;
  animation: craneSwing 8s ease-in-out infinite;
}
@keyframes craneSwing {
  0%,100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* Building rise animation */
.building-anim {
  position: absolute; bottom:0; left:5%; display:flex; gap:8px; align-items:flex-end;
  opacity: 0.06;
}
.bld-bar {
  width: 30px; background: var(--chola-blue);
  animation: buildRise 3s ease-out forwards;
  transform-origin: bottom;
}
.b1 { height:120px; animation-delay:0.2s; }
.b2 { height:180px; animation-delay:0.5s; }
.b3 { height:250px; animation-delay:0.8s; }
.b4 { height:160px; animation-delay:1.1s; }
.b5 { height:200px; animation-delay:1.4s; }
.b6 { height:280px; animation-delay:1.7s; }
.b7 { height:140px; animation-delay:2.0s; }
@keyframes buildRise {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* Protractor / compass animation */
.compass-anim {
  position: absolute; right:12%; bottom:15%; opacity:0.06;
}
.compass-anim svg { animation: compassRotate 12s linear infinite; }
@keyframes compassRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hero-content {
  position: relative; z-index:2;
  max-width:800px; padding:0 5%; margin-left:5%;
}

/* Desktop hero enhancements */
@media (min-width: 901px) {
  .hero-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .hero h1 {
    font-size: clamp(3rem, 5.5vw, 5rem);
    margin-bottom: 1.8rem;
  }
  .hero p {
    max-width: 620px;
    font-size: 1.15rem;
  }
  /* Subtle accent left-border on the content block */
  .hero-content::before {
    content: '';
    position: absolute;
    left: calc(5% - 20px);
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--chola-blue) 20%,
      var(--chola-blue) 80%,
      transparent
    );
    opacity: 0.35;
  }
}

/* ── HERO LOGO ── */

/* Shared animation keyframes */
@keyframes logoReveal {
  0%   { opacity:0; transform: scale(0.7) translateY(-20px); filter: drop-shadow(0 0 0 rgba(0,174,239,0)); }
  60%  { opacity:1; transform: scale(1.06) translateY(4px);  }
  80%  { transform: scale(0.98) translateY(-1px); }
  100% { opacity:1; transform: scale(1) translateY(0);       filter: drop-shadow(0 0 14px rgba(0,174,239,0.45)); }
}
@keyframes logoGlow {
  0%,100% { filter: drop-shadow(0 0 10px rgba(0,174,239,0.3)); }
  50%      { filter: drop-shadow(0 0 28px rgba(0,174,239,0.75)); }
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* ── HERO WATERMARK LOGO (desktop background) ── */
.hero-watermark {
  display: none;
}

@media (min-width: 901px) {
  .hero-watermark {
    display: block;
    position: absolute;
    /* Center it in the hero, slightly right-of-center */
    top: 50%;
    left: 50%;
    transform: translate(-20%, -50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: watermarkReveal 1.8s ease 0.6s forwards;
  }
  .hero-watermark img {
    width: clamp(420px, 38vw, 640px);
    height: auto;
    filter:
      grayscale(1)
      brightness(2)
      opacity(1);
    /* white-ish tint */
    mix-blend-mode: overlay;
  }
}

@keyframes watermarkReveal {
  from { opacity: 0; transform: translate(-20%, -46%) scale(0.96); }
  to   { opacity: 0.13; transform: translate(-20%, -50%) scale(1); }
}

/* Desktop hero logo in content — hidden */
.hero-logo {
  display: none;
}

/* Mobile & tablet (≤900px): nav logo hidden, hero logo centred at top of content */
@media (max-width: 900px) {
  .hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    opacity: 0;
    animation:
      logoReveal  0.75s cubic-bezier(0.22,1,0.36,1) 0.15s forwards,
      logoGlow    2.8s  ease-in-out                  1s    infinite;
  }
  .hero-logo img {
    height: 68px;
    width: auto;
  }
}

.hero-badge {
  display:inline-flex; align-items:center; gap:0.6rem;
  background: rgba(0,174,239,0.1);
  border:1px solid rgba(0,174,239,0.2);
  padding: 0.5rem 1.2rem; margin-bottom:1.8rem;
  opacity:0; animation: fadeUp 0.8s 0.3s forwards;
}
.hero-badge-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--chola-blue);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.hero-badge span {
  font-size:0.75rem; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--chola-blue);
}
.hero h1 {
  font-family:'Playfair Display',serif;
  font-size: clamp(2.5rem,5.5vw,4.5rem);
  color:var(--white); line-height:1.1;
  margin-bottom:1.5rem;
  opacity:0; animation: fadeUp 0.8s 0.6s forwards;
}
.hero h1 .highlight {
  color:var(--chola-blue);
  position:relative;
}
.hero h1 .highlight::after {
  content:''; position:absolute; bottom:2px; left:0;
  width:100%; height:3px; background:var(--chola-blue);
  opacity:0.3;
}
.hero p {
  font-size:1.1rem; color:var(--concrete); max-width:550px;
  line-height:1.8; font-weight:300; margin-bottom:2.5rem;
  opacity:0; animation: fadeUp 0.8s 0.9s forwards;
}
.hero-btns {
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; animation: fadeUp 0.8s 1.2s forwards;
}
.btn-blue {
  padding:1rem 2.5rem; background:var(--chola-blue);
  color:var(--white); font-family:'Sora'; font-weight:600;
  font-size:0.85rem; letter-spacing:1.5px; text-transform:uppercase;
  border:none; cursor:pointer; transition:0.3s; text-decoration:none;
  display:inline-flex; align-items:center; gap:0.6rem;
}
.btn-blue:hover { background:#0098d4; transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,174,239,0.3); }
.btn-ghost {
  padding:1rem 2.5rem; background:transparent;
  color:var(--white); font-family:'Sora'; font-weight:500;
  font-size:0.85rem; letter-spacing:1.5px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.2); cursor:pointer;
  transition:0.3s; text-decoration:none;
}
.btn-ghost:hover { border-color:var(--chola-blue); color:var(--chola-blue); transform:translateY(-2px); }

/* Hero right — project image showcase */
.hero-showcase {
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  z-index:2; display:flex; flex-direction:column; gap:1rem;
  opacity:0; animation: fadeUp 1s 1.5s forwards;
}
.hero-img-card {
  width:320px; height:200px; overflow:hidden;
  border:1px solid rgba(0,174,239,0.15);
  position:relative;
}
.hero-img-card img {
  width:100%; height:100%; object-fit:cover;
  transition:0.6s;
}
.hero-img-card:hover img { transform:scale(1.06); }
.hero-img-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:0.8rem 1rem;
  background:linear-gradient(to top, rgba(10,22,40,0.9), transparent);
  font-size:0.72rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--chola-blue);
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

/* ═══ STATS ═══ */
.stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--chola-navy);
  border-top:2px solid var(--chola-blue);
}
.stat-item {
  text-align:center; padding:3rem 1.5rem;
  border-right:1px solid rgba(0,174,239,0.08);
  position:relative; overflow:hidden;
}
.stat-item:last-child { border-right:none; }
.stat-item::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:40px; height:2px; background:var(--chola-blue); opacity:0.4;
}
.stat-num {
  font-family:'Playfair Display',serif;
  font-size:3rem; color:var(--chola-blue);
  line-height:1;
}
.stat-label {
  font-size:0.72rem; color:var(--steel);
  letter-spacing:2.5px; text-transform:uppercase;
  margin-top:0.6rem;
}

/* ═══ SECTIONS COMMON ═══ */
.section { padding:7rem 5%; }
.section-header { text-align:center; margin-bottom:4rem; }
.section-tag {
  display:inline-flex; align-items:center; gap:0.8rem;
  font-size:0.72rem; font-weight:600; letter-spacing:4px;
  text-transform:uppercase; color:var(--chola-blue);
  margin-bottom:1rem;
}
.tag-line { width:30px; height:1px; background:var(--chola-blue); }
.section-title {
  font-family:'Playfair Display',serif;
  font-size: clamp(1.8rem,3.5vw,2.8rem);
  color:var(--chola-dark); line-height:1.2;
}
.section-subtitle {
  font-size:0.95rem; color:var(--steel); max-width:550px;
  margin:1rem auto 0; line-height:1.7; font-weight:300;
}

/* ═══ SERVICES ═══ */
.services { background:var(--off-white); }
.services-grid {
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1.5rem; max-width:1200px; margin:0 auto;
}
.srv-card {
  grid-column:span 2;
  background:var(--white); padding:2.5rem 2rem;
  border:1px solid rgba(0,174,239,0.08);
  transition:0.4s; position:relative; overflow:hidden;
}
.srv-card:nth-child(4) { grid-column:2 / span 2; }
.srv-card:nth-child(5) { grid-column:4 / span 2; }
.srv-card::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:0; background:var(--chola-blue);
  transition:0.4s;
}
.srv-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,174,239,0.08); }
.srv-card:hover::before { height:100%; }
.srv-icon {
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background: var(--light-blue); margin-bottom:1.5rem;
  position:relative;
}
.srv-icon svg { width:28px; height:28px; stroke:var(--chola-blue); fill:none; stroke-width:1.5; }
.srv-card h3 {
  font-family:'Playfair Display',serif;
  font-size:1.25rem; margin-bottom:0.8rem;
}
.srv-card p {
  font-size:0.88rem; color:var(--steel); line-height:1.75; font-weight:300;
}

/* ═══ PROJECTS ═══ */
.projects { background:var(--chola-dark); }
.projects .section-title { color:var(--white); }
.projects .section-subtitle { color:var(--concrete); }
.projects-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; max-width:1200px; margin:0 auto;
}
.proj-card {
  position:relative; overflow:hidden;
  aspect-ratio:4/3; cursor:pointer;
  border:1px solid rgba(0,174,239,0.1);
}
.proj-card img {
  width:100%; height:100%; object-fit:cover;
  transition:0.6s;
}
.proj-card:hover img { transform:scale(1.08); }
.proj-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,22,40,0.95) 0%, rgba(10,22,40,0.2) 50%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.8rem; transition:0.4s;
}
.proj-card:hover .proj-overlay {
  background:linear-gradient(to top, rgba(10,22,40,0.98) 0%, rgba(10,22,40,0.4) 60%, rgba(10,22,40,0.1) 100%);
}
.proj-tag {
  font-size:0.65rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--chola-blue); margin-bottom:0.4rem; font-weight:600;
}
.proj-name {
  font-family:'Playfair Display',serif;
  font-size:1.2rem; color:var(--white); margin-bottom:0.5rem;
}
.proj-meta {
  display:flex; gap:1.2rem; flex-wrap:wrap;
}
.proj-meta span {
  font-size:0.72rem; color:var(--concrete); font-weight:300;
  display:flex; align-items:center; gap:0.3rem;
}
.proj-meta svg { width:12px; height:12px; stroke:var(--chola-blue); fill:none; stroke-width:1.5; }

/* Placeholder bg for projects without images */
.proj-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.proj-placeholder-bg {
  position:absolute; inset:0;
}
.pp1 { background: linear-gradient(135deg, #132744, #1a3a5c);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(0,174,239,0.04) 20px, rgba(0,174,239,0.04) 21px); }
.pp2 { background: linear-gradient(135deg, #1a2e44, #0d1f3c);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(0,174,239,0.05) 15px, rgba(0,174,239,0.05) 16px); }
.pp3 { background: linear-gradient(135deg, #162a40, #0f2235);
  background-image: radial-gradient(circle at 40% 50%, rgba(0,174,239,0.06) 0%, transparent 60%); }

/* ═══ WORK PROGRESS ═══ */
.progress { background:var(--off-white); }
.progress-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem; max-width:1200px; margin:0 auto;
}
.progress-card {
  position:relative; aspect-ratio:4/3;
  overflow:hidden; background:var(--chola-dark);
  border:1px solid rgba(0,174,239,0.1);
  transition:opacity 0.8s, transform 0.8s, box-shadow 0.35s, border-color 0.35s;
}
.progress-card.reveal { transform:translateY(34px) scale(0.97); }
.progress-card.reveal.visible { transform:translateY(0) scale(1); }
.progress-card img {
  width:100%; height:100%;
  object-fit:cover; display:block; transition:0.6s;
}
.progress-card:hover {
  border-color:rgba(0,174,239,0.35);
  box-shadow:0 18px 48px rgba(10,22,40,0.16);
}
.progress-card:hover img { transform:scale(1.05); }
.progress-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,22,40,0.9), rgba(10,22,40,0.08));
  transition:0.35s;
}
.progress-card:hover::after { background:linear-gradient(to top, rgba(10,22,40,0.96), rgba(10,22,40,0.12)); }
.progress-copy {
  position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem;
  z-index:1; color:var(--white);
}
.progress-copy span {
  display:block; margin-bottom:0.45rem;
  font-size:0.65rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--chola-blue); font-weight:700;
}
.progress-copy h3 {
  font-family:'Playfair Display',serif;
  font-size:1.35rem; line-height:1.2;
}

/* ═══ BEFORE / AFTER ═══ */
.renovation { background:var(--chola-dark); }
.renovation .section-title { color:var(--white); }
.renovation .section-subtitle { color:var(--concrete); }
.before-after {
  position:relative; max-width:720px; margin:0 auto;
  aspect-ratio:4/3; overflow:hidden;
  background:var(--chola-dark);
  border:1px solid rgba(0,174,239,0.12);
}
.ba-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  user-select:none; pointer-events:none;
}
.ba-after-wrap {
  position:absolute; inset:0 auto 0 0;
  width:50%; overflow:hidden;
}
.ba-after { width:720px; max-width:none; }
.ba-range {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; z-index:4;
}
.ba-handle {
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:var(--white); z-index:3;
  transform:translateX(-1px);
}
.ba-handle::before {
  content:''; position:absolute; top:50%; left:50%;
  width:40px; height:40px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--chola-blue);
  border:3px solid var(--white);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.ba-label {
  position:absolute; top:1rem; z-index:2;
  padding:0.45rem 0.8rem; background:rgba(10,22,40,0.78);
  color:var(--white); font-size:0.68rem; letter-spacing:2px;
  text-transform:uppercase;
}
.ba-label-before { left:1rem; }
.ba-label-after { right:1rem; }

/* ═══ PROCESS ═══ */
.process { background:var(--off-white); }
.process-track {
  display:flex; max-width:1100px; margin:0 auto;
  position:relative;
}
.process-track::before {
  content:''; position:absolute; top:35px; left:60px; right:60px;
  height:2px; background:linear-gradient(90deg, var(--chola-blue), rgba(0,174,239,0.1));
}
.process-step {
  flex:1; text-align:center; padding:0 1rem;
  position:relative;
}
.step-num {
  width:70px; height:70px; margin:0 auto 1.5rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:2px solid var(--chola-blue);
  font-family:'Playfair Display',serif;
  font-size:1.4rem; color:var(--chola-blue);
  position:relative; z-index:2;
}
.process-step h4 {
  font-size:0.95rem; margin-bottom:0.5rem;
  font-weight:600;
}
.process-step p {
  font-size:0.82rem; color:var(--steel);
  line-height:1.6; font-weight:300;
}

/* ═══ ABOUT ═══ */
.about { background:var(--white); }
.about-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; max-width:1100px; margin:0 auto;
  align-items:center;
}
.about-visual {
  position:relative; aspect-ratio:4/5;
  background:var(--chola-dark); overflow:hidden;
}
.about-visual img {
  width:100%; height:100%; object-fit:cover; opacity:0.7;
}
.about-visual-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(10,22,40,0.6), rgba(0,174,239,0.15));
}
.about-visual .av-badge {
  position:absolute; bottom:2rem; left:2rem;
  background:var(--chola-blue); padding:1.2rem 1.5rem;
}
.av-badge .av-num {
  font-family:'Playfair Display',serif;
  font-size:2.5rem; color:var(--white); line-height:1;
}
.av-badge .av-text {
  font-size:0.7rem; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,0.8);
}
.about-text h3 {
  font-family:'Playfair Display',serif;
  font-size:2rem; margin-bottom:1.5rem; line-height:1.3;
}
.about-text p {
  font-size:0.92rem; color:var(--steel);
  line-height:1.8; margin-bottom:1.2rem; font-weight:300;
}
.about-features {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:2rem;
}
.af-item {
  display:flex; align-items:center; gap:0.8rem;
  padding:0.6rem 0;
}
.af-check {
  width:22px; height:22px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--light-blue);
}
.af-check svg { width:12px; height:12px; stroke:var(--chola-blue); fill:none; stroke-width:2.5; }
.af-item span { font-size:0.85rem; font-weight:500; }

/* ═══ CONTACT ═══ */
.contact { background:var(--chola-dark); position:relative; }
.contact .section-title { color:var(--white); }
.contact .section-subtitle { color:var(--concrete); }
.contact-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; max-width:1100px; margin:0 auto;
}
.contact-left h3 {
  font-family:'Playfair Display',serif;
  font-size:1.8rem; color:var(--white); margin-bottom:1.5rem;
}
.contact-left p {
  font-size:0.92rem; color:var(--concrete);
  line-height:1.8; margin-bottom:2rem; font-weight:300;
}
.c-detail {
  display:flex; align-items:flex-start; gap:1rem;
  margin-bottom:1.5rem;
}
.c-icon {
  width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,174,239,0.1); border:1px solid rgba(0,174,239,0.15);
}
.c-icon svg { width:18px; height:18px; stroke:var(--chola-blue); fill:none; stroke-width:1.5; }
.c-label { font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--steel); margin-bottom:0.2rem; }
.c-value { font-size:0.9rem; color:var(--white); line-height:1.5; }
.c-link { display:inline-block; text-decoration:none; transition:0.3s; }
.c-link:hover { color:var(--chola-blue); }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-row { display:flex; gap:1rem; }
.form-row > * { flex:1; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width:100%; padding:1rem 1.2rem;
  background:rgba(255,255,255,0.05); border:1px solid rgba(0,174,239,0.15);
  font-family:'Sora'; font-size:0.88rem; color:var(--white);
  outline:none; transition:0.3s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:var(--steel); }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color:var(--chola-blue); background:rgba(0,174,239,0.05); }
.contact-form select { color:var(--steel); }
.contact-form select option { background:var(--chola-dark); color:var(--white); }
.contact-form textarea { resize:vertical; min-height:110px; }
.location-card {
  max-width:1100px;
  margin:3rem auto 0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:stretch;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(0,174,239,0.16);
  box-shadow:0 24px 70px rgba(0,0,0,0.18);
}
.location-card.reveal { transform:translateY(36px); }
.location-card.reveal.visible {
  animation: locationLift 0.9s ease forwards;
}
@keyframes locationLift {
  from { opacity:0; transform:translateY(36px); box-shadow:0 0 0 rgba(0,0,0,0); }
  to { opacity:1; transform:translateY(0); box-shadow:0 24px 70px rgba(0,0,0,0.18); }
}
.location-info {
  padding:2.2rem;
  display:flex; flex-direction:column; justify-content:center;
}
.location-kicker {
  font-size:0.68rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--chola-blue);
  font-weight:700; margin-bottom:0.75rem;
}
.location-info h3 {
  font-family:'Playfair Display',serif;
  color:var(--white); font-size:1.75rem;
  margin-bottom:0.8rem;
}
.location-info p {
  color:var(--concrete); line-height:1.8;
  font-size:0.92rem; margin-bottom:1.5rem;
}
.location-actions {
  display:flex; gap:0.9rem; flex-wrap:wrap;
}
.location-ghost {
  border-color:rgba(255,255,255,0.22);
}
.map-embed {
  min-height:360px;
  overflow:hidden; position:relative;
  background:var(--chola-navy);
}
.map-embed::before {
  content:''; position:absolute; inset:0;
  border:10px solid rgba(255,255,255,0.03);
  pointer-events:none; z-index:1;
}
.map-embed iframe {
  width:100%; height:100%; border:0; display:block;
  filter:saturate(0.9) contrast(1.05);
  transform:scale(1.015);
  transition:filter 0.45s, transform 0.45s;
}
.location-card:hover .map-embed iframe {
  filter:saturate(1) contrast(1.08);
  transform:scale(1.035);
}

/* ═══ REVIEWS ═══ */
.reviews { background:var(--off-white); }
.reviews-panel {
  max-width:1100px; margin:0 auto;
  padding:2rem; background:var(--white);
  border:1px solid rgba(0,174,239,0.12);
  box-shadow:0 20px 60px rgba(10,22,40,0.06);
}
.reviews-panel.reveal { transform:translateY(34px) scale(0.98); }
.reviews-panel.reveal.visible {
  animation: reviewPanelIn 0.85s ease forwards;
}
@keyframes reviewPanelIn {
  from { opacity:0; transform:translateY(34px) scale(0.98); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.reviews-summary {
  display:grid; grid-template-columns:280px 1fr;
  gap:2rem; align-items:center;
}
.reviews-badge {
  min-height:220px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:var(--chola-dark);
  color:var(--white); padding:1.5rem;
  border:1px solid rgba(0,174,239,0.18);
  position:relative; overflow:hidden;
}
.reviews-badge::before {
  content:''; position:absolute; top:0; bottom:0; left:-70%;
  width:45%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform:skewX(-18deg);
}
.reviews-panel.visible .reviews-badge::before { animation: badgeShine 1.1s 0.35s ease forwards; }
@keyframes badgeShine {
  to { left:125%; }
}
.reviews-badge span {
  display:block; margin-bottom:0.8rem;
  font-size:0.68rem; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--chola-blue); font-weight:700;
}
.reviews-badge strong {
  font-family:'Playfair Display',serif;
  font-size:4rem; line-height:1; font-weight:700;
}
.stars {
  margin:0.7rem 0;
  color:var(--accent-gold); letter-spacing:0.18rem;
}
.reviews-panel.visible .stars {
  animation: starsPop 0.7s 0.18s ease both;
}
@keyframes starsPop {
  from { opacity:0; transform:translateY(8px) scale(0.92); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.reviews-badge small {
  color:var(--concrete); font-size:0.72rem;
  letter-spacing:1.2px; text-transform:uppercase;
}
.reviews-copy p {
  color:var(--steel); line-height:1.8;
  margin:0 0 1.5rem; max-width:620px;
}
.reviews-actions {
  display:flex; gap:1rem; flex-wrap:wrap;
}
.review-ghost {
  color:var(--chola-dark);
  border-color:rgba(10,22,40,0.18);
}
.review-ghost:hover {
  color:var(--chola-blue);
  border-color:var(--chola-blue);
}
/* ═══ SOCIAL ═══ */
.social-strip {
  background:var(--chola-navy);
  padding:2rem 5%;
  display:flex; justify-content:center; gap:1.5rem;
  border-top:1px solid rgba(0,174,239,0.08);
}
.soc-link {
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,174,239,0.15);
  transition:0.3s; cursor:pointer;
  color:var(--concrete);
}
.soc-link:hover { border-color:var(--chola-blue); transform:translateY(-3px); background:rgba(0,174,239,0.08); color:var(--chola-blue); }
.soc-link svg { width:18px; height:18px; fill:var(--concrete); stroke:none; }
.soc-link:hover svg { fill:var(--chola-blue); }

/* ═══ FLOATING CONTACT ═══ */
.floating-actions {
  position:fixed; right:1.25rem; bottom:1.25rem;
  z-index:1200; display:flex; flex-direction:column; gap:0.8rem;
}
.float-btn {
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); text-decoration:none;
  box-shadow:0 12px 30px rgba(10,22,40,0.28);
  transition:0.3s;
}
.float-btn:hover { transform:translateY(-3px); }
.float-btn svg { width:24px; height:24px; fill:currentColor; stroke:none; }
.float-call { background:var(--chola-blue); }
.float-call svg { fill:none; stroke:currentColor; stroke-width:1.8; }
.float-whatsapp { background:#25D366; }

/* ═══ FOOTER ═══ */
footer {
  background:var(--chola-dark);
  padding:2.5rem 5% 1.5rem;
  text-align:center;
  border-top:1px solid rgba(0,174,239,0.06);
}
.footer-logo img { height:36px; margin-bottom:1rem; opacity:0.7; }
footer p { font-size:0.75rem; color:var(--steel); letter-spacing:1px; }

/* ═══ ANIMATIONS ═══ */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s, transform 0.8s; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px) {
  .hero-showcase { display:none; }
  .hero-content { margin-left:auto; margin-right:auto; text-align:center; }
  .hero p { margin-left:auto; margin-right:auto; }
  .hero-btns { justify-content:center; }
}
@media(max-width:900px) {
  nav { justify-content:space-between; min-height:68px; }
  .nav-logo { position:static; left:auto; transform:none; display:none; } /* hero logo shows on mobile instead */
  .nav-links { display:none; }
  .hamburger { display:flex; position:absolute; right:5%; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(10,22,40,0.98);
    padding:1.5rem 5%; gap:1.2rem;
  }
  .section { padding:5rem 5%; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:1fr 1fr; }
  .srv-card, .srv-card:nth-child(4), .srv-card:nth-child(5) { grid-column:auto; }
  .projects-grid { grid-template-columns:1fr 1fr; }
  .progress-grid { grid-template-columns:1fr 1fr; }
  .process-track { flex-direction:column; gap:2rem; }
  .process-track::before { display:none; }
  .about-layout { grid-template-columns:1fr; gap:2.5rem; }
  .about-visual { max-height:350px; }
  .about-text h3 { font-size:1.6rem; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-left h3 { font-size:1.5rem; }
  .form-row { flex-direction:column; }
  .location-card { grid-template-columns:1fr; gap:0; }
  .location-info { border-bottom:none; }
  .map-embed { margin-left:0; }
  .reviews-summary { grid-template-columns:1fr; }
  .reviews-badge { min-height:auto; }
}
@media(max-width:600px) {
  .section { padding:4rem 4%; }
  .section-header { margin-bottom:2.5rem; }
  .services-grid { grid-template-columns:1fr; }
  .srv-card, .srv-card:nth-child(4), .srv-card:nth-child(5) { grid-column:auto; }
  .projects-grid { grid-template-columns:1fr; }
  .progress-grid { grid-template-columns:1fr; }
  .before-after { max-width:360px; }
  .ba-after { width:360px; }
  .reviews-panel { padding:2rem 1.25rem; }
  .reviews-actions { flex-direction:column; align-items:stretch; }
  .review-ghost { width:100%; max-width:320px; justify-content:center; text-align:center; }
  .location-card { margin-top:2rem; }
  .location-info { padding:1.5rem; }
  .location-actions { flex-direction:column; align-items:stretch; }
  .location-ghost { width:100%; max-width:320px; justify-content:center; text-align:center; }
  .map-embed { min-height:300px; }
  .stats { grid-template-columns:1fr 1fr; }
  .stat-item { padding:2rem 1rem; }
  .stat-num { font-size:2.2rem; }
  .about-features { grid-template-columns:1fr; }
  .about-text h3 { font-size:1.4rem; }
  .contact-left h3 { font-size:1.3rem; }
  .hero-btns { flex-direction:column; align-items:center; }
  .btn-blue, .btn-ghost { width:100%; max-width:320px; justify-content:center; text-align:center; }
  .social-strip { flex-wrap:wrap; gap:0.8rem; padding:1.5rem 5%; }
  .floating-actions {
    right:1.25rem; bottom:1.25rem;
    flex-direction:column;
  }
  .float-btn { width:48px; height:48px; }
  footer { padding-bottom:2rem; }
}
@media(max-width:400px) {
  .section { padding:3rem 4%; }
  .nav-logo img { height:34px; }
  .stat-item { padding:1.5rem 0.5rem; }
  .stat-num { font-size:1.8rem; }
  .stat-label { font-size:0.65rem; letter-spacing:1.5px; }
  .hero-badge span { font-size:0.65rem; letter-spacing:1.5px; }
  .hero p { font-size:1rem; }
  .srv-card { padding:2rem 1.5rem; }
  .soc-link { width:40px; height:40px; }
  .soc-link svg { width:16px; height:16px; }
  .about-text h3 { font-size:1.3rem; }
  .contact-left h3 { font-size:1.2rem; }
  .step-num { width:56px; height:56px; font-size:1.2rem; }
  footer p { font-size:0.7rem; }
}

@media(prefers-reduced-motion: reduce) {
  .progress-card,
  .location-card,
  .reviews-panel,
  .reviews-badge::before,
  .stars,
  .map-embed iframe {
    animation:none !important;
    transition:none !important;
  }
  .progress-card.reveal,
  .location-card.reveal,
  .reviews-panel.reveal {
    transform:none;
  }
  .map-embed iframe,
  .location-card:hover .map-embed iframe {
    transform:none;
  }
}

.input-error {
  border: 1px solid #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.08);
}

#form-status {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  animation: fadeMessage 0.3s ease;
}

.form-success {
  background: rgba(0, 174, 239, 0.12);
  border: 1px solid rgba(0, 174, 239, 0.25);
  color: #8edfff;
}

.form-error {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.2);
  color: #ffb8b8;
}

.btn-loading {
  opacity: 0.7;
  pointer-events: none;
}

@keyframes fadeMessage {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-wrap {
  width: 100%;
}

.field-error {
  display: none;
  color: #ff7d7d;
  font-size: 0.78rem;
  margin-top: 0.45rem;
  padding-left: 0.2rem;
  line-height: 1.4;
}

.field-error.active {
  display: block;
}

.input-error {
  border: 1px solid #ff6b6b !important;
}