:root{
  --navy:#030726;
  --navy-2:#08133a;
  --gold:#D8B25A;
  --gold-soft:#f0d27a;
  --ivory:#f7f3ed;
  --muted:rgba(247,243,237,.78);
  --line:rgba(216,178,90,.24);
  --glass:rgba(6,10,32,.44);
  --shadow:0 20px 50px rgba(0,0,0,.24);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}

body{
  background:var(--navy);
  color:var(--ivory);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

section{
  scroll-margin-top:90px;
}

.container{
  width:min(1240px, calc(100% - 48px));
  margin:0 auto;
}

/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:var(--navy);
}

.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1s ease, transform 1.2s ease;
  transform:scale(1.05);
  will-change:opacity, transform;
}

.hero-bg.active{
  opacity:1;
}

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,7,38,.30) 0%, rgba(3,7,38,.58) 52%, rgba(3,7,38,.94) 100%),
    linear-gradient(90deg, rgba(3,7,38,.60) 0%, rgba(3,7,38,.20) 40%, rgba(3,7,38,.06) 100%);
}

.overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.045), transparent 28%),
    linear-gradient(180deg, transparent 0%, transparent 58%, rgba(3,7,38,.24) 100%);
  pointer-events:none;
}

.topbar{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 34px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-logo{
  height:56px;
  width:auto;
  display:block;
  object-fit:contain;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
}

.brand-copy span{
  font-size:2rem;
  letter-spacing:.14em;
  font-weight:500;
  color:var(--ivory);
}

.brand-copy small{
  margin-top:8px;
  font-size:.80rem;
  letter-spacing:.38em;
  color:rgba(247,243,237,.90);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:16px;
}

.icon-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:58px;
  height:58px;
  border:1px solid rgba(216,178,90,.92);
  border-radius:50%;
  background:rgba(3,7,38,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--gold);
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  cursor:pointer;
}

.icon-btn svg{
  width:26px;
  height:26px;
  fill:currentColor;
}

.menu-shell{
  position:relative;
  padding-bottom:18px;
}

.menu-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:18px;
}

.menu-btn{
  width:58px;
  border:none;
  background:transparent;
  flex-direction:column;
  gap:7px;
  padding:0;
}

.menu-btn span{
  display:block;
  width:36px;
  height:2px;
  background:var(--gold);
  border-radius:99px;
}

.menu-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  padding:14px;
  border:1px solid rgba(216,178,90,.92);
  border-radius:20px;
  background:rgba(6,10,32,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:40;
}

.menu-shell.open .menu-panel,
.menu-shell:focus-within .menu-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Hover-to-open is a desktop-only convenience. Restricting it to
   devices with a real mouse/precise pointer -- touch devices simulate
   a "stuck" hover after tapping that only clears on the next tap
   elsewhere, which was exactly why the mobile/tablet menu appeared to
   stay open until tapping outside it. */
@media (hover:hover) and (pointer:fine){
  .menu-shell:hover .menu-panel{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
}

.menu-panel a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--ivory);
  font-size:14px;
  letter-spacing:.03em;
}

.menu-panel a:hover{
  background:rgba(255,255,255,.06);
  color:var(--gold);
}

/* Floating menu */
.floating-menu{
  position:fixed;
  right:28px;
  bottom:28px;
  top:auto;
  transform:none;
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  padding-top:18px;
}

.floating-menu::before{
  content:"";
  position:absolute;
  right:0;
  bottom:84px;
  width:190px;
  height:20px;
}

