@charset "utf-8";

/* =========================
   TOKENS
   ========================= */
:root{
  /* Primary brand (rose) */
  --brand:        #C75D7A;
  --brand-dark:   #A54862;
  --brand-soft:   #F2D6DE;

  /* Secondary accent (dark orange) */
  --accent:       #F08A4B;
  --accent-dark:  #C8652F;
  --accent-soft:  #FFE2CF;

  /* Neutrals */
  --bg:           #F5F4F6;
  --surface:      #FFFFFF;
  --border:       #D7D3DA;

  /* Text */
  --text:         #1F2933;
  --muted:        #6B6672;

  /* UI */
  --radius:       16px;
  --shadow:       0 2px 10px rgba(31,41,51,.08);
}

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.page{max-width:1120px;margin:0 auto;padding:1.4rem 1.2rem 2.2rem}

/* Links (single source of truth) */
a{
  color:var(--brand);
  font-weight:600;
  text-decoration:none;
  transition:color .15s ease, background .15s ease;
}
a:hover{color:var(--brand-dark)}

/* =========================
   TOPBAR + NAV
   ========================= */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar-inner{
  display:flex;align-items:center;gap:.8rem;
  padding:.65rem 0;
}
.brand{display:flex;align-items:center}
.brand-logo{height:40px;width:auto;display:block}

