/* ===================================================================
   AKSARA LEGAL — Main Stylesheet
   A premium legal & business consultancy site.
   Design tokens are derived from the brand brief:
   primary (near-black olive) / secondary (warm cream) / accent (soft gold)
   Signature motif: a hairline "seal" mark — a thin gold ring + diamond,
   echoing a notarial stamp — used sparingly at section dividers and
   as the preloader mark, never decorating things that aren't structural.
   =================================================================== */

:root{
  /* Brand colors */
  --color-primary: #1D1912;
  --color-primary-soft: #2B251A;
  --color-secondary: #F3F3E6;
  --color-accent: #EECD5C;
  --color-accent-dim: #C9A94B;
  --color-bg: #FFFFFF;
  --color-text: #3A372F;
  --color-text-muted: #6B6557;
  --color-line: rgba(29,25,18,0.10);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 60px -25px rgba(29,25,18,0.35);
  --shadow-card: 0 12px 40px -18px rgba(29,25,18,0.25);

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: 0.25s;
  --t-med: 0.5s;
  --t-slow: 0.9s;
}

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

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  color: var(--color-primary);
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
}

p{ margin: 0 0 1rem; }
a{ color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
img{ max-width: 100%; display: block; }
ul{ margin:0; padding:0; }

::selection{ background: var(--color-accent); color: var(--color-primary); }

:focus-visible{
  outline: 2px solid var(--color-accent-dim);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{ max-width: 1200px; }

/* ---------- Section scaffolding ---------- */
.section{ padding: var(--space-2xl) 0; position: relative; }
.section-tight{ padding: var(--space-xl) 0; }
.section-dark{ background: var(--color-primary); color: rgba(243,243,230,0.85); }
.section-dark h2, .section-dark h3{ color: var(--color-secondary); }
.section-cream{ background: var(--color-secondary); }

.section-head{ max-width: 720px; margin: 0 0 var(--space-lg); }
.section-head.center{ margin-inline: auto; text-align: center; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
  margin-bottom: var(--space-sm);
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--color-accent-dim);
  display: inline-block;
}
.section-dark .eyebrow{ color: var(--color-accent); }

.section-title{
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.01em;
}

.section-sub{
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-top: var(--space-sm);
  max-width: 60ch;
}
.section-dark .section-sub{ color: rgba(243,243,230,0.65); }

/* Seal / signature motif — used only at true section dividers */
.seal-divider{
  width: 46px; height: 46px;
  margin: 0 auto var(--space-md);
  position: relative;
}
.seal-divider::before{
  content:"";
  position:absolute; inset:0;
  border: 1px solid var(--color-accent-dim);
  border-radius: 50%;
}
.seal-divider::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width: 9px; height: 9px;
  background: var(--color-accent);
  transform: translate(-50%,-50%) rotate(45deg);
}

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.85rem 1.85rem;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  isolation: isolate;
}
.btn-sm{ padding: 0.6rem 1.3rem; font-size: 0.9rem; }
.btn-gold{
  background: var(--color-accent);
  color: var(--color-primary);
}
.btn-gold:hover{
  background: var(--color-accent-dim);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(238,205,92,0.55);
}
.btn-outline-cream{
  background: transparent;
  border-color: rgba(243,243,230,0.4);
  color: var(--color-secondary);
}
.btn-outline-cream:hover{
  background: rgba(243,243,230,0.1);
  border-color: var(--color-secondary);
  transform: translateY(-2px);
}
.btn-outline-dark{
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline-dark:hover{
  background: var(--color-primary);
  color: var(--color-secondary);
  transform: translateY(-2px);
}
.btn-light{ background: var(--color-bg); color: var(--color-primary); }

/* Ripple effect */
.btn .ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: rippleAnim 0.6s var(--ease);
  pointer-events: none;
}
@keyframes rippleAnim{
  to{ transform: scale(3); opacity: 0; }
}

/* ---------- Preloader ---------- */
#preloader{
  position: fixed; inset: 0;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
#preloader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner{ text-align: center; }
.preloader-mark{
  display: inline-flex; align-items:center; justify-content:center;
  width: 64px; height: 64px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  animation: pulseSeal 1.8s ease-in-out infinite;
}
@keyframes pulseSeal{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.08); opacity:0.75; }
}
.preloader-bar{
  width: 160px; height: 2px;
  background: rgba(243,243,230,0.15);
  margin: 0 auto;
  overflow: hidden;
}
.preloader-bar span{
  display:block; height:100%; width: 40%;
  background: var(--color-accent);
  animation: loadBar 1.2s ease-in-out infinite;
}
@keyframes loadBar{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(250%); }
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position: fixed; top:0; left:0; height: 3px;
  background: var(--color-accent);
  width: 0%;
  z-index: 1100;
  transition: width 0.1s linear;
}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position: fixed; bottom: 20px; right: 20px; left: auto;
  max-width: 400px;
  background: rgba(29,25,18,0.95);
  color: var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  z-index: 1200;
  box-shadow: var(--shadow-soft);
  transform: translateY(140%);
  transition: transform 0.6s var(--ease);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size: 0.9rem; margin-bottom: 0.85rem; }
.cookie-actions{ display:flex; gap: 0.6rem; }

/* Reveal-on-scroll base states (JS toggles .in-view) */
[data-reveal]{
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal="fade-up"]{ transform: translateY(28px); }
[data-reveal="fade"]{ }
[data-reveal="scale"]{ transform: scale(0.92); }
[data-reveal="slide-left"]{ transform: translateX(-40px); }
[data-reveal="slide-right"]{ transform: translateX(40px); }
[data-reveal].in-view{ opacity: 1; transform: none; }