.floating-main{
  width:84px;
  height:84px;
  border-radius:50%;
  border:none;
  background:linear-gradient(180deg, #f2d98d 0%, var(--gold) 100%);
  color:#fff;
  font-size:3rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 16px 38px rgba(0,0,0,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.floating-panel{
  position:absolute;
  right:0;
  bottom:76px;
  width:200px;
  padding:16px 14px 14px;
  border:1px solid rgba(216,178,90,.92);
  border-radius:26px;
  background:rgba(6,10,32,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}

.floating-menu:hover .floating-panel,
.floating-menu.open .floating-panel,
.floating-menu:focus-within .floating-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.floating-panel a,
.floating-panel button{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  border:none;
  background:transparent;
  color:var(--ivory);
  font-size:15px;
  padding:12px 8px;
  border-bottom:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  line-height:1.15;
  text-align:left;
  border-radius:12px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.floating-panel a:last-child,
.floating-panel button:last-child{
  border-bottom:none;
}

.floating-panel a svg,
.floating-panel button svg{
  width:18px;
  height:18px;
  fill:currentColor;
  flex:0 0 auto;
  color:var(--gold);
  transition:color .2s ease, transform .2s ease;
}

.floating-panel a:hover,
.floating-panel button:hover{
  background:rgba(255,255,255,.06);
  color:var(--gold-soft);
  transform:translateX(2px);
}

.floating-panel a:hover svg,
.floating-panel button:hover svg{
  color:var(--gold-soft);
  transform:translateX(1px);
}

/* Hero content */
.hero-content{
  position:relative;
  z-index:10;
  width:min(760px, calc(100% - 48px));
  margin:8vh 0 0 56px;
}

.hero-kicker{
  display:inline-block;
  margin-bottom:22px;
  padding:8px 14px;
  border:1px solid rgba(216,178,90,.34);
  border-radius:999px;
  letter-spacing:2px;
  font-size:12px;
  color:rgba(247,243,237,.9);
  background:rgba(6,10,32,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(4rem, 7.2vw, 7rem);
  line-height:.88;
  font-weight:400;
  letter-spacing:-.025em;
  max-width:8.2ch;
  text-wrap:balance;
  text-shadow:0 4px 20px rgba(0,0,0,.18);
}

.hero h1 span{
  color:var(--gold);
}

.hero-line{
  display:inline-block;
  white-space:nowrap;
}

.hero p{
  margin-top:24px;
  max-width:560px;
  font-size:clamp(1rem, 1.45vw, 1.35rem);
  line-height:1.7;
  color:rgba(247,243,237,.84);
  text-wrap:balance;
}

.curve{
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-1px;
  height:96px;
  z-index:8;
  border-bottom:2px solid var(--gold);
  border-radius:0 0 50% 50%;
  pointer-events:none;
  box-shadow:0 0 26px rgba(216,178,90,.12);
}

/* Shared section styles */
.about-section,
.services-section,
.approach-section,
.future-section,
.contact-section{
  position:relative;
  padding:92px 0;
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.03), transparent 26%),
    linear-gradient(180deg, #071038 0%, #030726 100%);
}

.section-label{
  display:inline-block;
  margin-bottom:16px;
  padding:7px 14px;
  border:1px solid rgba(216,178,90,.24);
  border-radius:999px;
  color:rgba(247,243,237,.74);
  font-size:12px;
  letter-spacing:2px;
}

.about-section h2,
.services-section h2,
.approach-section h2,
.future-section h2,
.contact-section h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.6rem, 4.8vw, 4.7rem);
  line-height:1;
  font-weight:500;
  letter-spacing:-.02em;
  margin-bottom:18px;
}

.section-lead{
  max-width:920px;
  color:var(--muted);
  font-size:18px;
  line-height:1.85;
}

.section-lead.compact{
  max-width:720px;
}

/* Feature cards */
.feature-grid{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.feature-card{
  padding:24px 22px;
  background:rgba(9,15,43,.72);
  border:1px solid rgba(216,178,90,.16);
  border-radius:18px;
  box-shadow:var(--shadow);
  min-height:176px;
}

.feature-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  background:linear-gradient(180deg, rgba(240,210,122,.16), rgba(216,178,90,.08));
  color:var(--gold);
  border:1px solid rgba(216,178,90,.22);
}

.feature-icon svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.feature-card h3{
  font-family:'Cormorant Garamond',serif;
  font-size:1.65rem;
  font-weight:500;
  margin-bottom:10px;
}

.feature-card p,
.service-card li,
.timeline-item p,
.coming-copy p,
.contact-strip{
  color:rgba(247,243,237,.80);
  line-height:1.7;
}

/* Service cards */
.service-grid{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.service-card{
  padding:26px 24px;
  background:rgba(9,15,43,.72);
  border:1px solid rgba(216,178,90,.16);
  border-radius:18px;
  box-shadow:var(--shadow);
}

.service-card h3{
  font-family:'Cormorant Garamond',serif;
  font-size:1.85rem;
  font-weight:500;
  margin-bottom:14px;
  color:var(--ivory);
}

.service-card ul{
  list-style:none;
  display:grid;
  gap:10px;
}

.service-card li{
  position:relative;
  padding-left:18px;
}

.service-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
}

/* Approach */
.timeline{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.timeline-item{
  padding:24px;
  background:rgba(9,15,43,.72);
  border:1px solid rgba(216,178,90,.16);
  border-radius:18px;
  min-height:168px;
  box-shadow:var(--shadow);
}

.timeline-item span{
  display:inline-block;
  color:var(--gold);
  font-size:1rem;
  letter-spacing:.18em;
  margin-bottom:12px;
}

.timeline-item h3{
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;
  font-weight:500;
  margin-bottom:8px;
}

/* Coming soon */
.coming-soon-card{
  margin-top:38px;
  padding:28px;
  background:rgba(9,15,43,.72);
  border:1px solid rgba(216,178,90,.20);
  border-radius:22px;
  display:flex;
  align-items:flex-start;
  gap:24px;
  box-shadow:var(--shadow);
}

.coming-badge{
  flex:0 0 auto;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(180deg, #f2d98d 0%, var(--gold) 100%);
  color:#111;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
}

.coming-copy h3{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  font-weight:500;
  margin-bottom:10px;
}

/* Contact */
.contact-strip{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}

.contact-strip a,
.contact-strip span{
  padding:14px 18px;
  border:1px solid rgba(216,178,90,.18);
  border-radius:999px;
  background:rgba(9,15,43,.72);
}

.contact-strip a{
  color:var(--ivory);
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
}

.modal.open{
  display:block;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,4,20,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.modal-card{
  position:relative;
  width:min(620px, calc(100% - 32px));
  margin:5vh auto 0;
  background:linear-gradient(180deg, #09113a 0%, #040818 100%);
  border:1px solid rgba(216,178,90,.24);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  padding:28px;
}

.modal-card h3{
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem;
  font-weight:500;
  margin-bottom:18px;
}

.modal-close{
  position:absolute;
  top:16px;
  right:18px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(216,178,90,.22);
  background:rgba(255,255,255,.04);
  color:var(--ivory);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}

.schedule-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.schedule-form label{
  display:grid;
  gap:8px;
  font-size:14px;
  color:rgba(247,243,237,.86);
}

.schedule-form input,
.schedule-form textarea{
  width:100%;
  border:1px solid rgba(216,178,90,.18);
  background:rgba(255,255,255,.04);
  color:var(--ivory);
  border-radius:14px;
  padding:14px 14px;
  outline:none;
}

.schedule-form input:focus,
.schedule-form textarea:focus{
  border-color:rgba(216,178,90,.55);
}

.schedule-form label:last-of-type{
  grid-column:1 / -1;
}

.schedule-form button{
  grid-column:1 / -1;
  padding:15px 18px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg, #f2d98d 0%, var(--gold) 100%);
  color:#111;
  font-weight:700;
  cursor:pointer;
  margin-top:4px;
}

/* Responsive */
@media (max-width: 1100px){
  .feature-grid,
  .service-grid,
  .timeline{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .hero-content{
    margin-left:34px;
    width:min(700px, calc(100% - 48px));
  }
}

@media (max-width: 800px){
  .topbar{
    padding:20px 16px 0;
  }

  .brand{
    gap:10px;
  }

  .brand-logo{
    height:42px;
  }

  .brand-copy span{
    font-size:1.4rem;
  }

  .brand-copy small{
    font-size:.64rem;
  }

  .icon-btn{
    width:48px;
    height:48px;
  }

  .menu-btn{
    width:48px;
  }

  .menu-btn span{
    width:28px;
  }

  .hero-content{
    margin:12vh 0 0 16px;
    width:calc(100% - 32px);
  }

  .hero h1{
    font-size:clamp(3.4rem, 13vw, 5rem);
    max-width:8.2ch;
  }

  .hero p{
    font-size:1rem;
    max-width:320px;
  }

  .floating-menu{
    right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .floating-main{
    width:66px;
    height:66px;
    font-size:2.3rem;
  }

  .floating-panel{
    width:154px;
    padding:14px 10px 12px;
    bottom:82px;
  }

  .floating-panel a,
  .floating-panel button{
    font-size:14px;
  }

  .curve{
    height:82px;
  }

  .about-section,
  .services-section,
  .approach-section,
  .future-section,
  .contact-section{
    padding:72px 0;
  }

  .feature-grid,
  .service-grid,
  .timeline{
    grid-template-columns:1fr;
  }

  .coming-soon-card{
    flex-direction:column;
  }

  .schedule-form{
    grid-template-columns:1fr;
  }

  .modal-card{
    margin-top:3vh;
    padding:22px;
  }
}
/* ==========================================================
   EARTHCON - PREMIUM SCHEDULE MEETING FORM OVERRIDES
   Paste at the END of style.css
========================================================== */

.modal-card{

    width:min(900px,92vw);

    max-height:92vh;
    max-height:92dvh;

    overflow-y:auto;

    padding:42px;

    border-radius:28px;

}

/* Scrollbar */

.modal-card::-webkit-scrollbar{
    width:8px;
}

.modal-card::-webkit-scrollbar-thumb{
    background:#d6ad44;
    border-radius:50px;
}

.modal-card::-webkit-scrollbar-track{
    background:transparent;
}


/* Subtitle */

.modal-subtitle{

    margin-top:10px;
    margin-bottom:28px;

    color:rgba(255,255,255,.72);

    font-size:15px;

    line-height:1.7;

}


/* Two column layout */

.schedule-form{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px 18px;

    padding-bottom:20px;

}


/* Labels */

.schedule-form label{

    display:flex;

    flex-direction:column;

    gap:10px;

    font-size:15px;

    font-weight:500;

    color:#e7e7e7;

}


/* Inputs */

.schedule-form input,
.schedule-form select,
.schedule-form textarea{

    width:100%;

    background:#131a46;

    color:#ffffff;

    border:1px solid rgba(214,173,68,.20);

    border-radius:16px;

    padding:16px 18px;

    font-size:15px;

    transition:.30s;

    outline:none;

    font-family:inherit;

}


/* Dropdown */

.schedule-form select{

    appearance:none;

    cursor:pointer;

}


/* Dropdown options */

.schedule-form option{

    background:#131a46;

    color:#ffffff;

}


/* Focus */

.schedule-form input:focus,
.schedule-form textarea:focus,
.schedule-form select:focus{

    border-color:#d6ad44;

    box-shadow:0 0 18px rgba(214,173,68,.18);

}


/* Placeholder */

.schedule-form input::placeholder,
.schedule-form textarea::placeholder{

    color:rgba(255,255,255,.35);

}


/* Textarea */

.schedule-form textarea{

    resize:vertical;

    min-height:170px;

}


/* Make Project Brief full width */

.schedule-form label:last-of-type{

    grid-column:1/-1;

}


/* CTA Button */

.schedule-form button{

    grid-column:1/-1;

    margin-top:6px;

    height:60px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#d6ad44,#f0d67d);

    color:#0b1030;

    font-weight:700;

    font-size:17px;

    cursor:pointer;

    transition:.35s;

}


.schedule-form button:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 32px rgba(214,173,68,.30);

}


/* Mobile */

@media (max-width:768px){

    .modal-card{

        width:95vw;

        padding:28px;

    }

    .schedule-form{

        grid-template-columns:1fr;

    }

    .schedule-form label:last-of-type{

        grid-column:auto;

    }

    .schedule-form button{

        grid-column:auto;

    }

}
/* ==========================================================
   EARTHCON PREMIUM GLASSMORPHISM
==========================================================*/

/* Floating Menu */

.floating-panel{

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    background:rgba(7,13,42,.72);

    border:1px solid rgba(214,173,68,.22);

    box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);

}


/* Burger Menu */

.menu-panel{

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    background:rgba(7,13,42,.72);

    border:1px solid rgba(214,173,68,.22);

    box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);

}


/* Schedule Modal */

.modal-card{

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    background:rgba(8,14,48,.86);

    border:1px solid rgba(214,173,68,.22);

    box-shadow:
    0 45px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);

}


/* Form Inputs */

.schedule-form input,
.schedule-form textarea,
.schedule-form select{

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}


/* Feature Cards */

.feature-card{

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    background:rgba(10,16,55,.45);

    border:1px solid rgba(214,173,68,.15);

}


/* Service Cards */

.service-card{

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    background:rgba(10,16,55,.45);

    border:1px solid rgba(214,173,68,.15);

}


/* Timeline */

.timeline-item{

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    background:rgba(10,16,55,.45);

    border:1px solid rgba(214,173,68,.15);

}


/* Future Service */

.coming-soon-card{

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    background:rgba(10,16,55,.45);

    border:1px solid rgba(214,173,68,.15);

}


/* Contact Pills */

.contact-strip a,
.contact-strip span{

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    background:rgba(255,255,255,.04);

}


/* Hover */

.feature-card:hover,
.service-card:hover,
.timeline-item:hover,
.coming-soon-card:hover{

    transform:translateY(-8px);

    border-color:#d6ad44;

    box-shadow:

    0 22px 45px rgba(0,0,0,.35),

    0 0 35px rgba(214,173,68,.10);

}


/* Gold Glow */

.schedule-form input:focus,
.schedule-form textarea:focus,
.schedule-form select:focus{

    border-color:#d6ad44;

    box-shadow:

    0 0 0 1px rgba(214,173,68,.35),

    0 0 25px rgba(214,173,68,.14);

}
/* ==========================================================
   EARTHCON PREMIUM V2
   SECTION 2 - 5
==========================================================*/


/* ==========================================================
   COMMON SECTION SPACING
==========================================================*/

.about-section,
.services-section,
.approach-section,
.future-section,
.contact-section{

    position:relative;

    padding:130px 0;

    overflow:hidden;

}

.container{

    width:min(1280px,90%);

    margin:auto;

}


/* ==========================================================
   SECTION LABELS
==========================================================*/

.section-label{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:50px;

    border:1px solid rgba(214,173,68,.18);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    color:#d6ad44;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:24px;

}


/* ==========================================================
   HEADINGS
==========================================================*/

.about-section h2,
.services-section h2,
.approach-section h2,
.future-section h2,
.contact-section h2{

    font-size:68px;

    line-height:1.08;

    font-weight:500;

    margin-bottom:28px;

    letter-spacing:-1px;

}


/* ==========================================================
   LEAD PARAGRAPH
==========================================================*/

.section-lead{

    width:760px;

    max-width:100%;

    color:rgba(255,255,255,.72);

    line-height:1.9;

    font-size:19px;

    margin-bottom:70px;

}


/* ==========================================================
   FEATURE CARDS
==========================================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}


.feature-card{

    padding:42px;

    border-radius:28px;

    transition:.45s;

    position:relative;

    overflow:hidden;

}


.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,#d6ad44,transparent);

    opacity:0;

    transition:.4s;

}


.feature-card:hover::before{

    opacity:1;

}


.feature-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(214,173,68,.08);

    border:1px solid rgba(214,173,68,.20);

    margin-bottom:26px;

}


.feature-icon svg{

    width:30px;

    height:30px;

    fill:#d6ad44;

}


.feature-card h3{

    font-size:34px;

    margin-bottom:18px;

}


.feature-card p{

    color:rgba(255,255,255,.72);

    line-height:1.8;

}


/* ==========================================================
   SERVICE GRID
==========================================================*/

.service-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}


.service-card{

    padding:38px;

    border-radius:24px;

    transition:.4s;

    position:relative;

}


.service-card:hover{

    transform:translateY(-10px);

}


.service-card h3{

    margin-bottom:22px;

    font-size:30px;

}


.service-card ul{

    list-style:none;

    padding:0;

}


.service-card li{

    padding-left:26px;

    margin-bottom:14px;

    position:relative;

    color:rgba(255,255,255,.78);

}


.service-card li::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:#d6ad44;

    position:absolute;

    left:0;

    top:11px;

}


/* ==========================================================
   PROCESS
==========================================================*/

.timeline{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}


.timeline-item{

    padding:34px;

    border-radius:24px;

    transition:.35s;

    position:relative;

}


.timeline-item span{

    display:inline-flex;

    width:42px;

    height:42px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    background:#d6ad44;

    color:#081030;

    font-weight:700;

    margin-bottom:22px;

}


.timeline-item h3{

    margin-bottom:14px;

    font-size:28px;

}


.timeline-item p{

    color:rgba(255,255,255,.72);

}


.timeline-item:hover{

    transform:translateY(-8px);

}


/* ==========================================================
   COMING SOON
==========================================================*/

.coming-soon-card{

    padding:52px;

    border-radius:30px;

    display:flex;

    align-items:center;

    gap:36px;

}


.coming-badge{

    padding:12px 20px;

    border-radius:40px;

    background:#d6ad44;

    color:#081030;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

}


.coming-copy h3{

    font-size:34px;

    margin-bottom:12px;

}


.coming-copy p{

    color:rgba(255,255,255,.72);

    line-height:1.8;

}


/* ==========================================================
   CONTACT
==========================================================*/

.contact-strip{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}


.contact-strip a,
.contact-strip span{

    padding:18px 28px;

    border-radius:50px;

    border:1px solid rgba(214,173,68,.18);

    text-decoration:none;

    color:white;

    transition:.35s;

}


.contact-strip a:hover{

    background:#d6ad44;

    color:#081030;

}


/* ==========================================================
   GLOW
==========================================================*/

.feature-card:hover,
.service-card:hover,
.timeline-item:hover,
.coming-soon-card:hover{

    box-shadow:

    0 22px 55px rgba(0,0,0,.35),

    0 0 30px rgba(214,173,68,.12);

}


/* ==========================================================
   RESPONSIVE
==========================================================*/

@media(max-width:1100px){

.feature-grid{

grid-template-columns:repeat(2,1fr);

}

.timeline{

grid-template-columns:repeat(2,1fr);

}

.service-grid{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

.about-section h2,
.services-section h2,
.approach-section h2,
.future-section h2,
.contact-section h2{

font-size:46px;

}

.section-lead{

font-size:17px;

}

.coming-soon-card{

flex-direction:column;

align-items:flex-start;

}

}
/* ==========================================================
SECTION 2
ABOUT US PREMIUM V2
==========================================================*/

.about-section{

    padding:160px 0;

    position:relative;

}

.about-section .container{

    width:min(1250px,90%);

    margin:auto;

}

.section-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}


/* ---------------------------------
SECTION LABEL
---------------------------------*/

.about-section .section-label{

    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:11px;

    font-weight:600;

    color:#D6AD44;

    border:1px solid rgba(214,173,68,.18);

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

}


/* ---------------------------------
HEADLINE
---------------------------------*/

.about-section h2{

    margin-top:30px;

    font-family:"Cormorant Garamond",serif;

    font-size:74px;

    font-weight:500;

    line-height:1.08;

    letter-spacing:-1px;

    color:#D6AD44;

}


/* ---------------------------------
PARAGRAPH
---------------------------------*/

.about-section .section-lead{

    margin-top:35px;

    font-size:20px;

    line-height:2;

    color:rgba(255,255,255,.74);

}


/* ---------------------------------
WHY EARTHCON
---------------------------------*/

.why-earthcon{

    margin-top:100px;

    width:min(1450px,95%);

    margin-inline:auto;

}

.why-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

}

.why-header h3{

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    font-weight:500;

    color:#D6AD44;

}

.carousel-controls{

    display:flex;

    gap:14px;

}

.carousel-controls button{

    width:52px;

    height:52px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    background:rgba(255,255,255,.05);

    color:#D6AD44;

    font-size:20px;

    transition:.35s;

}

.carousel-controls button:hover{

    background:#D6AD44;

    color:#081030;

}


/* ---------------------------------
CAROUSEL
---------------------------------*/

.why-carousel{

    overflow-x:hidden;
    overflow-y:visible;

    position:relative;

    padding-top:20px;
}


.why-track{

    display:flex;

    gap:28px;

    width:max-content;

}


/* ---------------------------------
CARDS
---------------------------------*/

.why-card{

    width:360px;

    padding:48px;

    border-radius:32px;

    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(214,173,68,.12);

    transition:.45s;

    position:relative;

    /* Bug fix: every other card on the site (service-card, etc.) uses
       overflow:visible and has no seam issue. why-card was the only
       card using overflow:hidden (needed only for the gold top-line
       decoration below), and that specific combination with
       border-radius + backdrop-filter is what caused the persistent
       seam. Matching the same overflow:visible pattern the rest of
       the site already uses correctly. */
    overflow:visible;

}


/* HOVER */

.why-card:hover{

    transform:translateY(-14px);

    border-color:#D6AD44;

    box-shadow:

    0 25px 60px rgba(0,0,0,.35),

    0 0 30px rgba(214,173,68,.12);

}


/* ---------------------------------
ICON
---------------------------------*/

.why-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    background:rgba(214,173,68,.08);

    border:1px solid rgba(214,173,68,.18);

    font-size:34px;

    transition:.35s;

}

.why-card:hover .why-icon{

    transform:scale(1.08);

    box-shadow:

    0 0 30px rgba(214,173,68,.18);

}


/* ---------------------------------
TITLE
---------------------------------*/

.why-card h4{

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    font-weight:500;

    line-height:1.25;

    color:#D6AD44;

    margin-bottom:18px;

}


/* ---------------------------------
TEXT
---------------------------------*/

.why-card p{

    color:rgba(255,255,255,.72);

    font-size:17px;

    line-height:1.9;

}


/* ---------------------------------
LINK
---------------------------------*/

.why-card span{

    display:inline-block;

    margin-top:26px;

    color:#D6AD44;

    letter-spacing:1px;

    font-size:14px;

    transition:.35s;

}

.why-card:hover span{

    transform:translateX(10px);

}


/* ---------------------------------
RESPONSIVE
---------------------------------*/

@media(max-width:900px){

.why-header{

flex-direction:column;

gap:30px;

}

.why-card{

width:300px;

padding:34px;

}

.about-section h2{

font-size:52px;

}

.about-section .section-lead{

font-size:17px;

}

}
/*======================================
ABOUT SECTION
======================================*/

.about-section{
    padding:140px 8%;
    background:#030726;
}

.section-heading{
    max-width:850px;
    margin:0 auto 80px;
    text-align:center;
}

.section-heading .section-label{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 24px;

    border:1px solid rgba(215,170,70,.28);

    border-radius:40px;

    font-size:.72rem;

    letter-spacing:4px;

    font-weight:600;

    color:#D7AA46;

    margin-bottom:34px;

    text-transform:uppercase;
}

.section-heading h2{

    font-family:'Cormorant Garamond',serif;

    font-size:72px;

    font-weight:500;

    line-height:1;

    color:#D7AA46;

    margin-bottom:32px;
}

.section-heading .section-lead{

    max-width:760px;

    margin:auto;

    font-size:24px;

    line-height:1.9;

    font-weight:300;

    color:rgba(255,255,255,.82);

    letter-spacing:.2px;
}

/* Responsive */

@media(max-width:992px){

.section-heading h2{

font-size:52px;

}

.section-heading .section-lead{

font-size:20px;

}

}

@media(max-width:768px){

.about-section{

padding:90px 30px;

}

.section-heading{

margin-bottom:55px;

}

.section-heading h2{

font-size:42px;

}

.section-heading .section-lead{

font-size:18px;

line-height:1.7;

}

}
/*=========================================================
EARTHCON PREMIUM TYPOGRAPHY
Paste at bottom of style.css
=========================================================*/

:root{

    --ec-gold:#D6AD44;
    --ec-text:rgba(255,255,255,.82);
    --ec-muted:rgba(255,255,255,.65);

}

/*---------------------------------------------------------
SECTION LABELS
---------------------------------------------------------*/

.section-label{

    color:var(--ec-gold) !important;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:12px;

    font-weight:600;

}

/*---------------------------------------------------------
ALL MAIN HEADINGS
---------------------------------------------------------*/

h2{

    font-family:'Cormorant Garamond',serif;

    color:var(--ec-gold);

    font-weight:500;

    letter-spacing:-.5px;

    line-height:1.05;

}

/*---------------------------------------------------------
CARD HEADINGS
---------------------------------------------------------*/

h3{

    font-family:'Cormorant Garamond',serif;

    color:var(--ec-gold);

    font-weight:500;

    line-height:1.2;

}

/*---------------------------------------------------------
SUB HEADINGS
---------------------------------------------------------*/

h4{

    color:var(--ec-gold);

    font-weight:600;

    letter-spacing:.3px;

}

/*---------------------------------------------------------
BODY TEXT
---------------------------------------------------------*/

.section-lead{

    color:var(--ec-text);

    line-height:1.9;

}

.feature-card p,
.service-card p,
.service-card li,
.timeline-item p,
.coming-copy p,
.contact-strip,
.contact-strip a,
.about-section p,
.services-section p,
.approach-section p,
.future-section p{

    color:var(--ec-text);

    line-height:1.8;

}

/*---------------------------------------------------------
LISTS
---------------------------------------------------------*/

.service-card li{

    margin-bottom:14px;

}

/*---------------------------------------------------------
CARD TITLES
---------------------------------------------------------*/

.feature-card h3,
.service-card h3,
.timeline-item h3,
.coming-copy h3{

    color:var(--ec-gold);

}

/*---------------------------------------------------------
CONTACT
---------------------------------------------------------*/

.contact-strip a{

    color:var(--ec-text);

    transition:.3s;

}

.contact-strip a:hover{

    color:var(--ec-gold);

}

/*---------------------------------------------------------
GOLD ACCENT LINE
---------------------------------------------------------*/

.feature-card,
.service-card,
.timeline-item,
.coming-soon-card{

    border-top:2px solid rgba(214,173,68,.18);

}

/*---------------------------------------------------------
BETTER PARAGRAPH WIDTH
---------------------------------------------------------*/

.section-lead{

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

}

/*---------------------------------------------------------
SMOOTHER SPACING
---------------------------------------------------------*/

.about-section,
.services-section,
.approach-section,
.future-section,
.contact-section{

    padding-top:120px;

    padding-bottom:120px;

}

/*---------------------------------------------------------
PREMIUM TEXT SELECTION
---------------------------------------------------------*/

::selection{

    background:#D6AD44;

    color:#030726;

}
/*=========================================================
LEFT ALIGN ALL SECTION COPY
=========================================================*/

.section-lead{

    text-align:left !important;

    max-width:760px;

    margin:35px auto 0;

}

/* Keep headings centred */

.section-heading h2,
.section-heading .section-label{

    text-align:center;

}

/* Left align all section content */

.about-section .section-lead,
.services-section .section-lead,
.approach-section .section-lead,
.future-section .section-lead,
.contact-section .section-lead{

    text-align:left;

    max-width:760px;

    margin-top:32px;

}

/* Service card content */

.service-card{

    text-align:left;

}

/* About cards */

.feature-card{

    text-align:left;

}

/* Timeline */

.timeline-item{

    text-align:left;

}

/* Coming Soon */

.coming-copy{

    text-align:left;

}

/* Contact */

.contact-section{

    text-align:center;

}

.contact-strip{

    justify-content:center;

}
/*=========================================
SECTION TITLE HIERARCHY
=========================================*/

.section-label{

    margin-bottom:22px !important;

}

.about-section h2,
.services-section h2,
.approach-section h2,
.future-section h2,
.contact-section h2{

    margin-bottom:22px !important;

    line-height:1.05;

}

.section-lead{

    margin-top:0 !important;

    max-width:760px;

    line-height:1.75;

}

/* About section */

.about-section .container{

    max-width:1100px;

}

/* Approach */

.approach-section .section-lead{

    max-width:760px;

}

/* Service */

.services-section .section-lead{

    max-width:760px;

}

/* Future */

.future-section .section-lead{

    max-width:760px;

}

/* Contact */

.contact-section .section-lead{

    margin-bottom:45px;

}
/*=========================================
CONTACT PILLS
=========================================*/

.contact-strip a,
.contact-strip span{

    background:transparent !important;

    border:1px solid rgba(214,173,68,.22);

    color:rgba(255,255,255,.82);

    transition:.35s ease;

}

.contact-strip a:hover{

    background:rgba(255,255,255,.04) !important;

    color:#D6AD44 !important;

    border-color:#D6AD44;

    transform:translateY(-3px);

    box-shadow:0 10px 30px rgba(214,173,68,.12);

}
/* =====================================================
   EARTHCON FIX PACK V1
   Paste at the VERY END of style.css
===================================================== */

/* ---------- FIX 1 : SHOW ALL 6 CARDS ---------- */

.why-earthcon{
    width:100% !important;
    max-width:1400px !important;
    margin:90px auto 0 !important;
}

.why-carousel{
    overflow:hidden !important;
    width:100% !important;
    max-width:100% !important;
    padding:30px 0 !important;
}

.why-track{
    display:flex !important;
    gap:26px !important;
    width:max-content !important;
}

.why-card{

    flex:0 0 360px !important;

    overflow:visible !important;

}


/* ---------- FIX 2 : DON'T CUT GLOW ---------- */

.why-earthcon{

    overflow:visible !important;

}

.why-carousel{

    overflow:hidden !important;

}

.why-card{

    overflow:visible !important;

    position:relative;

    z-index:1;

}

.why-card:hover{

    z-index:20;

}


/* ---------- FIX 3 : GIVE ROOM FOR SHADOW ---------- */

.why-carousel{

    padding-top:24px !important;

    padding-bottom:40px !important;

}


/* ---------- FIX 4 : PREVENT LAST CARD FROM CLIPPING ---------- */

.why-track{

    padding-right:24px !important;

}


/* ---------- FIX 5 : SMOOTHER HOVER ---------- */

.why-card{

    transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s,
    border-color .35s;

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.45),
        0 0 26px rgba(214,173,68,.25);

}
/* ==========================================================
   EARTHCON PREMIUM CONTACT SECTION V1
========================================================== */