.nav{
  display:flex;align-items:center;gap:.25rem;
  margin-left:auto;
}
.nav-link{
  font-weight:600;
  font-size:.92rem;
  padding:.45rem .7rem;
  border-radius:999px;
  color:var(--text);
  opacity:.9;
  transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.nav-link:hover{
  background:rgba(240,138,75,.12);
  color:var(--brand-dark);
  opacity:1;
}
.nav-link-cta{
  background:var(--brand);
  color:#fff;
}
.nav-link-cta:hover{
  background:var(--brand-dark);
  color:#fff;
}

.topbar-right{display:flex;align-items:center;margin-left:.5rem}
.lang-select{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:10px;
  padding:.38rem .5rem;
  font:inherit;
  color:var(--text);
}

/* Burger (hidden on desktop) */
.burger{
  display:none;
  margin-left:auto;
  width:42px;height:38px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.burger span{
  display:block;
  height:2px;
  background:var(--text);
  margin:6px 10px;
}

/* Mobile menu */
.mobile-menu{
  border-top:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.96);
}
.mobile-menu-inner{
  display:grid;
  gap:.35rem;
  padding:.8rem 1.2rem 1rem;
}
.mobile-link{
  padding:.65rem .8rem;
  border-radius:12px;
  font-weight:650;
  background:rgba(0,0,0,.03);
}
.mobile-link:hover{background:rgba(240,138,75,.12);color:var(--brand-dark)}
.mobile-link-cta{background:var(--brand);color:#fff}
.mobile-link-cta:hover{background:var(--brand-dark);color:#fff}

/* =========================
   HERO VISUAL
   ========================= */
.full-bleed{
  position:relative;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;width:100vw;
  margin-bottom:3rem;
}
.hero-visual{position:relative}
.hero-visual img{
  width:100%;
  display:block;
  object-fit:cover;

  /* KEY PART */
  min-height:60vh;     /* ensures image is always tall */
  max-height:70vh;
}

/* =========================
   HERO SLOGAN OVERLAY
   ========================= */
.hero-slogan{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;

  /* NEW */
  padding:0 1rem;  /* left + right breathing room */
}
.hero-slogan-inner{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(8px);
  border-radius:18px;
  padding:1.2rem 5rem;
  box-shadow:0 6px 18px rgba(15,30,46,.12);
  text-align:center;
  border:1px solid rgba(255,255,255,.35);
  opacity:0;
  transform:translateY(10px);
  animation:heroFadeIn .8s ease-out forwards;
  animation-delay:.2s;

}
@keyframes heroFadeIn{
  to{opacity:.8;transform:translateY(0)}
}
.hero-slogan-title{
  font-size:2rem;
  font-weight:600;
  color:var(--text);
  line-height:1.25;
}
.hero-slogan-subtitle{
  margin-top:.35rem;
  font-size:1.2rem;
  font-weight:600;
  color:var(--brand-dark);
}
@media (max-width:540px){
  .hero-slogan{bottom:8%; margin:1rem;}
  .hero-slogan-title{font-size:1.15rem}
  .hero-slogan-subtitle{font-size:1.10rem; line-height:1.15;}
}

/* =========================
   HERO
   ========================= */
.hero{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:1.6rem;
  margin-top:1.2rem;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1.2rem;
}
.eyebrow{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-dark);
  margin-bottom:.35rem;
}
.hero-title{font-size:2rem;line-height:1.15;margin-bottom:.6rem}
.hero-flag{height:1.1em;vertical-align:middle;margin-left:.25rem}
.hero-subtitle{color:var(--muted);max-width:40rem;margin-bottom:1rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;
  padding:.32rem .75rem;
  border-radius:999px;
  background:rgba(0,0,0,.05);
  color:var(--muted);
}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:.6rem}

/* Right panel */
.panel{
  border-radius:18px;
  padding:1.1rem;
  background:#0F1E2E;
  color:#fff;
}
.panel-title{font-size:1.05rem;margin:.3rem 0 .5rem}
.panel-text{font-size:.9rem;opacity:.85;margin-bottom:.8rem}
.metrics{display:grid;gap:.55rem}
.metric{
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:.6rem .7rem;
}
.metric-label{font-size:.78rem;opacity:.75}
.metric-value{font-weight:700;font-size:.85rem;margin-top:.12rem}

/* =========================
   FULL-WIDTH SECTION BACKGROUND
   ========================= */
.section-wrap{
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
  padding:1rem 0;
}
.section-wrap > .page{padding-top:0;padding-bottom:0}
.section-bg-warm{background:#EA8348}
.section-bg-soft{background:#B3516C}

/* =========================
   SECTIONS / CARDS
   ========================= */
.section{margin:6rem 0}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  margin-bottom:1rem;
}
.section-title{font-size:1.4rem;font-weight:600}
.section-subtitle{color:var(--muted);max-width:520px}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem 1.05rem;
}
.card h3{font-size:1rem;margin-bottom:.35rem}
.card p{color:var(--text);opacity:.9;font-size:.92rem}

.badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.22rem .55rem;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  margin-bottom:.6rem;
}
.badge-primary{border-left:3px solid var(--brand);padding-left:.65rem}
.badge-accent{border-left:3px solid var(--accent);padding-left:.65rem}
.badge-muted{border-left:3px solid #9AAEB5;padding-left:.65rem}
.badge-warm{border-left:3px solid #FFB25A;padding-left:.65rem}

/* =========================
   LISTS — COLORED BULLETS
   ========================= */
.list{list-style:none;margin:0;padding:0}
.list li{
  position:relative;
  padding:.25rem 0 .1rem 1.1rem;
  border:0;
}
.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1rem;
  width:.45rem;
  height:.45rem;
  border-radius:999px;
  background:var(--brand);
  transform:translateY(-50%);
}
.list-brand  li::before{background:var(--brand)}
.list-accent li::before{background:var(--accent)}
.list-warm   li::before{background:#FFB25A}
.list-muted  li::before{background:#9AAEB5}

/* Optional: per-card bullet colors via badges */
.card .badge-accent ~ .list li::before{background:var(--accent)}
.card .badge-warm   ~ .list li::before{background:#FFB25A}
.card .badge-muted  ~ .list li::before{background:#9AAEB5}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.7rem 1.2rem;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#B94D32;color:#fff}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-outline:hover{background:rgba(0,0,0,.04)}

/* =========================
   FORM + FOOTER
   ========================= */
.form{display:grid;gap:.75rem;max-width:720px}
.input{
  width:100%;
  padding:.85rem .95rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font:inherit;
}
.input:focus{
  outline:none;
  border-color:rgba(240,138,75,.6);
  box-shadow:0 0 0 3px rgba(240,138,75,.15);
}
.notice{color:var(--muted);font-size:.9rem}
.footer{
  margin-top:2rem;
  color:#9AA4B2;
  font-size:.85rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer a{color:var(--brand)}

/* =========================
   COMPANY
   ========================= */
.contact-details{margin-top:48px}

.contact-details-grid-3{
  display:grid;
  grid-template-columns:1.4fr 1fr .6fr;
  gap:32px;
  align-items:start;
}
@media (max-width:960px){
  .contact-details-grid-3{grid-template-columns:1fr}
}

.contact-details-col p{
  margin-top:.55rem;
  color:var(--text);
  opacity:.9;
  font-size:.92rem;
}
.contact-details-col a{
  color:var(--brand);
  font-weight:700;
}

.contact-map-img{
  display:block;
  margin:0;
  max-width:220px;
  width:100%;
  height:auto;
  opacity:.8;
}
.contact-map-caption{
  margin-top:.5rem;
  font-size:.85rem;
  color:var(--muted);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:920px){
  .hero{grid-template-columns:1fr}
  .section-header{flex-direction:column;align-items:flex-start}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:inline-block}
}

/* =========================
   SLIDESHOW (reusable)
   ========================= */
.slideshow{
  position:relative;
  padding:0 46px; /* space for arrows on both sides */
}

.slideshow-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  /* IMPORTANT: no horizontal padding -> stable arrow/card spacing */
  padding:0 0 0.75rem;
  scrollbar-width:none;
}

.slideshow-track::-webkit-scrollbar{display:none} /* Chrome/Safari */

.slideshow-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* Make the slide show a single "card" nicely */
.slideshow-slide > .card{
  height:100%;
}

/* Arrows */
.slideshow-nav{
  position:absolute;
  top:50%;
  transform:translateY(-70%);
  z-index:2;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.20); /* 80% transparent */
  backdrop-filter:saturate(1.2) blur(10px); 
  box-shadow:0 8px 18px rgba(15,30,46,.12);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:24px;
  line-height:1;
  color:var(--text);
  transition:transform .15s ease, background .15s ease;
}

.slideshow-nav:hover{
  transform:translateY(-70%) scale(1.03);
  background:#fff;
}
.slideshow-nav.prev{left:0px}
.slideshow-nav.next{right:0px}

/* Dots */
.slideshow-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:.6rem;
}
.slideshow-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.slideshow-dot.is-active{
  background:#fff;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
}

/* Responsive tweaks: keep arrows usable on small screens */
@media (max-width:540px){
   .slideshow{
    padding:0 44px;
  }
	
  .slideshow-nav.prev{left:4px}
  .slideshow-nav.next{right:4px}
}