/* ========== Brand tokens ========== */
:root{
  --brand-blue: #30446d;
  --brand-gold: #fbb03b;
  --grey-900: #0f1115;
  --grey-700: #2b2f36;
  --grey-500: #6b7280;
  --grey-200: #e5e7eb;
  --grey-100: #f3f4f6;
  --white: #fff;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08); 
  --shadow-soft: 0 4px 14px rgba(0,0,0,0.05);

  --container: 1160px;
  --gutter: 24px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--grey-900);
  line-height: 1.6;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}

/* Typography */
h1,h2,h3{
  font-family: 'Playfair Display', serif; 
  line-height: 1.2;
  margin: 0 0 .5rem;
  font-weight: 600;
  color: var(--brand-blue); 
}

h1{font-size:clamp(2.5rem, 4vw, 3.8rem)}
h2{font-size:clamp(1.8rem, 2.5vw, 2.5rem)}
h3{font-size:1.25rem}

p{margin:.5rem 0 1rem}
.lead{font-size:1.25rem; font-weight:400; color:var(--grey-700)}
.small{font-size:.9rem}
.muted{color:var(--grey-500)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:80px 0}
.section--alt{background:var(--grey-100)}
.section__head{margin:0 0 40px; text-align:center; max-width:700px; margin-left:auto; margin-right:auto;}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden;border:0}

/* Section Label for "About" */
.section-label {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--brand-gold);
    font-weight: 600;
    margin-bottom: 10px;
}

/* Links */
.ccg-link-underline{
  position:relative;
  text-decoration:none;
  transition:color .3s ease;
  border-bottom:none !important;
}
.ccg-link-underline::after{
  content:"";
  position:absolute;
  left:50%;bottom:-2px;
  width:0;height:1px;
  background:var(--brand-gold);
  transform:translateX(-50%);
  transition:width .3s ease;
}
.ccg-link-underline:hover{color:var(--brand-blue)}
.ccg-link-underline:hover::after{width:100%}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--brand-blue);
  padding:12px 24px; font-weight:500; letter-spacing: 0.5px;
  line-height:1;cursor:pointer;text-decoration:none;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.btn--primary{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
.btn--primary:hover{background:var(--brand-gold);border-color:var(--brand-gold);color:#0f1115; transform:translateY(-2px); box-shadow: 0 4px 12px rgba(251, 176, 59, 0.3);}

/* Topbar */
.topbar{position:sticky;top:0;background:var(--grey-100);z-index:2000;border-bottom:1px solid var(--grey-200)}
.topbar .container{display:flex;align-items:center;justify-content:flex-end;height:44px}
.topbar__right{display:flex;align-items:center;gap:12px}
.topbar__link{font-size:.9rem;color:var(--grey-700)}
.topbar__sep{color:var(--grey-200)}
.topbar .contact-icon{display:none;margin-left:8px}
@media (max-width:520px){
  .topbar .container{justify-content:center}
  .topbar .contact-text{display:none}
  .topbar .contact-icon{display:inline-block}
  .topbar__sep{display:none}
}

/* Header */
.site-header{background:rgba(255,255,255,0.95); backdrop-filter:blur(5px); border-bottom:1px solid var(--grey-200);position:sticky;top:44px;z-index:2500}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo img{height:80px;width:auto;}
.logo:hover img { transform: none; }

/* Nav */
.nav__toggle{display:none;background:transparent;border:none;padding:8px;cursor:pointer;z-index:2600}
.nav__toggle .line{display:block;width:24px;height:2px;background:var(--brand-blue);margin:5px 0;transition:all .3s}
.nav__toggle.active .line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.active .line:nth-child(2){opacity:0}
.nav__toggle.active .line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav__list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav__link{font-weight:500; font-size: 0.95rem; color:var(--grey-700)}

@media (max-width:1080px){
  .nav__toggle{display:block}
  .nav__list{
    position:absolute;inset:calc(100% + 10px) 16px auto 16px;
    flex-direction:column;background:#fff;padding:24px;
    border-radius:var(--radius);box-shadow:var(--shadow);
    transform: translateY(-10px); opacity: 0; pointer-events: none; transition: all 0.3s ease;
  }
  .nav__list.is-open{transform: translateY(0); opacity: 1; pointer-events: auto;}
}

/* Hero */
.hero{position:relative;min-height:75vh;display:grid;place-items:center;overflow:hidden}
.hero__slides{position:absolute;inset:0;z-index:0}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroFade 18s linear infinite}
.hero__slide:nth-child(1){animation-delay:0s}
.hero__slide:nth-child(2){animation-delay:6s}
.hero__slide:nth-child(3){animation-delay:12s}

.hero__slides::after {
    content: ''; position: absolute; inset:0; background: rgba(0,0,0,0.3);
}

@keyframes heroFade{
  0%{opacity:0;transform:scale(1)}
  5%,30%{opacity:1}
  35%{opacity:0;transform:scale(1.05)}
  100%{opacity:0}
}

.hero__content{
  position:relative;z-index:1;background:rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  text-align:center;
  max-width: 700px;
  border: 1px solid rgba(255,255,255,0.5);
}
.hero__content h1{ color: var(--brand-blue); margin-bottom: 12px; }

/* About Us Grid & Parallax */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media(max-width:900px) {
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .parallax-frame { background-attachment: scroll !important; }
}

.about-text .text-block {
    margin-top: 20px;
    color: var(--grey-700);
}

.parallax-frame {
    width: 100%;
    height: 500px; 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: relative;
}

/* Services Grid */
.grid{display:grid;gap:24px}
.grid--services{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}

.card{
  border:1px solid var(--grey-200);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-soft);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display:flex; flex-direction:column;
  position: relative;
}