/* ===================================================================
   NAVBAR
   =================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 1000;
  padding: 14px 0;
  transition: background var(--t-med) var(--ease), padding var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.site-header.is-scrolled{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(29,25,18,0.06);
  padding: 8px 0;
}
.site-header .logo-scrolled {
  display: none !important;
}

/* Kondisi saat di-scroll: Sembunyikan logo utama, munculkan logo kedua */
.site-header.is-scrolled .logo-default {
  display: none !important;
}

.site-header.is-scrolled .logo-scrolled {
  display: inline-block !important; /* atau block sesuaikan dengan layout */
}
.site-header.is-scrolled .brand-text,
.site-header.is-scrolled .nav-links a{ color: var(--color-primary); }
.site-header:not(.is-scrolled) .brand-text,
.site-header:not(.is-scrolled) .nav-links a{ color: var(--color-secondary); }
.site-header.page-solid{ background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(29,25,18,0.06); }
.site-header.page-solid .brand-text, .site-header.page-solid .nav-links a{ color: var(--color-primary); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap: 1.5rem; }

.navbar-brand{ display:flex; align-items:center; gap: 0.6rem; }
.brand-logo{ height: 38px; width:auto; }
.brand-fallback{ font-size:1.4rem; color: var(--color-accent); }
.brand-text{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  transition: color var(--t-fast) var(--ease);
}

.main-nav{ display:flex; align-items:center; gap: 2.2rem; }
.nav-links{ display:flex; gap: 1.8rem; list-style:none; }
.nav-links a{
  font-size: 0.92rem; font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background: var(--color-accent);
  transition: width var(--t-fast) var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-links a:hover{ color: var(--color-accent-dim); }

.nav-actions{ display:flex; align-items:center; gap: 1.2rem; }
.lang-switch{ display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; }
.lang-btn{
  background:none; border:none; cursor:pointer;
  color: inherit; opacity:0.55;
  padding: 2px 4px;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-btn.active{ opacity:1; color: var(--color-accent-dim); }
.site-header:not(.is-scrolled):not(.page-solid) .lang-btn{ color: var(--color-secondary); }
.lang-divider{ opacity:0.4; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 32px; height: 28px;
  background:none; border:none; cursor:pointer; z-index: 1001;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background: var(--color-secondary);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-header.is-scrolled .nav-toggle span,
.site-header.page-solid .nav-toggle span{ background: var(--color-accent-dim); }
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991.98px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position: fixed; top:0; right:0;
    height: 100vh; width: min(78vw, 320px);
    background: var(--color-primary);
    flex-direction: column; align-items: flex-start;
    padding: 6.5rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform var(--t-med) var(--ease);
    gap: 2.5rem;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .nav-links{ flex-direction:column; gap: 1.4rem; }
  .nav-links a{ color: var(--color-secondary) !important; font-size: 1.05rem; }
  .nav-actions{ flex-direction:column; align-items:flex-start; gap: 1.4rem; width:100%; }
  .lang-switch{ color: var(--color-secondary); }
  .nav-cta{ width:100%; text-align:center; }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  color: var(--color-secondary);
  overflow:hidden;
  isolation: isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-size: cover; background-position: center;
  will-change: transform;
}
.hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(13,11,7,0.78) 0%, rgba(13,11,7,0.55) 45%, rgba(13,11,7,0.9) 100%);
}
.hero-content{ padding-top: 6rem; position:relative; }
.hero-eyebrow{
  font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase;
  color: var(--color-accent); font-weight:600; margin-bottom: 1.4rem;
  display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before{ content:""; width:26px; height:1px; background:var(--color-accent); }
.hero h1{
  color: var(--color-secondary);
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  max-width: 16ch;
  margin-bottom: 1.4rem;
}
.hero-subtitle{
  font-size: 1.1rem;
  max-width: 46ch;
  color: rgba(243,243,230,0.78);
  margin-bottom: 2.2rem;
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap:wrap; margin-bottom: 3rem; }

.trust-badges{ display:flex; gap: 1.8rem; flex-wrap: wrap; }
.trust-badge{ display:flex; align-items:center; gap:8px; font-size:0.85rem; color: rgba(243,243,230,0.75); }
.trust-badge i{ color: var(--color-accent); }

.hero-floats{ position:absolute; right: 4%; top: 50%; transform: translateY(-50%); display:flex; flex-direction:column; gap:1.2rem; z-index:2; }
.float-card{
  background: rgba(243,243,230,0.1);
  border: 1px solid rgba(243,243,230,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.6rem;
  min-width: 190px;
  animation: floatY 6s ease-in-out infinite;
}
.float-card:nth-child(2){ animation-delay: 1.2s; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.float-card .float-value{ font-family: var(--font-display); font-size: 2rem; color: var(--color-accent); line-height:1; }
.float-card .float-label{ font-size:0.78rem; color: rgba(243,243,230,0.7); margin-top:4px; }

.scroll-indicator{
  position:absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size: 0.72rem; letter-spacing:0.15em; text-transform:uppercase;
  color: rgba(243,243,230,0.6); z-index:2;
}
.scroll-indicator .mouse{
  width: 22px; height: 36px; border: 1px solid rgba(243,243,230,0.5); border-radius: 20px;
  position: relative;
}
.scroll-indicator .mouse::before{
  content:""; position:absolute; top:6px; left:50%; width:3px; height:7px;
  background: var(--color-accent); border-radius: 2px; transform: translateX(-50%);
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ opacity:1; top:6px; } 100%{ opacity:0; top:18px; }
}

@media (max-width: 991.98px){
  .hero-floats{ display:none; }
}
@media (max-width: 575.98px){
  .hero{ align-items: flex-start; }
  .hero-content{ padding-top: 7.5rem; padding-bottom: 4.5rem; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ text-align:center; }
  .trust-badges{ gap: 1rem 1.4rem; }
  .scroll-indicator{ display:none; }
}

/* ===================================================================
   ABOUT
   =================================================================== */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:start; }
.about-story p{ color: var(--color-text-muted); font-size: 1.04rem; }
.about-image-wrap{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card); }
.about-image-wrap img{ width:100%; height:480px; object-fit:cover; transition: transform 0.8s var(--ease); }
.about-image-wrap:hover img{ transform: scale(1.04); }
.about-badge{
  position:absolute; bottom: 1.4rem; left: 1.4rem;
  background: var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
  display:flex; align-items:center; gap: 0.8rem;
  box-shadow: var(--shadow-card);
}
.about-badge i{ color: var(--color-accent-dim); font-size: 1.4rem; }
.about-badge strong{ font-family:var(--font-display); display:block; font-size:1.2rem; color:var(--color-primary); }
.about-badge span{ font-size:0.75rem; color: var(--color-text-muted); }

