/* =========================================================
   LIAISON DIGITALE — Shared Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&family=Caveat:wght@600;700&display=swap');

:root{
  /* Primary brand palette */
  --ld-green:      #61B23F;
  --ld-green-alt:  #5DBE2E;
  --ld-blue-dark:  #1A4B8F;
  --ld-blue-dark-alt: #1F529B;
  --ld-blue-light: #3D86CA;
  --ld-blue-light-alt: #3D93D6;

  /* Accent palette (from original animated mark) */
  --ld-teal:  #2E8B8B;
  --ld-gold:  #C8A951;

  /* Neutrals */
  --ld-ink:    #1A4B8F;
  --ld-body:   #3E4A56;
  --ld-white:  #FFFFFF;
  --ld-mist:   #F5F8FA;
  --ld-line:   #E3EAF0;

  /* Type */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-brand:   'Montserrat', sans-serif;

  /* Layout */
  --header-h: 84px;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(26,75,143,0.10);
  --shadow-lift: 0 20px 55px rgba(27,58,107,0.16);
}

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

html{ scroll-behavior:smooth; color-scheme: light; }

body{
  font-family: var(--font-body);
  color: var(--ld-body);
  background: var(--ld-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main{
  background: var(--ld-white);
}

img{ max-width:100%; display:block; }

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

h1,h2,h3,h4{
  font-family: var(--font-heading);
  color: var(--ld-ink);
  font-weight: 800;
  line-height: 1.2;
}

.container{
  width:100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--ld-blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display:flex;
  align-items:center;
  background: rgba(255,255,255,0.97);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: var(--ld-blue-light);
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
}

.brand-logo{
  display:flex;
  align-items:center;
  height: 44px;
}
.brand-logo img{ height: 100%; width:auto; }

.main-nav{ display:flex; align-items:center; gap: 30px; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 28px;
  list-style:none;
}
.nav-links a{
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ld-blue-dark-alt);
  padding: 6px 2px;
  transition: opacity 0.2s ease;
}
.nav-links a:hover{ opacity: 0.65; }
.nav-links a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

.lang-switch-link{
  display:flex;
  align-items:center;
  font-family: var(--font-heading);
  font-weight:500;
  font-size:0.98rem;
  color: var(--ld-blue-dark-alt);
  padding: 6px 2px;
}
.lang-switch-link:hover{ opacity: 0.65; }

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width: 42px;
  height: 42px;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index: 110;
}
.hamburger span{
  display:block;
  height:2.5px;
  width: 26px;
  background: var(--ld-blue-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-links{
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    height: auto;
    width: min(78%, 320px);
    max-width: 320px;
    background: var(--ld-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 28px 30px;
    box-shadow: -14px 0 40px rgba(27,58,107,0.12);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 105;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ width:100%; padding: 12px 0; font-size:1.05rem; border-bottom: 1px solid var(--ld-line); }
  .lang-switch{ margin-top: 14px; }
  .hamburger{ display:flex; }
  .main-nav{ gap: 0; }
}

.nav-scrim{
  display:none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(20,30,45,0.35);
  z-index: 99;
}
.nav-scrim.is-open{ display:block; }

/* =========================================================
   HERO / ANIMATED LOGO MARK
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  padding: 64px 0 40px;
  background: var(--ld-white);
}
.hero::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 10px;
  background: linear-gradient(to bottom, rgba(61,134,202,0.16), transparent);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height: 10px;
  background: linear-gradient(to top, rgba(61,134,202,0.16), transparent);
  pointer-events:none;
}
.hero .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-copy{ max-width: 560px; }

.hero h1{
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ld-blue-dark-alt);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height:1.3;
  margin-bottom: 26px;
}

.hero-lead{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.05rem;
  line-height:1.65;
  color: var(--ld-blue-dark-alt);
  max-width: 46ch;
  margin: 0 auto;
}

/* Animated mark (adapted from original intro) */
.ld-splash{ position:relative; width:100%; max-width:460px; aspect-ratio:1/1; margin: 44px auto 0; display:flex; align-items:center; justify-content:center; }
.ld-ring{ position:absolute; border-radius:50%; border:1.5px solid rgba(61,134,202,0.30); width:46%; height:46%; animation: ldExpand 3s ease-out infinite; }
.ld-ring:nth-child(2){ animation-delay:1s; }
.ld-ring:nth-child(3){ animation-delay:2s; }
.ld-disc{
  position:relative; z-index:5; width:56%; height:56%;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  box-shadow: 0 0 0 1px rgba(46,139,139,0.10), 0 4px 16px rgba(27,58,107,0.10);
  opacity:0;
  animation: ldLogoIn 2s cubic-bezier(0.22,1,0.36,1) 0.3s forwards, ldGlow 4s ease-in-out 2.3s infinite;
}
.ld-disc img{ width:78%; height:78%; object-fit:contain; }
.ld-chip{
  position:absolute; background:#fff; border-radius:30px; padding:0.42rem 0.85rem;
  box-shadow: 0 5px 22px rgba(27,58,107,0.10);
  font-family: var(--font-heading);
  font-size:0.72rem; font-weight:400; color: var(--ld-blue-dark); z-index:8;
  display:flex; align-items:center; gap:6px; white-space:nowrap; opacity:0;
}
.ld-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ld-c1{ top:14%; left:0%;  animation: ldCIn 0.5s ease 1.8s forwards, ldFa 5s ease-in-out 2.3s infinite; }
.ld-c2{ top:14%; right:0%; animation: ldCIn 0.5s ease 2.1s forwards, ldFb 5s ease-in-out 2.6s infinite; }
.ld-c3{ bottom:16%; left:-4%;  animation: ldCIn 0.5s ease 2.3s forwards, ldFb 5s ease-in-out 2.8s infinite; }
.ld-c4{ bottom:16%; right:-4%; animation: ldCIn 0.5s ease 2.5s forwards, ldFa 5s ease-in-out 3.0s infinite; }

@keyframes ldExpand{ 0%{ transform:scale(1); opacity:0.4; } 100%{ transform:scale(2.1); opacity:0; } }
@keyframes ldLogoIn{ 0%{ opacity:0; transform:scale(0.55); filter:blur(12px); } 65%{ opacity:1; transform:scale(1.05); filter:blur(0); } 100%{ opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes ldGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(46,139,139,0.10), 0 4px 16px rgba(27,58,107,0.10); } 50%{ box-shadow:0 0 0 1px rgba(46,139,139,0.18), 0 4px 16px rgba(27,58,107,0.14); } }
@keyframes ldCIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes ldFa{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes ldFb{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

@media (max-width: 900px){
  .hero{ padding: 40px 0 32px; }
  .ld-splash{ max-width: 340px; margin-top: 30px; }
  .ld-c1{ top:8%; left:-2%; }
  .ld-c2{ top:8%; right:-2%; }
  .ld-c3{ bottom:10%; left:-2%; }
  .ld-c4{ bottom:10%; right:-2%; }
}

/* =========================================================
   SIMPLE CONTENT PAGE (About, etc.)
   ========================================================= */
.page-section{
  position:relative;
  padding: 60px 0 84px;
  text-align:center;
}
.page-section::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 10px;
  background: linear-gradient(to bottom, rgba(61,134,202,0.16), transparent);
  pointer-events:none;
}
.page-section::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height: 10px;
  background: linear-gradient(to top, rgba(61,134,202,0.16), transparent);
  pointer-events:none;
}
.page-section h1{
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ld-blue-dark-alt);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  margin-bottom: 30px;
}
.page-section p{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ld-blue-dark-alt);
  max-width: 46ch;
  margin: 0 auto 34px;
}
.page-section .page-photo{
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  display:block;
}

