/*--------------------------------------------------------------
# IGDS Theme — "Precision Engineering"
# Loaded AFTER style.css. All overrides live here.
--------------------------------------------------------------*/

:root {
  --ink:          #0A1A2F;  /* deep navy — headers, footer, headings */
  --ink-soft:     #16304F;  /* raised navy surfaces */
  --brand:        #00B3A4;  /* electric teal — primary accent */
  --brand-dark:   #00897E;  /* teal hover */
  --brand-glow:   rgba(0, 179, 164, 0.30);
  --body:         #45566B;  /* body copy — softer than pure black */
  --heading:      #0A1A2F;
  --surface:      #FFFFFF;
  --surface-alt:  #F5F8FB;  /* alternating section bands */
  --line:         #E3EAF2;  /* hairline borders */
  --radius:       10px;
  --shadow-sm:    0 2px 8px rgba(10, 26, 47, 0.06);
  --shadow-md:    0 10px 30px rgba(10, 26, 47, 0.10);
  --shadow-lg:    0 20px 50px rgba(10, 26, 47, 0.16);
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
  font-family: "Inter", "Open Sans", system-ui, sans-serif;
  color: var(--body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title p.sub-heading,
#header .logo h1 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: var(--heading);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p { letter-spacing: 0; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/*--------------------------------------------------------------
# Header + Navigation
--------------------------------------------------------------*/
#header {
  height: 96px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

#main { margin-top: 96px; }


@media (max-width: 991px) {
  #header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #FFFFFF;
  }
}


@media (max-width: 991px) {
  #header { height: 122px; padding: 0; }

  #header > .container {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  #header .logo {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }

  #header .logo img { max-height: 60px; }

  /* Hamburger no longer needed */
  .mobile-nav-toggle { display: none !important; }

  #navbar {
    position: relative;
    width: 100%;
    height: 50px;
    border-top: 1px solid var(--line);
  }

  #navbar > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 28px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--brand) transparent;
  }

  #navbar > ul::-webkit-scrollbar { height: 3px; }
  #navbar > ul::-webkit-scrollbar-track { background: transparent; }
  #navbar > ul::-webkit-scrollbar-thumb {
    background: var(--brand);
    border-radius: 3px;
  }

  #navbar > ul > li { flex: 0 0 auto; }

  #navbar > ul > li > a,
  #navbar > ul > li > a:focus {
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Underline sits just under the text inside the strip */
  #navbar > ul > li > a.nav-link:after {
    bottom: 2px;
    left: 12px;
  }

  #navbar > ul > li > a.nav-link:hover:after,
  #navbar > ul > li > a.nav-link.active:after { width: calc(100% - 24px); }

  /* Dropdowns cannot open inside a scrolling row: Services links straight
     to its page instead. */
  #navbar .dropdown ul { display: none !important; }
  #navbar .dropdown > a .bi-chevron-down { display: none; }

  /* Fade on the right edge signals more links off-screen */
  #navbar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF 85%);
  }

  /* Content offsets follow the taller two-row header */
  #main { margin-top: 122px; }
  section#hero[class*="-sec-wrap"] { margin-top: 122px; }
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: var(--ink);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}


#header .logo img {
  max-height: 88px;
  width: auto;
}

@media (max-width: 575px) {
  #header .logo img { max-height: 64px; }
  #header .logo h1 a { font-size: 21px; }
}

#navbar a,
#navbar a:focus {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

#navbar a:hover,
#navbar .active,
#navbar li:hover > a { color: var(--brand); }

/* Accent underline (overrides the earlier orange one) */
#navbar > ul > li > a.nav-link:after { background: var(--brand); }

.navbar .getstarted,
.navbar .getstarted:focus {
  background: var(--brand);
  border-radius: var(--radius);
  padding: 11px 26px;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--brand-glow);
  transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--brand-glow);
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a { color: var(--brand); }

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/

.clients-slider .swiper-wrapper .swiper-slide:after {
  background: linear-gradient(
    100deg,
    rgba(10, 26, 47, 0.94) 0%,
    rgba(10, 26, 47, 0.74) 45%,
    rgba(10, 26, 47, 0.42) 100%
  );
  opacity: 1;
}

#hero h2 {
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 60%;
  padding: 0 8%;
  color: #fff;
}

#hero p {
  color: #C8D6E5;
  font-size: 17px;
  line-height: 1.8;
  max-width: 46%;
  padding: 0 8%;
  font-weight: 400;
}

/* Teal keyline under the hero */
#hero { border-bottom: 3px solid var(--brand); }


section#hero {
  padding: 0;
  margin: 0;
}


section#hero.about-sec-wrap,
section#hero.services-sec-wrap,
section#hero.pes-sec-wrap,
section#hero.products-sec-wrap,
section#hero.medical-sec-wrap,
section#hero.industry-sec-wrap,
section#hero.mts-sec-wrap,
section#hero.mhd-sec-wrap,
section#hero.esg-sec-wrap,
section#hero.agri-sec-wrap,
section#hero.blog-sec-wrap,
section#hero.casestudy-sec-wrap,
section#hero.prip-sec-wrap,
section#hero.contact-sec-wrap {
  margin-top: 96px;
}

/* Medical page banner: no keyline under the hero. */
#hero.mhd-sec-wrap { border-bottom: none; }

.swiper-button-next, .swiper-button-prev { color: var(--brand) !important; }

.swiper-pagination .swiper-pagination-bullet-active { background: var(--brand) !important; }


