/* =========================================================
   Global stylesheet (white & red theme)
   ========================================================= */
:root{
  --bg:#ffffff;
  --text:#17202a;
  --muted:#5b6773;
  --red:#e10600;
  --red-700:#b30500;
  --line:#e8eaed;
  --maxw:1120px;
  --radius:14px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* =========================================================
   Header + Primary Nav
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:#fff;border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:72px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand-text{display:flex;flex-direction:column;color:var(--red)}
.brand-text small{color:var(--muted);font-size:.85rem}

/* Primary nav (desktop) */
.site-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.site-nav a{
  display:inline-block;padding:10px 12px;border-radius:10px;color:var(--text)
}
.site-nav a.active{background:var(--red);color:#fff}
.site-nav a:hover{background:#f7f7f7;border-radius:10px}

/* Burger */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer}
.nav-toggle span{width:26px;height:2px;background:#222;border-radius:2px;transition:.2s}

/* Primary nav (mobile: drop in-flow, not overlay) */
@media (max-width: 971px){
  .nav-toggle{display:flex}
  .site-nav{
    position:static;
    border-bottom:1px solid var(--line);
    max-height:none;
    display:none;           /* closed by default */
    background:#fff;
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;padding:8px 0;gap:0}
  .site-nav a{padding:12px 20px}
}

/* =========================================================
   Mini Nav (secondary bar under main nav)
   ========================================================= */
.mini-nav{
  background:var(--red);
  border-bottom:1px solid var(--red-700);
}
.mini-nav-inner{
  display:flex;gap:24px;padding:6px 0;
  font-size:.9rem;align-items:center;justify-content:center;
}
.mini-nav a{color:#fff;text-decoration:none;font-weight:500}
.mini-nav a:hover{text-decoration:underline}
@media (max-width: 971px){
  .mini-nav-inner{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:12px 20px;
    padding:8px 20px;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{padding:64px 0;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 10px}
.hero p{color:var(--muted);font-size:1.05rem;margin:0 0 20px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--red);border-radius:10px;
  padding:10px 16px;font-weight:600;cursor:pointer;background:#fff;color:var(--red)
}
.btn.primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn.primary:hover{background:var(--red-700);border-color:var(--red-700)}
.btn.ghost:hover{background:#f7f7f7}

/* =========================================================
   Sections / Cards
   ========================================================= */
.section{padding:48px 0}
.section h2{font-size:clamp(22px,3vw,30px);margin:0 0 12px}
.section .lead{color:var(--muted)}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}
@media (max-width: 907px){ .card-grid{grid-template-columns:1fr} }

/* =========================================================
   Tables
   ========================================================= */
.table{width:100%;border-collapse:collapse}
.table thead th{color:#3b3f44;text-align:left;font-size:.9rem;padding:10px;border-bottom:2px solid var(--red)}
.table tbody td{padding:12px;border-bottom:1px solid var(--line)}

/* =========================================================
   Forms
   ========================================================= */
.input, select, textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--text);outline:none
}
.input:focus, select:focus, textarea:focus{border-color:var(--red)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
label{display:block;margin:8px 0 6px;color:#3b3f44;font-weight:600;font-size:.95rem}
.notice{padding:12px 14px;border:1px dashed var(--line);border-radius:10px}
.success{color:#15803d}
.error{color:#b91c1c}

/* =========================================================
   Footer + Partners
   ========================================================= */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding-top:28px;background:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.footer-bottom{border-top:1px solid var(--line);margin-top:18px;padding:14px 0;color:var(--muted)}
@media (max-width: 971px){ .footer-grid{grid-template-columns:1fr} }

.partners-row{
  border-top:1px solid var(--line);
  margin-top:24px;padding-top:24px;text-align:center;
}
.partners-row h4{margin-bottom:16px;color:var(--red);font-weight:600}
.partners-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:32px}
.partners-logos img{
  max-height:48px;width:auto;object-fit:contain;
  filter:grayscale(10%);transition:filter .2s ease;
}
.partners-logos img:hover{filter:grayscale(0%)}

/* =========================================================
   Clients Grid
   ========================================================= */
.clients-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:24px;align-items:center;justify-items:center;
}
.clients-grid img{
  width:100%;max-width:160px;height:auto;object-fit:contain;
  filter:grayscale(20%);transition:filter .2s ease;
}
.clients-grid img:hover{filter:none}

/* =========================================================
   Contact Page Blocks
   ========================================================= */
.contact-block{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:32px;margin-top:20px;
}
.contact-section h3{margin:0 0 8px;color:var(--red);font-weight:600}
.contact-section p{margin:0 0 14px;line-height:1.6;color:var(--text)}

/* =========================================================
   Utilities
   ========================================================= */
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
.list-unstyled{list-style:none;padding:0;margin:0}

/* === Mobile header layout: brand + burger on full width, menu under it === */
@media (max-width: 971px){
  /* Make the header-inner a two-row grid */
  .header-inner{
    display: grid;
    grid-template-columns: 1fr auto;   /* brand grows, burger auto */
    grid-template-rows: auto auto;     /* row 1: brand+burger, row 2: nav */
    align-items: center;
    gap: 0;
  }

  /* Brand takes left, burger sits right on the same row */
  .brand{
    grid-column: 1 / 2;
    min-width: 0;           /* prevent overflow */
  }
  .nav-toggle{
    grid-column: 2 / 3;
    justify-self: end;
    display: flex;          /* ensure visible on mobile */
  }

  /* Nav spans the full width on the row below */
  .site-nav{
    grid-column: 1 / -1;    /* full width */
    grid-row: 2;            /* second row */
    position: static;       /* in-flow */
    width: 100%;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: none;          /* closed by default */
    background: #fff;
  }
  .site-nav.open{ display: block; }

  .site-nav ul{
    flex-direction: column;
    padding: 8px 0;
    gap: 0;
  }
  .site-nav a{
    padding: 12px 20px;
    width: 100%;
  }

  /* Mini-nav stays below; if you want it hidden while menu open, uncomment:
  .site-header.menu-open .mini-nav{ display:none; }
  (and toggle .menu-open on the header in your JS when opening the menu)
  */
}