/* =========================================================
   GENERIC SECTIONS
   ========================================================= */
.section{ padding: 72px 0; }
.section-alt{ background: var(--ld-mist); }
.section-head{ max-width: 640px; margin-bottom: 42px; }
.section-head .kicker{
  font-family: var(--font-heading); font-weight:700; font-size:0.78rem;
  letter-spacing:0.08em; text-transform:uppercase; color: var(--ld-green); margin-bottom:10px; display:block;
}
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* =========================================================
   SERVICES PAGE (accordion + checklist)
   ========================================================= */
.services-heading{
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ld-blue-dark-alt);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  text-align:center;
  margin: 0 auto 22px;
}
.services-heading.spaced{ margin-top: 54px; }

.accordion-list,
.check-list{
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--ld-line);
  text-align: left;
}

.accordion-item{
  border-bottom: 1px solid var(--ld-line);
}
.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  background:none;
  border:none;
  text-align:left;
  padding: 18px 4px;
  cursor:pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ld-blue-dark-alt);
}
.accordion-trigger .icon{
  flex-shrink:0;
  width: 20px;
  height: 20px;
  position:relative;
}
.accordion-trigger .icon::before,
.accordion-trigger .icon::after{
  content:"";
  position:absolute;
  background: var(--ld-blue-dark-alt);
  top:50%; left:50%;
  transform: translate(-50%,-50%);
}
.accordion-trigger .icon::before{ width:14px; height:2px; }
.accordion-trigger .icon::after{ width:2px; height:14px; transition: transform 0.2s ease, opacity 0.2s ease; }
.accordion-item.is-open .accordion-trigger .icon::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }

.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height 0.3s ease;
}
.accordion-panel p{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.98rem;
  line-height:1.65;
  color: var(--ld-blue-dark-alt);
  padding: 0 4px 20px;
  margin: 0;
  max-width: none;
}