.mv-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0; }
.mv-card{
  background: var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  border-top: 2px solid var(--color-accent);
}
.mv-card h4{ font-size:1.05rem; margin-bottom:0.5rem; }
.mv-card p{ font-size:0.92rem; color: var(--color-text-muted); margin-bottom:0; }

.values-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; margin-top: 1rem; }
.value-item{ display:flex; gap: 0.9rem; align-items:flex-start; }
.value-item i{
  width: 38px; height:38px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-line); border-radius:50%;
  color: var(--color-accent-dim);
}
.value-item h5{ font-family: var(--font-body); font-weight:600; font-size:0.95rem; color: var(--color-primary); margin-bottom:0.2rem; }
.value-item p{ font-size:0.86rem; color: var(--color-text-muted); margin-bottom:0; }

/* Timeline */
.timeline{ position:relative; margin-top: 2.5rem; padding-left: 2.2rem; border-left: 1px solid var(--color-line); }
.timeline-item{ position:relative; padding-bottom: 2.2rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-2.46rem; top:2px;
  width:11px; height:11px; border-radius:50%;
  background: var(--color-accent); border: 3px solid var(--color-bg); box-shadow: 0 0 0 1px var(--color-accent-dim);
}
.timeline-year{ font-family: var(--font-display); color: var(--color-accent-dim); font-size:1.1rem; }
.timeline-item h5{ font-size:1.05rem; margin: 0.2rem 0 0.3rem; }
.timeline-item p{ color: var(--color-text-muted); font-size:0.92rem; margin-bottom:0; max-width: 52ch; }

@media (max-width: 991.98px){
  .about-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .about-image-wrap img{ height: 340px; }
}
@media (max-width: 575.98px){
  .mv-cards, .values-grid{ grid-template-columns: 1fr; }
}

/* ===================================================================
   WHY CHOOSE US
   =================================================================== */
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.why-card{
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 2rem 1.7rem;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.why-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}
.why-icon{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--color-secondary); color: var(--color-accent-dim);
  font-size: 1.3rem; margin-bottom: 1.2rem;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.why-card:hover .why-icon{ background: var(--color-primary); color: var(--color-accent); transform: rotate(-8deg) scale(1.05); }
.why-card h4{ font-size: 1.12rem; margin-bottom: 0.5rem; }
.why-card p{ color: var(--color-text-muted); font-size:0.92rem; margin-bottom:0; }

