:root{--brand:#E76900;--brand-600:#cf5d00;--brand-700:#b34e00;--text:#222;--muted:#666;--bg:#fffaf6;--surface:#ffffff;--border:#eee;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.06)}

*{box-sizing:border-box}
html,body{height:100%;width:100%;overflow-x:hidden} /* stop horizontal scroll */
body{
  margin:0;color:var(--text);background:#fff;
  font:16px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased
}

h1{font-size:44px;line-height:1.2;margin:0 0 10px}
h2{font-size:30px;margin:0 0 8px}
h3{font-size:20px;margin:6px 0}
p{margin:8px 0 14px}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}
.small{font-size:.94rem;color:var(--muted)}

.container{max-width:1120px;margin:0 auto;padding:18px}
.section{padding:48px 18px}
.grid{display:grid;gap:20px}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:880px){.grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)}}

/* ================= Header (responsive, no overflow) ================= */
header{background:var(--brand-700);color:#fff;position:sticky;top:0;z-index:50}
header .bar{
  display:grid;
  grid-template-columns:auto 1fr auto; /* brand | menu | actions */
  align-items:center;
  gap:12px
}

.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;letter-spacing:.2px}
.brand img{height:56px;width:auto;display:block}
.brand span{display:none}
@media(min-width:520px){.brand span{display:inline}}

.menu{
  display:flex;align-items:center;gap:24px;justify-self:center;
  flex-wrap:wrap; /* allow wrapping when tight */
  min-width:0   /* so it can shrink without pushing the page */
}
.menu a{color:#fff;font-weight:400;font-size:14px;letter-spacing:.2px;white-space:nowrap}
.menu a[aria-current='page']{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

.actions{justify-self:end;display:flex;align-items:center;gap:14px}
.actions .lang{color:#fff;opacity:1;font-weight:700;border:1px solid rgba(255,255,255,.35);padding:6px 10px;border-radius:999px}
.actions .btn{white-space:nowrap}

/* Mobile header layout: stack menu below brand/actions and allow swipe */
@media (max-width:680px){
  header .bar{
    grid-template-columns:1fr auto;               /* top row */
    grid-template-areas:
      "brand actions"
      "menu  menu";
  }
  .brand{grid-area:brand}
  .actions{grid-area:actions}
  .menu{
    grid-area:menu;
    justify-content:flex-start;
    gap:14px;
    overflow-x:auto;                               /* if still too wide, swipe */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .menu::-webkit-scrollbar{display:none}
  .brand img{height:40px}
  .actions .btn{padding:10px 12px;font-size:14px}
}

/* ================= Buttons ================= */
.btn{display:inline-block;cursor:pointer;background:var(--brand);color:#fff;border:0;border-radius:999px;padding:14px 22px;font-weight:800;box-shadow:var(--shadow);transition:.15s transform ease,.15s background ease}
.btn:hover{background:var(--brand-600);transform:translateY(-1px)}
.btn--light{background:#fff;color:var(--brand)}
.btn--ghost{background:transparent;border:2px solid var(--brand);color:var(--brand)}
.btn--small{padding:10px 14px;font-size:14px;border-radius:999px}

/* ================= Skip link ================= */
.skip-link{position:absolute;left:-999px;top:-999px;background:#fff;color:#000;padding:10px;border-radius:8px;border:2px solid #000}
.skip-link:focus{left:12px;top:12px;z-index:1000}

/* ================= Hero ================= */
.hero{background:var(--bg);padding:80px 18px;text-align:center}
.hero p{color:var(--muted)}
.badges img{
  height:56px;margin:14px 12px 0 0;
  max-width:45vw; height:auto; /* keep badges from overflowing on phones */
}
@media (max-width:680px){
  h1{font-size:34px;line-height:1.2}
  .hero{padding:48px 16px}
  .container{padding:14px}
}

/* ================= Cards ================= */
.card{background:var(--bg);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:1px solid var(--border)}
.card--service{padding:0;overflow:hidden}
.card--service img{width:100%;height:350px;object-fit:cover;display:block}
.card--service .body{padding:16px}

/* ================= Footer ================= */
footer{background:#121212;color:#eee;margin-top:40px}
footer a{color:#ddd}
.footer-inner{max-width:1120px;margin:0 auto;padding:36px 18px;display:grid;gap:24px}
@media(min-width:880px){.footer-inner{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{height:28px}
.footer-section h4{margin:0 0 10px;font-size:16px;color:#fff}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:6px 0}
.footer-bottom{border-top:1px solid #1f1f1f;margin-top:8px;padding:14px 0;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ================= Legal ================= */
.legal-wrap{max-width:960px;margin:0 auto;padding:28px 18px}
.legal-toc{position:sticky;top:72px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;max-height:70vh;overflow:auto}
.legal-grid{display:grid;gap:22px}
.legal-grid--2{grid-template-columns:280px 1fr}
@media(max-width:880px){.legal-grid--2{grid-template-columns:1fr}.legal-toc{position:static}}
.legal-toc a{display:block;padding:8px 10px;border-radius:8px;color:var(--text)}
.legal-toc a:hover{background:var(--bg);color:var(--brand)}
.muted{color:var(--muted)}

/* ================= Dark mode ================= */
@media (prefers-color-scheme:dark){
  :root{--text:#f3f3f3;--muted:#bbb;--bg:#1b1b1b;--surface:#111;--border:#2a2a2a;--shadow:none}
  body{background:#0e0e0e}
  .btn--light{background:#222;color:#fff}
}