.check-list{ margin-top: 8px; }
.check-item{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--ld-line);
}
.check-icon{
  flex-shrink:0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ld-green);
}
.check-icon svg{ width:100%; height:100%; }
.check-item span:not(.check-icon){
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.98rem;
  color: var(--ld-blue-dark-alt);
}

/* =========================================================
   TESTIMONIALS PAGE
   ========================================================= */
.testimonial-list{
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 40px;
}
.testimonial-bubble{
  max-width: 560px;
  border-radius: 22px;
  padding: 34px 38px;
  text-align:left;
}
.testimonial-bubble:nth-child(odd){ margin-right:auto; }
.testimonial-bubble:nth-child(even){ margin-left:auto; }
.testimonial-bubble p{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.98rem;
  line-height:1.65;
  margin-bottom: 16px;
  color: inherit;
  max-width: none;
}
.testimonial-bubble p:last-of-type{ margin-bottom: 22px; }
.testimonial-author{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: inherit;
}
.tb-navy{ background: var(--ld-blue-dark); color:#fff; }
.tb-green{ background: var(--ld-green); color:#fff; }
.tb-blue-greentext{ background: var(--ld-blue-dark-alt); color: var(--ld-green-alt); }
.tb-green-navytext{ background: var(--ld-green); color: var(--ld-blue-dark); }

@media (max-width: 700px){
  .testimonial-bubble{ max-width: 100%; }
}

.faq-list{ margin-top: 8px; }
.faq-media{
  display:block;
  max-width: 260px;
  width: 100%;
  margin: 16px auto 6px;
}
.faq-media svg{ display:block; width:100%; height:auto; }
.faq-trigger{
  display:flex;
  align-items:center;
  gap: 18px;
}
.faq-num{
  flex-shrink:0;
  width: 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ld-blue-dark-alt);
}
.faq-q{ flex:1; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-card{
  background: var(--ld-blue-dark);
  border-radius: 18px;
  padding: 34px 36px 38px;
  max-width: 520px;
  margin: 0 auto;
  color: #fff;
  text-align: left;
}
.contact-card h2{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 20px;
}
.form-row{
  display:flex;
  gap: 16px;
  margin-bottom: 22px;
}
.form-group{ flex:1; margin-bottom: 22px; }
.form-row .form-group{ margin-bottom: 0; }
.contact-card label{
  display:block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  margin-bottom: 6px;
}
.field-caption{
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}
.contact-card input,
.contact-card textarea{
  width:100%;
  border:none;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  background: #E4EAF1;
  color: var(--ld-blue-dark-alt);
  color-scheme: light;
}
.contact-card textarea{ min-height: 120px; resize: vertical; }
.contact-card input:focus,
.contact-card textarea:focus{ outline: 3px solid rgba(255,255,255,0.5); }
.contact-card input:-webkit-autofill,
.contact-card input:-webkit-autofill:hover,
.contact-card input:-webkit-autofill:focus,
.contact-card input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px #E4EAF1 inset !important;
  -webkit-text-fill-color: var(--ld-blue-dark-alt) !important;
  caret-color: var(--ld-blue-dark-alt);
  transition: background-color 9999s ease-in-out 0s;
}
.contact-submit-wrap{ text-align:center; margin-top: 8px; }
.btn-submit{
  background:#fff;
  color: var(--ld-blue-dark);
  border:none;
  border-radius: 30px;
  padding: 13px 40px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  cursor:pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-submit:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.18); }

@media (max-width: 560px){
  .form-row{ flex-direction: column; gap: 22px; }
  .contact-card{ padding: 28px 22px 32px; }
}

/* =========================================================
   THANK YOU PAGE
   ========================================================= */
.btn-home{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(120deg, var(--ld-green), var(--ld-blue-light));
  color:#fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 34px;
  border-radius: 30px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px;
}
.btn-home:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.thankyou-icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: rgba(97,178,63,0.12);
  color: var(--ld-green);
}
.thankyou-icon svg{ width:30px; height:30px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position: relative;
  background: var(--ld-white);
  color: var(--ld-body);
  padding: 46px 0 30px;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: var(--ld-blue-light);
}
.site-footer .container{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
}
.footer-brand{
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.footer-brand .g{ color: var(--ld-green); }
.footer-brand .b{ color: var(--ld-blue-dark); }
.footer-meta{ font-size:0.92rem; color: var(--ld-body); }
.footer-meta a{ text-decoration: underline; text-underline-offset:3px; color: var(--ld-blue-dark); }
.footer-meta a:hover{ color: var(--ld-green); }
.footer-copy{ font-size:0.8rem; color:#8B99A6; margin-top: 8px; }