@media (max-width: 991.98px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .why-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   PROCESS
   =================================================================== */
.process-track{ display:grid; grid-template-columns: repeat(5,1fr); gap: 1rem; position:relative; margin-top: 1rem; }
.process-track::before{
  content:""; position:absolute; top: 28px; left: 5%; right:5%; height:1px;
  background: var(--color-line);
}
.process-step{ position:relative; text-align:center; padding-top: 0; }
.process-num{
  width: 56px; height:56px; border-radius:50%;
  margin: 0 auto 1.2rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--color-bg); border: 1px solid var(--color-accent-dim);
  font-family: var(--font-display); font-size:1.2rem; color: var(--color-accent-dim);
  position:relative; z-index:2;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.process-step:hover .process-num{ background: var(--color-accent); color: var(--color-primary); }
.process-step h5{ font-size:1.02rem; margin-bottom: 0.4rem; }
.process-step p{ font-size: 0.85rem; color: var(--color-text-muted); margin-bottom:0; }

@media (max-width: 991.98px){
  .process-track{ grid-template-columns: 1fr 1fr; gap: 2.2rem 1rem; }
  .process-track::before{ display:none; }
}
@media (max-width: 575.98px){
  .process-track{ grid-template-columns: 1fr; }
}

/* ===================================================================
   SERVICES — grouped by category ("wadah" containers)
   =================================================================== */
.service-groups{ display:flex; flex-direction:column; gap: 2rem; }

.service-group{
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.service-group:hover{
  box-shadow: var(--shadow-card);
  border-color: rgba(238,205,92,0.4);
}

/* Each category gets a distinct accent strip on the left */
.service-group:nth-child(1){ border-left: 4px solid var(--color-accent); }
.service-group:nth-child(2){ border-left: 4px solid #7BA08C; }
.service-group:nth-child(3){ border-left: 4px solid #8A7CA0; }
.service-group:nth-child(4){ border-left: 4px solid #2B251A; }

.service-group-header{
  display:flex; align-items:center; gap: 1.2rem;
  padding: 1.8rem 2.2rem;
  background: var(--color-secondary);
  border-bottom: 1px solid var(--color-line);
}
.service-group-icon{
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-accent-dim);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  flex-shrink:0;
  box-shadow: 0 2px 10px -4px rgba(29,25,18,0.15);
}
.service-group-heading{ flex:1; min-width:0; }
.service-group-heading h3{
  font-size: 1.25rem; margin-bottom: 0.2rem;
  font-family: var(--font-display);
}
.service-group-heading p{
  font-size: 0.85rem; color: var(--color-text-muted); margin:0;
}
.service-group-count{
  flex-shrink:0;
  background: var(--color-primary); color: var(--color-accent);
  font-size: 0.76rem; font-weight:700; letter-spacing: 0.04em;
  padding: 0.45rem 1rem; border-radius: 999px;
  white-space:nowrap;
}

/* Grid of service items inside each group */
.service-group-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 1.4rem 1.8rem 1.8rem;
}
.service-item-card{
  display:flex; align-items:flex-start; gap: 0.85rem;
  padding: 1rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-decoration:none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.service-item-card:hover{
  background: var(--color-secondary);
  border-color: var(--color-line);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -10px rgba(29,25,18,0.14);
}
.service-item-icon{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink:0;
  background: var(--color-secondary); color: var(--color-accent-dim);
  display:flex; align-items:center; justify-content:center; font-size: 0.95rem;
  margin-top: 1px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.service-item-card:hover .service-item-icon{
  background: var(--color-primary); color: var(--color-accent);
}
.service-item-text{ min-width:0; flex:1; }
.service-item-text h4{
  font-family: var(--font-body); font-weight:600; font-size: 0.92rem;
  color: var(--color-primary); margin-bottom: 3px; line-height:1.3;
}
.service-item-text p{
  font-size: 0.78rem; color: var(--color-text-muted); margin:0;
  line-height:1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-item-arrow{
  align-self:center; flex-shrink:0;
  font-size: 0.7rem; color: var(--color-accent-dim);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  opacity:0;
}
.service-item-card:hover .service-item-arrow{
  opacity:1; transform: translateX(4px);
}

/* Divider lines between grid rows */
.service-group-grid .service-item-card:not(:nth-child(3n+1))::before {
  display:none;
}

/* Responsive */
@media (max-width: 991.98px){
  .service-group-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px){
  .service-group-header{ padding: 1.4rem 1.5rem; flex-wrap:wrap; gap:0.8rem; }
  .service-group-count{ order:3; }
  .service-group-grid{ grid-template-columns: 1fr; padding: 1rem 1.2rem 1.4rem; }
  .service-item-card{ padding: 0.85rem 0.8rem; }
  .service-item-text p{ -webkit-line-clamp: 3; }
  .service-item-arrow{ opacity:1; }
}
@media (max-width: 575.98px){
  .service-group:nth-child(1),
  .service-group:nth-child(2),
  .service-group:nth-child(3){ border-left-width: 3px; }
}

/* ===================================================================
   SERVICES — flat card grid (still used for "related services" on
   the service detail page)
   =================================================================== */
.service-tabs{ display:flex; gap: 0.6rem; flex-wrap:wrap; margin-bottom: 2.4rem; }
.service-tab{
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  font-size: 0.86rem; font-weight:600;
  cursor:pointer;
  transition: all var(--t-fast) var(--ease);
}
.service-tab.active, .service-tab:hover{
  background: var(--color-primary); color: var(--color-secondary); border-color: var(--color-primary);
}
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.service-card{
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.9rem 1.7rem;
  position: relative;
  overflow:hidden;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  display:flex; flex-direction:column;
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--color-accent); transform: scaleX(0); transform-origin:left;
  transition: transform var(--t-med) var(--ease);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.service-card:hover::before{ transform: scaleX(1); }
.service-icon{
  width:50px; height:50px; border-radius: var(--radius-sm);
  background: var(--color-secondary); color: var(--color-accent-dim);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  margin-bottom: 1.1rem;
}
.service-card h4{ font-size: 1.08rem; margin-bottom: 0.55rem; }
.service-card p{ font-size:0.88rem; color: var(--color-text-muted); flex:1; }
.service-card .service-link{
  font-size: 0.84rem; font-weight:600; color: var(--color-accent-dim);
  display:inline-flex; align-items:center; gap:6px; margin-top: 0.8rem;
}
.service-card .service-link i{ transition: transform var(--t-fast) var(--ease); font-size:0.75rem; }
.service-card:hover .service-link i{ transform: translateX(4px); }
.services-cta-wrap{ text-align:center; margin-top: 2.6rem; }

@media (max-width: 991.98px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .services-grid{ grid-template-columns: 1fr; } .service-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; } }

/* ===================================================================
   STATISTICS (dark, gold accents)
   =================================================================== */
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; }
.stat-card{
  text-align:center; padding: 2.2rem 1rem;
  border: 1px solid rgba(243,243,230,0.12);
  border-radius: var(--radius-md);
  background: rgba(243,243,230,0.03);
}
.stat-card i{ color: var(--color-accent); font-size: 1.5rem; margin-bottom: 0.9rem; }
.stat-value{ font-family: var(--font-display); font-size: 2.6rem; color: var(--color-secondary); line-height:1; }
.stat-value .suffix{ color: var(--color-accent); }
.stat-label{ font-size: 0.84rem; color: rgba(243,243,230,0.6); margin-top: 0.5rem; }

@media (max-width: 767.98px){ .stats-grid{ grid-template-columns: 1fr 1fr; } }

/* ===================================================================
   NEWS
   =================================================================== */
.news-toolbar{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-bottom: 2.2rem; }
.news-search{ position:relative; max-width: 320px; flex:1; min-width: 220px; }
.news-search input{
  width:100%; padding: 0.65rem 1rem 0.65rem 2.5rem;
  border: 1px solid var(--color-line); border-radius: 999px;
  font-family: var(--font-body); font-size:0.9rem;
  background: var(--color-bg);
}
.news-search i{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color: var(--color-text-muted); }
.news-filters{ display:flex; gap:0.5rem; flex-wrap:wrap; }

.news-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.news-card{
  border-radius: var(--radius-md); overflow:hidden;
  background: var(--color-bg); border: 1px solid var(--color-line);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  display:flex; flex-direction:column;
}
.news-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.news-card-img{ position:relative; height: 200px; overflow:hidden; }
.news-card-img img{ width:100%; height:100%; object-fit:cover; transition: transform 0.7s var(--ease); }
.news-card:hover .news-card-img img{ transform: scale(1.08); }
.news-card-cat{
  position:absolute; top: 1rem; left: 1rem;
  background: rgba(29,25,18,0.85); color: var(--color-accent);
  font-size: 0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; font-weight:600;
}
.news-card-body{ padding: 1.4rem; flex:1; display:flex; flex-direction:column; }
.news-meta{ display:flex; gap:1rem; font-size:0.78rem; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.news-card h4{ font-size:1.04rem; margin-bottom:0.6rem; }
.news-card p{ font-size:0.87rem; color: var(--color-text-muted); flex:1; }
.news-card .service-link{ font-size:0.84rem; font-weight:600; color: var(--color-accent-dim); margin-top:0.6rem; }

.news-pagination{ display:flex; justify-content:center; gap:0.5rem; margin-top: 2.6rem; }
.news-pagination button{
  width: 38px; height: 38px; border-radius:50%;
  border: 1px solid var(--color-line); background: var(--color-bg);
  font-weight:600; cursor:pointer; transition: all var(--t-fast) var(--ease);
}
.news-pagination button.active, .news-pagination button:hover{ background: var(--color-primary); color: var(--color-secondary); border-color: var(--color-primary); }
.news-empty{ text-align:center; padding: 3rem 1rem; color: var(--color-text-muted); }

@media (max-width: 991.98px){ .news-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575.98px){ .news-grid{ grid-template-columns: 1fr; } .news-toolbar{ flex-direction:column; align-items:stretch; } .news-search{ max-width:none; } }

/* ===================================================================
   TESTIMONIALS
   =================================================================== */
.testimonial-track{ overflow:hidden; }
.testimonial-card{
  background: rgba(243,243,230,0.06);
  border: 1px solid rgba(243,243,230,0.14);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  height:100%;
}
.testimonial-stars{ color: var(--color-accent); margin-bottom: 1rem; font-size:0.85rem; }
.testimonial-quote{ font-family: var(--font-display); font-size: 1.18rem; font-style: italic; color: var(--color-secondary); margin-bottom: 1.6rem; line-height:1.5; }
.testimonial-person{ display:flex; align-items:center; gap: 0.9rem; }
.testimonial-person img{ width: 48px; height:48px; border-radius:50%; object-fit:cover; border: 2px solid var(--color-accent); }
.testimonial-person strong{ display:block; color: var(--color-secondary); font-size:0.95rem; }
.testimonial-person span{ font-size:0.78rem; color: rgba(243,243,230,0.6); }

.carousel-control-prev, .carousel-control-next{ width: 6%; opacity:0.6; }
.carousel-control-prev:hover, .carousel-control-next:hover{ opacity:1; }
.carousel-indicators [data-bs-target]{ background: var(--color-accent); }

/* ===================================================================
   FAQ
   =================================================================== */
.faq-accordion .accordion-item{
  background: transparent; border:none; border-bottom: 1px solid var(--color-line);
}
.faq-accordion .accordion-button{
  font-family: var(--font-display); font-size: 1.05rem; color: var(--color-primary);
  background: transparent; padding: 1.3rem 0; box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){ color: var(--color-accent-dim); }
.faq-accordion .accordion-button::after{ filter: none; }
.faq-accordion .accordion-body{ padding: 0 0 1.4rem; color: var(--color-text-muted); font-size: 0.94rem; }
.faq-category-label{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--color-accent-dim); font-weight:600; margin: 1.6rem 0 0.4rem; }
.faq-category-label:first-child{ margin-top:0; }

/* ===================================================================
   CTA (large premium banner)
   =================================================================== */
.cta-banner{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  padding: var(--space-xl) var(--space-lg);
  text-align:center; color: var(--color-secondary);
  isolation:isolate;
}
.cta-banner-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.cta-banner-overlay{ position:absolute; inset:0; z-index:-1; background: linear-gradient(135deg, rgba(13,11,7,0.92), rgba(29,25,18,0.7)); }
.cta-banner h2{ color: var(--color-secondary); font-size: clamp(1.8rem,3.6vw,2.6rem); max-width: 24ch; margin: 0 auto 1rem; }
.cta-banner p{ max-width: 56ch; margin: 0 auto 2rem; color: rgba(243,243,230,0.75); }
.cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ===================================================================
   CONTACT + MAP
   =================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.contact-form{ background: var(--color-bg); }
.form-group{ margin-bottom: 1.3rem; }
.form-group label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom: 0.4rem; color: var(--color-primary); }
.form-control-custom{
  width:100%; padding: 0.85rem 1rem;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:0.95rem;
  background: var(--color-secondary);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.form-control-custom:focus{ border-color: var(--color-accent-dim); background: var(--color-bg); outline:none; }
textarea.form-control-custom{ resize: vertical; min-height: 130px; }
.field-error{ font-size: 0.78rem; color: #b5482e; margin-top: 0.3rem; display:none; }
.form-group.has-error .form-control-custom{ border-color:#b5482e; }
.form-group.has-error .field-error{ display:block; }

.form-success{
  display:none; text-align:center; padding: 2.5rem 1rem;
}
.form-success.is-visible{ display:block; animation: fadeUpIn 0.6s var(--ease); }
.form-success i{
  width:64px; height:64px; border-radius:50%;
  background: var(--color-secondary); color: var(--color-accent-dim);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin: 0 auto 1rem;
}
@keyframes fadeUpIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

.office-card{
  background: var(--color-primary); color: var(--color-secondary);
  border-radius: var(--radius-lg); padding: 2.2rem;
  margin-bottom: 1.6rem;
}
.office-card .office-row{ display:flex; gap: 0.9rem; margin-bottom: 1.2rem; align-items:flex-start; }
.office-card .office-row:last-child{ margin-bottom:0; }
.office-card i{ color: var(--color-accent); width:20px; margin-top:3px; }
.office-card strong{ display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color: rgba(243,243,230,0.55); margin-bottom:2px; }
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-line); }
.map-frame iframe{ width:100%; height: 320px; border:0; display:block; }

@media (max-width: 991.98px){ .contact-grid{ grid-template-columns: 1fr; gap: 2.5rem; } }

/* ===================================================================
   BACK TO TOP / FLOATING WHATSAPP
   =================================================================== */
.back-to-top{
  position: fixed; bottom: 24px; right: 24px;
  width: 46px; height:46px; border-radius:50%;
  background: var(--color-primary); color: var(--color-accent);
  border:none; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all var(--t-fast) var(--ease);
  z-index: 900; cursor:pointer;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--color-accent); color: var(--color-primary); }

.floating-whatsapp{
  position: fixed; bottom: 24px; left: 24px;
  width: 54px; height:54px; border-radius:50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size: 1.5rem;
  box-shadow: var(--shadow-card);
  z-index: 900;
  animation: waPulse 2.6s ease-in-out infinite;
}
@keyframes waPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0.45), var(--shadow-card); }
  50%{ box-shadow: 0 0 0 10px rgba(37,211,102,0), var(--shadow-card); }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background: var(--color-primary); color: rgba(243,243,230,0.7); }