.about-sec-wrap,
.services-sec-wrap,
.pes-sec-wrap,
.products-sec-wrap,
.medical-sec-wrap,
.industry-sec-wrap,
.mts-sec-wrap,
.mhd-sec-wrap,
.esg-sec-wrap,
.agri-sec-wrap,
.blog-sec-wrap,
.casestudy-sec-wrap,
.prip-sec-wrap,
.contact-sec-wrap {
  position: relative;
  background-color: transparent !important;
  background-blend-mode: normal !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.about-sec-wrap::before,
.services-sec-wrap::before,
.pes-sec-wrap::before,
.products-sec-wrap::before,
.medical-sec-wrap::before,
.industry-sec-wrap::before,
.mts-sec-wrap::before,
.mhd-sec-wrap::before,
.esg-sec-wrap::before,
.agri-sec-wrap::before,
.contact-sec-wrap::before {
  /* No scrim — banners show the artwork exactly as supplied. */
  content: none;
}


section#hero.pes-sec-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(10, 26, 47, 0.86) 0%,
    rgba(10, 26, 47, 0.62) 34%,
    rgba(10, 26, 47, 0.12) 62%,
    rgba(10, 26, 47, 0) 82%
  );
}

section#hero.pes-sec-wrap h1 {
  text-shadow: 0 2px 18px rgba(10, 26, 47, 0.45);
}


section#hero.mhd-sec-wrap::before,
section#hero.industry-sec-wrap::before,
section#hero.about-sec-wrap::before,
section#hero.blog-sec-wrap::before,
section#hero.casestudy-sec-wrap::before,
section#hero.contact-sec-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(10, 26, 47, 0.88) 0%,
    rgba(10, 26, 47, 0.66) 34%,
    rgba(10, 26, 47, 0.18) 64%,
    rgba(10, 26, 47, 0) 84%
  );
}

section#hero.mhd-sec-wrap h1,
section#hero.industry-sec-wrap h1,
section#hero.about-sec-wrap h1,
section#hero.blog-sec-wrap h1,
section#hero.casestudy-sec-wrap h1,
section#hero.contact-sec-wrap h1 {
  text-shadow: 0 2px 18px rgba(10, 26, 47, 0.45);
}


section#hero.blog-sec-wrap::before {
  background: linear-gradient(
    100deg,
    rgba(10, 26, 47, 0.86) 0%,
    rgba(10, 26, 47, 0.74) 26%,
    rgba(10, 26, 47, 0.38) 48%,
    rgba(10, 26, 47, 0.08) 68%,
    rgba(10, 26, 47, 0) 82%
  );
}


section#hero.blog-sec-wrap h1 {
  text-shadow: 0 1px 2px rgba(10, 26, 47, 0.95),
               0 2px 8px rgba(10, 26, 47, 0.8),
               0 4px 28px rgba(10, 26, 47, 0.55);
}


.about-sec-wrap h1,
.services-sec-wrap h1,
.pes-sec-wrap h1,
.products-sec-wrap h1,
.medical-sec-wrap h1,
.industry-sec-wrap h1,
.mts-sec-wrap h1,
.mhd-sec-wrap h1,
.esg-sec-wrap h1,
.agri-sec-wrap h1,
.blog-sec-wrap h1,
.casestudy-sec-wrap h1,
.prip-sec-wrap h1,
.contact-sec-wrap h1,
.about-sec-wrap h2,
.blog-sec-wrap h2,
.services-sec-wrap h2,
.contact-sec-wrap h2 {
  color: #FFFFFF !important;
}

/* Keep the headings above the scrim */
.about-sec-wrap > .container,
.services-sec-wrap > .container,
.pes-sec-wrap > .container,
.products-sec-wrap > .container,
.medical-sec-wrap > .container,
.industry-sec-wrap > .container,
.mts-sec-wrap > .container,
.mhd-sec-wrap > .container,
.esg-sec-wrap > .container,
.agri-sec-wrap > .container,
.blog-sec-wrap > .container,
.casestudy-sec-wrap > .container,
.contact-sec-wrap > .container {
  position: relative;
  z-index: 2;
}


@media (max-width: 991px) {
  section#hero.pes-sec-wrap::before,
  section#hero.mhd-sec-wrap::before,
  section#hero.industry-sec-wrap::before,
  section#hero.about-sec-wrap::before,
  section#hero.blog-sec-wrap::before,
  section#hero.casestudy-sec-wrap::before,
  section#hero.contact-sec-wrap::before {
    background: linear-gradient(
      100deg,
      rgba(10, 26, 47, 0.82) 0%,
      rgba(10, 26, 47, 0.7) 60%,
      rgba(10, 26, 47, 0.62) 100%
    );
  }
}

/*--------------------------------------------------------------
# Section titles — technical label + statement headline
--------------------------------------------------------------*/
.section-title { padding-bottom: 44px; }

.section-title h2 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;          /* fixes line-height:1px in style.css */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.section-title p.sub-heading {
  font-size: 40px;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.03em;
}

.section-title p.sub-heading::after {
  background: var(--brand);
  height: 3px;
  width: 56px;
  border-radius: 2px;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section { padding: 90px 0; }

.section-bg { background: var(--surface-alt); }

.about h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 28px;
  padding-bottom: 14px;
}


.about h3:after {
  width: 48px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  top: auto;
  bottom: 0;
}

.about p { font-size: 17px; max-width: 900px; }

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn-get-started {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 13px 32px;
  border-radius: var(--radius);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px var(--brand-glow);
}

.btn-get-started:hover {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 10px 24px var(--brand-glow);
}

/*--------------------------------------------------------------
# Service tiles
--------------------------------------------------------------*/
/* style.css sets display:flex with no wrap, so a fourth tile overflows */
.services .grid {
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 0;
}

