/* ================================
   Viskar Engineers
   Global styles (FULL FILE)
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

/* keep weights crisp across browsers */
:root { font-synthesis: none; }              /* don’t simulate bold/italic */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* consistent mobile sizing */

/* --- Performance helper --- */
img[loading="lazy"]{
  content-visibility: auto;
  contain-intrinsic-size: 1px 300px;
}


/* Theme */
:root{
  --ink:#0b2447; --ink2:#1b4b8a;
  --accent:#3ea0ff; --accent2:#8cc8ff;
  --bg:#f5f8ff; --card:#ffffff; --line:#e3ecff;

  --fs-base:17px;
  --fs-small:14.5px;
  --fs-h1:clamp(2.0rem,1.6rem + 2.2vw,3.2rem);
  --fs-h2:clamp(1.8rem,1.6rem + 0.9vw,2.35rem);
  --fs-label:.95rem;
  --fs-input:16.5px;
  --fs-btn:16.5px;
  --lh:1.6;

  /* Brand lockup (smaller) */
  --brand-logo-h: clamp(42px, 5vw, 60px); /* ↓ was 50–74px */
  --brand-logo-ratio: 3;
  --brand-logo-w: calc(var(--brand-logo-h) * var(--brand-logo-ratio));
  --brand-nudge: calc(var(--brand-logo-h) * 0.62);
  --brand-right-pad: clamp(4px, 0.4vw, 8px);
  --brand-wordmark-w: calc(var(--brand-logo-w) - var(--brand-nudge) - var(--brand-right-pad));
}

/* Resets / basics */
*{ box-sizing:border-box }
html{ font-size:16px }
body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  font-size:var(--fs-base); line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  letter-spacing:.01em;
}
img{ display:block; max-width:100%; height:auto }

/* Layout helpers */
.container{ max-width:1200px; margin:0 auto; padding:0 20px }
.center{ text-align:center }
.mt-20{ margin-top:20px }
.small{ font-size:var(--fs-small); opacity:.85 }
.narrow{ max-width:760px }
.rounded{ border-radius:12px }

/* ================================
   Header / Navigation
   ================================ */

/* ================================
   Header / Navigation
   ================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(6px); /* Safari */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  contain: content;
}

/* separate rule (don’t nest in CSS) */
.site-header { min-height: 72px; }


.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:6px 20px;            /* tighter */
  flex-wrap:nowrap; width:100%; max-width:100%; min-width:0;
}

/* Brand lockup */
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
  flex:0 0 auto;
}
.brand-col{
  display:flex; flex-direction:column; align-items:flex-start;
  line-height:1; min-width: var(--brand-logo-w);
}
.brand-logo{ height: var(--brand-logo-h); width: auto; display:block; image-rendering:auto }
.brand-tagline {
  margin-top: 4px;
  margin-left: calc(var(--brand-nudge) - 12px); 
  width: var(--brand-wordmark-w);
  max-width: 100%;

  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;  /* lighter, more elegant */
  font-size: clamp(15px, 1.2vw, 19px);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #2f4f90;    /* softer navy, distinct from wordmark */
  white-space: nowrap;
  opacity: .97;
  position: relative;
}

.brand-tagline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(27,75,138,.6), rgba(27,75,138,.15), transparent);
  border-radius: 2px;
}



/* Menu */
.menu{
  display:flex; align-items:center; justify-content:flex-end;
  gap:14px; flex:1 1 auto; flex-wrap:nowrap; min-width:0;
}
.menu .nav-link{ font-weight:600; letter-spacing:.01em; }
.menu .nav-link{ color:var(--ink); padding:6px 8px; border-radius:6px; font-size:.95rem; text-decoration:none }
.menu .nav-link.active, .menu .nav-link:hover{
  color:#1b4b8a;
  text-shadow:0 0 1px rgba(27,75,138,.06);
}

/* Responsive tweaks */
@media (min-width:1200px){ .nav-wrap{ padding:8px 28px } }  /* still a touch tighter on xl */

@media (max-width:992px){
  :root{ --brand-logo-h: clamp(40px, 5.6vw, 56px) }  /* keep proportionally smaller */
  .brand-tagline{ font-size:14px; margin-top:3px }
}
@media (max-width:576px){
  :root{ --brand-logo-h: 42px }
  .nav-wrap{ padding:6px 16px }
  .brand-tagline{ margin-left:0; width:auto; white-space:normal; text-align:left; font-size:13px }
}

/* ================================
   Hero / Page hero  (UNIFORM)
   ================================ */
.hero,
.page-hero{
  position:relative;
  min-height:40vh;                 /* same height on ALL pages */
  display:grid; align-items:center;
  contain:paint; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  background:#0f2b57;
  opacity:0; transition:opacity .3s ease; will-change:opacity;
}
.hero-bg.loaded{ opacity:1 }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,43,87,.35),rgba(9,29,61,.45)) }
.hero-content{
  position:relative; z-index:2; color:#fff;
  text-align:center; padding:60px 20px;
}
.kicker{ display:inline-block; background:rgba(255,255,255,.15); padding:6px 12px; border-radius:999px; font-size:.95rem }
h1{ font-size:var(--fs-h1); margin:16px 0 10px; text-shadow:0 2px 8px rgba(0,0,0,.35) }
.sub{ max-width:820px; margin:0 auto 22px; line-height:1.55; text-shadow:0 1px 6px rgba(0,0,0,.30) }