.footer-top{ padding: var(--space-xl) 0 var(--space-lg); }
.footer-brand{ display:flex; align-items:center; gap:0.6rem; margin-bottom: 1.2rem; }
.footer-brand img{ height: 34px; }
.footer-brand span{ font-family: var(--font-display); font-size:1.15rem; color: var(--color-secondary); }
.footer-desc{ font-size: 0.9rem; line-height:1.7; max-width: 34ch; }
.footer-desc.small-text{ max-width: 30ch; }
.footer-social{ display:flex; gap: 0.7rem; margin-top: 1.3rem; }
.footer-social a{
  width: 36px; height:36px; border-radius:50%;
  border: 1px solid rgba(243,243,230,0.18);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--t-fast) var(--ease);
}
.footer-social a:hover{ background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); transform: translateY(-3px); }
.footer-heading{ color: var(--color-secondary); font-family: var(--font-display); font-size: 1rem; margin-bottom: 1.2rem; }
.footer-links{ list-style:none; display:flex; flex-direction:column; gap: 0.7rem; }
.footer-links a{ font-size: 0.88rem; transition: color var(--t-fast) var(--ease); }
.footer-links a:hover{ color: var(--color-accent); padding-left: 4px; }
.newsletter-form{ display:flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.newsletter-input{
  flex:1; padding: 0.7rem 1rem; border-radius: 999px; border:1px solid rgba(243,243,230,0.2);
  background: rgba(243,243,230,0.06); color: var(--color-secondary); font-size:0.88rem;
}
.newsletter-input::placeholder{ color: rgba(243,243,230,0.45); }
.newsletter-success{ font-size:0.82rem; color: var(--color-accent); }
.footer-contact-mini p{ font-size: 0.86rem; margin-bottom: 0.5rem; display:flex; gap:0.5rem; align-items:center; }
.footer-contact-mini i{ color: var(--color-accent); }
.footer-bottom{ border-top: 1px solid rgba(243,243,230,0.1); padding: 1.3rem 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 0.8rem; font-size: 0.82rem; }
.footer-legal-links a:hover{ color: var(--color-accent); }
.footer-legal-links .dot{ margin: 0 0.5rem; opacity:0.5; }

@media (max-width: 575.98px){
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
}

/* Cookie banner: full-width margins on small screens so it never overflows */
@media (max-width: 480px){
  .cookie-banner{ left: 16px; right: 16px; max-width: none; bottom: 16px; }
}

/* ===================================================================
   PAGE HERO (sub-pages: service detail, news detail, news list, legal pages)
   =================================================================== */
.page-hero{
  position:relative; padding: 9rem 0 4.5rem; color: var(--color-secondary);
  background: var(--color-primary);
  isolation:isolate; overflow:hidden;
}
.page-hero-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:0.35; }
.page-hero-overlay{ position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(13,11,7,0.55), rgba(13,11,7,0.96)); }
.page-hero .breadcrumb-trail{ font-size:0.82rem; color: rgba(243,243,230,0.6); margin-bottom: 1rem; }
.page-hero .breadcrumb-trail a{ color: rgba(243,243,230,0.75); }
.page-hero .breadcrumb-trail a:hover{ color: var(--color-accent); }
.page-hero h1{ color: var(--color-secondary); font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 30ch; }
.page-hero .page-hero-meta{ display:flex; gap: 1.4rem; flex-wrap:wrap; margin-top:1.2rem; font-size:0.86rem; color: rgba(243,243,230,0.65); }
.page-hero .page-hero-meta i{ color: var(--color-accent); margin-right:5px; }