.services .grid figure {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Four tiles sit better as 2x2 than 3 + 1 */
.services .grid:has(figure:nth-child(4)) figure {
  width: 48%;
  max-width: 560px;
  max-height: 320px;
}

@media (max-width: 767px) {
  .services .grid figure,
  .services .grid:has(figure:nth-child(4)) figure {
    width: 100%;
    max-width: 480px;
    /* style.css sets min-width:320px, wider than a small phone's
       content area, which caused sideways scrolling. */
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

.services .grid figure figcaption { padding: 34px; }

.services .grid figure h2,
.services .grid figure h3,
.services .grid figure h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
}

.services .grid figure p,
.services .grid figure figcaption p,
.services .grid figure figcaption div p {
  font-size: 15px;
  color: #fff;
}

.effect-lily figcaption::before {
  background: linear-gradient(
    to top,
    rgba(10, 26, 47, 0.92) 0%,
    rgba(10, 26, 47, 0.60) 50%,
    rgba(10, 26, 47, 0) 100%
  );
}

.services .grid figure a {
  color: var(--brand);
  font-weight: 600;
}

/*--------------------------------------------------------------
# Product cards
--------------------------------------------------------------*/
#products .card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

#products .card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

#products .card-img,
#products .card-img2,
#products .card-img3 { position: relative; }

/* Navy wash so the white product label always reads */
#products .card-img::after,
#products .card-img2::after,
#products .card-img3::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 26, 47, 0.85) 0%,
    rgba(10, 26, 47, 0.25) 100%
  );
}

#products .card-img h1,
#products .card-img2 h1,
#products .card-img3 h1 {
  position: relative;
  z-index: 2;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

#products .card-body { padding: 26px; }

/*--------------------------------------------------------------
# Content pages — intro paragraph + block headings
--------------------------------------------------------------*/
.lead-intro {
  font-size: 19px;
  line-height: 1.75;
  color: var(--body);
  max-width: 860px;
  margin-bottom: 8px;
}

.block-title {
  width: 100%;
  margin: 44px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}


main.medical-page .section-title,
main.product-eng-services .section-title {
  border-bottom: none;
  padding-bottom: 44px;
}


main.service .section-title p.sub-heading::after { content: none; }


main .portfolio-details .section-title { text-align: left; }

main .portfolio-details .section-title h2 {
  color: var(--brand);
  font-weight: 600;
  padding-bottom: 0;
}

main .portfolio-details .section-title p.sub-heading {
  text-align: left;
  padding: 0 0 16px;
  margin-bottom: 0;
}

main .portfolio-details .section-title p.sub-heading::after { left: 0; }

main.product-eng-services .portfolio-details .section-title::after {
  margin: 20px 0 0;
  background: linear-gradient(90deg,
    rgba(0, 179, 164, 0.65) 0%,
    rgba(0, 179, 164, 0.18) 55%,
    transparent 100%);
}

main.service .section-title::after,
main.product-eng-services .section-title::after {
  content: '';
  display: block;
  width: min(560px, 80%);
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 179, 164, 0.18) 20%,
    rgba(0, 179, 164, 0.65) 50%,
    rgba(0, 179, 164, 0.18) 80%,
    transparent 100%);
}


.medical-page .block-title {
  border-bottom: none;
  padding-bottom: 0;
}

/*--------------------------------------------------------------
# Homepage — trust strip + about split
--------------------------------------------------------------*/
.trust-strip {
  /* Pull up to overlap the hero, then restore the same amount below
     so the next section is not dragged up with it. */
  margin-top: -60px;
  padding: 0 0 60px;
  position: relative;
  z-index: 5;
}

.trust-strip .stat-strip { margin: 0; }

.trust-strip .stat-tile {
  padding: 30px 26px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.about-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Aligns the points column with the body copy, not the eyebrow */
.about-points { padding-top: 46px; }

.about-points li { font-size: 16px; margin-bottom: 18px; }

.about-points strong { color: var(--heading); font-weight: 600; }

@media (max-width: 991px) {
  .about-split { grid-template-columns: 1fr; gap: 30px; }
  .about-points { padding-top: 0; }
  .trust-strip { margin-top: 0; padding: 60px 0 0; }
}

/*--------------------------------------------------------------
# Services listing page
--------------------------------------------------------------*/
.pes-home-sec .title,
.pes-home-sec .title a {
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.32;
  color: #B0762A;
}

.pes-home-sec .title a:hover { color: #8F5D1E; }

/*--------------------------------------------------------------
# Product range pages
--------------------------------------------------------------*/
.product-range { padding-bottom: 0; }

/* Jump links — replaces the nav dropdown for in-page navigation */
.product-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.product-jump a {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50px;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

.product-jump a:hover {
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}

/* Range listing cards */
.range-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 28px;
}

.range-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.range-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.range-media {
  background: var(--surface-alt);
  padding: 26px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.range-media img {
  max-height: 220px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.range-card:hover .range-media img { transform: scale(1.05); }

.range-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 24px;
}

.range-body h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 10px;
}

.range-card:hover .range-body h3 { color: var(--brand); }

.range-body > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 18px;
}

.range-facts {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.range-facts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--heading);
  border-bottom: 1px solid var(--line);
}

.range-facts li::before { content: none !important; }

.range-facts span {
  color: var(--body);
  flex-shrink: 0;
}

.range-body .card-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}

/* Breadcrumb on detail pages */
.breadcrumb-line {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--body);
}

.breadcrumb-line a { color: var(--brand); }

.breadcrumb-line span { margin: 0 7px; opacity: 0.5; }

.product-block { padding: 80px 0; }

