/* ===== GLOBAL LAYOUT OVERRIDES ===== */
/* Match main content padding to carousel on large screens */

/* ===== SCROLL OFFSET FOR FIXED NAVBAR ===== */
/* Offset anchor scroll positions so content isn't hidden behind sticky navbar */
html {
  scroll-padding-top: 200px;
}

/* ===== HEADER TITLE COLOR ===== */
/* Ensure header title is white immediately on page load (prevents flash of dark purple) */
.header-title {
  color: #fff !important;
}

/* ===== NAVBAR OVERRIDES ===== */
/* Hide "Get a Quote" button in navbar */
.btn.btn-white.navbar-btn {
  display: none !important;
}

/* Less rounded hamburger button */
.hb-btn.btn-outline {
  border-radius: 6px !important;
}

/* Less rounded "See How" button on splash */
.btn.btn-outline-theme.btn-header {
  border-radius: 6px !important;
}

/* ===== HEADER SCROLL ANIMATION ===== */
/* Override Webflow's scroll animation - we control this via JS */
.header-container .header-title {
  transition: none !important;
}

:root {
  /* Match carousel base padding exactly */
  --content-side-padding: max(6vw, calc((100vw - 1400px) / 2 + 40px));
}

/* ===== HEADER SECTION ===== */
.container-outer.header-container {
  max-width: none;
  padding-left: var(--content-side-padding);
  padding-right: var(--content-side-padding);
}

/* ===== WHAT-WE-DO SECTION ===== */
/* Reduce top padding to decrease space from section above */
.what-we-do {
  padding-top: 40px;
}

/* Remove all nested padding/max-width to allow section-level control */
#what-we-do .container-wrapper {
  padding-left: var(--content-side-padding);
  padding-right: var(--content-side-padding);
}

#what-we-do .container-inner {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

#what-we-do .wwd-title {
  max-width: none;
}

/* Remove negative margins and max-width from accordion */
#what-we-do .accordian,
#what-we-do .accordian.accordian-flat,
#what-we-do .wwd-accordian {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* 1800px+ - Use max-width container pattern like case studies */
@media (min-width: 1800px) {
  #what-we-do .container-wrapper {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(3vw + 5vw);
    padding-right: calc(3vw + 5vw);
  }
}

@media (min-width: 1600px) {
  :root {
    --content-side-padding: max(11vw, 250px);
  }

  .container-outer.top-bar {
    padding-left: var(--content-side-padding);
    padding-right: var(--content-side-padding);
  }

  .header-title {
    font-size: 78px;
    line-height: 94px;
  }

  /* Scale up typography on large screens */
  body {
    font-size: 17px;
  }

  .section-subhead-lg {
    font-size: 70px;
    line-height: 84px;
  }

  .h1-st {
    font-size: 36px;
  }

  .h2-lg {
    font-size: 40px;
  }

  .p-lg {
    font-size: 26px;
    line-height: 35px;
  }

  h1 {
    font-size: 42px;
    line-height: 50px;
  }

  h2 {
    font-size: 28px;
  }
}

@media (min-width: 2000px) {
  :root {
    --content-side-padding: max(10vw, 350px);
  }

  .header-title {
    font-size: 86px;
    line-height: 103px;
  }

  body {
    font-size: 18px;
  }

  .section-subhead-lg {
    font-size: 76px;
    line-height: 90px;
  }

  .h1-st {
    font-size: 40px;
  }

  .h2-lg {
    font-size: 44px;
  }

  .p-lg {
    font-size: 28px;
    line-height: 38px;
  }

  h1 {
    font-size: 46px;
    line-height: 54px;
  }

  h2 {
    font-size: 30px;
  }
}

/* ===== CLIENTS SECTION ===== */
/* Restyle clients section to match carousel padding with tighter grid */
.clients-section {
  padding: 30px 0 80px !important;
  margin-top: 0 !important;
  padding-left: var(--content-side-padding) !important;
  padding-right: var(--content-side-padding) !important;
}