.contact-section{

    padding:140px 0 70px;
    text-align:center;

}

.contact-section .container{

    max-width:1200px;
    margin:auto;

}

.contact-section .section-label{

    margin-bottom:24px;

}

.contact-section h2{

    font-size:clamp(58px,6vw,78px);
    line-height:1.05;
    margin-bottom:28px;
    color:#D8AE45;

}

.contact-section .section-lead{

    max-width:760px;
    margin:0 auto 70px;
    color:rgba(255,255,255,.72);
    font-size:20px;
    line-height:1.8;

}

/* CTA */

.contact-cta-wrapper{

    margin-bottom:90px;

}

.callback-btn{

    background:linear-gradient(135deg,#E8C96A,#D8AE45);
    color:#08112F;

    font-family:Inter,sans-serif;
    font-size:15px;
    font-weight:700;

    letter-spacing:3px;
    text-transform:uppercase;

    padding:22px 60px;

    border:none;
    border-radius:70px;

    cursor:pointer;

    transition:.35s;

    box-shadow:
    0 18px 45px rgba(216,174,69,.25);

}

.callback-btn span{

    margin-left:14px;
    font-size:22px;

}

.callback-btn:hover{

    transform:translateY(-6px);

    box-shadow:
    0 28px 65px rgba(216,174,69,.38);

}

/* FOOTER NAV */

.footer-nav{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:38px;

    margin-bottom:45px;

}

.footer-nav a{

    color:rgba(255,255,255,.65);

    text-decoration:none;

    letter-spacing:2px;

    font-size:13px;

    text-transform:uppercase;

    transition:.3s;

}

.footer-nav a:hover{

    color:#D8AE45;

}

/* Divider */

.footer-divider{

    width:180px;
    height:1px;

    margin:0 auto 26px;

    background:rgba(216,174,69,.25);

}

/* Copyright */

.footer-copy{

    color:rgba(255,255,255,.42);

    font-size:13px;

    letter-spacing:1px;

}
/* ===========================================================
   ABOUT SECTION V2 — LAYOUT & PREMIUM TYPOGRAPHY
=========================================================== */

.about-section{
    position:relative;
    padding:140px 0 120px;
    overflow:hidden;
}

.about-section .container{
    width:min(1280px,90%);
    margin:0 auto;
}

.about-section .section-label{
    margin-bottom:32px;
}

.about-section h2{
    max-width:760px;
    margin:0 auto 34px;
    text-align:center;

    font-family:"Cormorant Garamond",serif;
    font-size:72px;
    font-weight:500;
    line-height:1.05;
    letter-spacing:-1px;

    color:#d7af43;
}

.about-section .section-lead{
    max-width:650px;
    margin:0 auto;

    text-align:left;

    font-size:20px;
    line-height:1.9;
    font-weight:400;

    color:rgba(245,245,245,.86);
}

/* --------------------------------------------------------- */

.about-carousel{

    margin-top:110px;

}

.about-carousel-header{

    max-width:1280px;
    margin:0 auto 46px;

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.about-carousel-title{

    font-family:"Cormorant Garamond",serif;
    font-size:52px;
    font-weight:500;
    letter-spacing:-0.4px;

    color:#d7af43;

}

.about-carousel-nav{

    display:flex;
    gap:16px;

}

.about-carousel-nav button{

    width:54px;
    height:54px;

    border-radius:50%;

    border:1px solid rgba(215,175,67,.18);

    background:rgba(255,255,255,.04);

    color:#d7af43;

    cursor:pointer;

    transition:.35s;

}

.about-carousel-nav button:hover{

    background:#d7af43;
    color:#06102b;
    transform:translateY(-2px);

}

/* --------------------------------------------------------- */

.about-carousel-viewport{

    overflow:hidden;

    padding:18px 10px 26px;

}

.about-carousel-track{

    display:flex;
    gap:34px;

    will-change:transform;

    transition:
        transform .9s cubic-bezier(.22,.61,.36,1);

}

/* --------------------------------------------------------- */

.about-card{

    flex:0 0 calc((100% - 68px)/3);

    min-width:380px;

    position:relative;

    border-radius:34px;

    padding:42px;

    overflow:visible;

}

.about-card h3{

    margin:28px 0 20px;

    font-family:"Cormorant Garamond",serif;

    font-size:42px;
    line-height:1.12;
    font-weight:500;

    color:#d7af43;

}

.about-card p{

    margin:0;

    font-size:19px;
    line-height:1.85;

    color:rgba(255,255,255,.78);

}

/* --------------------------------------------------------- */

.about-card .learn-more{

    margin-top:34px;

    display:inline-flex;
    align-items:center;
    gap:10px;

    font-size:15px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;

}
/* =========================================================
   SERVICE SECTION - PREMIUM POLISH
========================================================= */

.service-section{
    padding-top:120px;
    padding-bottom:140px;
}

.service-section .section-header{
    max-width:1100px;
    margin:0 auto 55px;
    text-align:left;
}

.service-section .section-tag{
    margin-bottom:18px;
    letter-spacing:.32em;
}

.service-section h2{
    margin:0 0 18px;
    line-height:1.08;
}

.service-section .section-subtitle{
    max-width:620px;
    margin:0;
    text-align:left;
    font-size:1.08rem;
    line-height:1.9;
    color:rgba(255,255,255,.78);
}

/* tighter spacing before cards */

.service-grid{
    margin-top:50px;
}
/* =========================================================
   PREMIUM SERVICE CARDS
========================================================= */

.service-card{

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(214,176,73,.18);

    border-radius:28px;

    padding:42px;

    min-height:340px;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        background .45s ease;
}

.service-card:hover{

    transform:translateY(-8px);

    border-color:rgba(214,176,73,.65);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 24px 70px rgba(0,0,0,.28),
        0 0 28px rgba(214,176,73,.08);
}

/* make every card identical */

.service-grid{
    align-items:stretch;
}

.service-card{
    display:flex;
    flex-direction:column;
}
/* =========================================================
   TYPOGRAPHY
========================================================= */

.service-card h3{

    font-size:2rem;

    line-height:1.25;

    margin-bottom:30px;

    color:#D6B049;

    font-family:"Cormorant Garamond",serif;

    font-weight:600;
}

.service-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:0;

    padding:0;

    list-style:none;
}

.service-card li{

    position:relative;

    padding-left:24px;

    color:rgba(255,255,255,.82);

    line-height:1.8;

    font-size:1rem;
}

/* premium gold bullets */

.service-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:12px;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#D6B049;

    box-shadow:0 0 10px rgba(214,176,73,.45);
}