.product-head {
  max-width: 760px;
  margin-bottom: 34px;
}

.product-index {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand);
  margin-bottom: 8px;
}

.product-head h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0 0 8px;
}

.product-tagline {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

/* Gallery left, specs right */
.product-layout {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

/* Products with no photography yet: specs fill the width in two columns */
.product-layout.is-noimage {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 34px 52px;
}

.product-gallery { position: sticky; top: 104px; }

.gallery-main {
  display: block;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gallery-main:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.gallery-main img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.gallery-thumbs a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: zoom-in;
  transition: border-color 0.25s ease, transform 0.2s ease;
}

.gallery-thumbs a:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Specs */
.product-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 34px 48px;
}

.spec-title {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.spec-group .tick-list li { font-size: 15px; margin-bottom: 10px; }


.spec-group.is-wide { grid-column: 1 / -1; }
.spec-group.is-wide p { margin-bottom: 14px; }
.spec-group.is-wide p:last-child { margin-bottom: 0; }

.sub-list {
  margin: 8px 0 4px;
  padding-left: 4px;
  list-style: none;
}

.sub-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 14.5px;
  color: var(--body);
  opacity: 0.9;
}

.sub-list li::before {
  content: '' !important;
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--brand);
  border: none;
  border-radius: 0;
}

@media (max-width: 991px) {
  .product-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-gallery { position: static; max-width: 460px; }
  .product-block { padding: 60px 0; }
  .product-head h3 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-jump a,
  .gallery-main,
  .gallery-thumbs a { transition: none; }
}

/*--------------------------------------------------------------
# Blog listing
--------------------------------------------------------------*/
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 26px;
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.post-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.post-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(0, 179, 164, 0.10);
  border-radius: 50px;
}

.post-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.34;
  color: var(--heading);
  margin: 0 0 12px;
}

.post-card h3 a { color: inherit; }
.post-card:hover h3 a { color: var(--brand); }

.post-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 18px;
}

.post-meta-row {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--body);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.post-readmore {
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}

/*--------------------------------------------------------------
# Contact page
--------------------------------------------------------------*/
.contact-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-bottom: 52px;
}

.contact-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.contact-tile:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(0, 179, 164, 0.10);
  color: var(--brand);
  font-size: 20px;
}

.contact-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}

.contact-value {
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.35;
}

/* Form + details */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 330px;
  gap: 34px;
  align-items: start;
}

.contact-form-card {
  padding: 36px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.contact-form-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 6px;
}

.contact-form-note {
  font-size: 13.5px;
  color: var(--body);
  margin: 0 0 24px;
}

.contact-form-card form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0 18px;
}

.contact-form-card .block { margin-bottom: 18px; }

.contact-form-card label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--heading);
}

.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--heading);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.contact-form-card textarea { resize: vertical; min-height: 130px; }

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.contact-form-card button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 30px;
  border: none;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.contact-form-card button:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--brand-glow);
}

/* Email verification controls (injected by script.js under the email field).
   Selectors are prefixed with "form" to outrank the template's form input /
   form button rules and the card/sidebar button styles. */
form .email-verify { margin: -6px 0 18px; }

form .email-verify button {
  display: inline-flex;
  width: auto;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: transparent;
  color: var(--brand-dark);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

form .email-verify button:hover {
  background: var(--brand);
  color: #fff;
  transform: none;
  box-shadow: none;
}

form .email-verify button:disabled { opacity: 0.5; cursor: default; }

form .email-verify .verify-code-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
form .email-verify .verify-code-row[hidden] { display: none; }

form .email-verify input {
  flex: 1;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 10px 14px;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--heading);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
}

form .email-verify .verify-check {
  background: var(--brand);
  color: #fff;
}

form .email-verify .verify-status {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--body);
}
form .email-verify .verify-status:empty { display: none; }
form .email-verify .verify-status.is-ok { color: var(--brand-dark); font-weight: 600; }
form .email-verify .verify-status.is-error { color: #C2334A; }

:root[data-theme="dark"] form .email-verify button { color: var(--brand); }
:root[data-theme="dark"] form .email-verify .verify-check,
:root[data-theme="dark"] form .email-verify button:hover { color: #04211D; }
:root[data-theme="dark"] form .email-verify .verify-status.is-ok { color: var(--brand); }
:root[data-theme="dark"] form .email-verify .verify-status.is-error { color: #FF9AA8; }

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-address {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
}

.hours-list { margin: 0; padding: 0; list-style: none; }

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--heading);
  border-bottom: 1px solid var(--line);
}

.hours-list li:last-child { border-bottom: none; }

.hours-list li::before { content: none !important; }

.hours-list span { color: var(--body); }

.contact-social { display: flex; gap: 10px; }

.contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  color: var(--body);
  font-size: 19px;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.contact-social a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}

/* Full-width map */
.map-section { line-height: 0; }

.map-section iframe {
  display: block;
  width: 100%;
  filter: grayscale(20%);
  transition: filter 0.4s ease;
}

.map-section:hover iframe { filter: grayscale(0%); }

@media (max-width: 991px) {
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
  .contact-form-card { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-tile,
  .contact-social a,
  .map-section iframe { transition: none; }
}

/*--------------------------------------------------------------
# Case studies
--------------------------------------------------------------*/
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 28px;
}

.case-card {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.case-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.case-card h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--heading);
  margin: 0 0 16px;
}

.case-card p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--body);
  margin: 0 0 14px;
}

.case-card p strong { color: var(--heading); font-weight: 600; }

.case-card em { color: #B0762A; font-style: normal; }

.case-facts {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  list-style: none;
}

.case-facts li {
  display: flex;
  gap: 14px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--heading);
}