/* ===================================================================
   SERVICE DETAIL
   =================================================================== */
.service-detail-layout{ display:grid; grid-template-columns: 2.2fr 1fr; gap: 3.2rem; }
.service-content h2{ font-size: 1.6rem; margin: 2.2rem 0 1rem; }
.service-content h2:first-child{ margin-top:0; }
.service-content p{ color: var(--color-text-muted); }
.advantage-list{ list-style:none; display:grid; gap: 0.9rem; }
.advantage-list li{ display:flex; gap:0.7rem; align-items:flex-start; color: var(--color-text-muted); }
.advantage-list i{ color: var(--color-accent-dim); margin-top: 4px; }

.detail-process{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 1.2rem;
  counter-reset: process-counter;
  position: relative;
}
.detail-process::before{
  content:""; position:absolute;
  top: 22px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, var(--color-accent-dim), rgba(201,169,75,0.3));
  z-index: 0;
}
.detail-process .process-step{
  text-align:left; padding: 0 0.8rem 0 0;
  position: relative; z-index: 1;
}
.detail-process .process-num{
  margin: 0 0 0.9rem;
  width: 44px; height: 44px; font-size: 0.95rem;
  background: var(--color-bg);
  border: 2px solid var(--color-accent-dim);
  color: var(--color-accent-dim);
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.detail-process .process-step:hover .process-num{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
.detail-process .process-step p{
  font-size: 0.82rem; color: var(--color-text-muted); margin:0; line-height: 1.5;
}

.service-sidebar .sidebar-card{
  background: var(--color-secondary); border-radius: var(--radius-md); padding: 1.8rem; margin-bottom: 1.4rem;
}
.service-sidebar .sidebar-card h5{ font-size:1rem; margin-bottom: 1rem; }
.sidebar-service-list{ list-style:none; display:flex; flex-direction:column; gap: 0.6rem; }
.sidebar-service-list a{ font-size:0.88rem; display:flex; justify-content:space-between; align-items:center; padding: 0.4rem 0; border-bottom: 1px solid var(--color-line); }
.sidebar-service-list a:hover{ color: var(--color-accent-dim); }
.sidebar-cta{ background: var(--color-primary); color: var(--color-secondary); }
.sidebar-cta h5{ color: var(--color-secondary); }
.sidebar-cta p{ font-size:0.86rem; color: rgba(243,243,230,0.65); margin-bottom:1.1rem; }

@media (max-width: 991.98px){
  .service-detail-layout{ grid-template-columns: 1fr; }
  .detail-process{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 575.98px){ .detail-process{ grid-template-columns: 1fr; } }

/* ===================================================================
   NEWS DETAIL
   =================================================================== */
.article-body{ max-width: 760px; margin: 0 auto; }
.article-feature-img{ border-radius: var(--radius-lg); overflow:hidden; margin-bottom: 2.2rem; box-shadow: var(--shadow-card); }
.article-feature-img img{ width:100%; height: 420px; object-fit:cover; }
.article-body p{ font-size: 1.05rem; color: var(--color-text); margin-bottom: 1.4rem; }
.article-gallery{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 2rem 0; }
.article-gallery img{ border-radius: var(--radius-md); height: 220px; width:100%; object-fit:cover; }
.article-video{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 16/9; margin: 2rem 0; }
.article-video iframe{ width:100%; height:100%; border:0; }
.share-bar{ display:flex; align-items:center; gap: 0.8rem; margin: 2.4rem 0; padding-top: 1.6rem; border-top: 1px solid var(--color-line); }
.share-bar span{ font-size:0.85rem; font-weight:600; color: var(--color-text-muted); }
.share-bar a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--color-line);
  display:flex; align-items:center; justify-content:center; transition: all var(--t-fast) var(--ease);
}
.share-bar a:hover{ background: var(--color-primary); color: var(--color-secondary); border-color: var(--color-primary); }

.article-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--color-line); }
.article-nav a{ font-size:0.86rem; font-weight:600; color: var(--color-accent-dim); display:flex; align-items:center; gap:6px; max-width: 45%; }
.article-nav a.next{ text-align:right; justify-content:flex-end; margin-left:auto; }