/* =====================================================
   ALIGNMENT CONSISTENCY FIX (desktop pass, July 2026)
   The file has several old duplicate rules for
   .section-heading and .section-lead that fight each
   other (some center, some left-align). Rather than
   hunt every duplicate down right now, this block wins
   the cascade cleanly and documents the intended rule:

   - About / Services / Approach / Future sections:
     heading + lead + carousel headings all LEFT aligned,
     flush to the same left edge as the container.
   - Contact section: intentionally CENTERED (CTA banner).

   NOTE: the old duplicate rules still physically exist
   earlier in this file and should be deleted in a future
   full cleanup pass -- flagged separately, not done here
   to avoid risking a visual regression on this pass.
===================================================== */

.about-section .section-heading{
    max-width:650px;
    margin:0;
    text-align:left !important;
}

.about-section .section-heading h2{
    text-align:left !important;
}

.about-section .section-heading .section-label{
    margin-left:0;
    justify-content:flex-start;
}

.about-section .section-lead,
.services-section .section-lead,
.approach-section .section-lead,
.future-section .section-lead{
    margin-left:0;
    margin-right:0;
    text-align:left;
}

.contact-section .section-lead{
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
}

/* Bug fix: the carousel track had no transition property at all,
   so every auto-slide was an instant, unanimated jump rather than
   a smooth motion -- this is very likely what read as "poor/half
   animation" on mobile. */