.case-facts li::before { content: none !important; }

.case-facts span {
  flex: 0 0 82px;
  color: var(--body);
}

@media (max-width: 575px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-card { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-card { transition: none; }
}

/*--------------------------------------------------------------
# Article body
--------------------------------------------------------------*/
.article {
  max-width: 760px;
  margin: 0 auto;
}

.article-meta {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--body);
}

.article-meta .post-tag { margin-bottom: 0; margin-right: 12px; }

.article h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--heading);
  margin: 42px 0 14px;
  line-height: 1.28;
}

.article h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--heading);
  margin: 30px 0 10px;
}

.article p {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--body);
  margin-bottom: 18px;
}

.article ul { margin: 0 0 20px; padding: 0; list-style: none; }

.article ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}

.article ul li::before {
  content: '' !important;
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
}

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 15px;
}

.article th,
.article td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--body);
}

.article th {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--heading);
  background: var(--surface-alt);
}

.article-note {
  padding: 20px 24px;
  margin: 26px 0;
  background: var(--surface-alt);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.article-note p { margin: 0; font-size: 15.5px; }

.table-scroll { overflow-x: auto; }

/*--------------------------------------------------------------
# Two-column page layout (content + sidebar)
--------------------------------------------------------------*/
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 56px;
  align-items: start;
}

.page-main > p { font-size: 16.5px; line-height: 1.78; }

/* Row of images sitting side by side within page content */
.image-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 18px;
  margin: 30px 0;
  align-items: center;
}

.image-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.image-row a:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.image-row img {
  display: block;
  max-width: 100%;
  max-height: 230px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575px) {
  .image-row img { max-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .image-row a { transition: none; }
}

/* Banner image sitting directly beneath a page hero */
.hero-figure {
  padding: 46px 0 0;
}

.figure-frame {
  margin: 0;
  padding: 18px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.figure-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

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

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.page-sidebar {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.sidebar-card h5 {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
}

.sidebar-group {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.sidebar-sub {
  margin: 16px 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--heading);
}

.sidebar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-list li { margin: 0; }

.sidebar-list li::before { content: none !important; }

.sidebar-list a {
  display: block;
  padding: 7px 0 7px 15px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.sidebar-list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.sidebar-list a:hover {
  color: var(--brand);
  padding-left: 20px;
}

.sidebar-list a:hover::before { opacity: 1; }

/* Sidebar form — drops the template's orange keylines */
.sidebar-form form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.sidebar-form .block { position: relative; margin-bottom: 12px; }

.sidebar-form .block i {
  position: absolute;
  left: 13px;
  top: 14px;
  font-size: 14px;
  color: var(--brand);
}

.sidebar-form input,
.sidebar-form textarea {
  width: 100%;
  padding: 12px 14px 12px 36px;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  color: var(--heading);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.sidebar-form textarea { min-height: 96px; resize: vertical; }

.sidebar-form input:focus,
.sidebar-form textarea:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.sidebar-form button {
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.sidebar-form button:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--brand-glow);
}

@media (max-width: 991px) {
  .page-layout { grid-template-columns: 1fr; gap: 40px; }
  .page-sidebar { position: static; }
}

/*--------------------------------------------------------------
# Stat strip
--------------------------------------------------------------*/
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 20px;
  margin: 42px 0 8px;
}

.stat-tile {
  padding: 26px 24px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}

.stat-figure {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--heading);
  margin-bottom: 6px;
}

.stat-label {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
}

/*--------------------------------------------------------------
# Capability cards
--------------------------------------------------------------*/
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 22px;
}

.capability-card {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.capability-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.capability-card h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 14px;
  line-height: 1.35;
}

.capability-card ul {
  margin: 0;
  padding-left: 18px;
  list-style: none;
}

.capability-card li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--body);
  margin-bottom: 7px;
}


.capability-card.is-linked {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.capability-card.is-linked .card-link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  transition: transform 0.25s ease;
}

.capability-card.is-linked:hover .card-link { color: var(--brand-dark); }

.capability-card li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

/* Product shot inside a capability card */
.capability-card.has-media {
  display: flex;
  flex-direction: column;
}


.capability-card.is-wide {
  grid-column: 1 / -1;
  display: block;
}

.media-block { margin-top: 22px; }

.media-block:first-of-type { margin-top: 18px; }

.media-title {
  margin: 0 0 12px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
}

.media-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: middle;
}

.media-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.media-item {
  display: block;
  padding: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: zoom-in;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.media-item:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(10, 26, 47, 0.14);
}

.media-item img {
  display: block;
  max-height: 190px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 575px) {
  .media-item img { max-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-item { transition: none; }
}

.card-media {
  margin: 18px 0 0;
  padding: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.card-media img {
  max-width: 100%;
  max-height: 340px;   /* neo.png is 896x1195 — no upscaling at this size */
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 575px) {
  .card-media img { max-height: 260px; }
}

.capability-card:hover .card-media img { transform: scale(1.05); }

.card-media a { display: block; cursor: zoom-in; }

/* Thumbnail strip — internal / detail shots */
.card-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(78px, 100%), 1fr));
  gap: 10px;
  margin-top: 12px;
}

.card-thumbs a {
  display: block;
  aspect-ratio: 1 / 1;
  padding: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.card-thumbs a:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 26, 47, 0.14);
}

.card-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .card-media img { transition: none; }
}

/*--------------------------------------------------------------
# Split two-column block
--------------------------------------------------------------*/
.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px 48px;
}

.tick-list,
.standard-list {
  margin: 0;
  padding: 0;
  list-style: none;
}