.related-news-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 1.5rem; }

@media (max-width: 767.98px){
  .article-gallery{ grid-template-columns: 1fr; }
  .article-feature-img img{ height: 240px; }
  .related-news-grid{ grid-template-columns: 1fr; }
  .article-nav{ flex-direction:column; }
  .article-nav a{ max-width:100%; }
}

/* ===================================================================
   404 / COMING SOON / PRIVACY / TERMS
   =================================================================== */
.error-page{
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; background: var(--color-primary); color: var(--color-secondary);
  padding: 2rem;
}
.error-page .error-code{ font-family: var(--font-display); font-size: clamp(5rem,16vw,9rem); color: var(--color-accent); line-height:1; }
.error-page h1{ color: var(--color-secondary); margin: 0.6rem 0 1rem; }
.error-page p{ color: rgba(243,243,230,0.65); max-width: 50ch; margin: 0 auto 2rem; }

.legal-doc{ max-width: 760px; margin: 0 auto; }
.legal-doc h2{ font-size: 1.3rem; margin: 2rem 0 0.8rem; }
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc p, .legal-doc li{ color: var(--color-text-muted); }
.legal-doc ul{ padding-left: 1.4rem; list-style: disc; margin-bottom: 1rem; }

/* ===================================================================
   SKELETON LOADING (used briefly while news/JS-rendered grids mount)
   =================================================================== */