.why-track{
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
/* ==========================================================
   FOUNDER BLOCK (About section)
========================================================== */

.founder-block{
    max-width:650px;
    margin:56px 0 0;
    text-align:left;
}

.founder-rule{
    width:56px;
    height:2px;
    background:var(--gold);
    margin-bottom:22px;
}

.founder-label{
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    color:var(--gold) !important;
    margin-bottom:14px;
}

.founder-copy{
    color:var(--muted);
    font-size:1rem;
    line-height:1.8;
    margin-bottom:16px;
    max-width:60ch;
}

.founder-copy:last-child{
    margin-bottom:0;
}

/* ==========================================================
   RERA PANEL (Contact section)
========================================================== */

.rera-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    max-width:680px;
    margin:56px auto 56px;
    padding:32px 36px;
    background:rgba(9,15,43,.72);
    border:1px solid rgba(216,178,90,.20);
    border-radius:22px;
    box-shadow:var(--shadow);
    text-align:left;
}

.rera-panel-text{
    flex:1 1 auto;
}

.rera-panel-label{
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--gold);
    margin-bottom:10px;
}

.rera-panel-number{
    font-size:1.05rem;
    font-weight:600;
    color:var(--ivory);
    margin-bottom:10px;
}

.rera-panel-note{
    font-size:.9rem;
    line-height:1.6;
    color:var(--muted);
}