.standard-list li::before,
.capability-card li::before { content: none !important; }

.tick-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}

.tick-list li::before {
  content: '' !important;
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
}

.standard-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.standard-list li:last-child { border-bottom: none; }

.standard-list strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.01em;
}

.standard-list span {
  font-size: 14.5px;
  color: var(--body);
}

/*--------------------------------------------------------------
# Engagement cards
--------------------------------------------------------------*/
.engage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 22px;
}

.engage-card {
  position: relative;
  padding: 30px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.engage-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.engage-step {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand);
  margin-bottom: 12px;
}

.engage-card h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 9px;
  line-height: 1.35;
}

.engage-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

/*--------------------------------------------------------------
# Closing call-to-action band
--------------------------------------------------------------*/
.cta-band {
  margin-top: 64px;
  padding: 52px 40px;
  text-align: center;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cta-band h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 12px;
  line-height: 1.3;
}

.cta-band p {
  max-width: 620px;
  margin: 0 auto 26px;
  color: var(--body);
}

@media (max-width: 575px) {
  .cta-band { padding: 38px 22px; }
  .cta-band h3 { font-size: 21px; }
  .stat-figure { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card,
  .engage-card { transition: none; }
}

/*--------------------------------------------------------------
# Clients & Partners
--------------------------------------------------------------*/
.partner-grid {
  display: grid;
  /* auto-fit so the row stays balanced whatever the partner count */
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 24px;
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto;
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.partner-item:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.partner-item img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  object-fit: contain;
  /* Shown in full brand colour: Intel and NVIDIA brand guidelines
     do not permit recolouring or filtering their marks. */
  transition: transform 0.35s ease;
}

.partner-item:hover img { transform: scale(1.04); }

/* Text wordmark, used until a logo file is supplied. Swapping in an
   <img> later needs no CSS change. */
.partner-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--heading);
  text-align: center;
  opacity: 0.8;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.partner-item:hover .partner-name {
  color: var(--brand);
  opacity: 1;
}

@media (max-width: 991px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 480px) {
  .partner-grid { grid-template-columns: 1fr; }
  .partner-item { min-height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-item,
  .partner-item img { transition: none; }
}

/*--------------------------------------------------------------
# Blog / Case study cards
--------------------------------------------------------------*/
.card-body .post-meta {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.card-body h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 12px;
  line-height: 1.32;
}

/*--------------------------------------------------------------
# Footer — dark, matching the deployed site
--------------------------------------------------------------*/
#footer {
  background: var(--ink);
  color: #93A6BC;
  font-size: 15px;
}

#footer .footer-top {
  background: var(--ink);
  border-top: 3px solid var(--brand);
  padding: 74px 0 40px 0;
}

/* Specificity here deliberately matches style.css Footer,
   which sets dark-on-light values that are unreadable on navy. */
#footer .footer-top h4,
#footer .footer-top .footer-contact h4,
#footer .footer-top .footer-links h4 {
  font-family: "Space Grotesk", sans-serif;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#footer p,
#footer .footer-top .footer-contact p,
#footer .footer-top .footer-links p { color: #A9BACE; }

#footer strong,
#footer .footer-top .footer-contact strong { color: #DCE6F1; }

#footer .footer-top .footer-links ul a,
#footer .footer-top .footer-contact a,
#footer a {
  color: #A9BACE;
  transition: color 0.3s ease;
}

#footer .footer-top .footer-links ul a:hover,
#footer .footer-top .footer-contact a:hover,
#footer a:hover { color: var(--brand); }

#footer .footer-top .footer-links ul i,
#footer .footer-top i,
#footer .bx-chevron-right { color: var(--brand); }

#footer h1.text-light a,
#footer .footer-top h1.text-light a,
h1.text-light a { color: #FFFFFF; }

#footer .logo { margin-bottom: 18px; }

#footer .logo img {
  max-height: 88px;
  width: auto;
  border-radius: 6px;
}

@media (max-width: 575px) {
  #footer .logo img { max-height: 70px; }
}

#footer .footer-top .social-links a {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

#footer .footer-top .social-links a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

#footer .copyright,
#footer .credits { color: #6E829B; font-size: 14px; }

#footer .copyright strong span { color: #fff; }

.back-to-top {
  background: var(--brand) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 18px var(--brand-glow);
}

.back-to-top:hover { background: var(--brand-dark) !important; }

/*--------------------------------------------------------------
# List bullets — teal, replacing the orange dots
--------------------------------------------------------------*/
section ul li:before {
  background: var(--brand);
  border: none;
  height: 7px;
  width: 7px;
  top: 11px;
}

/*--------------------------------------------------------------
# Image assembly animation (see assets/js/assemble.js)
--------------------------------------------------------------*/
.assemble-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.assemble-tile {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: transform, opacity;
  animation: assembleIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes assembleIn {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
}

/* Hidden while its tiles stand in for it */
img.assemble-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .assemble-tile { animation: none; opacity: 1; transform: none; }
  img.assemble-hidden { opacity: 1; }
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 991px) {
  #hero h2 { font-size: 36px; max-width: 100%; }
  #hero p  { max-width: 85%; font-size: 16px; }
  .section-title p.sub-heading { font-size: 30px; }
  section { padding: 64px 0; }
}

@media (max-width: 575px) {
  #hero h2 { font-size: 27px; padding: 0 24px; }
  #hero p  { padding: 0 24px; max-width: 100%; }
  .section-title p.sub-heading { font-size: 25px; }
}

/*--------------------------------------------------------------
# Legal pages — privacy policy, terms of service
# No banner photograph: these pages want to look plain and
# trustworthy, so the hero is a flat navy band.
--------------------------------------------------------------*/
.legal-sec-wrap {
  height: 260px;
  background: var(--ink);
}

