/* Newsletter component moved to `styles/components/newsletter.css` */
/* Remove horizontal scrollbar from body */
body {
  overflow-x: hidden !important;
}

/* Blog grid placeholder card for empty space */
.page-blog .blog-grid .blog-card.placeholder {
  background: #f3f4f6;
  color: #bdbdbd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-style: italic;
  min-height: 320px;
  box-shadow: none;
  border: 2px dashed #e0e0e0;
}
/* Hide horizontal scrollbar for blog grid */
.blog-grid-wrapper,
.blog-grid {
  scrollbar-width: none; /* Firefox */
}
.blog-grid-wrapper::-webkit-scrollbar,
.card {
  background: #0a2e5c;
  color: #fff;
  border: 2px solid #38bdf8;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(56, 189, 248, 0.08),
    0 1.5px 8px rgba(56, 189, 248, 0.06);
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
  padding: 56px 96px;
  .card p,
  .card ul,
  .card ol {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.08em;
    line-height: 1.7;
  }
  margin-bottom: 24px;
}
.card:hover {
  border-color: #0ea5e9;
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.16),
    0 2px 12px rgba(56, 189, 248, 0.1);
  background: linear-gradient(135deg, #e0f2fe 60%, #f0fdfa 100%);
}
.copyright-tiny {
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
  padding: 10px 0 6px 0;
  letter-spacing: 0.01em;
}
/* Blog snippets — horizontal scroll container */
.blog-grid-wrapper {
  position: relative;
  /* keep wrapper static and let the inner grid handle horizontal scrolling */
  display: block;
}

/* The actual grid of blog cards — render as a horizontal row that scrolls */
.blog-grid {
  display: flex;
  gap: 24px;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* reduced outer padding so cards can occupy more body width */
  padding: 8px 36px 12px 36px;
  scroll-snap-type: x mandatory;
  /* show a thin scrollbar where supported */
  scrollbar-width: thin;
}

.blog-grid {
  /* hide scrollbar visually while preserving scrolling behavior */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.blog-grid::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
  height: 0;
}

.blog-grid .blog-card {
  flex: 0 0 480px; /* larger card width for better readability */
  width: 480px;
  scroll-snap-align: start;
}

/* Make homepage blog cards match the blog page card styling */
.blog-grid .blog-card {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  min-width: 0;
  margin: 0;
  border-radius: 16px;
  position: relative;
  background: #fff;
  border: 1px solid rgba(10, 46, 92, 0.06);
  box-shadow: 0 12px 30px rgba(10, 46, 92, 0.12);
  overflow: visible;
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    border-color 180ms ease;
  will-change: transform;
  cursor: pointer;
}

.blog-grid .blog-card-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.blog-grid .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  -webkit-clip-path: inset(0 0 0 0 round 16px 16px 0 0) !important;
  clip-path: inset(0 0 0 0 round 16px 16px 0 0) !important;
}

.blog-grid .blog-card:hover .blog-card-image img {
  transform: scale(1.04);
}

/* Enforce top-only corner rounding for images in all states (normal/hover/focus/active)
   with high specificity and !important so Brave/Chromium won't render rounded bottoms. */
.blog-grid .blog-card .blog-card-image img,
.blog-grid .blog-card:hover .blog-card-image img,
.blog-grid .blog-card:focus .blog-card-image img,
.blog-grid .blog-card:active .blog-card-image img,
.page-blog .blog-card .blog-card-image img,
.page-blog .blog-card:hover .blog-card-image img,
.page-blog .blog-card:focus .blog-card-image img,
.page-blog .blog-card:active .blog-card-image img {
  border-radius: 16px 16px 0 0 !important;
  -webkit-clip-path: inset(0 0 0 0 round 16px 16px 0 0) !important;
  clip-path: inset(0 0 0 0 round 16px 16px 0 0) !important;
}

.blog-grid .blog-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(10, 46, 92, 0.14);
}

.blog-grid .blog-card:active {
  transform: translateY(-2px) scale(0.998);
  box-shadow: 0 8px 18px rgba(10, 46, 92, 0.08);
}

.blog-grid .blog-card:focus {
  outline: none;
  box-shadow: 0 8px 20px rgba(10, 46, 92, 0.06),
    0 0 0 4px rgba(56, 189, 248, 0.08);
  transform: translateY(-4px) scale(1.003);
}