.card__media{ overflow: hidden; height: 200px; position: relative; z-index: 0; }
.card__media img { 
    width:100%; height:100%; object-fit:cover; 
    transition: transform 0.6s ease; 
}
.card:hover .card__media img { transform: scale(1.1); } 
.card:hover{ transform:translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); border-color: var(--brand-gold); }

.card__body{padding:24px; flex-grow:1; display:flex; flex-direction:column;}

.service-link{
  margin-top:auto; font-weight: 500; font-size: 0.9rem;
  color: var(--brand-blue) !important;
}
.service-link:visited{ color: var(--brand-blue) !important; }

.stretched-link::after {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: "";
}

/* Commercial note */
.commercial-note {
  margin-top: 40px;
  padding: 24px;
  border-left: 5px solid var(--brand-gold);
  background: var(--grey-100);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

/* Why Choose */
.grid--why{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){ .grid--why{grid-template-columns:1fr;} }

.reason{
    background:#fff; padding:32px; border-radius:var(--radius); 
    box-shadow:var(--shadow-soft); text-align:center; border: 1px solid transparent;
    transition: all 0.3s ease;
}
.reason:hover { border-color: var(--brand-gold); transform: translateY(-5px); }
.why-icon{font-size:2.5rem; color:var(--brand-gold); margin-bottom:1rem;}

/* Accreditations */
.accreditations{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media(max-width:900px){.accreditations{grid-template-columns:1fr}}
.ticks li{padding-left:32px; margin-bottom:10px; position:relative;}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--brand-gold); font-weight:bold;}

.accreditations__logos { display: flex; flex-wrap: wrap; gap: 24px; }
.accreditations__logos img { height: 60px; width: auto; opacity: 0.8; transition: opacity 0.3s; margin-bottom: 10px; }
.accreditations__logos img:hover { opacity: 1; }

/* Process */
.process{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; list-style:none; padding:0; }
@media(max-width:900px){ .process{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .process{grid-template-columns:1fr;} }

.process li{
    background:#fff; padding:24px; border-radius:var(--radius); box-shadow:var(--shadow-soft); position:relative;
    border: 1px solid var(--grey-200); text-align: center;
}
.process li::before{
    counter-increment:step; content:counter(step);
    position:absolute; top:-15px; left:50%; transform: translateX(-50%);
    background:var(--brand-blue); color:#fff;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:700;
    border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.step-icon { font-size: 2rem; color: var(--brand-gold); margin-top: 10px; margin-bottom: 10px; }

/* Quote */
.statement-quote{
    position:relative; max-width:900px; margin:0 auto; padding:40px;
    font-family:'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 2.2rem);
    text-align:center; color:var(--brand-blue);
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
}
.statement-quote::before{content:"“"; position:absolute; left:20px; top:10px; font-size:4rem; color:var(--brand-gold); opacity:0.3; font-family: serif;}

/* FAQ Accordion */
.accordion__item {
  border: 1px solid var(--grey-200); border-radius: var(--radius);
  background: #fff; margin: 12px 0; box-shadow: var(--shadow-soft); overflow: hidden; 
}
.accordion__item summary {
  cursor: pointer; padding: 18px 24px; font-weight: 600; list-style: none;
  background: #fff; color: var(--brand-blue); position: relative;
}
.accordion__item[open] summary { border-bottom: 1px solid var(--grey-200); background: var(--grey-100); }
.accordion__panel { padding: 18px 24px; }

/* Forms & Contact */
.contact{display:grid;grid-template-columns:1fr 1.5fr;gap:40px}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.form{padding:32px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.form__row{grid-template-columns:1fr}}
.form__field{display:flex;flex-direction:column;gap:8px; margin-bottom: 20px;}
.form__field label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--brand-blue); }