.legal-sec-wrap h1 {
  color: #FFFFFF !important;
}

/* A single measured column — legal text is unreadable at full
   container width. */
.legal-body {
  max-width: 800px;
}

.legal-updated {
  margin-bottom: 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.legal-page .block-title {
  font-size: 15px;
  letter-spacing: 0.12em;
}

.legal-page p,
.legal-page li {
  font-size: 16px;
  line-height: 1.8;
}

.legal-page ul {
  margin: 0 0 20px;
  padding-left: 4px;
}

.legal-contact {
  padding: 24px 26px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/*==============================================================
# MOBILE POLISH
# Phone and tablet refinements only. Desktop is unaffected: every
# rule below sits inside a max-width media query or (hover: none).
==============================================================*/

/*--------------------------------------------------------------
# 1 + 3. Heroes and page banners
--------------------------------------------------------------*/
@media (max-width: 767px) {

  /* Homepage hero: sits below the two-row mobile header instead of
     being partly covered by it, and is shorter so content is reachable */
  section#hero:not([class*="-sec-wrap"]) { margin-top: 122px; }

  .clients-slider .swiper-wrapper,
  .clients-slider .swiper-wrapper .swiper-slide {
    height: 68vh;
    min-height: 440px;
  }

  .clients-slider .swiper-wrapper .swiper-slide:after { height: 100%; }

  /* Arrows covered the headline; swipe and pagination dots remain */
  .clients-slider .swiper-button-prev,
  .clients-slider .swiper-button-next { display: none !important; }

  #hero h2 {
    font-size: 29px;
    line-height: 1.18;
    max-width: 100%;
    padding: 0 22px;
  }

  #hero p {
    font-size: 15px;
    line-height: 1.65;
    max-width: 100%;
    width: 100%;
    padding: 0 22px;
  }

  /* Slides carrying both a headline and a paragraph: stack them so
     they cannot overlap. Headline-only slides stay centred. */
  .clients-slider .swiper-slide:has(p) h2 {
    bottom: 48%;
    align-items: flex-end;
  }

  .clients-slider .swiper-slide:has(p) p {
    top: 55%;
    bottom: auto;
  }

  /* Inner-page banners: 450px is most of a phone screen */
  section#hero[class*="-sec-wrap"] { height: 280px; }

  section#hero[class*="-sec-wrap"] h1 {
    font-size: 26px;
    line-height: 1.25;
  }

  section#hero[class*="-sec-wrap"] .btn-get-started {
    padding: 10px 22px;
    font-size: 14px;
  }

  /*--------------------------------------------------------------
  # 4. Stat tiles as a compact 2 x 2 grid
  --------------------------------------------------------------*/
  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-tile { padding: 18px 16px; }
  .stat-figure { font-size: 28px; }
  .stat-label { font-size: 12.5px; line-height: 1.45; }
  .stat-label br { display: none; }
}

/*--------------------------------------------------------------
# 2. Service tiles on touch screens
# The template reveals the description only on :hover, which touch
# devices do not have. Show everything at rest instead.
--------------------------------------------------------------*/
@media (hover: none) {
  figure.effect-lily img {
    opacity: 1;
    width: 100%;
    transform: none;
  }

  figure.effect-lily h2,
  figure.effect-lily h3,
  figure.effect-lily p { transform: none; }

  figure.effect-lily p { opacity: 1; }
}

@media (max-width: 575px) {

  /*--------------------------------------------------------------
  # 5. Tighter vertical rhythm
  --------------------------------------------------------------*/
  section { padding: 48px 0; }
  .product-block { padding: 44px 0; }
  .trust-strip { padding: 40px 0 0; }
  .section-title { padding-bottom: 28px; }

  .cta-band {
    margin-top: 40px;
    padding: 30px 20px;
  }

  /*--------------------------------------------------------------
  # 6. Full-width, thumb-sized buttons in page content
  # (scoped to <main>, so hero buttons keep their natural width)
  --------------------------------------------------------------*/
  main .btn-get-started {
    display: block;
    width: 100%;
    text-align: center;
  }

  /*--------------------------------------------------------------
  # 7. Centred footer
  --------------------------------------------------------------*/
  #footer .footer-top {
    padding: 48px 0 16px;
    text-align: center;
  }

  #footer .footer-top .footer-contact,
  #footer .footer-top .footer-links { margin-bottom: 26px; }

  #footer .logo { text-align: center; }
  #footer .logo h1 a { justify-content: center; }

  #footer .footer-top .footer-links ul li { justify-content: center; }

  #footer .footer-top .social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  #footer .copyright { text-align: center; }

  /*--------------------------------------------------------------
  # 8. Smaller floating buttons, tucked closer to the edges
  # Element-qualified selectors outrank the equal-specificity rules
  # in assistant.css and dark.css, which load after this file.
  --------------------------------------------------------------*/
  button.igds-theme-toggle {
    left: 12px;
    bottom: 14px;
    width: 40px;
    height: 40px;
  }

  button.igds-launcher {
    width: 52px;
    height: 52px;
    right: 12px;
    bottom: 14px;
  }

  button.igds-launcher svg {
    width: 23px;
    height: 23px;
  }

  a.back-to-top {
    right: 17px !important;
    bottom: 76px !important;
  }
}

/* 4 (cont.) Three-tile strips on the division pages: let the leftover
   tile span the row instead of sitting alone in half the width */