.skeleton{ background: linear-gradient(100deg, var(--color-line) 30%, rgba(0,0,0,0.04) 50%, var(--color-line) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-md); }
@keyframes shimmer{ to{ background-position-x: -200%; } }

/* Animated gradient utility (used sparingly, e.g. CTA accent text) */
.gradient-text{
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dim), var(--color-accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip:text; color: transparent;
  animation: gradientShift 4s linear infinite;
}
@keyframes gradientShift{ to{ background-position: 200% center; } }

/* ===================================================================
   FEATURED NEWS CARD (news listing page hero article)
   =================================================================== */
.featured-news-card{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  text-decoration: none;
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  margin-bottom: 2.8rem;
}
.featured-news-card:hover{
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.featured-news-image{
  position: relative; min-height: 320px; overflow: hidden;
}
.featured-news-image img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.featured-news-card:hover .featured-news-image img{ transform: scale(1.04); }
.featured-news-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,0.1));
}
.featured-news-badge{
  position: absolute; top: 1.2rem; left: 1.2rem;
  background: var(--color-accent); color: var(--color-primary);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.3rem 0.8rem;
  border-radius: 999px;
}
.featured-news-body{
  padding: 2.4rem 2.2rem;
  display: flex; flex-direction: column; justify-content: center;
}
.featured-news-title{
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: 0.9rem; line-height: 1.2;
}
.featured-news-excerpt{
  color: var(--color-text-muted); font-size: 0.95rem;
  margin-bottom: 1.4rem; line-height: 1.7;
}
@media (max-width: 767.98px){
  .featured-news-card{ grid-template-columns: 1fr; }
  .featured-news-image{ min-height: 200px; }
  .featured-news-body{ padding: 1.6rem 1.4rem; }
}

/* ===================================================================
   PAGE TRANSITION
   A subtle dark curtain slides in/out between page loads.
   Class .page-transitioning is added by JS before navigation.
   =================================================================== */
.page-transition-overlay{
  position: fixed; inset: 0; z-index: 9998;
  background: var(--color-primary);
  transform: translateY(-100%);
  transition: transform 0.55s cubic-bezier(.77,0,.18,1);
  pointer-events: none;
}
.page-transition-overlay.slide-in{ transform: translateY(0); pointer-events: all; }
.page-transition-overlay.slide-out{ transform: translateY(100%); }
.page-transition-overlay .pt-mark{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.7);
  opacity: 0;
  transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
  color: var(--color-accent);
  font-family: var(--font-display); font-size: 2rem;
  width: 64px; height: 64px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.page-transition-overlay.slide-in .pt-mark{
  opacity: 1; transform: translate(-50%,-50%) scale(1);
}

/* ===================================================================
   SKELETON LOADING — news & services (JS removes .is-loading class)
   =================================================================== */
.news-grid.is-loading .news-card-img,
.news-grid.is-loading .news-card h4,
.news-grid.is-loading .news-card p,
.news-grid.is-loading .news-meta{
  background: linear-gradient(100deg, #f0ede8 30%, #e8e4dd 50%, #f0ede8 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  color: transparent !important;
}
.news-grid.is-loading .news-card-img img,
.news-grid.is-loading .news-card-cat{ opacity: 0; }

/* ===================================================================
   ENHANCED HERO — animated gold accent line behind headline
   =================================================================== */
.hero-accent-line{
  display: block; width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  margin-bottom: 1.4rem;
  animation: lineExpand 1.2s var(--ease) 0.4s both;
}
@keyframes lineExpand{
  from{ width: 0; opacity: 0; }
  to{ width: 60px; opacity: 1; }
}

/* ===================================================================
   IMPROVED ABOUT SECTION — team illustration side panel
   =================================================================== */
.about-stat-badges{
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem;
}
.about-stat-badge{
  background: var(--color-secondary);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  text-align: center; flex: 1; min-width: 110px;
}
.about-stat-badge .badge-num{
  font-family: var(--font-display); font-size: 1.7rem;
  color: var(--color-accent-dim); line-height: 1;
}
.about-stat-badge .badge-label{
  font-size: 0.75rem; color: var(--color-text-muted); margin-top: 4px;
}

/* ===================================================================
   IMPROVED PROCESS — homepage connecting line polish
   =================================================================== */
.process-track::before{
  top: 28px; left: calc(10% + 28px); right: calc(10% + 28px);
  background: linear-gradient(90deg, var(--color-accent), rgba(238,205,92,0.2));
}
.process-step{ transition: transform var(--t-med) var(--ease); }
.process-step:hover{ transform: translateY(-4px); }

/* ===================================================================
   NAV ACTIVE STATE — highlight current page
   =================================================================== */
.nav-links a.is-active{ color: var(--color-accent-dim) !important; }
.nav-links a.is-active::after{ width: 100%; }

/* ===================================================================
   TESTIMONIAL CARD — author photo border glow on hover
   =================================================================== */
.testimonial-card:hover .testimonial-person img{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(238,205,92,0.3);
  transition: all var(--t-med) var(--ease);
}

/* ===================================================================
   FOOTER LINKS — animated underline on hover
   =================================================================== */
.footer-links a{
  position: relative; display: inline-block;
}
.footer-links a::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:0; height:1px; background:var(--color-accent);
  transition: width var(--t-fast) var(--ease);
}
.footer-links a:hover::after{ width:100%; }
.footer-links a:hover{ padding-left: 0; color: var(--color-accent); }

/* ===================================================================
   CONTACT SECTION — note/disclaimer under form submit
   =================================================================== */
.form-note{
  font-size: 0.78rem; color: var(--color-text-muted);
  margin-top: 0.8rem;
  display: flex; align-items: center; gap: 6px;
}
.form-note i{ color: var(--color-accent-dim); }