.rera-panel-qr{
    flex:0 0 auto;
    text-align:center;
}

.rera-panel-qr img{
    width:96px;
    height:96px;
    border-radius:10px;
    background:#fff;
    padding:6px;
    display:block;
}

.rera-panel-qr p{
    margin-top:8px;
    font-size:11px;
    letter-spacing:.5px;
    color:rgba(255,255,255,.5);
}

/* ==========================================================
   FOOTER RERA BADGE
========================================================== */

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
}

.footer-rera-badge{
    padding:6px 14px;
    border:1px solid rgba(216,178,90,.28);
    border-radius:999px;
    font-size:11px;
    letter-spacing:.5px;
    color:rgba(255,255,255,.55);
    white-space:nowrap;
}

/* ==========================================================
   FORM RERA TRUST LINE
========================================================== */

.form-rera-note{
    grid-column:1 / -1;
    text-align:center;
    font-size:12px;
    letter-spacing:.4px;
    color:rgba(255,255,255,.5);
    margin-top:4px;
    margin-bottom:2px;
}

.footer-email{
    font-size:13px;
    letter-spacing:.3px;
    color:rgba(255,255,255,.42);
}

.footer-email a{
    color:rgba(255,255,255,.62);
    text-decoration:none;
    border-bottom:1px solid rgba(216,178,90,.35);
    transition:color .2s ease;
}

.footer-email a:hover{
    color:var(--gold);
}

/* Bug fix: the carousel container was rendering at its full ~1100px
   container width on desktop, showing ~2.85 cards at once. Since each
   card is a fixed 360px + 26px gap, the 3rd card in view only had
   ~356px of the carousel's remaining width to sit in (1100 - 2*386 =
   328px), so it was genuinely clipped by ~30px at the carousel's own
   right edge -- this is the exact "side gets cut" bug. Narrowing the
   visible window to ~1.6 cards removes the partial 3rd card entirely,
   so there's nothing left to clip. (This fix existed earlier in the
   project but was lost when style.css was reverted to an older
   baseline for an unrelated carousel change -- re-adding it here.)
*/
@media (min-width:769px){
  .why-carousel{
    max-width:750px !important;
  }
}