/* Elegant, content-rich layout inspired by provided art direction */
:root{
  --bg:#120b16;
  --panel:#16121a;
  --accent:#c92b2b;
  --muted:#bdb6c1;
  --glass: rgba(255,255,255,0.03);
  --max-width:1200px;
  --radius:14px;
  font-synthesis: none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--muted);
  background: radial-gradient(circle at 10% 10%, #241425 0%, var(--bg) 40%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* container */
.container{max-width:var(--max-width);margin:0 auto;padding:48px 28px;}

/* header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg, rgba(0,0,0,0.25), transparent);backdrop-filter: blur(6px);z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px}
.logo-link img{height:100px;}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{background:var(--glass);color:white}
button#logo-toggle{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer}

/* hero */
.hero{padding:72px 0 36px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.hero-copy h1{font-size:48px;color:#fff;margin:0 0 16px;letter-spacing:-1px}
.lead{color:#d7cfd8;font-size:18px;margin-bottom:18px}
.hero-cta{display:flex;gap:12px;margin-bottom:20px}
.btn{background:var(--accent);color:white;padding:12px 18px;border-radius:10px;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.stats{display:flex;gap:18px;list-style:none;padding:0;margin:18px 0 0}
.stats li{font-size:14px;color:var(--muted)}
.hero-art img{max-width:100%;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.6))}

/* content sections */
.content h2{color:#fff;margin-top:0}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.features-grid article{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:10px}

/* services & cases */
.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.service{background:var(--panel);padding:18px;border-radius:10px}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case{background:linear-gradient(90deg, rgba(255,255,255,0.01), transparent);padding:16px;border-radius:10px}
.case img {
  width: 100%;
  height: 300px;
  object-fit: cover;  /* or 'contain', 'fill', 'scale-down' */
  object-position: center; /* focus point */
}

/* team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.team-grid .member {
  display: flex;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-grid .member:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.team-grid .member img {
  width: 120px; /* fixed image width */
  height: 120px; /* fixed image height */
  object-fit: cover; /* scale/crop image */
  border-radius: var(--radius) 0 0 var(--radius); /* round only left corners */
  flex-shrink: 0;
}

.team-grid .member h5 {
  margin: 0;
  color: var(--accent);
  font-size: 1.1rem;
}

.team-grid .member p {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.team-grid .member > div {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* contact */
.contact-section form{max-width:700px}
.form-row{display:flex;flex-direction:column;margin-bottom:12px}
input,textarea{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted)}

/* footer */
.site-footer{padding:18px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.02);margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}

/* responsiveness */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .features-grid{grid-template-columns:1fr}
  .service-list{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .team-grid{flex-direction:row;overflow:auto;padding-bottom:12px}
}

/* small helpers */
.lead, p{max-width:70ch}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.blog-grid .post {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-grid .post:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.blog-grid .post h4 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.blog-grid .post h4 a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-grid .post h4 a:hover {
  color: var(--muted);
}

.blog-grid .post p {
  flex-grow: 1;
  color: var(--muted);
  margin-bottom: 1rem;
}

.blog-grid .post time {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: right;
}

/* Accessibility helpers */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:8px 12px;background:#fff;color:#111;border-radius:6px}
a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(201,43,43,0.25);outline-offset:3px}
.price-card ul{margin:8px 0 0;padding-left:18px}
.read-more{display:inline-block;margin-top:8px;color:#c92b2b;text-decoration:none}
.read-more:focus{outline:2px dashed #c92b2b}

.socials a { color: var(--text-light); margin-left:1rem; font-size:1.2rem; transition:color 0.3s; }
.socials a:hover { color: var(--accent); }

/* Make the grid scrollable horizontally */


.glide__slide .case {
  background: #1b0f20; /* optional styling */
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.glide__arrows button {
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 50%;
  cursor: pointer;
}

.glide__bullets {
  text-align: center;
  margin-top: 1rem;
}

.glide__bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 4px;
  display: inline-block;
  cursor: pointer;
}

.glide__bullet--active {
  background: #fff;
}

/* Glide.js bullets */
.glide__bullets {
  text-align: center;
  margin-top: 1rem;
}

.glide__bullet {
  width: 12px;
  height: 12px;
  background: var(--panel);        /* Dark panel as default */
  border: 2px solid var(--muted);  /* Slight border to distinguish */
  border-radius: 50%;
  margin: 0 6px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glide__bullet:hover {
  background: var(--accent);       /* Accent on hover */
  transform: scale(1.2);
}

.glide__bullet--active {
  background: var(--accent);       /* Active dot is accent color */
  border-color: var(--accent);
  transform: scale(1.3);
}