/* =============== 1) Theme Variables =============== */
:root{
  --bg:#0b1020;
  --bg-grad:linear-gradient(180deg,var(--bg) 0%,rgba(15,23,48,.98) 100%);
  --card:#11162a;
  --text:#e8eefc;
  --muted:#98a2b3;
  --border:#1f2a44;
  --brand:#4da3ff;
  --brand-2:#22d3ee;
  --accent:#c084fc;
}

/* =============== 2) Base & Globals =============== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg-grad);
}
.container{ max-width:1120px; margin:0 auto; padding:0 1.2rem }

/* Links: never underline globally */
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand); text-decoration:none }

/* Screen-reader only helper */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =============== 3) Header =============== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,16,32,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; padding:.8rem 0; gap:.8rem }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:1rem; flex-wrap:nowrap }
.nav-right nav{ display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap }

/* Logo (square edges by your request) */
.logo{ display:flex; gap:.6rem; align-items:center; font-weight:700; letter-spacing:.4px; color:var(--text) }
.logo .mark{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:inline-block }
.logo .logo-icon{ display:block; object-fit:contain }
.logo:hover{ text-decoration:none }

/* Header menu links (button-like) */
nav a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .8rem; border:1px solid var(--border); border-radius:999px;
  color:var(--text); opacity:.9;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
nav a:hover{
  transform:translate3d(0,-2px,0);
  background:rgba(255,255,255,.08);
  border-color:var(--brand);
  color:#fff;            /* keep white text on hover */
  opacity:1;
  text-decoration:none;  /* never underline */
}

/* =============== 4) Hero =============== */
.hero{
  padding:5rem 0 4rem;
  border-bottom:1px solid var(--border);
  text-align:center;
}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.2rem);
  margin:0 0 1rem;
  line-height:1.2;
}
.hero p{
  color:var(--muted);
  max-width:720px;
  margin:0 auto 1.5rem;
  font-size:1.125rem;
}
.hero-actions{
  display:flex; justify-content:center; gap:1rem; margin-top:1.5rem;
}

/* =============== 5) Buttons (global) =============== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:999px;
  padding:.65rem 1.1rem; border:1px solid var(--border); background:transparent; color:#fff;
  line-height:1; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
  text-decoration:none;
}
.btn:hover{
  transform:translate3d(0,-2px,0);
  border-color:var(--brand);
  color:#fff;                            /* keep white text */
  background:rgba(77,163,255,.08);      /* faint blue wash */
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  text-decoration:none;
}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  border-color:transparent; color:#fff;
}
.btn.primary:hover{
  filter:brightness(1.08);
  transform:translate3d(0,-3px,0);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* =============== 6) Sections & Cards (shared) =============== */
.section{ padding:4rem 0 }  /* unified spacing everywhere */
.section-head h2{ margin:0 0 .6rem; font-size:clamp(1.6rem,3.5vw,2rem) }
.muted{ color:var(--muted) }
.grid{ display:grid; gap:1rem }
.grid.cols-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.card h3{ margin:.2rem 0 .4rem }

/* Make all card titles brand-blue by default; no hover change, no underline */
.card h3 a,
.card h4 a{
  color:var(--brand);
  text-decoration:none;
}
.card h3 a:hover,
.card h4 a:hover{
  color:var(--brand);
  text-decoration:none;
}