/* 1800px+ - Use max-width container pattern like case studies */
/* Content sections get more padding (8vw = 3vw + 5vw) than the hero (3vw) */
/* This makes the intro-tagline hero image appear further left */
@media (min-width: 1800px) {
  .clients-section {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: calc(3vw + 5vw) !important;
    padding-right: calc(3vw + 5vw) !important;
  }
}

.clients-section .div-block,
.clients-section .div-block-2 {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

/* Universal section header font-weight - MUST be same for both "Our AI Solutions" and "Our Partners and Clients" */
/* Note: Poppins only supports weights 300, 400, 500, 600, 700, 800 - using 300 to match Insights title */
h2.h1-st.work-title {
  font-weight: 300 !important;
}

/* New clean clients section title - matches intro tagline style */
.clients-section-title {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--theme, #32013a);
  margin: 0 0 60px 0;
  padding: 0;
  text-align: center;
}

/* Responsive scaling for clients section title */
@media (min-width: 1200px) {
  .clients-section-title {
    font-size: 28px;
  }
}

@media (min-width: 1400px) {
  .clients-section-title {
    font-size: 30px;
  }
}

@media (min-width: 1600px) {
  .clients-section-title {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .clients-section-title {
    font-size: 22px;
    margin-bottom: 45px;
  }
}


@media (max-width: 479px) {
  .clients-section-title {
    font-size: 19px;
    margin-bottom: 35px;
  }
}

.clients-section .client-logo-container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

.clients-section .clients-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  row-gap: 64px !important;
  column-gap: 40px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.clients-section .clients-wrapper .w-inline-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS Custom Properties for animatable filter values */
@property --logo-grayscale {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

@property --logo-contrast {
  syntax: '<number>';
  initial-value: 2;
  inherits: false;
}

@property --logo-brightness {
  syntax: '<number>';
  initial-value: 0.6;
  inherits: false;
}

@property --logo-saturate {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

.clients-section .clients-image {
  height: 63px !important;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Monochrome with preserved whites - high contrast pushes lights to white, darks to black */
  --logo-grayscale: 100%;
  --logo-contrast: 2;
  --logo-brightness: 0.6;
  --logo-saturate: 100%;
  filter: grayscale(var(--logo-grayscale)) contrast(var(--logo-contrast)) brightness(var(--logo-brightness)) saturate(var(--logo-saturate));
  opacity: 0.85;
  transition: --logo-grayscale 0.45s ease-in-out, --logo-contrast 0.45s ease-in-out, --logo-brightness 0.45s ease-in-out, --logo-saturate 0.45s ease-in-out, opacity 0.45s ease-in-out;
}

.clients-section .clients-image:hover {
  /* Fade back to muted original colors */
  --logo-grayscale: 15%;
  --logo-contrast: 1;
  --logo-brightness: 0.95;
  --logo-saturate: 80%;
  opacity: 1;
}

/* Aspect-ratio-based logo sizing for visual balance */
/* Very wide landscape logos (ratio > 2.5:1) - smallest height */
.clients-section .clients-image.logo--landscape {
  height: 41px !important;
}

/* Wide logos (ratio 2.0 to 2.5) - reduced height */
.clients-section .clients-image.logo--wide {
  height: 48px !important;
}

/* Square/portrait logos (ratio < 1.8:1) - increased height */
.clients-section .clients-image.logo--square {
  height: 78px !important;
}

/* Cairngorms National Park - specific override */
.clients-section .clients-image.logo--cairngorms {
  height: 109px !important;
}

@media (max-width: 1200px) {
  .clients-section .clients-wrapper {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 52px;
    column-gap: 32px;
  }

  .clients-section .clients-wrapper .w-inline-block:nth-child(11) {
    grid-column: auto;
  }

  .clients-section .clients-wrapper .w-inline-block:nth-child(12) {
    grid-column: auto;
  }

  .clients-section .clients-image {
    height: 55px !important;
  }

  .clients-section .clients-image.logo--landscape {
    height: 37px !important;
  }

  .clients-section .clients-image.logo--wide {
    height: 41px !important;
  }

  .clients-section .clients-image.logo--square {
    height: 67px !important;
  }

  .clients-section .clients-image.logo--cairngorms {
    height: 94px !important;
  }
}

@media (max-width: 767px) {
  .clients-section .clients-wrapper {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 45px;
    column-gap: 24px;
  }

  .clients-section .clients-image {
    height: 48px !important;
  }

  .clients-section .clients-image.logo--landscape {
    height: 32px !important;
  }

  .clients-section .clients-image.logo--wide {
    height: 37px !important;
  }

  .clients-section .clients-image.logo--square {
    height: 60px !important;
  }

  .clients-section .clients-image.logo--cairngorms {
    height: 83px !important;
  }
}

@media (max-width: 479px) {
  .clients-section .clients-wrapper {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 38px;
    column-gap: 20px;
  }

  .clients-section .clients-image {
    height: 41px !important;
  }

  .clients-section .clients-image.logo--landscape {
    height: 28px !important;
  }

  .clients-section .clients-image.logo--wide {
    height: 32px !important;
  }

  .clients-section .clients-image.logo--square {
    height: 53px !important;
  }

  .clients-section .clients-image.logo--cairngorms {
    height: 71px !important;
  }
}

@media (min-width: 2400px) {
  .header-title {
    font-size: 96px;
    line-height: 115px;
  }

  body {
    font-size: 19px;
  }

  .section-subhead-lg {
    font-size: 84px;
    line-height: 100px;
  }

  .h1-st {
    font-size: 44px;
  }

  .h2-lg {
    font-size: 48px;
  }

  .p-lg {
    font-size: 30px;
    line-height: 40px;
  }

  h1 {
    font-size: 50px;
    line-height: 58px;
  }

  h2 {
    font-size: 32px;
  }
}

/* ===== SIDE NAV MENU POSITIONING ===== */
/* Shift menu content up (closer to burger, further from social icons) */
/* Use dvh (dynamic viewport height) to handle mobile browser chrome properly */
.nav-menu-container {
  padding-top: 160px;
  padding-bottom: 170px;
  height: 100dvh;
}

/* Fallback for browsers that don't support dvh */
@supports not (height: 100dvh) {
  .nav-menu-container {
    height: 100vh;
    height: -webkit-fill-available;
  }
}

/* Ensure consistent spacing between nav links and social section */
.nav-social {
  margin-top: 40px;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .nav-menu-container {
    padding-top: 120px;
    padding-bottom: 200px;
  }
}

@media (max-width: 767px) {
  .nav-menu-container {
    padding-top: 90px;
    padding-bottom: 150px;
  }

  .nav-social {
    margin-top: 30px;
  }
}

@media (max-width: 479px) {
  .nav-menu-container {
    padding-top: 75px;
    padding-bottom: 125px;
  }

  .nav-social {
    margin-top: 25px;
  }
}

/* ===== FOOTER OVERRIDES - EXPANDED & SPACIOUS ===== */
.footer {
  padding-top: 80px !important;
  padding-bottom: 50px !important;
  background-color: #faf1f4 !important;
}

.footer .container-outer {
  padding-left: var(--content-side-padding) !important;
  padding-right: var(--content-side-padding) !important;
}

/* Top section with logo, contact, and links */
.footer-top {
  padding-bottom: 50px !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid rgba(50, 1, 58, 0.1) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 80px !important;
}

.footer-top-left {
  flex-direction: column !important;
  gap: 40px !important;
}

.footer-top-left-top {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 30px !important;
}

/* Logo */
.footer-logo img {
  height: 45px !important;
  width: auto !important;
}

/* Social icons row */
.footer .social {
  display: flex !important;
  gap: 8px !important;
  margin-right: 0 !important;
}

.footer .social-link {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--theme, #32013a) !important;
  border-radius: 50% !important;
  transition: opacity 0.2s ease !important;
}

.footer .social-link:hover {
  opacity: 0.8 !important;
}

.footer .social-link svg,
.footer .social-ink-img svg {
  width: 16px !important;
  height: 16px !important;
  color: #fff !important;
  fill: #fff !important;
}

.footer .social-ink-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Contact info */
.footer .email-link {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--theme, #32013a) !important;
  border-bottom: 1px solid var(--theme, #32013a) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.footer .email-link:hover {
  opacity: 0.7 !important;
}

.footer .phone-number-text {
  font-size: 15px !important;
  color: var(--theme, #32013a) !important;
  opacity: 0.7 !important;
  margin-top: 12px !important;
}

/* Footer links - spread out horizontally */
.footer-links {
  display: flex !important;
  flex-direction: row !important;
  gap: 60px !important;
  margin-top: 0 !important;
  max-width: none !important;
}

.footer-links-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
}

.footer-link {
  font-size: 15px !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
  color: var(--theme, #32013a) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
  margin-left: 0 !important;
}

.footer-link:hover {
  opacity: 1 !important;
}

.footer-link.footer-links-co {
  margin-left: 0 !important;
}

/* Copyright */
.footer .copyright {
  font-size: 13px !important;
  color: var(--theme, #32013a) !important;
  opacity: 0.5 !important;
  margin-top: 0 !important;
}

/* Large screens */
@media (min-width: 1600px) {
  .footer {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }

  .footer-top {
    padding-bottom: 60px !important;
    margin-bottom: 50px !important;
    gap: 120px !important;
  }

  .footer-top-left-top {
    gap: 40px !important;
  }

  .footer-logo img {
    height: 50px !important;
  }

  .footer-links {
    gap: 80px !important;
  }
}

/* Very large screens */
@media (min-width: 1800px) {
  .footer .container-outer {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: calc(3vw + 5vw) !important;
    padding-right: calc(3vw + 5vw) !important;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .footer {
    padding-top: 70px !important;
    padding-bottom: 45px !important;
  }

  .footer-top {
    flex-direction: column !important;
    gap: 50px !important;
    padding-bottom: 40px !important;
    margin-bottom: 35px !important;
  }

  .footer-top-left {
    width: 100% !important;
    align-items: flex-start !important;
  }

  .footer-top-left-top {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .footer-links {
    width: 100% !important;
    gap: 50px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .footer {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  .footer-top {
    gap: 40px !important;
    padding-bottom: 35px !important;
    margin-bottom: 30px !important;
  }

  .footer-top-left-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 25px !important;
  }

  .footer-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 40px 50px !important;
  }
}

/* Small mobile */
@media (max-width: 479px) {
  .footer {
    padding-top: 50px !important;
    padding-bottom: 35px !important;
  }

  .footer-top {
    gap: 35px !important;
    padding-bottom: 30px !important;
    margin-bottom: 25px !important;
  }

  .footer-logo img {
    height: 38px !important;
  }

  .footer .social-link {
    width: 36px !important;
    height: 36px !important;
  }

  .footer-links {
    gap: 30px 40px !important;
  }

  .footer-links-row {
    gap: 14px !important;
  }

  .footer-link {
    font-size: 14px !important;
  }

  .footer .copyright {
    font-size: 12px !important;
  }
}

/* ===== CASE STUDY CARDS - Small Mobile ===== */
@media (max-width: 479px) {
  /* Make case study cards narrower on small mobile */
  .our-work .work-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .our-work .case-item-img,
  .our-work .case-item-text {
    width: 70% !important;
    max-width: 280px !important;
  }

  .our-work .case-item-img {
    border-radius: 15px 15px 0 0 !important;
  }

  .our-work .case-item-text {
    border-radius: 0 0 15px 15px !important;
    background-color: #faf1f4 !important;
    padding: 1em 1.5em 1.5em !important;
    margin-bottom: 2.5em !important;
  }
}