.blog-grid .blog-card-content {
  position: relative;
  background: transparent;
  padding: 20px 22px 18px 22px;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-grid .post-meta {
  color: #6b7280;
  margin-bottom: 8px;
}

.blog-grid .blog-card-content h3 {
  color: #0a2e5c;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
}

/* Category pill and date styles inside blog card meta */
.blog-grid .post-meta .post-category {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  background: #f6f7fa; /* soft neutral pill background */
  color: #475569; /* muted slate text */
  font-weight: 600;
  font-size: 0.875rem;
  margin-right: 10px;
}

.blog-grid .post-meta .post-date {
  display: inline-block;
  color: #6b7280;
  font-size: 0.85rem;
  margin-left: 6px;
}

@media (max-width: 700px) {
  /* on smaller screens, make cards narrower so a second card peeks in,
     and reduce image/padding so cards fit better visually */
  .blog-grid {
    gap: 16px;
    padding: 8px 16px 12px 16px; /* tighter horizontal padding so cards fill more of the viewport */
  }

  .blog-grid .blog-card {
    flex: 0 0 calc(92% - 12px);
    width: calc(92% - 12px);
  }

  .blog-grid .blog-card-image {
    height: 180px; /* slightly shorter images on small screens */
  }

  .blog-grid .blog-card-content {
    padding: 16px;
  }

  .blog-grid .blog-card-content h3 {
    font-size: 1.2rem; /* slightly larger on small screens */
    line-height: 1.2;
  }
  /* Truncate title to one line with ellipsis on small screens */
  .blog-grid .blog-card-content h3,
  .blog-grid .blog-card-content h3 a {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* reduce meta typography on small screens */
  .blog-grid .post-meta .post-category {
    font-size: 0.78rem;
    padding: 5px 8px;
  }
  .blog-grid .post-meta .post-date {
    font-size: 0.8rem;
  }

  /* Make the blog listing page full-bleed on small screens: remove
     horizontal gutters and allow each post card to span the viewport. */
  .page-blog .container,
  .page-blog .blog-grid-wrapper,
  .page-blog .blog-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-blog .blog-card {
    /* add a small horizontal gutter so content doesn't touch viewport edges */
    width: calc(100vw - 24px) !important; /* 12px gutter each side */
    max-width: none !important;
    margin-left: calc(50% - 50vw + 12px) !important;
    margin-right: calc(50% - 50vw + 12px) !important;
    border-radius: 16px !important; /* soft rounded corners */
    background: #ffffff !important; /* ensure card sits above page bg */
    overflow: visible !important; /* let image-wrapper control clipping */
    box-shadow: none !important;
    border: 1px solid rgba(10, 46, 92, 0.06) !important;
    margin-bottom: 18px !important;
  }

  /* keep inner content padded so text doesn't hit edges */
  .page-blog .blog-card-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Ensure image wrapper clips only its top corners so image bottom remains square */
.page-blog .blog-card-image {
  overflow: hidden !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Ensure card images respect the card's rounded corners on small screens */
@media (max-width: 700px) {
  .page-blog .blog-card-image img {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    display: block;
  }
}

/* Force image bottom corners to remain square in all states (hover/focus/active)
   across homepage snippets and blog listing. This overrides any other rules. */
.blog-grid .blog-card-image img,
.blog-grid .blog-card:hover .blog-card-image img,
.page-blog .blog-card-image img,
.page-blog .blog-card:hover .blog-card-image img,
.page-blog .blog-card:active .blog-card-image img,
.blog-grid .blog-card:active .blog-card-image img {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

@media (max-width: 480px) {
  /* Very small phones: make cards fuller width and images shorter */
  .blog-grid {
    gap: 12px;
    padding: 8px 8px;
  }
  .blog-grid .blog-card {
    flex: 0 0 calc(98% - 12px);
    width: calc(98% - 12px);
  }
  .blog-grid .blog-card-image {
    height: 160px;
  }
  .blog-grid .blog-card-content {
    padding: 12px;
  }
  .blog-grid .blog-card-content h3 {
    font-size: 1.02rem; /* slightly larger on very small screens */
  }
  .blog-grid .post-meta .post-category {
    font-size: 0.75rem;
    padding: 4px 7px;
  }
  .blog-grid .post-meta .post-date {
    font-size: 0.76rem;
  }
}

@media (max-width: 640px) {
  /* Show date on its own row with a small calendar icon on mobile */
  .blog-grid .post-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }

  .blog-grid .post-meta .post-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.82rem;
  }

  .blog-grid .post-meta .post-date::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM5 20V9h14v11H5z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
  }
}

/* Welcome section for About page */
.welcome-section {
  padding: 60px 0 30px;
}
.welcome-inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.welcome-media img {
  width: 85%;
  max-width: 520px;
  height: auto;
  border-radius: 18px;
  display: block;
  box-shadow: 0 18px 40px rgba(10, 30, 70, 0.08);
}
.welcome-content h2 {
  font-size: 44px;
  margin: 0 0 12px 0;
  color: var(--primary);
  line-height: 1.05;
}
.welcome-content p {
  color: #4b5563;
  font-size: 1.05rem;
  max-width: 760px;
  margin-bottom: 22px;
}

.welcome-content {
  text-align: left;
  padding: 50px;
}
.welcome-stats {
  display: flex;
  gap: 36px;
  margin-top: 12px;
  align-items: baseline;
}
.welcome-stats .stat {
  text-align: center;
}
.welcome-stats .stat-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}
.welcome-stats .stat-label {
  color: #6b7280;
  margin-top: 6px;
}

@media (max-width: 980px) {
  .welcome-inner {
    gap: 28px;
  }
  .welcome-content h2 {
    font-size: 36px;
  }
  .welcome-stats {
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .welcome-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .welcome-media img {
    max-width: 420px;
  }
  .welcome-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* Ensure welcome content is centered on small/mobile viewports */
@media (max-width: 720px) {
  .welcome-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .welcome-content {
    text-align: center;
  }
}

/* Position the left/right nav buttons centered vertically */
.blog-grid-nav {
  top: 50%;
  transform: translateY(-50%);
  z-index: 40; /* ensure nav sits above cards */
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(10, 46, 92, 0.12);
  background: var(--primary, #0b3b8c);
  color: #fff;
  border-radius: 50%;
  padding: 0;
}
.blog-grid-nav.left {
  left: 12px;
}
.blog-grid-nav.right {
  right: 12px;
}

.blog-grid-nav {
  background: var(--primary, #38bdf8);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  cursor: pointer;
  position: absolute;
}
.page-blog .blog-card .post-meta {
  color: #6b7280;
  margin-bottom: 8px;
}
.page-blog .blog-card-content h3 {
  color: #0a2e5c;
  margin-top: 6px;
  font-size: 1.15rem;
  font-weight: 700;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
}

/* Make blog page cards fill the available content width so each post
   occupies the full body/container width on the blog listing page. */
.page-blog .blog-card {
  max-width: none;
  width: 100%;
  margin: 0 auto 24px auto;
  box-sizing: border-box;
}

/* Give the overall blog listing a gentle horizontal margin on larger
   screens so content doesn't stick to the viewport edge. Mobile
   full-bleed behavior (<=700px) is preserved by the earlier media query. */
.page-blog {
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 700px) {
  .page-blog .blog-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
  }
  /* Reduce side padding and widen blog cards on small screens */
  .blog-grid {
    /* tighter page gutters */
    padding-left: 8px;
    padding-right: 8px;
  }
  .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .page-blog .blog-card {
    /* Make blog cards wider on small screens (4px gutter each side) */
    max-width: calc(100vw - 8px);
    width: calc(100% - 8px);
    margin: 0 auto;
  }
  .page-blog .blog-card-content {
    padding: 8px;
  }

  /* Reduce title & excerpt sizing on small screens for better fit */
  .page-blog .blog-card-content h3 {
    font-size: 0.95rem; /* slightly smaller title for mobile */
    line-height: 1.16;
    margin-bottom: 8px;
  }
  .page-blog .blog-card-content p {
    font-size: 0.82rem; /* slightly smaller excerpt */
    line-height: 1.45;
    margin-bottom: 12px;
    color: #4b5563;
  }
  .page-blog .post-meta {
    font-size: 0.85rem;
  }
}

/* Pagination Styling */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 3rem 0;
  font-size: 1.1rem;
}
.pagination a,
.pagination span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  color: #1976d2;
  text-decoration: none;
  background: #f5f5f5;
  margin: 0 2px;
  transition: background 0.2s, color 0.2s;
}
.pagination a:hover {
  background: #1976d2;
  color: #fff;
}
.pagination .active {
  background: #1976d2;
  color: #fff;
  font-weight: bold;
}
.pagination .disabled {
  color: #bdbdbd;
  pointer-events: none;
  background: #e0e0e0;
}
.blog-card h3 {
  font-size: 1.08rem;
  margin: 0 0 8px 0;
  color: #0a2e5c;
  font-weight: 700;
  text-decoration: none;
}
.blog-card-content {
  padding: 24px;
}
.blog-card-content h3 {
  font-size: 1.1rem;
  margin: 0 0 10px 0;
  color: #0a2e5c;
}
.blog-card-content h3 a {
  text-decoration: none;
}
.blog-card-content p {
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 16px;
}
.read-more {
  color: #0a2e5c;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s;
}
.read-more:hover {
  color: #38bdf8;
}
.post-meta {
  display: flex;
  gap: 12px;
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 8px;
}
.post-category {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f6f7fa;
  color: #475569;
  font-weight: 600;
  font-size: 0.875rem;
}
.post-date {
  color: #6b7280;
}
@media (max-width: 700px) {
  .blog-snippets-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .blog-card-content {
    padding: 16px;
  }
}
/* Footer styles moved to styles/footer.css */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --primary: #0b3b8c; /* navy */
  --primary-600: #082a62; /* darker navy */
  --accent: #38bdf8; /* sky blue */
  --border: #e5e7eb;
  --container: 1000px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

@media (max-width: 980px) {
  body {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 24px;
}

/* Global heading styles: ensure h1/h2 are consistent across pages */
h1,
h2 {
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 16px 0;
}

/* Responsive sizes: h1 larger, h2 secondary */
h1 {
  font-size: clamp(28px, 4.8vw, 56px);
}

h2 {
  font-size: clamp(22px, 3.2vw, 40px);
}

/* Ensure hero headings use the same sizing rule */
.hero h1 {
  font-size: clamp(28px, 4.8vw, 56px);
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(22px, 7.5vw, 36px);
  }
  h2 {
    font-size: clamp(18px, 6.2vw, 28px);
  }
}

/* Responsive container adjustments */
@media (max-width: 1200px) {
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 16px;
  }
}

.section {
  .layer.top h3,
  .layer.top p {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
  padding: 80px 0;
}

/* smaller sections on tablet/mobile */
@media (max-width: 980px) {
  .section {
    padding: 56px 0;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 40px 0;
  }
}

.section h2 {
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 24px;
  color: var(--text);
}

@media (max-width: 980px) {
  .section h2 {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .section h2 {
    font-size: 26px;
  }
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: 150px;
  width: auto;
  display: block;
  .card.brand-outline {
    min-height: 180px;
    border-width: 2.5px;
    border-style: solid;
    border-radius: 18px;
    background: linear-gradient(135deg, #e0f2fe 60%, #f0fdfa 100%);
    box-shadow: 0 4px 24px rgba(56, 189, 248, 0.08),
      0 1.5px 8px rgba(56, 189, 248, 0.06);
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    position: static;
    min-height: 120px;
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    padding: 40px 32px;
    .layer {
      position: static;
      min-height: 0;
      height: auto;
      box-sizing: border-box;
    }
    margin-bottom: 28px;
  }
  .card.brand-outline.outline-blue {
    border-color: #38bdf8;
  }
  .card.brand-outline.outline-navy {
    border-color: #0b3b8c;
  }
  .card.brand-outline.outline-purple {
    border-color: #7c3aed;
  }
  .card.brand-outline.outline-teal {
    border-color: #00b4d8;
  }
  .card.brand-outline.outline-pink {
    border-color: #f472b6;
  }
  .card.brand-outline.outline-yellow {
    border-color: #fde68a;
  }
  .card.brand-outline.outline-green {
    border-color: #34d399;
  }
  margin: 0 auto;
}
.card.brand-outline.bg-blue {
  background: linear-gradient(135deg, #e0f2fe 60%, #f0fdfa 100%);
}
.card.brand-outline.bg-navy {
  background: linear-gradient(135deg, #e0e7ff 60%, #f0fdfa 100%);
}
.card.brand-outline.bg-purple {
  background: linear-gradient(135deg, #ede9fe 60%, #f0fdfa 100%);
}
.card.brand-outline.bg-teal {
  background: linear-gradient(135deg, #ccfbf1 60%, #f0fdfa 100%);
}
.card.brand-outline.bg-pink {
  background: linear-gradient(135deg, #fce7f3 60%, #f0fdfa 100%);
}
.card.brand-outline.bg-yellow {
  background: linear-gradient(135deg, #fef9c3 60%, #f0fdfa 100%);
}
.card.brand-outline.bg-green {
  background: linear-gradient(135deg, #d1fae5 60%, #f0fdfa 100%);
}

/* Ensure brand-outline cards use dark text for good contrast on light gradients */
.card.brand-outline {
  color: var(--text);
}

/* Nav list */
.nav-list {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* Dropdown container */
.nav-list .dropdown {
  position: relative;
}

.nav-list .dropdown > a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-list .dropdown > a::after {
  content: "▾";
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.nav-list .dropdown.mobile-open > a::after {
  transform: rotate(180deg);
}

/* Dropdown menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 8px 0 0 0;
  padding: 8px 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #0a2e5c;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 0;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background: #f3f4f6;
  color: #083057;
  transform: none;
}

/* Remove the animated underline from dropdown links */
.dropdown-menu a::after {
  display: none;
}

.nav-list a {
  text-decoration: none;
  color: #0a2e5c;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  position: relative; /* for animated underline */
  transition: color 200ms ease, transform 160ms ease, background 200ms ease;
}

/* Animated underline */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(11, 59, 140, 0),
    var(--accent) 50%,
    rgba(11, 59, 140, 0)
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease;
  opacity: 0;
}

.nav-list a:hover::after,
.nav-list a:focus::after {
  transform: scaleX(1);
  opacity: 1;
}

/* subtle lift and background on hover */
.nav-list a:hover,
.nav-list a:focus {
  color: #083057; /* slightly darker */
  transform: translateY(-3px);
  background: rgba(11, 59, 140, 0.04);
}

.nav-list .btn-primary {
  color: #f5f5f5;
}

.nav-list a:hover {
  background-color: #fff;
  color: #0a2e5c;
}

/* start/project button styles are defined later with .btn and .btn-primary */

/* Hamburger */
.nav {
  position: relative; /* Add this */
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  align-items: center;
}

.nav-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: #111114;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animate to X properly */
.nav-toggle.active .top {
  transform: rotate(45deg) translate(8px, 8px);
}

.nav-toggle.active .middle {
  opacity: 0;
}

.nav-toggle.active .bottom {
  transform: rotate(-45deg) translate(8px, -8px);
}

/* Mobile nav */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-list {
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    flex-direction: column;
    width: auto;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: none;
    gap: 0;
    z-index: 110;
    padding: 12px 16px;
  }

  .nav-list.show {
    display: flex;
  }

  .nav-list li {
    width: 100%;
    margin: 1px 0;
  }

  .nav-list a {
    display: block;
    padding: 14px 18px;
    border-radius: 10px;
  }

  /* Mobile dropdown styles */
  .nav-list .dropdown {
    position: relative;
  }

  .nav-list .dropdown > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid #0a2e5c;
    margin: 4px 0 4px 20px;
    padding: 4px 0;
    background: #f8f9fa;
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .dropdown.mobile-open .dropdown-menu {
    display: block;
    max-height: 500px;
  }

  .dropdown-menu a {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* Show hamburger on larger small screens (tablet) to improve responsiveness */
@media (max-width: 980px) {
  .nav-toggle {
    display: flex;
  }
  .nav-list {
    top: 56px;
  }
  .nav-list a {
    padding: 12px 14px;
  }
}

/* Hero sizing tweaks for different devices */
@media (min-width: 1200px) {
  .hero {
    padding-top: 180px;
    min-height: 64vh;
  }
}

@media (max-width: 1200px) and (min-width: 769px) {
  .hero {
    padding-top: 140px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 110px;
    padding-bottom: 28px;
    min-height: 40vh;
  }
  /* Increase mobile headline size for better prominence */
  .hero h1 {
    font-size: clamp(40px, 12vw, 84px);
  }
  /* add breathing room between subhead and CTA on mobile */
  .hero-cta {
    margin-top: 18px;
  }
}

/* Brand logos scale and wrap better on small screens */
.brand-logo {
  font-size: 16px;
}
@media (max-width: 768px) {
  .brand-logo {
    font-size: 14px;
    opacity: 0.9;
  }
}

/* Ensure images don't overflow and are centered on small screens */
.branding-image img,
.content-mapping-image img,
.social-media-image img,
.media-image img,
.corporate-image img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Footer stacking and touch targets */
@media (max-width: 980px) {
  .footer-inner {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    align-items: center;
  }
  .footer-links {
    justify-content: center;
  }
}

/* Larger tap targets for mobile */
@media (max-width: 640px) {
  .nav-list a {
    padding: 16px 18px;
    font-size: 16px;
  }
  .btn {
    padding: 12px 18px;
    color: #f5f5f5;
  }
  .btn-lg {
    padding: 16px 22px;
    color: #f5f5f5;
  }
}

/* Hero */
.hero {
  position: relative;
  padding: 160px 0 40px;
  /* Prefer the new hero image when present, fall back to existing bg.jpg */
  background: url("../assets/images/echo-hero.jpg") center/cover no-repeat,
    url("../assets/images/bg.jpg") center/cover no-repeat;
  background-color: #000; /* fallback background color while images load */
}

@media (max-width: 980px) {
  .hero {
    padding: 120px 0 40px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 100px 0 30px;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.721) 0%,
    rgba(0, 0, 0, 0.705) 40%,
    rgba(0, 0, 0, 0.765) 100%
  );
}

.hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.eyebrow {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .eyebrow {
    font-size: 12px;
    margin: 0 0 12px;
  }
}

.hero h1 {
  font-size: clamp(36px, 6.8vw, 96px);
  line-height: 1.03;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f5f5f5;
}

.subhead {
  color: #f3f4f6;
  font-size: 20px;
  max-width: 980px;
  margin: 0 auto 28px;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .subhead {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .subhead {
    font-size: 16px;
    margin: 0 auto 20px;
  }
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* Hero-specific button colors (white + sky blue) */
.hero .btn-primary {
  background: var(--primary-600);
  border-color: #0a2e5c;
  color: #f5f4ee;
}
.hero .btn-primary:hover {
  background: #0ea5e9;
}
.hero .btn-primary {
  /* keep visual style but constrain width on larger screens */
  max-width: 360px;
  width: auto;
  padding: 12px 28px;
}

@media (min-width: 641px) {
  .hero-cta .btn {
    width: auto; /* prevent hero button stretching full width on desktop */
    max-width: 360px;
  }
}
.hero .btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}
.hero .btn-ghost:hover {
  border-color: #ffffff;
}

/* Intro banner just after hero */
.intro-banner {
  background: #0b0b0c;
  color: #ffffff;
}
.intro-banner .eyebrow {
  color: var(--accent);
}
.intro-banner .intro-title {
  color: #d2d2d2;
}
/* Highlighted phrase in intro: color only, no background or extra padding */
.highlight-accent {
  color: var(--accent); /* bright sky blue for strong contrast on black */
  color: #38bdf8; /* fallback bright blue */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Animated multicolor underline for highlight */
.highlight-accent {
  position: relative; /* establish containing block for pseudo */
  display: inline-block;
  transform-origin: right center; /* make growth originate from right edge */
}

.highlight-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px; /* gap from text */
  height: 4px; /* thickness of underline */
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #0b3b8c 0%,
    #38bdf8 25%,
    #00b4d8 50%,
    #7c3aed 75%,
    #0b3b8c 100%
  );
  background-size: 200% 100%;
  transform-origin: right center;
  will-change: background-position;
  /* two concurrent animations: color slide and length pulse */
  animation: slideColors 3.5s linear infinite,
    pulseLength 2.6s ease-in-out infinite;
}

@keyframes slideColors {
  /* animate gradient so it appears to move right-to-left */
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* underline length pulse: scaleX from small to full and back */
@keyframes pulseLength {
  0% {
    transform: scaleX(0.12);
  }
  30% {
    transform: scaleX(0.9);
  }
  60% {
    transform: scaleX(0.6);
  }
  100% {
    transform: scaleX(0.12);
  }
}

/* Make underline thinner on very small screens */
@media (max-width: 480px) {
  .highlight-accent::after {
    bottom: -4px;
    height: 3px;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .highlight-accent::after {
    animation: none;
    background-position: 0% 50%;
  }
}
.intro-banner .container {
  text-align: center;
  max-width: 960px;
}
.intro-banner .about-highlight-inner {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.ah-content {
  text-align: center;
  max-width: 960px;
}
.ah-content p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 20px;
  color: var(--text);
}
.ah-media {
  flex: 1;
}
.intro-title {
  margin: 8px 0 12px;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.05;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* keep prefix and highlighted phrase on same baseline and prevent wrapping */
.intro-title {
  /* stack prefix above highlighted phrase and center everything */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  white-space: normal;
}

/* make just the prefix smaller than the highlighted phrase */
.intro-title .intro-prefix {
  display: inline-block;
  font-weight: 400; /* lighter weight */
  font-size: 0.68em; /* roughly 68% of the intro-title size */
  vertical-align: middle;
  opacity: 0.95;
  margin-right: 6px;
}

/* ensure highlighted phrase keeps the larger size */
.intro-title .highlight-accent {
  font-size: 1em; /* inherit full size of .intro-title */
}

@media (max-width: 640px) {
  .intro-title {
    font-size: clamp(22px, 6.5vw, 32px);
  }
  .intro-title .intro-prefix {
    font-size: 0.68em;
    font-weight: 400;
  }
  /* stack the prefix above the highlighted phrase on mobile for better fit */
  .intro-title {
    display: block;
    text-align: center;
    white-space: normal;
  }
  .intro-title .intro-prefix {
    display: block;
    margin-bottom: 6px;
  }
}
.intro-copy {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 0;
  font-size: 18px;
  line-height: 1.6;
  max-width: 800px;
}

@media (max-width: 640px) {
  .intro-copy {
    font-size: 15px; /* reduced for mobile readability and fit */
    line-height: 1.5;
  }
}
/* Brands section */
.brands-section {
  background: #0b0b0c;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 36px 0;
  position: relative;
  /* fade on left + right only */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.brands-track {
  width: 100%;
  max-width: 1100px;
  gap: 48px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .brands-track-inner {
    animation-duration: 28s;
  }
  .brands-track {
    max-width: 100%;
    padding: 8px 0;
  }
  .brands-logos {
    gap: 24px;
  }
}

.brands-track::before,
.brands-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px; /* adjust fade width */
  pointer-events: none;
  z-index: 5;
}
.brands-track::before {
  left: 0;
  background: linear-gradient(to right, #0b0b0c, rgba(11, 11, 12, 0));
}
.brands-track::after {
  right: 0;
  background: linear-gradient(to left, #0b0b0c, rgba(11, 11, 12, 0));
}

.brands-track-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content; /* fits full content width */
  animation: scrollBrands 20s linear infinite;
}

.brands-text {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 800px;
}

.brands-logos {
  display: flex;
  gap: 48px;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
}

.brand-logo {
  display: inline-block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  padding: 0 6px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.brand-logo:hover {
  opacity: 1;
}

.brands-track-inner:hover {
  animation-play-state: paused;
}

/* Keyframes for scrolling logos */
@keyframes scrollBrands {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* adjust based on clone length */
}

/* Service sections (branding, content-mapping, social, photoshoot, media, corporate)
   have been moved to `styles/services.css` for modularity. */

/* histogram session */
.histogram-section {
  background: #fefefe; /* section bg */
}

.histogram-container {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* align blocks at bottom */
  gap: 30px; /* spacing between bars */
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.histogram-block {
  position: relative;
  flex: 1;
  min-width: 220px; /* prevent being too thin */
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center text */
  align-items: flex-start;
  color: white;
  text-align: center;
  overflow: hidden;
}

/* Different heights + background colors */
.block-3 {
  height: 420px;
  background: #0a2e5c; /* deep navy */
}

.block-2 {
  height: 320px;
  background: #0083d6; /* vibrant blue */
}

.block-1 {
  height: 250px;
  background: #96c1f7; /* light blue */
  color: black; /* better contrast on light bg */
}

/* Decorative image */
.decor {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  pointer-events: none;
}

/* Ensure decorative circle sits behind block content so text isn't obscured */
.histogram-block {
  position: relative; /* establish stacking context */
  overflow: visible; /* allow decorative shape to overflow but keep it behind */
}
.histogram-block .decor {
  z-index: 0;
}
.histogram-block h3,
.histogram-block p {
  position: relative;
  z-index: 1; /* keep textual content above the decorative shape */
}

/* --- Responsive: stack blocks vertically --- */
@media (max-width: 768px) {
  .histogram-container {
    flex-direction: column;
    align-items: center; /* center blocks when stacked */
  }

  /* --- Responsive: stack blocks vertically --- */
  @media (max-width: 768px) {
    .histogram-container {
      flex-direction: column;
      align-items: center;
    }

    .histogram-block {
      width: 70%;
      max-width: 200px;
    }

    /* Allow decorative circle to peek on stacked mobile blocks */
    .histogram-block .decor {
      bottom: -6px;
      right: -8px;
    }

    .histogram-block .decor {
      bottom: 0;
      right: 0;
    }
  }
}

/* Text styling */
.histogram-block h3 {
  font-size: 3rem;
  margin: 0;
}

.histogram-block p {
  margin: 5px 0 0;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .histogram-container {
    display: flex;
    flex-direction: column; /* stacked vertically */
    align-items: flex-end; /* bars grow from right */
    gap: 30px; /* spacing */
    padding: 20px;
  }

  .histogram-block {
    flex: none; /* remove flex shrinking */
    width: 90%; /* right-aligned width varies below */
    height: 150px; /* thick bars */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* increase right padding so text doesn't overlap the decorative circle */
    padding: 0 100px 0 20px; /* top/right/bottom/left */
    text-align: center;
    overflow: visible; /* allow decorative shape to peek outside on mobile */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: white;
  }

  /* Set different widths to reflect “value” */
  .block-3 {
    width: 90%;
    max-width: 400px;
    background: #0a2e5c;
  }
  .block-2 {
    width: 70%;
    max-width: 350px;
    background: #0083d6;
  }
  .block-1 {
    width: 50%;
    max-width: 300px;
    background: #96c1f7;
    color: black;
  }

  /* Text sizing */
  .histogram-block h3 {
    font-size: 1.8rem;
    margin: 0;
  }
  .histogram-block p {
    font-size: 1rem;
    margin: 0;
  }
}

/* hhhhhhhhhhh */

.stacked-columns {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 50px auto;
  max-width: 1500px;
  flex-wrap: wrap;
  flex-direction: row;
}

.stack {
  position: relative;
  width: 220px;
  height: 300px;
  margin-bottom: 40px; /* give vertical breathing room between stacked items */
}

@media (max-width: 980px) {
  .stack {
    width: 200px;
    height: 260px;
  }
  .stacked-columns {
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .stacked-columns {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    /* full viewport width but keep internal 10px gutters; use border-box so
       padding doesn't cause overflow */
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px 10px 10px; /* 10px side padding as requested */
    margin: 0; /* full-bleed row on mobile */
  }
  .stack {
    position: relative;

    max-width: none; /* fill the `.stacked-columns` width */
    min-width: 0;
    height: 500px; /* increased height for each card */
    margin-bottom: 48px; /* reduced vertical spacing between stacks on mobile */
    box-sizing: border-box;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .layer {
    position: absolute;
    width: 100%;
    height: 250px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
  .layer.top {
    z-index: 3;
    padding: 16px 14px; /* comfortable padding */
    min-width: 0;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center on mobile */
    align-items: flex-start;

    background-clip: padding-box;
    top: 0; /* ensure top layer sits at top of stack */
    left: 0;
  }
  .layer.top h3 {
    font-size: 17px;
  }
  .layer.top p {
    font-size: 15px;
    margin-bottom: 12px;
  }

  /* Reduce the visual offset of the middle & bottom layers on mobile so the
     overall stack doesn't extend too far horizontally. These override the
     larger desktop offsets defined below. Kept small so the peek is subtle. */
  .stack .layer.middle {
    top: 8px;
    left: 6px;
  }
  .stack .layer.bottom {
    top: 16px;
    left: 12px;
  }
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.process-header h2 {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  margin: 48px 0;
  color: #0a2e5c;
}

/* ----------------------
   Stack 1 (Branding)
   ---------------------- */
.stack:nth-child(1) .layer.top {
  background: #0a2e5c; /* dark navy */
  color: #fff;
}
/* --------------------------------------------------------------------------
   Overrides: Ensure blog listing cards display as boxed cards on the blog page
   This intentionally lives at the end of main.css to take precedence over
   previous rules that added stronger shadows or changed radius on mobile.
   -------------------------------------------------------------------------- */
.page-blog .blog-card {
  border: 1px solid rgba(10, 46, 92, 0.06) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background: #ffffff !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px 0 !important;
}
.page-blog .blog-card-image,
.page-blog .blog-card-image img {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  display: block !important;
}
@media (max-width: 1024px) {
  .page-blog .blog-card {
    border-radius: 16px !important;
    box-shadow: none !important;
  }
  .page-blog .blog-card-image img {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }
}
.stack:nth-child(1) .layer.middle {
  background: #0083d6; /* cyan blue */
  top: 12px;
  left: 12px;
}
.stack:nth-child(1) .layer.bottom {
  background: #96c1f7; /* light blue */
  top: 24px;
  left: 24px;
}

/* ----------------------
   Stack 2 (Strategy)
   ---------------------- */
.stack:nth-child(2) .layer.top {
  background: #0083d6; /* cyan blue */
  color: #fff;
}
.stack:nth-child(2) .layer.middle {
  background: #96c1f7; /* light blue */
  top: 12px;
  left: 12px;
}
.stack:nth-child(2) .layer.bottom {
  background: #0a2e5c; /* dark navy */
  top: 24px;
  left: 24px;
}

/* ----------------------
   Stack 3 (Design)
   ---------------------- */
.stack:nth-child(3) .layer.top {
  background: #96c1f7; /* light blue */
  color: #000; /* better readability on light background */
}
.stack:nth-child(3) .layer.middle {
  background: #0a2e5c; /* dark navy */
  top: 12px;
  left: 12px;
}
.stack:nth-child(3) .layer.bottom {
  background: #0083d6; /* cyan blue */
  top: 24px;
  left: 24px;
}

/* ----------------------
   Stack 4 (Design)
   ---------------------- */
.stack:nth-child(4) .layer.top {
  background: #eaf6ff; /* light blue */
  color: #000; /* better readability on light background */
}
.stack:nth-child(4) .layer.middle {
  background: #0a2e5c; /* dark navy */
  top: 12px;
  left: 12px;
}
.stack:nth-child(4) .layer.bottom {
  background: #0083d6; /* cyan blue */
  top: 24px;
  left: 24px;
}

/* ----------------------
   Text styling
   ---------------------- */
.layer.top {
  z-index: 3;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3px; /* space between step, heading, and paragraph */
  text-align: left;
}

.step {
  background: #f5f4ee; /* gold color */
  color: #0a2e5c;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.layer.top h3 {
  font-size: 20px;
  font-weight: 700;
}

.layer.top p {
  font-size: 14px;
  line-height: 1.5;
}

/* remove extra default spacing between heading and paragraph in stack layers */
.layer.top h3,
.layer.top p {
  margin: 5px;
}

/*why choose echo */

.why-choose-echo {
  max-width: 1000px;
  margin: 150px auto 100px;
  padding: 0 20px;
  text-align: center; /* centers the heading */
}

.why-choose-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: #0a2e5c;
  margin: 48px;
}

/* Grid layout for points */
.points-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* force 2 columns on desktop */
  gap: 30px;
  justify-items: center; /* center the cards horizontally */
}

.points-list li {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  border-radius: 12px;
  background-color: #f5f9ff; /* subtle card background */
  text-align: left; /* content inside each card left-aligned */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.point-title {
  font-size: 20px;
  font-weight: 700;
  color: #0a2e5c;
  margin-bottom: 10px;
}

.points-list p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Responsive: stack points on small screens */
@media (max-width: 900px) {
  .points-list {
    grid-template-columns: 1fr; /* single column for smaller screens */
  }
}

@media (max-width: 640px) {
  .stack {
    transform-origin: top center;
    transform: scale(0.84); /* tune between 0.90 - 0.98 as needed */
    /* ensure transforms don't cause blurry text on some devices */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: transform;
    height: 520px;
  }
  /* Mobile: allow stack layers to grow with content */
  .stack {
    box-sizing: border-box;
    padding: 0 10px; /* optional container side padding */
  }

  /* Replace fixed height with auto + sensible min-height */
  .stack .layer {
    width: 100%;
    height: auto; /* allow content-driven height */
    min-height: 200px; /* fallback/visual baseline — tune as needed */
    border-radius: 12px;
    box-sizing: border-box; /* include padding in height calculation */
    padding: 18px; /* comfortable internal spacing */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: visible; /* ensure decorative shapes/shadows aren't clipped */
  }

  /* Top layer: keep vertical layout and spacing, allow content to grow */
  .stack .layer.top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* or center if you want vertical centering */
    gap: 8px;
    padding: 20px; /* more breathing room for text */
    min-height: 220px; /* ensure a baseline card size */
  }

  /* Middle/bottom layers: keep their small visual offset but don't fix their height */
  .stack .layer.middle {
    top: 8px; /* smaller peek on mobile */
    left: 6px;
    min-height: 230px;
  }

  .stack .layer.bottom {
    top: 16px;
    left: 12px;
    min-height: 240px;
  }

  /* Optional: reduce h3/p margin inside layers to avoid pushing height unnecessarily */
  .stack .layer.top h3,
  .stack .layer.top p {
    margin: 6px 0;
  }
  .why-choose-echo {
    margin: 80px auto 60px;
  }
  .points-list li {
    padding: 16px;
  }
}

/* About highlight (two-column with media and badges) */
.about-highlight-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.ah-content h2 {
  margin: 0 0 12px;
  font-size: 36px;
}
.ah-content p {
  color: var(--text);
}
.ah-media {
  position: relative;
}
.ah-art img {
  border-radius: 16px;
  width: 100%;
  display: block;
}
.stat-badges {
  position: absolute;
  left: 8%;
  bottom: -20px;
  display: flex;
  gap: 12px;
}
.badge {
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.badge strong {
  font-size: 18px;
}
.badge span {
  font-size: 12px;
  color: #111827;
  opacity: 0.8;
}
.badge--sky {
  background: rgba(56, 189, 248, 0.9);
  color: #0b0b0c;
}
.badge--pink {
  background: #ec4899;
  color: #ffffff;
}
.badge--slate {
  background: #e5e7eb;
  color: #0b0b0c;
}

@media (max-width: 980px) {
  .about-highlight-inner {
    flex-direction: column;
    gap: 32px;
  }
  .stat-badges {
    position: static;
    margin-top: 12px;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: #111827;
  text-decoration: none;
  background: #ffffff;
  transition: transform 120ms ease, background 120ms ease;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .btn {
    padding: 12px 20px;
    font-size: 16px;
    min-height: 44px; /* Touch-friendly size */
  }
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary-600);
  color: #f5f5f5; /* slightly off-white as requested */
}

.btn-primary:hover {
  background: var(--primary-600);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
}

.btn-lg {
  padding: 14px 20px;
  font-weight: 600;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.card {
  border: 1px solid var(--border);
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  color: var(--muted);
}

/* Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* Carousel styles for testimonials */
.testimonials-carousel {
  position: relative;
  margin-top: 24px;
}
.testimonials-viewport {
  width: 100%;
  overflow: hidden;
}
.testimonials-track {
  display: flex;
  /* tighten gap so the next card peeks more noticeably */
  gap: 18px;
  transition: transform 360ms cubic-bezier(0.22, 0.9, 0.3, 1);
  will-change: transform;
  align-items: stretch;
}
.testimonials-carousel .testimonial-card {
  /* Desktop: increase width so content breathes on large screens */
  flex: 0 0 360px;
  width: 360px;
}

/* Testimonials show full text by default (no visual clamping) */
.testimonials-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 30;
}
.testimonials-nav.prev {
  left: 8px;
}
.testimonials-nav.next {
  right: 8px;
}
.testimonials-nav:disabled {
  opacity: 0.5;
  cursor: default;
}
.testimonials-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.testimonials-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
}
.testimonials-dots button.active {
  background: var(--primary);
}

@media (max-width: 980px) {
  .testimonials-carousel .testimonial-card {
    /* Tablet: moderate width */
    flex: 0 0 280px;
    width: 280px;
  }
}
@media (max-width: 640px) {
  .testimonials-carousel .testimonial-card {
    /* Mobile: reduce width so a snippet of the next card is visible */
    flex: 0 0 82%;
    width: 82%;
  }
  /* Enable smaller nav buttons on mobile so users can tap to scroll */
  .testimonials-nav {
    display: flex;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    top: 48%; /* slight vertical adjustment for mobile */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }
  /* On small screens, show an even shorter testimonial snippet */
  /* No clamping on mobile — show full testimonial text */
}

@media (max-width: 980px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .video-grid {
    gap: 16px;
  }
}

.video-card {
  display: block;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  background: #000;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
  opacity: 0.8;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.video-card:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
  padding: 20px;
}

.video-info h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0a2e5c;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.video-info p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .video-info {
    padding: 16px;
  }

  .video-info h3 {
    font-size: 16px;
  }

  .video-info p {
    font-size: 13px;
  }
}

/* Photography & Portfolio styles moved to styles/portfolio.css */

/* Service section contrast fixes */
/* Dark-themed service sections: ensure readable white text */
.branding-section,
.content-mapping-section,
.photoshoot-section,
.social-media-section {
  color: #ffffff;
}
.branding-section .branding-content,
.content-mapping-section .content-mapping-content,
.photoshoot-section .photoshoot-content,
.social-media-section .social-media-content {
  color: #ffffff;
}
.branding-section h1,
.content-mapping-section h1,
.photoshoot-section h1,
.social-media-section h1,
.branding-section h2,
.content-mapping-section h2,
.photoshoot-section h2,
.social-media-section h2 {
  color: #ffffff;
}

/* Light-themed service sections: use dark text for contrast */
.media-section,
.corporate-section {
  color: var(--text);
}
.media-section .media-content,
.corporate-section .corporate-content {
  color: var(--text);
}

/* Buttons on dark section: ensure visible (light button) */
.branding-section .btn-primary,
.content-mapping-section .btn-primary,
.photoshoot-section .btn-primary,
.social-media-section .btn-primary {
  background: #ffffff;
  color: var(--primary-600);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Steps */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

@media (max-width: 980px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.steps li {
  border: 1px solid var(--border);
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  position: relative;
}

.steps li h3 {
  margin: 0 0 8px;
  padding-left: 36px;
}

.steps li h3::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* Testimonials */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

blockquote {
  margin: 0;
  border: 1px solid var(--border);
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
}

blockquote p {
  margin: 0 0 8px;
  font-size: 18px;
}

blockquote cite {
  color: var(--muted);
  font-style: normal;
}

/* About */
.about-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}

.stats {
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
  color: var(--muted);
}

.stats strong {
  color: var(--text);
}

.about-media img {
  border-radius: 14px;
  border: 1px solid var(--border);
}

/* Testimonials Section */
.testimonials-section {
  background: #f8f9fa;
  padding: 80px 0;
}

.testimonials-section .section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 48px;
  color: #0a2e5c;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .testimonials-section {
    padding: 56px 0;
  }

  .testimonials-section .section-title {
    font-size: 28px;
    margin-bottom: 32px;
  }
}

.testimonial-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.star-rating {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.star {
  font-size: 20px;
  color: #d1d5db;
}

.star.filled {
  color: #fbbf24;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
  flex: 1;
  font-style: italic;
}

.testimonial-author {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.author-name {
  font-size: 16px;
  font-weight: 700;
  color: #0a2e5c;
  margin: 0 0 4px 0;
}

.author-industry {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

@media (max-width: 640px) {
  .testimonial-card {
    padding: 20px;
  }

  .testimonial-text {
    font-size: 15px;
  }

  .author-name {
    font-size: 15px;
  }

  .author-industry {
    font-size: 13px;
  }
}

/* Ensure service page images center on mobile (override per-page side margins) */
@media (max-width: 768px) {
  .branding-image img,
  .content-mapping-image img,
  .photoshoot-image img,
  .social-media-image img,
  .media-image img,
  .corporate-image img {
    margin: 0 auto !important;
    display: block;
    max-width: 340px; /* keep them visually balanced on small screens */
    width: 100%;
  }
}

/* CTA */

.cta-inner {
  text-align: center;
  background: linear-gradient(135deg, #e0f2fe 60%, #f0fdfa 100%);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.1),
    0 1.5px 8px rgba(56, 189, 248, 0.06);
  padding: 32px 24px 28px 24px;
  margin: 32px auto 8px auto;
  max-width: 440px;
  position: relative;
  overflow: hidden;
}

.cta-inner h2 {
  margin: 0 0 16px;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0a2e5c;
  letter-spacing: -0.5px;
  line-height: 1.18;
}

.cta-inner p {
  margin: 0 0 28px;
  color: #696a6b;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.cta-inner .btn-primary {
  font-size: 1.18rem;
  padding: 16px 36px;
  border-radius: 12px;
  background: #0a2e5c;
  color: #fff;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.13);
  border: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cta-inner .btn-primary:hover {
  background: #083057;
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.18);
  transform: translateY(-2px) scale(1.03);
}

@media (max-width: 700px) {
  .cta-inner {
    padding: 32px 8vw 32px 8vw;
    max-width: 98vw;
    margin: 24px 1vw 0px 0vw;
  }
  .cta-inner h2 {
    font-size: 1.4rem;
  }
  .cta-inner p {
    font-size: 0.92rem; /* slightly smaller on mobile for better fit */
  }
  .cta-inner .btn-primary {
    font-size: 1rem;
    padding: 13px 18px;
  }
}

/* Ensure CTA subsection headings on service pages are navy and match section h2 sizing */
.branding-section + .cta .cta-inner h2,
.content-mapping-section + .cta .cta-inner h2,
.photoshoot-section + .cta .cta-inner h2,
.social-media-section + .cta .cta-inner h2,
.media-section + .cta .cta-inner h2,
.corporate-section + .cta .cta-inner h2 {
  color: var(--primary);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 24px;
  font-size: 40px; /* match .section h2 */
}

@media (max-width: 980px) {
  .branding-section + .cta .cta-inner h2,
  .content-mapping-section + .cta .cta-inner h2,
  .photoshoot-section + .cta .cta-inner h2,
  .social-media-section + .cta .cta-inner h2,
  .media-section + .cta .cta-inner h2,
  .corporate-section + .cta .cta-inner h2 {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .branding-section + .cta .cta-inner h2,
  .content-mapping-section + .cta .cta-inner h2,
  .photoshoot-section + .cta .cta-inner h2,
  .social-media-section + .cta .cta-inner h2,
  .media-section + .cta .cta-inner h2,
  .corporate-section + .cta .cta-inner h2 {
    font-size: 26px;
  }
}

/* Contact */
.contact-form {
  display: grid;
  gap: 12px;
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  background: #ffffff;
}

/* Make footer full-bleed and dark on the blog listing page */
.page-blog .site-footer {
  background: #000000 !important;
  color: #ffffff !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-top: none !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.page-blog .site-footer .footer-inner {
  color: #ffffff !important;
}
.page-blog .site-footer a,
.page-blog .site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.9) !important;
}
.page-blog .site-footer .footer-links a:hover {
  color: #ffffff !important;
}

/* Reduce footer typography slightly on small screens for better fit */
@media (max-width: 640px) {
  .site-footer {
    font-size: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .site-footer .footer-inner {
    font-size: 14px;
  }
  .site-footer .footer-links a,
  .site-footer .footer-socials a {
    font-size: 13px;
    padding: 8px 10px;
  }
  .site-footer .footer-socials a img {
    width: 20px;
    height: 20px;
  }
}

.footer-inner {
  display: flex;
  flex-direction: column; /* socials on top, copyright below */
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* FAQ section styling */
.faq-section {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(245, 249, 255, 0.6)
  );
  padding: 64px 0;
}
.faq-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}
.faq-list {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}
.faq-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(10, 20, 50, 0.06);
  border: 1px solid rgba(11, 59, 140, 0.04);
}
.faq-question {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-answer {
  margin-top: 10px;
  color: #374151;
  line-height: 1.6;
}
.faq-item[open] .faq-question {
  color: var(--primary);
}

/* Ensure summary caret is visible and consistent */
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::after {
  content: "\25be";
  float: right;
  transition: transform 200ms ease;
}
.faq-item[open] .faq-question::after {
  transform: rotate(-180deg);
}

/* FAQ heading: inherit global heading styles, only center and space */
.faq-section .faq-inner h2,
.faq-section h2 {
  text-align: center;
  margin: 0 0 24px;
  color: var(--primary-600);
  font-size: 32px;
}

.faq-section p {
  text-align: center;
  color: var(--muted);
  margin: 0 0 32px;
}

@media (max-width: 640px) {
  .faq-section {
    padding: 40px 0;
  }
  .faq-item {
    padding: 14px;
  }
}

.footer-links {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

/* Footer social icons (use PNG/SVG image assets) */
.footer-socials {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: transparent;
  transition: transform 160ms ease, background 160ms ease;
}
.footer-socials a img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
.footer-socials a img[alt="Twitter"],
.footer-socials a img[alt="X"] {
  /* some twitter/x pngs are slightly smaller in the source; scale to fit */
  width: 38px;
  height: 38px;
  transform: none;
}
.footer-socials a:hover {
  transform: translateY(-4px);
}

/* Ensure footer social block sits above copyright and is centered on larger viewports */
@media (min-width: 981px) {
  .footer-inner {
    text-align: center;
  }
  .footer-socials {
    order: -1;
  }
  .footer-inner p.copyright {
    margin: 0;
  }
}

.footer-links a:hover {
  color: #111827;
}

/* Fancy Title */
.fancy-title {
  font-size: 2.2rem;
  color: #0a2e5c;
  font-weight: 800;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.fancy-title::after {
  content: "";
  display: block;
  width: 60%;
  height: 4px;
  margin: 0 auto;
  background: linear-gradient(90deg, #38bdf8 0%, #0ea5e9 100%);
}

/* --- About page responsive tweaks --- */
/* Improve header/logo sizing and stack about layout on small screens */
@media (max-width: 980px) {
  .header-inner {
    height: 56px;
    padding: 0 16px;
  }
  .logo img {
    height: 48px; /* cap logo height on tablet */
    width: auto;
    max-width: 180px;
  }
  /* make welcome content fit better */
  .welcome-content h2 {
    font-size: 38px;
  }
  .welcome-stats .stat-number {
    font-size: 22px;
  }
  .about-inner {
    grid-template-columns: 1fr; /* stack media + content */
    gap: 20px;
  }
  .about-media,
  .welcome-media {
    margin: 0 auto;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 56px;
    padding: 0 12px;
  }
  .logo img {
    height: 40px; /* mobile logo */
    max-width: 140px;
  }
  .welcome-inner {
    flex-direction: column;
    gap: 18px;
    align-items: center;
    text-align: center;
  }
  .welcome-media img {
    max-width: 50%;
    height: auto;
    border-radius: 12px;
    margin: 0 auto;
  }
  .welcome-content h2 {
    font-size: 32px;
  }
  .welcome-content p {
    font-size: 15px;
    max-width: 100%;
  }
  .welcome-stats {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .welcome-stats .stat-number {
    font-size: 20px;
  }
  .stacked-columns {
    margin: 24px 0;
    gap: 24px;
  }
  .stack {
    width: 100%;
    max-width: 520px;
    height: auto;
    min-height: 180px;
  }
  .layer.top h3 {
    font-size: 18px;
  }
  .points-list li {
    padding: 12px;
  }
  .about-highlight-inner {
    flex-direction: column;
    gap: 20px;
  }
  .stat-badges {
    position: static;
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
  }
}

/* Service sections (copied from per-page service styles) */
/* Branding */
.branding-section {
  background-color: #0a2e5c;
  padding: 60px 20px;
}

.branding-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 100px;
}

.branding-image img {
  border-radius: 24px;
  width: 100%;
  max-width: 350px;
  display: block;
  margin: 0 50px;
}

.branding-content {
  max-width: 500px;
}

.branding-content h2,
.branding-content .fancy-title {
  font-size: 2.5rem;
  margin-bottom: 16px;
  font-weight: 700;
  color: #f5f5f5;
}

.branding-content p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #f3f7fb;
}

/* Content Mapping */
.content-mapping-section {
  background-color: #1e5aa8;
  padding: 60px 20px;
}

.content-mapping-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 60px;
}

.content-mapping-image img,
.photoshoot-image img,
.social-media-image img,
.media-image img,
.corporate-image img {
  border-radius: 24px;
  width: 100%;
  max-width: 350px;
  display: block;
  margin: 0 50px;
}

.content-mapping-content {
  max-width: 500px;
}

.content-mapping-content h2 {
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 16px;
  font-weight: 700;
  color: #f5f5f5;
}

.content-mapping-content p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #f3f7fb;
}

/* Photoshoot */
.photoshoot-section {
  background-color: #0083d6;
  padding: 60px 20px;
}

.photoshoot-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

.photoshoot-content {
  max-width: 500px;
}

.photoshoot-content h2 {
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 16px;
  font-weight: 700;
  color: #f5f5f5;
}

.photoshoot-content p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #f3f7fb;
}

/* Social Media */
.social-media-section {
  background-color: #4da6f0;
  padding: 60px 20px;
}

.social-media-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 60px;
}

.social-media-content {
  max-width: 500px;
}

.social-media-content h2 {
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 16px;
  font-weight: 700;
  color: #1b1b1b;
}

.social-media-content p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #262626;
}

/* Media Features */
.media-section {
  background-color: #96c1f7;
  padding: 60px 20px;
}

.media-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

.media-content {
  max-width: 500px;
}

.media-content h2 {
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 16px;
  font-weight: 700;
  color: #0e0e0e;
}

.media-content p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #262626;
}

/* Corporate Events */
.corporate-section {
  background-color: #eaf6ff;
  padding: 60px 20px;
}

.corporate-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 60px;
}

.corporate-content {
  max-width: 500px;
}

.corporate-content h2 {
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 16px;
  font-weight: 700;
  color: #1b1b1b;
}

.corporate-content p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #262626;
}

@media (max-width: 980px) {
  .branding-container,
  .content-mapping-container,
  .photoshoot-container,
  .social-media-container,
  .media-container,
  .corporate-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .branding-container,
  .content-mapping-container,
  .photoshoot-container,
  .social-media-container,
  .media-container,
  .corporate-container {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 0 12px;
  }
}

/* Mobile-specific tweaks for service sections: smaller text, smaller images, black CTAs */
@media (max-width: 640px) {
  .branding-content h2,
  .content-mapping-content h2,
  .photoshoot-content h2,
  .social-media-content h2,
  .media-content h2,
  .corporate-content h2 {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .branding-content p,
  .content-mapping-content p,
  .photoshoot-content p,
  .social-media-content p,
  .media-content p,
  .corporate-content p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  /* Truncate service section paragraphs to 4 lines on mobile with ellipsis */
  .branding-content p,
  .content-mapping-content p,
  .photoshoot-content p,
  .social-media-content p,
  .media-content p,
  .corporate-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4; /* limit to 4 lines */
    line-clamp: 4; /* standard property for compatibility */
    max-height: calc(1.55em * 4); /* fallback for non-webkit browsers */
  }

  .branding-image img,
  .content-mapping-image img,
  .photoshoot-image img,
  .social-media-image img,
  .media-image img,
  .corporate-image img {
    max-width: 220px;
    margin: 0 auto 12px;
    display: block;
  }

  /* Make homepage service CTAs black on mobile for prominence */
  .branding-content .btn,
  .content-mapping-content .btn,
  .photoshoot-content .btn,
  .social-media-content .btn,
  .media-content .btn,
  .corporate-content .btn {
    background: #000 !important;
    color: #fff !important;
    border-color: transparent !important;
  }

  /* Reduce width of service "Learn More" buttons on mobile and center them
     (override the general full-width mobile button rule) */
  .branding-content .btn,
  .content-mapping-content .btn,
  .photoshoot-content .btn,
  .social-media-content .btn,
  .media-content .btn,
  .corporate-content .btn {
    width: auto !important;
    max-width: 280px !important; /* limit visual width */
    display: inline-flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 18px !important; /* keep touch-friendly size */
    box-sizing: border-box !important;
  }
}

/* Consolidated mobile UX improvements: touch targets, spacing, focus, and layout */
@media (max-width: 640px) {
  /* Slightly reduce container side padding for smaller devices */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Make primary buttons larger and full-width for easier tapping */
  .btn,
  .btn-primary,
  .btn-lg {
    width: 100%;
    max-width: 520px;
    display: block;
    box-sizing: border-box;
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;
    border-radius: 12px;
  }

  /* Keep CTA in the main call-to-action block smaller and centered */
  .cta .btn,
  .cta .btn-primary,
  .cta .btn-lg {
    width: auto;
    max-width: 260px;
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 18px;
  }

  /* Nav list: make items full width and increase tap area */
  .nav-list.show {
    padding: 8px 12px;
  }
  .nav-list.show a {
    width: 100%;
    display: block;
    padding: 14px 16px;
    border-radius: 10px;
  }

  /* Hero adjustments for small screens */
  .hero {
    padding-top: 80px;
    padding-bottom: 20px;
  }
  .hero h1 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.05;
  }

  /* Ensure stacked columns collapse cleanly with breathing room */
  .stacked-columns {
    gap: 28px;
    margin: 20px 0;
    padding: 16px 0;
  }
  .stack {
    padding: 14px 12px;
    min-height: 160px;
  }

  /* Blog grid: ensure cards span width with comfortable side padding */
  .blog-grid-wrapper,
  .blog-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
  .blog-grid .blog-card {
    flex: 0 0 calc(96% - 12px);
    width: calc(96% - 12px);
    margin: 0 6px;
  }

  /* Testimonials: keep peek but increase nav tappable area */
  .testimonials-track {
    gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .testimonials-nav {
    width: 40px;
    height: 40px;
  }

  /* Images and media should be flexible and centered */
  .branding-image img,
  .content-mapping-image img,
  .photoshoot-image img,
  .social-media-image img,
  .media-image img,
  .corporate-image img,
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Improve keyboard focus visibility for accessibility */
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible {
    outline: 3px solid rgba(11, 59, 140, 0.16);
    outline-offset: 3px;
  }

  /* Reduce text sizes slightly for long paragraphs on tiny screens */
  p {
    font-size: 15px;
  }
}