.contact-link { color: var(--brand-blue); text-decoration: none; font-weight: 600; }
.contact-link:hover { color: var(--brand-gold); }

input, select, textarea {
    padding: 12px; border: 1px solid var(--grey-200); border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(48, 68, 109, 0.1);
}

/* Floating Action Buttons */
.floating-controls {
    position: fixed; bottom: 30px; right: 30px; z-index: 9999;
    display: flex; flex-direction: column; gap: 15px; opacity: 0;
    pointer-events: none; transform: translateY(20px); transition: all 0.4s ease;
}
.floating-controls.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.floating-btn {
    width: 50px; height: 50px; background: var(--brand-blue); color: #fff;
    border-radius: 50%; display: grid; place-items: center; text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; font-size: 1.2rem;
}
.floating-btn:hover { background: var(--brand-gold); color: var(--grey-900); transform: scale(1.1); }

/* Footer */
.site-footer{background:#0f1115; color:var(--grey-500); padding:60px 0 30px;}
.site-footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
@media(max-width:800px){
  .site-footer__inner{grid-template-columns:1fr; text-align: center;}
  .site-footer__brand, .footer-acc-logos, .footer-social{justify-content: center;}
}
.site-footer a{color:var(--grey-200);}
.site-footer__brand img { filter: brightness(0) invert(1); opacity: 0.8; height: auto; width: 200px; margin-bottom: 15px; }
.footer-acc-logos { display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap; }
.footer-acc-logos img { height: 35px; width: auto; background: #fff; padding: 2px; border-radius: 4px; }
.footer-social { display: flex; gap: 20px; margin-top: 20px; font-size: 1.5rem; }
.footer-social a:hover { color: var(--brand-gold); }

/* ========== Service Detail Pages ========== */
.service-hero { 
  position: relative; padding: 120px 0 60px; background: var(--grey-100); 
  text-align: center; border-bottom: 1px solid var(--grey-200); 
}
.service-hero__icon { font-size: 3rem; color: var(--brand-gold); margin-bottom: 20px; }
.service-hero h1 { margin-bottom: 16px; }
.service-hero .lead { max-width: 800px; margin: 0 auto; }

.service-content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }
@media (max-width: 900px) { .service-content-grid { grid-template-columns: 1fr; gap: 40px; } }

.service-main { color: var(--grey-700); }
.service-main p { margin-bottom: 24px; font-size: 1.05rem; }
.service-main img { 
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 40px; 
  width: 100%; height: auto; object-fit: cover; max-height: 450px; 
}

.service-sidebar { 
  background: #fff; padding: 32px; border-radius: var(--radius); 
  box-shadow: var(--shadow-soft); border: 1px solid var(--grey-200); 
  height: fit-content; position: sticky; top: 120px; 
}
.service-sidebar h3 { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--grey-100); }

.service-features { list-style: none; padding: 0; margin: 0 0 30px; }
.service-features li { padding-left: 32px; margin-bottom: 16px; position: relative; font-weight: 500; color: var(--grey-900); }
.service-features li::before { 
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; 
  position: absolute; left: 0; color: var(--brand-gold); 
}

.service-main-title { margin-bottom: 30px; }
.service-paragraph { margin-bottom: 35px; }
.service-paragraph-heading {
  text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px;
  color: var(--brand-gold); font-weight: 600; margin-bottom: 12px; display: block;
}

.hero-reveal {
  position: relative; width: 100%; height: 25vh; min-height: 200px;
  background-size: cover; background-position: center bottom;
  background-attachment: fixed; overflow: hidden; will-change: background-position;
}

@media (max-width: 768px) {
  .hero-reveal { height: 100vh; min-height: auto; background-attachment: scroll; background-position: center center; }
}

/* ========== Fail-Safe Animation Utils ========== */
.reveal {
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}
/* Only hide elements if JavaScript has loaded and added this class */
.js-enabled .reveal {
  opacity: 0;
  transform: translateY(30px);
}
.js-enabled .reveal.reveal--in {
  opacity: 1;
  transform: translateY(0);
}