:root{
  --brand-dark:#1E293B;
  --brand-amber:#FBBF24;
  --brand-gray:#64748B;
  --brand-light:#F8FAFC;
  --brand-white:#FFFFFF;
}
*{box-sizing:border-box}
body{font-family:ui-sans-serif,system-ui}
a{transition:color .2s ease}
button{transition:background-color .2s ease,transform .1s ease}
button:active{transform:translateY(1px)}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* Accordion */
.accordion-content{display:none}
.accordion.active .accordion-content{display:block}

/* Sticky CTA */
.sticky-cta{position:fixed;bottom:80px;right:20px;z-index:50}

/* Bottom Nav (mobile) */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#1E293B;color:#fff;display:flex;justify-content:space-around;padding:.5rem 0;z-index:50}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;font-size:.75rem}
.bottom-nav img{width:20px;height:20px;margin-bottom:2px}

/* Carousel — fixed slide width + consistent height */
.carousel{position:relative;overflow:hidden;border-radius:12px}
.carousel-track{display:flex;transition:transform .5s ease;will-change:transform}

/* Each slide takes exactly 100% of the carousel width */
.carousel-track > img{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  display:block;
  height:clamp(220px, 35vw, 420px); /* responsive height */
  object-fit:cover;
}

/* Nav buttons stay centered over the slides */
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.45);color:#fff;border:none;border-radius:8px;
  padding:.4rem .6rem;z-index:5
}
.carousel-btn.left{left:.5rem}
.carousel-btn.right{right:.5rem}

/* Two-column hero block */
.hero-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.hero-grid{grid-template-columns:1.2fr .8fr}}
.hero-card{background:#fff;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.06);padding:1rem}
input,textarea{border:1px solid #e2e8f0;border-radius:8px;padding:.5rem;width:100%}
label{font-size:.85rem;color:#475569}
.submit-amber{background:var(--brand-amber);color:#1E293B;font-weight:700;border-radius:10px;padding:.6rem 1rem}

/* Footer icons */
.footer-icons a{display:inline-flex;align-items:center;gap:.5rem;color:#cbd5e1}
.footer-icons a:hover{color:var(--brand-amber)}
/* ===============================
   Footer Styling
   =============================== */
footer {
  background: #0b2136;
  color: #fff;
  padding: 18px 24px;
}

footer a {
  color: #dbeafe;
  text-decoration: none;
  font-weight: 500;
}

footer a:hover {
  text-decoration: underline;
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

/* ---------------------------
   Blog Grid & Coming Soon Ribbon
--------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
}

.card .thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.card-body {
  padding: 14px;
}

.card-body h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #003366; /* IAC blue */
}

.card-body p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
}

.meta {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 8px;
}

/* Coming Soon ribbon */
.ribbon {
  width: 120px;
  background: #ff9800;
  color: #fff;
  text-align: center;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 0;
  position: absolute;
  top: 12px;
  left: -30px;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}