/* =============== 7) Services Section =============== */
.section.services{ border-bottom:1px solid var(--border) }
.section.services .section-head{ text-align:left; margin-bottom:2rem }
.section.services .section-head .muted{ margin:0; max-width:none }
.section.services .grid{ display:grid; gap:2rem }
@media (min-width:700px){ .section.services .grid.cols-3{ grid-template-columns:repeat(3,1fr) } }
.section.services .card{
  border-radius:1rem; padding:1.5rem;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.section.services .card:hover{
  transform:translateY(-4px);
  border-color:var(--brand);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

/* =============== 8) Blog Section =============== */
.section.blog .section-head{ text-align:left; margin-bottom:2rem }
.section.blog .section-head .muted{ margin:0; max-width:none }
.section.blog .card{
  border-radius:1rem; padding:1.5rem;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.section.blog .card:hover{
  transform:translateY(-4px);
  border-color:var(--brand);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

/* =============== 9) Forms / Contact =============== */
.control{
  width:100%; padding:.75rem .9rem; border:1px solid var(--border); border-radius:12px;
  background:transparent; color:var(--text); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.control::placeholder{ color:var(--muted); opacity:.9 }
.control:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(77,163,255,.25) }
textarea.control{ resize:vertical; min-height:160px }

/* Two-column layout for contact page (positions left, form right) */
.contact-grid{ display:grid; grid-template-columns:1fr 2fr; gap:1.5rem }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr } }

.contact-form{ border-radius:16px; padding:1.25rem 1.25rem 1.35rem }
.contact-grid .card{ border-radius:16px; padding:1.25rem 1.25rem 1.3rem }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem }
.form-grid .span-2{ grid-column:1 / -1 }
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr } }

.field label{ display:block; font-weight:600; margin-bottom:.35rem; color:var(--text); opacity:.92 }
.form-actions{ display:flex; align-items:center; gap:.8rem; margin-top:.6rem }
#contactFormMsg{ margin-top:.6rem }

/* Optional map block (if you ever re-enable it) */
.map-container{ border-radius:12px; overflow:hidden }
.map-container.card{ padding:0; overflow:hidden; border-radius:16px }
.map-container.card iframe{ display:block; width:100%; height:420px; border:0 }

/* =============== 10) Footer =============== */
.site-footer{ border-top:1px solid var(--border); padding:2rem 0; color:var(--muted) }
.site-footer .container{ max-width:1120px; padding:0 1.2rem }
.footer-row{ display:flex; align-items:flex-start; gap:2rem; width:100% }
.footer-brand{ min-width:0 }
.footer-right{ margin-left:auto; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:3rem }
.footer-col{ min-width:0 }
.footer-col h3{ margin:0 0 .5rem; color:var(--text); font-weight:600 } /* white headings */
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col li{ margin-bottom:.4rem }
.footer-col a{ color:var(--muted); text-decoration:none }
.footer-col a:hover{ color:var(--brand) }
.footer-copy{ margin-top:5rem; display:block }
@media (max-width:900px){ .footer-right{ grid-auto-flow:row; grid-auto-columns:1fr } }



/* ===== Card sizing: cap height, equalize, and keep button visible ===== */
.section.services .grid .card,
.section.blog .grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 400px;        /* ← cap the card height (tweak to taste) */
  overflow: hidden;         /* hide anything past the cap */
}

/* Content area grows but can shrink, and gets a fade at the bottom */
.card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;                  /* take available space above actions */
  min-height: 0;            /* allow shrinking */
  overflow: hidden;         /* clip overflowing text for the fade */

  /* Fade out the last part of text (works in all modern browsers) */
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,0) 100%);
}

/* If you kept line-clamp, you can keep it or remove it.
 *   Keeping a small clamp gives tighter previews. */
.card-summary {
  margin: 0 0 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;    /* adjust lines if you want a shorter/longer preview */
  line-clamp: 4;            /* standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Image at top (unchanged) */
.section.services .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section.services .card .service-image {
  width: var(--service-img-width, 100%);
  height: auto;
  max-height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto 1rem;
  border-radius: 0.5rem;
}

/* Actions pinned to bottom and always visible */
.service-actions {
  margin-top: auto;
  padding-top: 0.25rem;     /* tiny separation from faded text */
  margin-bottom: 0.1rem;
}

.service-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.section.job h1 {
  font-size: 2.25rem;   /* big heading */
  margin-bottom: 0.5rem;
}

.section.job .job-meta {
  margin-bottom: 1.5rem;
}

.section.job .job-meta p {
  margin: 0.25rem 0;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: #aaa; /* muted text */
}

.section.job .job-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  font-size: 0.95rem;
  color: #666;
  text-align: center;
}