/* Home hero: ONLY adjust framing a touch (no height change) */
.home-hero .hero-bg{ object-position:50% 48% } /* slightly less sky */
.home-hero .hero-content{
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:0 20px;
}
.home-hero .hero-text{ margin:0 }
.home-hero .hero-buttons{ margin-top:6px; display:flex; gap:12px }

/* ================================
   Buttons
   ================================ */
.btn{
  display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#06264d; font-weight:800; padding:12px 22px; border-radius:10px;
  box-shadow:0 8px 24px rgba(62,160,255,.25);
  transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none; font-size:var(--fs-btn)
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(62,160,255,.35) }
.btn.ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.65); box-shadow:none }
.btn.small{ padding:10px 16px; font-weight:700; font-size:15.5px }

/* ================================
   Sections / Cards / Grid
   ================================ */
.section{ padding:44px 0 }
.section.alt{ background:#edf4ff }
.section-title{
  font-size:var(--fs-h2);
  margin:0 0 12px; font-weight:800; letter-spacing:.005em; color:var(--ink);
  position:relative; padding-bottom:6px;
}
.section-title::after{
  content:""; display:block; height:4px; width:280px; max-width:44%;
  background:linear-gradient(90deg,var(--accent),transparent);
  border-radius:4px; margin-top:10px;
}

.grid{ display:grid; gap:20px }
.grid2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.grid3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(11,36,71,.08)
}
.card.big{ padding:28px }

.thumb{ position:relative; background:#fff; overflow:hidden; aspect-ratio:16/9; padding:8px; border-bottom:1px solid var(--line) }
.thumb img{
  position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px);
  object-fit:cover; border-radius:10px; opacity:0; transition:opacity .3s ease
}
.thumb img.loaded{ opacity:1 }

.card .body{ padding:12px 14px 16px }

.figure{ position:relative; background:#eaf1ff; overflow:hidden; aspect-ratio:16/9 }
.figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s }
.figure img.loaded{ opacity:1 }

/* Logos */
.logos .logo-card{
  background:#fff; display:grid; place-items:center;
  border:1px dashed var(--line); border-radius:12px; padding:16px;
  aspect-ratio:3/2; min-height:auto;
}
.logos .logo-card img{
  max-width:100%; max-height:70%; width:auto; height:auto; object-fit:contain; image-rendering:auto;
}
.logos.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:992px){ .logos.grid3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .logos.grid3{ grid-template-columns:1fr } }

/* Services grid on HOME */
.services-grid{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.services-grid .card{ flex:1 1 320px; max-width:360px; }

/* Long-form copy */
.service-copy h2{ margin-top:0 }
.service-copy h3{ margin:22px 0 10px; font-weight:800; color:var(--ink2); position:relative; }
.service-copy h3::after{ content:""; display:block; height:3px; width:240px; background:linear-gradient(90deg,var(--accent),transparent); margin-top:6px; border-radius:3px; }
@media (max-width:640px){
  .service-copy h3{ font-size:1.25rem }
  .service-copy h3::after{ width:160px; opacity:.8 }
}
.service-copy p{ line-height:1.7; margin:0 0 14px }
.section .narrow.service-copy{ max-width:940px }

/* TEAM */
.team-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.team-card{ transition:transform .18s ease, box-shadow .18s ease }
.team-card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(11,36,71,.10) }
.team-card .thumb{ aspect-ratio:4/5; padding:8px; background:#fff; border-bottom:1px solid var(--line) }
.team-card .thumb img{ position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:cover; border-radius:10px; opacity:0; transition:opacity .3s ease }
.team-card .thumb img.loaded{ opacity:1 }
.team-card .body{ padding:12px 14px 16px }
.team-role{ color:var(--ink2); font-weight:600; margin:6px 0 6px }

/* FAQ */
details.faq{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:10px 0 }
details.faq summary{ cursor:pointer; font-weight:700 }
.faq-a{ padding-top:10px; opacity:.95 }

/* Contact form */
.contact-form{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px;
  box-shadow:0 6px 16px rgba(11,36,71,.06)
}
.contact-form label{ display:block; font-weight:600; margin-bottom:6px; font-size:var(--fs-label) }
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; font:inherit;
  font-size:var(--fs-input); background:#fbfcff
}
.contact-form textarea{ resize:vertical }

/* Animations */
.fade-up{ animation:fadeUp .5s ease both; content-visibility:auto; contain-intrinsic-size:1px 300px; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* Footer */
.site-footer{ background:#eaf2ff; border-top:1px solid var(--line); margin-top:20px }
.foot{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:12px; flex-wrap:wrap }
.foot a{ color:var(--ink2); text-decoration:none }