@media (max-width: 767px) {
  .stat-strip .stat-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/*--------------------------------------------------------------
# Mobile polish fixes (from device testing)
--------------------------------------------------------------*/
@media (max-width: 767px) {

  /* Fix 1: style.css gives #hero a near-full-screen fixed height on
     small screens, which centred the shorter slider inside it and left
     white gaps above and below (with the teal border floating far
     beneath). Let the section wrap the slider instead. */
  section#hero:not([class*="-sec-wrap"]) {
    height: auto;
    min-height: 0;
  }

  /* Fix 2: the pan effect sizes the image to 106% of the slide WIDTH.
     On a tall, narrow phone slide that image is shorter than the slide
     and tiled vertically. Cover the slide and never repeat; the image
     is then wider than the screen, so the pan still travels. */
  .clients-slider .swiper-wrapper .swiper-slide {
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

@media (max-width: 991px) {

  /* Fix 3: the teal scrollbar under the link strip read as a long
     active-page underline. Keep it faint; teal only while dragging. */
  #navbar > ul { scrollbar-color: rgba(10, 26, 47, 0.18) transparent; }

  #navbar > ul::-webkit-scrollbar-thumb { background: rgba(10, 26, 47, 0.18); }

  #navbar > ul::-webkit-scrollbar-thumb:active { background: var(--brand); }
}


.skill-area .skill-parent > .row {
  align-items: center;
  
  position: relative;
  z-index: 1;
}

.skill-area .skill-img,
.skill-area .skill-img img {
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

.skill-area .skill-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.skill-area .skill-parent {
  padding: 56px;
  border-radius: 12px;
  overflow: hidden;
}


.skill-area .skill-parent::before {
  background: rgba(0, 0, 0, 0.76);
}


.skill-area {
  margin-top: 0;
  padding: 34px 0;
}

.skill-area .skill-title {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  /* Keep the photo on phones — style.css hides it because the
     absolute positioning made it unusable at narrow widths. */
  .skill-area .skill-img img {
    display: block;
    margin-bottom: 24px;
  }

  .skill-area .skill-parent {
    padding: 28px;
  }
}


.clients-slider .swiper-wrapper,
.clients-slider .swiper-wrapper .swiper-slide {
  height: 450px;
  min-height: 0;
}

/* The scrim was pinned to 100vh, far taller than the banner. */
.clients-slider .swiper-wrapper .swiper-slide:after {
  height: 100%;
}

/* A 450px banner sits mostly under the fixed header without this. */
section#hero:not([class*="-sec-wrap"]) {
  margin-top: 96px;
}


@media (min-width: 768px) {
  /* style.css pins the headline to the slide's vertical centre and the
     paragraph to bottom: 25%, each absolutely positioned. Once the
     paragraph wraps to four or five lines (tablet widths) it climbs into
     the headline. Stack them in normal flow so they can never overlap,
     whatever the width or line count. */
  .clients-slider .swiper-wrapper .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
  }

  #hero h2,
  #hero p {
    position: relative;
    inset: auto;
    display: block;
    width: auto;
    margin: 0;
    text-align: left;
  }

  #hero h2 {
    font-size: clamp(28px, 3.2vw, 46px);
    max-width: 62%;
  }

  #hero p {
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.65;
    max-width: 50%;
    margin-top: 16px;
  }
}

/* Tablet: 50% left the paragraph in a very narrow, tall column. */
@media (min-width: 768px) and (max-width: 991px) {
  #hero h2 { max-width: 80%; }
  #hero p  { max-width: 72%; }
}

@media (max-width: 767px) {
  /* The mobile header is two rows, so it needs more clearance than the
     96px above — which would otherwise win, being later in the file. */
  section#hero:not([class*="-sec-wrap"]) {
    margin-top: 122px;
  }
}


.clients-slider .swiper-wrapper .swiper-slide {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}


.partners-lead {
  padding-top: 18px;
  padding-bottom: 44px;
}

.partners-lead .partner-grid {
  max-width: 760px;
}


.partners-lead .section-title {
  padding-bottom: 22px;
}

.partners-lead .section-title h2 {
  margin-bottom: 8px;
}

.partners-lead .section-title p.sub-heading {
  font-size: 32px;
}

.partners-lead .partner-item {
  min-height: 112px;
  padding: 20px 22px;
}



.trust-strip {
  margin-top: 0;
  padding: 8px 0 64px;
}

@media (max-width: 767px) {
  .partners-lead {
    padding-top: 16px;
    padding-bottom: 30px;
  }

  .partners-lead .section-title { margin-bottom: 22px; }

  .trust-strip {
    padding: 4px 0 44px;
  }
}


@media (max-width: 767px) {
  .clients-slider .swiper-wrapper,
  .clients-slider .swiper-wrapper .swiper-slide {
    height: 520px;
  }

  #hero h2 {
    font-size: 26px;
    line-height: 1.22;
    padding: 0 26px;
    letter-spacing: -0.02em;
  }

  #hero p {
    font-size: 14.5px;
    line-height: 1.6;
    padding: 0 26px;
    /* A measure this narrow reads better slightly tightened than
       stretched to the last pixel of the screen. */
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
  }

  /* Give the headline and paragraph a cleaner split than 48% / 55%,
     which left them nearly touching once the text wrapped. */
  .clients-slider .swiper-slide:has(p) h2 {
    bottom: 54%;
  }

  .clients-slider .swiper-slide:has(p) p {
    top: 49%;
  }
}

@media (max-width: 420px) {
  .clients-slider .swiper-wrapper,
  .clients-slider .swiper-wrapper .swiper-slide {
    height: 560px;
  }

  #hero h2 { font-size: 24px; padding: 0 20px; }
  #hero p  { font-size: 14px; padding: 0 20px; }
}