/* ====== Base ====== */
:root{
  --bg:#0e0f12; --card:#14161b; --card-alt:#101216;
  --text:#e8eaee; --muted:#aeb4bf;
  --accent:#33c3aa; --accent-2:#3a7bff; --border:#222531;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);
  background:linear-gradient(180deg,#0a0b0e,#0f1116);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block;border-radius:14px}
a{color:inherit;text-decoration:none}
.small{font-size:.9rem;color:var(--muted)}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,14,18,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.04)}
.nav-wrap{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{font-weight:700;letter-spacing:.2px}
.logo-mark{display:inline-block;margin-right:8px;filter:contrast(0) brightness(2)}
.dot{color:var(--accent)}
.nav{display:flex;gap:18px;margin-left:auto}
.nav a{color:var(--muted)}
.nav a.active,.nav a:hover{color:#fff}
.cta-desktop{margin-left:8px}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 16px;
  border:1px solid var(--border);font-weight:600;transition:.2s all ease;cursor:pointer}
.btn-primary{background:var(--accent);color:#071414;border-color:transparent}
.btn-primary:hover{filter:brightness(1.08)}
.btn-outline{background:transparent}
.btn-outline:hover{border-color:#3b3f4d}
.btn-link{padding:8px 0;border:0;color:var(--accent);background:none}

/* Hero */
.hero{position:relative;min-height:56vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;border-bottom:1px solid rgba(255,255,255,.06);
  background-size:cover;background-position:center;filter:saturate(1.1) contrast(1.05)}
.hero-inner{position:relative;padding:90px 0}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.06;margin:0 0 12px}
.accent{color:var(--accent)}
.hero p{color:var(--muted);max-width:720px;margin:0 0 20px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Sections */
.section{padding:64px 0;border-top:1px solid rgba(255,255,255,.06)}
.section.alt{background:linear-gradient(180deg,#0c0d11,#111319)}
.section-head h2{margin:0 0 8px;font-size:clamp(24px,3vw,36px)}
.section-head p{margin:0;color:var(--muted)}

/* Cards & grids */
.cards{display:grid;gap:18px;margin-top:22px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card.small .card-media{height:180px}
.card-media{height:220px;background-size:cover;background-position:center}
.card-body{padding:16px}
.card h3{margin:6px 0 8px}
.bullet{padding-left:18px;margin:0 0 10px}
.bullet li{margin:4px 0;color:var(--muted)}

/* Catalog */
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.catalog-item{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.catalog-item .media{height:200px;background-size:cover;background-position:center}
.catalog-item .body{padding:14px}
.catalog-item h3{margin:6px 0 6px}

/* Product page */
.breadcrumb{color:var(--muted);font-size:.95rem;margin-bottom:10px}
.product-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.specs .card{padding:12px}
.kvp{display:flex;justify-content:space-between;border-top:1px dashed rgba(255,255,255,.08);padding:8px 0}
.kvp:first-child{border-top:0}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:28px 0;background:#0b0c10}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-nav{display:flex;gap:14px}
.footer-nav a{color:var(--muted)}
.footer-nav a:hover{color:#fff}

/* Responsive */
@media (max-width: 1100px){
  .cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-hero{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .cards.three{grid-template-columns:1fr}
  .catalog-grid{grid-template-columns:1fr}
  .cta-desktop{display:none}
  .hamburger{display:block;margin-left:auto}
  .nav{position:fixed;inset:64px 18px auto;display:none;flex-direction:column;background:var(--card);
    border:1px solid var(--border);border-radius:14px;padding:12px}
  .nav.open{display:flex}
}

/* === Logo tweaks === */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-img{height:28px;width:auto;display:inline-block;margin:0;border-radius:0}
.logo-text{font-weight:700;letter-spacing:.2px}
.logo-mark{display:none}

/* === Social icons === */
.social{display:flex;gap:12px;align-items:center}
.social a{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.social img,.social svg{width:20px;height:20px;display:inline-block}

.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Center CTA */
.centered-cta{text-align:center}
.centered-cta .btn{margin-left:auto;margin-right:auto;display:inline-block}

/* Utilities injected */
.media{display:block}

/* Built to move media utilities */
.media-fit-contain{background-size:contain;background-repeat:no-repeat;background-position:center}
.media-fit-cover{background-size:cover;background-position:center}
.card-media{aspect-ratio:16/9; height:auto}


/* ==== Contact form enhancements ==== */
.contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:32px;align-items:start}
@media (max-width: 900px){ .contact-grid{grid-template-columns:1fr} }
form[name="contact"] .form-row{margin-bottom:16px}
form[name="contact"] label{display:block;font-weight:600;margin-bottom:8px}
form[name="contact"] input,
form[name="contact"] select,
form[name="contact"] textarea{
  width:100%;padding:14px 16px;border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:12px;font-size:1rem
}
form[name="contact"] textarea{min-height:240px;line-height:1.4}
.contact-side .contact-card{background:var(--card);padding:20px;border:1px solid var(--border);border-radius:14px}



/* ==== OVERRIDE: Stack Contact + Why Us vertically (no side-by-side) ==== */
.contact-grid{display:block !important}
.contact-side{margin-top:32px !important}



/* ==== Center text on Contact page ==== */
.hero .content{ text-align:center; align-items:center; justify-content:center }
.section h1, .section h2, .section p{ text-align:center }
.contact-side{ text-align:center }


.social-list{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:8px}
.social-list .social{display:flex;flex-direction:column;align-items:center;text-decoration:none;font-size:14px;opacity:.95}
.social-list .social img{width:56px;height:56px}

.centered-social{text-align:center}

/* Card hover/click affordance */
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.card:hover, a.card:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.cards .card { transition: transform .2s ease, box-shadow .2s ease; }

a.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

a.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  cursor: pointer;
}

/* ===== Mobile fixes for cards on Hospitality / Relief / Accommodation ===== */

/* Make card media responsive with consistent aspect ratio; kill fixed heights */
.cards .card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
}

/* Tighter grid steps, mirroring the catalog-grid behavior */
@media (max-width: 900px) {
  .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cards.four,
  .cards.three,
  .cards.two {
    grid-template-columns: 1fr;
  }
}