/* ==========================================================================
   Tridev Biosciences — static HTML/CSS build (WordPress replacement)
   Palette + type sampled from the original site.
   ========================================================================== */

:root {
  --navy: #1d2864;
  --navy-dark: #001068;
  --teal: #2ad2c1;
  --teal-dark: #0e707e;
  --green: #00fb8a;
  --green-soft: #30efad;
  --cyan: #24b7d3;
  --light: #f5f8fd;
  --light-teal: #e1f6f9;
  --muted: #6f7f90;
  --line: #e6ecf5;
  --white: #fff;

  /* Chakra Petch for headings/UI, Heebo for body copy. Red Hat Display is also
     loaded, but only for the two places production actually uses it: the 404
     number and the About page's "Broad Range of Pharma Solutions" heading — so
     it's applied per-rule rather than sitting in this stack. */
  --font-head: "Chakra Petch", sans-serif;
  --font-body: "Heebo", sans-serif;

  /* Container widths, read from the production stylesheet:
     content sections are boxed at 1140px, but the top bar and header rows
     override their container to 1720px — hence the wider header. */
  --wrap: 1140px;
  --wrap-wide: 1720px;
  --radius: 14px;
  --shadow: 0 18px 40px rgba(29, 40, 100, 0.08);
  --shadow-lg: 0 24px 60px rgba(29, 40, 100, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Safety net for the full-bleed decorative layers. `clip` rather than
     `hidden` because `hidden` would turn the body into a scroll container and
     break the sticky header. */
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  font-weight: 600; /* theme uses 600 for h1–h6, not 700 */
}

h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.25rem);
}
/* Theme default for a section heading (.pxl-heading title) is 40px, stepping
   to 35px then 30px. The big centred section heads override this to 48px —
   see .section-head h2 below. */
h2 {
  font-size: clamp(1.9rem, 3vw, 40px);
}
h3 {
  font-size: 1.28rem;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--teal-dark);
  text-decoration: none;
}

a:hover {
  color: var(--navy);
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------- layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 90px 0;
  position: relative;
}

.section--light {
  background: var(--light);
}

.section--tight {
  padding: 66px 0;
}

/* Decorative section backgrounds, matching production. Both sit on the same
   #F5F8FD tint so Expertise and Why-Tridev read as one continuous band. */

/* Our Expertise — bg-sv shape anchored bottom-centre and scaled to cover */
.section--shape-sv {
  background-color: var(--light);
  background-image: url("../assets/img/bg-sv.png");
  background-position: bottom center;
  background-size: cover;
  padding: 100px 0 10px;
}

/* Why Tridev Biosciences — bg2 shape, offset 70px down and left-anchored,
   drawn at its natural size rather than scaled */
.section--shape-2 {
  position: relative;
  z-index: 1;
  /* contains the bg-round circle that bleeds past the right edge */
  overflow: hidden;
  background-color: var(--light);
  background-image: url("../assets/img/bg2.png");
  background-position: 0 70px;
  background-repeat: no-repeat;
  background-size: auto;
  padding: 110px 0 60px;
}

.grid {
  display: grid;
  gap: 30px;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Elementor's "extended" column gap is 15px of padding per column, i.e. a
   30px gutter — not the 55px I had, which was starving the columns. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

/* production top-aligns the photo with the eyebrow in the Why-Tridev section */
.split--top {
  align-items: start;
}

.split--wide-left {
  grid-template-columns: 1.15fr 1fr;
}

/* ------------------------------------------------------------- headings --- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  /* theme sets text-transform:none on section subtitles — they're title case */
  text-transform: none;
  color: var(--teal);
  margin-bottom: 12px;
}

.eyebrow img {
  width: 20px;
  flex: none;
}

.section-head {
  max-width: 760px;
  margin-bottom: 50px;
}

/* centred section heads run larger — 48px in production */
.section-head h2 {
  font-size: clamp(2rem, 3.4vw, 48px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 40px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, border-color 0.18s ease;
}

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

.btn--primary {
  background: linear-gradient(120deg, var(--teal), var(--green-soft));
  color: var(--navy);
  box-shadow: 0 12px 26px rgba(42, 210, 193, 0.35);
}

.btn--primary:hover {
  color: var(--navy);
}

.btn--navy {
  background: var(--navy);
  color: var(--white);
}

.btn--navy:hover {
  color: var(--white);
  background: var(--navy-dark);
}

.btn--ghost {
  border-color: rgba(29, 40, 100, 0.2);
  color: var(--navy);
}

.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.btn--white {
  background: var(--white);
  color: var(--navy);
}

.btn--white:hover {
  color: var(--teal-dark);
}

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

/* --------------------------------------------------------------- topbar --- */

/* White strip; the phone block is a navy panel that bleeds off the left edge
   of the viewport and is cut on a diagonal at its right edge. */
.topbar {
  background: var(--white);
  color: var(--navy);
  font-size: 0.94rem;
  border-bottom: 1px solid #eee; /* theme uses #EEEEEE here, not --line */
}

.topbar__inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding-right: 20px;
}

.topbar a {
  color: inherit;
}

.topbar a:hover {
  color: var(--teal-dark);
}

.topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--navy);
  color: var(--white);
  /* bleed to the viewport edge, then pad the content back to the grid */
  margin-left: calc(50% - 50vw);
  padding: 9px 52px 9px calc(50vw - 50% + 20px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
  flex: none;
}

.topbar__phone a {
  color: var(--white);
}

.topbar__phone a:hover {
  color: var(--green);
}

/* The handset rocks back and forth continuously, as in the theme
   (keyframes shakeThatBooty: ±20deg over 1s). */
@keyframes phone-shake {
  33% {
    transform: rotateZ(20deg);
  }
  67% {
    transform: rotateZ(-20deg);
  }
  100% {
    transform: rotateZ(20deg);
  }
}

.topbar__phone-icon svg,
.footer-contact .call-block__icon svg {
  animation: phone-shake 1s ease infinite;
}

/* 32px circle using the theme's gradient pair (--gradient-color-from/-to) */
.topbar__phone-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(to right, var(--cyan), var(--green-soft));
  color: var(--white);
  flex: none;
}

/* Label, then the round icon, then the number — all on one line.
   Theme rule: the label is white, with only "Contact Us" (its <cite>) in the
   primary teal. Label and number are both 14px there. */
.topbar__phone small {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  margin-right: 6px;
}

.topbar__phone cite {
  font-style: normal;
  color: var(--teal);
}

.topbar__phone > a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  white-space: nowrap;
}

.topbar__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-block: 12px;
  font-size: 14px;
}

.topbar__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 12px;
  padding-right: 15px;
  white-space: nowrap;
}

/* production draws a short 15px hairline on each item's right edge rather than
   a full-height divider between them */
.topbar__item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background-color: #eee;
}

.topbar__item:last-child {
  margin-right: 0;
  padding-right: 0;
}

.topbar__item:last-child::after {
  display: none;
}

.topbar__icon {
  flex: none;
  min-width: 15px;
  color: var(--teal);
}

/* --------------------------------------------------------------- header --- */

/* Keyboard users get a way past the nav without tabbing through every link.
   Visually hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Opaque, as in production. A translucent white + backdrop-filter tinted the
     whole row blue once the navy page hero scrolled underneath it. */
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

/* the header row uses the wide container, like the top bar */
.site-header .wrap {
  max-width: var(--wrap-wide);
  display: flex;
  align-items: center;
  gap: 22px;
  padding-block: 16px;
}

.logo img {
  height: 74px;
  width: auto;
}

.nav {
  margin-left: auto;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--navy);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-link {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--light);
  color: var(--navy);
  flex: none;
}

.icon-link:hover {
  background: var(--teal);
  color: var(--white);
}

/* thin rule between the nav icons and whatever follows them */
.header__divider {
  width: 1px;
  height: 30px;
  background: var(--line);
  flex: none;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: relative;
}

.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 4px;
}

/* ----------------------------------------------------------------- hero --- */

/* Full-bleed background, centred headline, and a large circular facility
   photo that bleeds off the right edge with the play button on its rim. */
/* Full-width section, 90px block padding, as in production. The background
   lives in its own layer so it can be parallaxed independently. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 700px;
  padding: 90px 0;
  display: grid;
  align-items: center;
}

/* Oversized by 60px on the right/bottom (matching the theme) so the layer can
   move on scroll without exposing an edge. */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: -60px;
  bottom: -60px;
  background: url("../assets/img/bg-slide1.jpg") center center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}

/* production overlay is #FFFFFFD9 — flat white at 85% */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 1;
}

/* Two columns like the original: the copy is centred *within the left
   column*, not across the whole viewport, and the circle owns the right. */
/* 55% / 45% columns, matching the production section */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 55% 45%;
}

/* the copy sits in a 760px box, centred inside the left column.
   pointer-events are disabled on the wrapper so this layer can never swallow
   clicks meant for the play button sitting over on the right. */
.hero__inner {
  pointer-events: none;
}

.hero__copy {
  grid-column: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  pointer-events: auto;
}

/* The theme stacks a solid copy of the headline over a gradient copy to get a
   coloured offset shadow; a text-shadow reproduces it without the duplicate. */
/* production: 75px / 600 / 1.3em / #000, capped at 708px and centred */
.hero__title {
  max-width: 708px;
  margin: 0 auto 26px;
  color: #000;
  font-weight: 600;
  font-size: 75px;
  line-height: 1.3em;
  letter-spacing: 0;
  text-shadow: -3px 3px 0 rgba(42, 210, 193, 0.85);
}

/* production: 20px, teal, capitalised, inside a 510px box */
.hero__sub {
  max-width: 510px;
  margin: 0 auto;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 20px;
  text-transform: capitalize;
  color: var(--teal);
}

@media (max-width: 1024px) {
  .hero__title {
    font-size: 50px;
  }
}

@media (max-width: 767px) {
  .hero__title {
    font-size: 40px;
  }
}

/* The curved "cylinder" profile comes from the theme's own PNG mask
   (image-banner-mask.png, 737x886) — not a border-radius circle. Sized by
   height so it slightly overflows the section, as it does in production. */
.hero__figure {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(12%, -50%);
  height: 116%;
  aspect-ratio: 737 / 886;
  margin: 0;
  z-index: 3; /* above .hero__overlay so the photo isn't washed out */
}

.hero__figure img.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url("../assets/img/image-banner-mask.png");
  mask-image: url("../assets/img/image-banner-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* slow ken-burns, matching the theme's 9s zoom-in-zoom-out */
  animation: hero-zoom 9s ease-out infinite;
}

@keyframes hero-zoom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 120px white disc on the left curve, as in the theme */
.hero__play {
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--teal);
  display: grid;
  place-items: center;
  z-index: 4;
  box-shadow: 0 14px 34px rgba(29, 40, 100, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero__play img {
  max-height: 46px;
  width: auto;
  position: relative;
  z-index: 1;
}

.hero__play:hover {
  background: var(--green);
  transform: translateY(-50%) scale(1.05);
}

/* Below the two-column breakpoint the copy takes the full width and the
   masked panel recedes behind it. */
@media (max-width: 1100px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__figure {
    height: 100%;
    transform: translate(26%, -50%);
    opacity: 0.4;
  }

  .hero__play {
    width: 96px;
    height: 96px;
    left: auto;
    right: 62%;
  }

  .hero__play img {
    max-height: 36px;
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: 560px;
  }

  .hero__figure {
    transform: translate(34%, -50%);
    opacity: 0.28;
  }

  .hero__play {
    width: 82px;
    height: 82px;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero__play:hover {
    transform: translate(-50%, -50%) scale(1.05);
  }

  .hero__play img {
    max-height: 30px;
  }
}

/* --------------------------------------------------------- video modal --- */

.video-modal[hidden] {
  display: none;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 34, 0.82);
  backdrop-filter: blur(3px);
  animation: modal-fade 0.22s ease both;
  cursor: pointer;
}

.video-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  animation: modal-rise 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.video-modal__close:hover {
  background: var(--teal);
  color: var(--navy);
  transform: rotate(90deg);
}

/* stops the page scrolling behind the open lightbox */
body.has-modal {
  overflow: hidden;
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

@media (max-width: 620px) {
  .video-modal__close {
    top: -46px;
  }
}

/* ---------------------------------------------------------- expertise --- */

/* Card metrics taken from the theme's .pxl-iconbox-grid1: 8px radius, no
   border, soft shadow, and the number badge tucked into the top-right corner
   where the card's overflow clips it. */
.svc-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 8px;
  padding: 30px 35px;
  box-shadow: 0 2px 11px 0 rgba(13, 14, 67, 0.08);
  transition: box-shadow 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.svc-card:hover {
  box-shadow: 0 10px 26px 0 rgba(13, 14, 67, 0.13);
}

/* 85px badge, oversized and offset so only its rounded corner shows */
.svc-card__num {
  position: absolute;
  top: -28px;
  right: -25px;
  width: 85px;
  height: 85px;
  padding: 30px 30px 15px 20px;
  border-radius: 50% 0 50% 50%;
  background-image: linear-gradient(
    to bottom,
    var(--cyan),
    var(--green-soft)
  );
  color: var(--white);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: end;
  transition: top 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.svc-card:hover .svc-card__num {
  top: -25px;
}

/* icon + title share a row, divided from the copy by a hairline */
.svc-card__meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  padding-right: 30px;
  border-bottom: 1px solid #eee;
}

.svc-card__icon {
  position: relative;
  min-width: 50px;
  max-width: 50px;
  margin-right: 20px;
  flex: none;
}

/* soft shadow that fades in under the icon on hover */
.svc-card__icon::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 13px;
  background: url("../assets/img/icon-shadow.png") center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.24, 0.74, 0.58, 1);
}

.svc-card:hover .svc-card__icon::before {
  opacity: 1;
}

.svc-card__icon img {
  width: auto;
  transition: transform 0.3s cubic-bezier(0.24, 0.74, 0.58, 1);
}

.svc-card:hover .svc-card__icon img {
  transform: rotate(10deg) translateY(-10px);
}

.svc-card h3 {
  margin: 0;
  font-size: 20px;
  color: var(--navy);
}

.svc-card h3 a {
  color: var(--navy);
}

.svc-card h3 a:hover {
  color: var(--teal);
}

.svc-card p {
  margin: 0;
  font-size: 15px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--teal-dark);
}

.arrow-link::after {
  content: "→";
  transition: transform 0.2s ease;
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

/* ----------------------------------------------------------- why tridev --- */

/* Production wraps this photo in .pxl-image-effect2, which floats it up and
   down by 10px on a 3s loop (theme keyframes: pxl_bottom_top_small). */
.why-figure {
  position: relative;
  animation: photo-float 3s ease-out infinite;
}

@keyframes photo-float {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.why-figure img.why-photo {
  width: 100%;
  border-radius: 8px;
}

/* The copy sits behind a 4px teal rule — border-left with 20px of padding,
   at 15px/28px, exactly as the theme sets it. */
.why-text {
  margin: 0 0 30px;
  padding: 3px 0 3px 20px;
  border-left: 4px solid var(--teal);
  font-size: 15px;
  line-height: 28px;
}

.why-text p:last-child {
  margin-bottom: 0;
}

/* positioning context for .why-round — production anchors the circle to this
   column, not to the section */
.why-copy {
  position: relative;
}

/* The two badges sit on one row. Their intrinsic widths (264px + 265px) just
   overflow the 522px column, so the rating badge is allowed to shrink rather
   than wrap to a second line. */
.why-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Google-Rating.png carries its own transparent padding, so only a small
     gap is needed to match production's spacing */
  gap: 8px;
  margin-top: 23px;
}

/* white card holding the phone number */
.call-card {
  flex: 0 0 auto; /* keep the number on one line */
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--white);
  border-radius: 10px;
  padding: 14px 20px 14px 16px;
  box-shadow: 0 2px 14px rgba(13, 14, 67, 0.1);
}

.call-card__icon {
  width: 57px;
  height: 57px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  display: grid;
  place-items: center;
  flex: none;
}

.call-card__icon img {
  max-height: 23px;
  width: auto;
}

.call-card__label {
  display: block;
  font-size: 14px;
  line-height: 1.785;
  color: var(--teal);
}

.call-card strong {
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: var(--navy);
}

.call-card strong a {
  color: inherit;
}

/* shrinks from its 265px natural width when the column is tight */
.rating-badge {
  flex: 0 1 265px;
  min-width: 0;
  line-height: 0;
}

.rating-badge img {
  width: 100%;
  max-width: 265px;
  height: auto;
}

/* below the two-column layout there's no space pressure, so let them stack */
@media (max-width: 700px) {
  .why-badges {
    flex-wrap: wrap;
    gap: 16px;
  }

  .rating-badge {
    flex: 0 0 auto;
  }
}

/* large soft circle sitting behind the two badges */
.why-round {
  position: absolute;
  bottom: 0;
  right: -120px;
  z-index: -1;
  width: 425px;
  pointer-events: none;
}

.call-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.call-block__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--light-teal);
  display: grid;
  place-items: center;
  flex: none;
}

.call-block__icon img {
  width: 26px;
}

.call-block small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.call-block strong {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--navy);
}

/* --------------------------------------------------------------- checks --- */

.checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 11px;
  color: var(--navy);
  font-weight: 500;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2864' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

/* ------------------------------------------------------------- counters --- */

.counters {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  /* production layers a flat #001068 at ED (93%) over the photo, so use a
     solid two-stop gradient as the overlay layer rather than a colour in the
     shorthand (which would paint behind the image). */
  background: linear-gradient(
      rgba(0, 16, 104, 0.93),
      rgba(0, 16, 104, 0.93)
    ),
    url("../assets/img/bg-counter-image.jpg") center / cover no-repeat;
}

.counters h2 {
  color: var(--white);
}

/* --- homepage variant: white wave + gradient curve across the top --------- */

.counters--decorated {
  overflow: hidden;
  /* production gives this column 300px of top padding to clear the wave */
  padding: 300px 0 150px;
}

.counters__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.counters__curve {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* Three Frame-1 glow shapes production layers into this band — top-centre,
   bottom-left and bottom-right. z-index 0 keeps them above the section's own
   background but under the wave (1), curve (2) and content (3). */
.counters__frame {
  position: absolute;
  z-index: 0;
  width: auto;
  pointer-events: none;
}

.counters__frame--top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-height: 290px;
}

.counters__frame--left {
  bottom: 0;
  left: -50px;
}

.counters__frame--right {
  bottom: 0;
  right: 30px;
  max-height: 320px;
}

/* keep the content above both decorative layers */
.counters .wrap {
  position: relative;
  z-index: 3;
}

/* 50px, with the middle word in green. Left-aligned so it starts level with
   the first counter's content (2px border + 50px padding). */
.counters__heading {
  color: var(--white);
  font-size: clamp(2rem, 3.6vw, 50px);
  line-height: 1.2em;
  text-align: left;
  padding-left: 52px;
  margin: 0 0 50px;
}

.counters__heading span {
  color: var(--green);
}

/* Four across on desktop, as production has it — the full-height divider lines
   are designed around four narrow lanes and don't survive being stretched over
   two. Two-per-row kicks in from the tablet breakpoint down. */
.counters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Each counter carries a short 2px teal rule plus a very tall faint divider,
   which is what draws the full-height lines between columns. */
.counters__grid .counter {
  position: relative;
  text-align: left;
  padding-left: 50px;
  border-left: 2px solid var(--teal);
}

.counters__grid .counter::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2000px;
  background-color: rgba(255, 255, 255, 0.2);
}

.counter__icon {
  display: block;
  margin-bottom: 25px;
  color: var(--white);
}

.counter__num {
  display: inline-flex;
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  /* gradient text fill, as in the theme */
  background-image: linear-gradient(to right, var(--cyan), var(--green-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.counter__title {
  display: block;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
}

@media (max-width: 900px) {
  .counters--decorated {
    padding: 190px 0 90px;
  }

  .counters__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 0;
  }

  /* purely decorative — they crowd a narrow band */
  .counters__frame {
    display: none;
  }
}

/* Keep two per row on phones — stacking them made the band very tall. The
   pieces are scaled down so a pair still fits a ~400px content width. */
@media (max-width: 620px) {
  .counters--decorated {
    padding: 110px 0 60px;
  }

  .counters__grid {
    row-gap: 34px;
  }

  .counters__grid .counter {
    padding-left: 20px;
  }

  .counter__icon {
    margin-bottom: 14px;
  }

  .counter__icon svg {
    height: 44px;
    width: auto;
  }

  .counter__num {
    font-size: 2rem;
  }

  .counter__title {
    font-size: 16px;
  }

  .counters__heading {
    padding-left: 22px;
  }
}

/* Tighten a little further on narrow phones so a pair still fits comfortably
   at 375–390px (iPhone SE / 12–15 Pro), which the previous 400px cut-off
   needlessly excluded. */
@media (max-width: 430px) {
  .counters__grid .counter {
    padding-left: 16px;
  }

  .counter__icon svg {
    height: 38px;
  }

  .counter__num {
    font-size: 1.75rem;
  }

  .counter__title {
    font-size: 15px;
  }
}

/* only genuinely too narrow for a pair below this */
@media (max-width: 340px) {
  .counters__grid {
    grid-template-columns: 1fr;
  }
}

/* --- shared counter styles (also used by the About page) ------------------ */

.counter {
  text-align: center;
}

.counter strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
}

.counter span {
  font-size: 0.96rem;
  letter-spacing: 0.03em;
}

.counter p {
  font-size: 0.9rem;
  margin: 8px 0 0;
  opacity: 0.85;
}

/* ------------------------------------------------------------- products --- */

/* One rounded card: tinted panel on the left (bg.jpg, anchored bottom-right)
   and the photo filling the right column edge to edge. 45/55 split. */
.products__card {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  background: url("../assets/img/bg.jpg") bottom right / cover no-repeat;
}

.products__copy {
  padding: 70px 30px 70px 40px;
}

/* Heebo 25px/500 here, not the usual Chakra Petch heading */
.products__title {
  max-width: 320px;
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: 0;
  color: var(--navy);
}

.products__title span {
  color: var(--teal);
}

.products__text {
  max-width: 420px;
  margin: 0 0 30px;
  font-size: 14px;
}

/* production stacks these — together they're wider than the 45% column */
.products__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

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

/* --------------------------------------------------------- pill buttons --- */

.btn--pill {
  padding: 0 30px;
  font-size: 16px;
  font-weight: 700;
  line-height: 60px;
  border-radius: 35px;
  background: linear-gradient(to right, var(--cyan), var(--green-soft));
  color: var(--navy);
}

.btn--pill:hover {
  color: var(--navy);
  box-shadow: 0 12px 26px rgba(42, 210, 193, 0.35);
}

/* ------------------------------------------------------------ specialty --- */

/* Solid teal band whose colour stops 70px short of the section's bottom, so
   the cards overhang onto white. Painting the teal with a pseudo-element is
   deterministic — a negative margin on the grid depends on margin collapsing. */
.specialty-band {
  position: relative;
  padding: 90px 0 70px;
}

/* the teal stops 150px above the section's bottom, so the band reads shorter
   and more of the cards overhang onto white */
.specialty-band::before {
  content: "";
  position: absolute;
  inset: 0 0 150px 0;
  background: var(--teal);
  z-index: 0;
}

.specialty-band > .wrap {
  position: relative;
  z-index: 1;
}

/* the hexagon ornament sits behind the heading, bleeding above it */
.specialty-band__head {
  position: relative;
  margin-bottom: 60px;
}

.specialty-band__shape {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 134px;
  height: auto;
  pointer-events: none;
}

.specialty-band__title {
  position: relative;
  color: var(--white);
  text-align: center;
  font-size: clamp(2rem, 3.4vw, 48px);
  margin: 0;
}

.specialty-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px; /* carousel gutter in production */
}

.specialty-card {
  background: var(--white);
  border-radius: 8px;
  padding: 50px 40px;
  text-align: center;
  box-shadow: 0 2px 11px 0 rgba(13, 14, 67, 0.08);
}

.specialty-card__icon {
  display: block;
  margin: 0 auto 28px;
  width: 64px;
  color: var(--navy);
}

.specialty-card h3 {
  font-size: 20px;
  margin: 0 0 16px;
}

.specialty-card p {
  font-size: 15px;
  margin: 0;
}

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

  .products__copy {
    padding: 50px 24px;
  }

  .products__media {
    order: -1;
  }

  .products__media img {
    height: 320px;
  }

  .specialty-band {
    padding-bottom: 50px;
  }

  .specialty-band::before {
    inset: 0 0 50px 0;
  }

  .specialty-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------- vision cards --- */

.vm-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin: 15px 0;
  background: var(--white);
  border-radius: 20px;
  padding: 50px 20px 50px 35px;
  box-shadow: 0 1px 10px rgba(111, 127, 144, 0.09);
}

/* Two oversized circles tucked into the top-left corner: a pale one that's
   always visible, and a teal one parked off-card that slides in on hover.
   Negative z-index puts them over the card's background but under its text. */
.vm-card::before,
.vm-card::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -150px;
  left: -140px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  transition: all 0.23s cubic-bezier(0.24, 0.74, 0.58, 1);
}

.vm-card::before {
  background-color: #f2f5ff;
  transition-delay: 0.12s;
}

.vm-card::after {
  background-color: var(--teal);
  transform: translateX(-190px);
  transition-delay: 0.22s;
}

.vm-card:hover::after {
  transform: translateX(0);
}

/* icon and the uppercase label share a row, with the copy below */
.vm-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

/* 60px ring, 3px teal, image scaled slightly and clipped by the circle */
.vm-card__icon {
  flex: none;
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border: 3px solid var(--teal);
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
}

.vm-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.1);
}

/* the label block takes the remaining width */
.vm-card__head h3 {
  flex-grow: 1;
  padding-right: 20px;
  margin: 0 0 5px;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.vm-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* the About page uses .vm-card with a bare <img>, not the ringed icon */
.vm-card > img {
  width: 72px;
  margin-bottom: 20px;
}

/* ----------------------------------------------------------------- certs --- */

.certs {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: center;
}

.certs img {
  height: 110px;
  width: auto;
}

/* --------------------------------------------------- reasons to choose us --- */

/* Dark band: bg-sc2 photo behind a #001068 overlay at 83%. Content sits in a
   58% column with the decorative figure filling the rest.
   All rules are scoped to .reasons so the Manufacturing page's plain
   .reason cards keep their own styling. */
/* No top padding: the pale panel has to start at the very top of the section,
   with the 110px inset applied to the row instead. */
.reasons {
  position: relative;
  overflow: hidden;
  padding: 0 0 120px;
  border-top: 1px solid #f4fcfd;
}

.reasons__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: -60px;
  bottom: -60px;
  background: url("../assets/img/bg-sc2.jpg") top center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}

.reasons__overlay {
  position: absolute;
  inset: 0;
  background-color: #001068;
  opacity: 0.83;
  z-index: 1;
}

.reasons .wrap {
  position: relative;
  z-index: 2;
}

/* The reasons content sits on a pale panel laid over the dark band, bleeding
   off the left edge of the viewport and stopping short of the right column.
   Because the panel is light, the copy stays navy — which is why production
   has no white-text override on these headings. */
/* 58% / 42% row: pale panel on the left, teal form card on the right.
   Each column keeps its natural height — the card is the taller of the two and
   overhangs the panel's bottom edge, which is what production shows.
   position:relative so the cut-out can anchor to the row's full height. */
.reasons__row {
  position: relative;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: start;
  /* pushes both columns down, so the teal card starts level with the panel's
     copy and the pale panel shows above it */
  padding-top: 110px;
}

.reasons__panel {
  position: relative;
  /* bottom padding keeps the copy clear of the cut-out */
  padding: 0 40px 80px 0;
}

/* The copy sits above the cut-out (z-index 1) — production reads the text over
   the scientist, not behind him. */
.reasons__head,
.reasons .reason {
  position: relative;
  z-index: 2;
}

/* The theme puts two decorative layers on this row (its .bg-section-contact
   class), which replace the tint + dot-grid I'd been approximating:

   ::after  — the pale panel itself, carrying bg-map.png at its top right. That
              map graphic is the dotted texture; it isn't a CSS dot pattern.
   ::before — a 185px white strip starting 130px before the row's right edge,
              tiling Frame.png horizontally and scrolling it on a 15s loop.
              This is the animated hexagon block at the top right. */
.reasons__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 130px;
  width: 200%; /* bleeds left past the viewport; the section clips it */
  background-color: #f4fcfd;
  background-image: url("../assets/img/bg-map.png");
  background-repeat: no-repeat;
  background-position: top right;
  z-index: -2;
}

/* Desktop only, as in the theme — below 992px the strip would just be a stray
   white block hanging off the side of a stacked layout. */
@media screen and (min-width: 992px) {
  .reasons__row::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% - 130px);
    width: 100%;
    height: 185px;
    overflow: hidden;
    background-color: #fff;
    background-image: url("../assets/img/Frame.png");
    background-repeat: repeat-x;
    z-index: -3;
    animation: BackgroundAnimated 15s linear infinite;
  }
}

@keyframes BackgroundAnimated {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

.reasons__head {
  max-width: 430px;
  margin-bottom: 50px;
}

.reasons__head h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 3.4vw, 42px);
}

.reasons .reason {
  display: flex;
  flex-wrap: wrap;
  max-width: 450px;
  margin-bottom: 40px;
  /* reset the card look used on the Manufacturing page */
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.reasons .reason:last-child {
  margin-bottom: 0;
}

/* 60px tinted disc holding a 30px glyph */
.reasons .reason__icon {
  flex: none;
  width: 60px;
  height: 60px;
  margin-right: 23px;
  border-radius: 60px;
  background-color: rgba(42, 210, 193, 0.2);
  display: grid;
  place-items: center;
}

/* the middle box is tinted blue in production (#4286F52B) */
.reasons .reason--alt .reason__icon {
  background-color: rgba(66, 134, 245, 0.17);
}

.reasons .reason__icon img {
  width: 30px;
  height: 30px;
  margin: 0;
}

.reasons .reason__body {
  flex: 1;
  min-width: 0;
}

.reasons .reason h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--navy);
}

.reasons .reason p {
  margin: 0;
  font-size: 17px;
  color: var(--muted);
}

/* The cut-out anchors to the row, so bottom:0 lands on the taller column (the
   card) rather than the panel. Its right edge meets the card's left edge, with
   a little tuck underneath — the card is z-index 2, so it wins the overlap. */
.reasons__figure {
  position: absolute;
  right: 38%;
  bottom: 0;
  max-height: 560px;
  width: auto;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1024px) {
  /* stack the panel and the form card */
  .reasons__row {
    grid-template-columns: 1fr;
    padding-top: 60px;
  }

  /* the 130px right inset would leave a dark strip beside a stacked layout */
  .reasons__row::after {
    right: 0;
  }

  .reasons__panel {
    padding: 0 0 40px;
  }

  /* production hides the cut-out below desktop */
  .reasons__figure {
    display: none;
  }
}

/* ------------------------------------------------------ medical standards --- */

/* Parallax photo band with a shape overlay on top. No top padding in
   production — instead a 280px spacer clears the Vision/Mission cards that
   hang down into it, which is what the padding-top reproduces here. */
.standards {
  position: relative;
  overflow: hidden;
  padding: 280px 0 110px;
}

/* oversized by 60px right/bottom so it can drift without exposing an edge */
.standards__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: -60px;
  bottom: -60px;
  background: url("../assets/img/bg-call-scaled.jpg") top center / cover
    no-repeat;
  will-change: transform;
  z-index: 0;
}

.standards__shape {
  position: absolute;
  inset: 0;
  background: url("../assets/img/bg-shape.png") center center / cover no-repeat;
  z-index: 1;
}

.standards .wrap {
  position: relative;
  z-index: 2;
}

.cert-section {
  padding: 50px 20px;
  color: #fff;
  text-align: center;
}

.cert-title {
  margin: 0 0 15px;
  font-size: clamp(2.4rem, 5vw, 68px);
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.cert-sub-title {
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  color: #f0f0f0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.cert-text {
  max-width: 900px;
  margin: 0 auto 40px;
  font-size: 18px;
  line-height: 28px;
  color: #ddd;
}

.cert-imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 20px;
}

.cert-imgs img {
  width: 180px;
  height: auto;
  transition: transform 0.3s ease;
}

.cert-imgs img:hover {
  transform: scale(1.1);
}

/* the Vision/Mission cards hang 200px down into the band below */
.vision-cards {
  position: relative;
  z-index: 2;
  margin-bottom: -200px;
}

@media (max-width: 900px) {
  .standards {
    padding-top: 190px;
  }

  /* keep the overlap smaller than the clearance above */
  .vision-cards {
    margin-bottom: -150px;
  }

  .cert-imgs {
    gap: 30px;
  }

  .cert-imgs img {
    width: 160px;
  }
}

@media (max-width: 620px) {
  .standards {
    padding-top: 80px;
  }

  /* no overlap once the cards stack */
  .vision-cards {
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------------- pricing --- */

.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.price-card:hover,
.price-card--featured {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(42, 210, 193, 0.6);
}

.price-card__tag {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 30px;
}

.price-card__amount {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--teal-dark);
  line-height: 1;
  margin: 16px 0 4px;
}

.price-card__per {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}

.price-card ul {
  margin-bottom: 26px;
}

.price-card ul li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--navy);
}

.price-card ul li:last-child {
  border-bottom: none;
}

.price-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.price-card__note {
  font-size: 0.8rem;
  margin: 16px 0 0;
  opacity: 0.8;
}

/* --------------------------------------------------------- tick reasons --- */

.reason {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.reason:hover {
  border-color: rgba(42, 210, 193, 0.55);
  box-shadow: var(--shadow);
}

.reason img {
  width: 54px;
  margin-bottom: 18px;
}

/* ----------------------------------------------------------- reach form --- */

/* -------------------------------------------------------- reach us card --- */

/* Teal card in the right column of the reasons row (was a standalone dark
   section before — production keeps it inline beside the pale panel). */
.reach-card {
  position: relative;
  z-index: 2;
  /* fills the full height of the row */
  height: 100%;
  background: var(--teal);
  padding: 40px 30px 60px;
  text-align: center;
}

.reach-card__eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 6px;
}

.reach-card__title {
  margin: 0 0 14px;
  font-size: 27px;
  color: var(--white);
}

.reach-card__text {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--white);
}

.reach-card__form {
  display: grid;
  gap: 14px;
}

.reach-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.reach-card input,
.reach-card textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--light-teal);
  border-radius: 8px;
  padding: 0 16px;
  height: 45px;
}

.reach-card textarea {
  height: auto;
  min-height: 100px;
  padding: 14px 16px;
  resize: vertical;
}

.reach-card input::placeholder,
.reach-card textarea::placeholder {
  color: var(--muted);
}

.reach-card input:focus,
.reach-card textarea:focus {
  outline: none;
  border-color: var(--navy);
}

/* production's submit is blue, not teal */
.reach-card__submit {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 45px;
  padding: 0 28px;
  border: 0;
  border-radius: 35px;
  color: var(--white);
  background-color: #4286f5;
  cursor: pointer;
  transition: background 0.18s ease;
}

.reach-card__submit:hover {
  background-color: #2f6fd8;
}

@media (max-width: 1024px) {
  .reach-card {
    padding: 32px 22px 40px;
  }
}

/* ------------------------------------------------------------- carousel --- */
/* Scroll-snap carousel: swipeable/scrollable with no JS, and main.js adds
   working pagination bullets on top. Matches the theme's swiper config —
   4 slides per view on desktop, 3 on tablet, 2 on mobile, bullets, no arrows. */

.carousel {
  position: relative;
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 22px) / 4);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  scroll-snap-align: start;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
}

.carousel__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(29, 40, 100, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.carousel__dots button[aria-current="true"] {
  background: var(--teal);
  transform: scale(1.35);
}

@media (max-width: 1024px) {
  .carousel__track {
    grid-auto-columns: calc((100% - 2 * 22px) / 3);
  }
}

@media (max-width: 700px) {
  .carousel__track {
    grid-auto-columns: calc((100% - 22px) / 2);
  }
}

/* -------------------------------------------------------------- partners --- */

/* ---------------------------------------------------- partners (on dark) --- */

.partners-row {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}

.partners-head {
  margin-bottom: 50px;
}

/* Accent green. Title case rather than production's all-caps — it reads better
   and matches every other section head on the site. */
.partners-head h2,
.partners-head .eyebrow {
  color: #61ce70;
  text-transform: none;
}

.partners-head .eyebrow {
  font-size: 14px;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}

/* white tiles at full colour — no grey-scaling on the dark band */
.partners-row .partner {
  aspect-ratio: 1;
  min-height: 0;
  background: var(--white);
  border: 0;
  border-radius: 0;
  padding: 22px;
}

.partners-row .partner img {
  filter: none;
  opacity: 1;
  max-height: 100%;
}

.partners-row .carousel__dots button {
  background: rgba(255, 255, 255, 0.35);
}

.partners-row .carousel__dots button[aria-current="true"] {
  background: var(--green);
}

.partner {
  min-height: 100px;
  height: 100%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 14px;
  transition: 0.2s ease;
}

.partner img {
  max-height: 66px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.8;
  transition: 0.2s ease;
}

.partner:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.partner:hover img {
  filter: none;
  opacity: 1;
}

/* ------------------------------------------------------------- post grid --- */

.post {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.post img {
  width: 100%;
  aspect-ratio: 74 / 60;
  object-fit: cover;
}

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

.post__meta {
  font-size: 0.82rem;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.post__tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.post__tags span {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--light-teal);
  color: var(--teal-dark);
  padding: 4px 10px;
  border-radius: 20px;
}

.post h3 {
  font-size: 1.12rem;
  margin-bottom: 14px;
}

.post .arrow-link {
  margin-top: auto;
}

/* ------------------------------------------------------------- page hero --- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(
      110deg,
      rgba(29, 40, 100, 0.93),
      rgba(14, 112, 126, 0.85)
    ),
    url("../assets/img/bg-page-title.png") center / cover no-repeat var(--navy);
}

.page-hero h1 {
  color: var(--white);
  margin-bottom: 10px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.92rem;
}

.breadcrumb a {
  color: var(--green-soft);
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.55);
}

.page-hero__thumbs {
  display: flex;
  gap: 14px;
  margin-top: 26px;
}

.page-hero__thumbs img {
  width: 150px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------- founders --- */

.member {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.member:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.member__body {
  padding: 24px;
}

.member__role {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal-dark);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.member h3 {
  margin: 6px 0 0;
  font-size: 1.18rem;
}

/* --------------------------------------------------------------- footer --- */

/* Dark teal footer with the Ellipse-3 wash sitting along the bottom edge. */
.site-footer {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  padding: 90px 0 45px;
  font-size: 0.95rem;
  background-color: #046270;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: -40px;
  bottom: 0;
  height: 305px;
  background: url("../assets/img/Ellipse-3.png") bottom center / contain
    no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

.site-footer > .wrap {
  position: relative;
  z-index: 1;
}

/* column headings: 24px white */
.site-footer h4 {
  color: var(--white);
  font-family: var(--font-head);
  font-size: 24px;
  margin: 0 0 20px;
}

/* address / intro copy: 16px / 26px, full white */
.site-footer p {
  color: var(--white);
  font-size: 16px;
  line-height: 26px;
}

.site-footer a {
  color: var(--white);
}

.site-footer a:hover {
  color: var(--green);
}

/* footer logo caps at 51px, with 38px below it before the address */
.site-footer .logo {
  display: inline-flex;
  margin-bottom: 38px;
}

.site-footer .logo img {
  height: 51px;
}

/* 40px between the address block and the social icons */
.footer-address {
  margin: 0 0 40px;
}

/* footer column headings carry a small gradient squiggle underneath */
.footer-heading {
  margin-bottom: 20px;
}

.footer-heading h4 {
  margin: 0 0 8px;
}

.footer-heading svg {
  display: block;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 46px;
}

/* Rounded pill holding phone / email / location, split by hairline dividers. */
.footer-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  background-color: #0e707e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 60px;
  padding: 14px 10px;
  margin-bottom: 34px;
}

.footer-contact > * {
  padding: 20px 30px;
}

.footer-contact > * + * {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* "Contact Us At" label: 16px/700 white */
.footer-contact .call-block small {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

/* The number is 30px/700 green with line-height:1 — without that it inherits
   the body's 1.7 and opens a ~20px gap under the label. */
.footer-contact .call-block strong,
.footer-contact .call-block strong a {
  display: block;
  color: var(--green);
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.footer-contact .call-block strong a:hover {
  color: var(--white);
}

.footer-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* pill icons are green */
.footer-contact__item svg {
  flex: none;
  color: var(--green);
}

/* email segment: 20px/600; location segment: 16px/600 */
.footer-contact__item a {
  font-size: 20px;
  font-weight: 600;
}

.footer-contact__item:last-child a {
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
}

.footer-contact__item a:hover {
  color: var(--green-soft);
}

/* 57px disc with the theme's gradient (icon-gradient) and a navy glyph */
.footer-contact .call-block__icon {
  width: 57px;
  height: 57px;
  background: linear-gradient(to right, var(--cyan), var(--green-soft));
  color: var(--navy);
}

.footer-contact .call-block__icon svg {
  width: 26px;
  height: 26px;
}

/* icon sits 15px from the text, as in the theme */
.footer-contact .call-block {
  gap: 15px;
}

/* nav links: 18px white, green on hover */
.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 18px;
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

/* the time reads green against the day label */
.footer-hours li span + span {
  color: var(--green);
}

/* spacing above comes from .footer-address, so no top margin here */
.socials {
  display: flex;
  gap: 4px;
}

/* 50px discs, #0E707E, flipping to green on hover */
.socials a {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 35px;
  background: #0e707e;
  color: var(--white);
  margin: 2px;
}

.socials a:hover {
  background: var(--green);
  color: #000;
}

/* production tints the brand name teal here, not green */
.footer-brand {
  color: var(--teal);
  font-weight: 500;
}

.footer-bottom {
  padding: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.87rem;
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The theme swaps to a separate mobile header below 1200px, which drops the
   top bar entirely. Its angled panel relies on a viewport-width bleed that
   overflows narrow screens, so it goes with it. */
@media (max-width: 1199px) {
  .topbar {
    display: none;
  }
}

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

  .split,
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .split {
    gap: 36px;
  }

  .nav {
    position: absolute;
    inset: 100% 0 auto;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
    padding: 10px 20px 20px;
  }

  .nav.is-open {
    display: block;
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-toggle {
    display: grid;
    margin-left: auto;
    order: 3;
  }

  .header__actions .icon-link {
    display: none;
  }

  .specialty {
    grid-template-columns: 1fr;
  }

  .topbar__badge {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .grid--2,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .header__actions .btn {
    display: none;
  }

  /* paired form fields are too cramped side by side on a phone */
  .reach-card__row {
    grid-template-columns: 1fr;
  }

  /* ---- footer on phones ---- */

  .site-footer {
    padding: 56px 0 32px;
    font-size: 0.92rem;
  }

  /* the ellipse wash is sized for a tall desktop footer */
  .site-footer::before {
    height: 170px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 32px;
  }

  .site-footer h4 {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .site-footer .logo {
    margin-bottom: 24px;
  }

  .footer-address {
    margin-bottom: 28px;
  }

  .footer-links a {
    font-size: 16px;
  }

  .footer-links li {
    margin-bottom: 8px;
  }

  .socials a {
    width: 44px;
    height: 44px;
  }

  /* the contact pill becomes a stack, so the dividers move to the top edges */
  .footer-contact {
    grid-template-columns: 1fr;
    border-radius: 24px;
    padding: 6px 8px;
  }

  .footer-contact > * {
    padding: 16px 18px;
  }

  .footer-contact > * + * {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .footer-contact .call-block strong,
  .footer-contact .call-block strong a {
    font-size: 24px;
  }

  .footer-contact .call-block__icon {
    width: 48px;
    height: 48px;
  }

  .footer-contact .call-block__icon svg {
    width: 22px;
    height: 22px;
  }

  /* long email/URL text must not force the pill wider than the screen */
  .footer-contact__item a,
  .footer-contact__item:last-child a {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    font-size: 0.85rem;
  }

  .logo img {
    height: 48px;
  }

  .page-hero__thumbs img {
    width: 100px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__figure img.hero__photo,
  .why-figure,
  .topbar__phone-icon svg,
  .footer-contact .call-block__icon svg,
  .reasons__row::before,
  .about-banner__pattern {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* ==========================================================================
   About page — structure mirrors production's seven sections
   ========================================================================== */

/* --- 1. banner carousel + intro copy (full width, pad 0 0 60px) ---------- */

.about-intro {
  padding: 50px 0 60px;
}

/* one banner per view */
.about-banners {
  margin-bottom: 50px;
}

.about-banners .carousel__track {
  grid-auto-columns: 100%;
  gap: 0;
}

.about-banners img {
  width: 100%;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  border-radius: 12px;
}

.about-intro__copy h2 {
  font-size: clamp(1.9rem, 3.2vw, 40px);
  margin-bottom: 25px;
}

/* production runs this whole block at 18px on the theme's 1.5 line-height and
   15px paragraph rhythm; <strong> is just bold, not recoloured */
.about-intro__copy p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.about-intro__copy strong {
  font-weight: 700;
  color: inherit;
}

/* the single highlighted line between the intro and the founder bios */
.about-intro__copy .about-intro__highlight {
  color: #4286f5;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* --- 2. family-driven vision (50/50, pad 0 0 90px) ---------------------- */

.about-vision {
  padding: 0 0 90px;
}

.about-vision h2 {
  font-size: clamp(1.9rem, 3.2vw, 40px);
}

/* icon left, copy right — production's pxl_icon_box */
.icon-box {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-top: 30px;
}

/* box-style1: a white rounded tile with a gradient tile rotated behind it. Both
   layers are pseudo-elements at z-index -2; the later one (white) covers the
   rotated gradient, leaving just its corners showing. */
.icon-box__icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box__icon::before,
.icon-box__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(42, 210, 193, 0.5);
  transition: all 0.3s ease;
}

.icon-box__icon::before {
  transform: rotate(-80deg);
  background-image: linear-gradient(120deg, var(--cyan), var(--green-soft));
}

.icon-box__icon::after {
  background-color: var(--white);
}

.icon-box:hover .icon-box__icon::before {
  transform: rotate(-75deg);
}

.icon-box__icon img {
  position: relative;
  width: 52px;
}

.icon-box h3 {
  font-size: 18px;
  margin: 0 0 10px;
}

.icon-box p {
  margin: 0;
  font-size: 15px;
}

/* the divider production places between the two boxes */
.icon-box__rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 30px 0 0;
}

/* --- 3. achievement stats (white, wide container, pad 90px) ------------- */

.about-stats {
  overflow: hidden;
}

/* production widens this container well past the 1140px default */
.about-stats > .wrap {
  max-width: 1724px;
}

/* Rounded panel carrying the world-map dot pattern; everything in the section
   sits on it. */
.about-stats__panel {
  border-radius: 30px;
  padding: 90px 0;
  background-color: #f0fbfc;
  background-image: url("../assets/img/Bg-counter.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-stats__head {
  text-align: center;
  margin-bottom: 15px;
}

.about-stats__head h2 {
  font-size: clamp(1.8rem, 2.9vw, 36px);
  line-height: 1em;
  margin: 0;
}

/* the two lines are separate widgets in production; the second carries a
   -10px top margin against the theme's 20px widget gap */
.about-stats__head h2 + h2 {
  margin-top: 10px;
}

/* pxl-counter1: teal number, navy title, centred */
.about-stats .counter strong {
  color: var(--teal);
  font-size: clamp(2.4rem, 4vw, 60px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

.about-stats .counter span {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
}

.about-stats .counter p {
  font-size: 15px;
  text-align: center;
  margin-top: 10px;
  opacity: 1;
}

/* production's inner row carries the 30px gap down to the contact line */
.about-stats .grid--4 {
  margin-bottom: 30px;
}

.about-stats__call {
  text-align: center;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
}

.about-stats__call a {
  color: #046270;
}

.about-stats__call a:hover {
  color: var(--teal);
}

/* --- 4. best experience (pad 90px 0 110px) ------------------------------ */

.about-experience {
  padding: 90px 0 110px;
}

/* Row 1 — heading on the left, the lead paragraph beside it on the right. */
.about-experience__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
  margin-bottom: 45px;
}

.about-experience__top .eyebrow,
.about-experience__top h2 {
  max-width: 556px;
}

.about-experience__top h2 {
  margin-bottom: 0;
}

.about-experience__lead {
  font-size: 18px;
  margin: 0;
}

/* Row 2 — the blue strengths card (45%) beside the video panel (55%). */
.about-experience__row {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 30px;
  align-items: stretch;
}

/* ------------------------------------------------------- strengths card --- */

.strengths-card {
  background-color: #4286f5;
  border-radius: 10px;
  padding: 55px 45px 60px;
}

.strengths-card h3 {
  color: var(--white);
  font-size: 28px;
  text-align: center;
  max-width: 287px;
  margin: 0 auto 30px;
}

.strengths-list {
  margin: 0 0 30px;
}

.strengths-list li {
  position: relative;
  padding: 0 0 5px 32px;
  color: var(--white);
  font-size: 16px;
  line-height: 32px;
  /* production's link-list divider: #FFFFFF36 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.212);
}

.strengths-list li + li {
  margin-top: 5px;
}

.strengths-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.strengths-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2864' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

/* Progress bars — the theme's pxl-progressbar-1: a 4px navy track with a
   white fill, and a square green percentage chip lifted 10px above the bar
   with a right-angled tail on its right edge pointing down at it. */
.strengths-card .bar {
  margin-left: 3px;
}

.strengths-card .bar + .bar {
  margin-top: 20px;
}

.bar__top {
  display: flex;
  align-items: flex-start;
  margin-bottom: 7px;
}

.bar__label {
  flex-grow: 1;
  margin: 0 20px 10px 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--white);
}

.bar__pct {
  position: relative;
  top: -10px;
  flex-shrink: 0;
  padding: 3px 10px 3px 8px;
  background-color: var(--green);
  color: #000;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
}

.bar__pct::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: -7px;
  width: 7px;
  height: 7px;
  background-color: var(--green);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.bar__track {
  height: 4px;
  background-color: var(--navy);
}

.bar__fill {
  display: block;
  height: 4px;
  background-color: var(--white);
}

/* ---------------------------------------------------- video side column --- */

/* The photo is the column background in production, with the play button
   centred on top of it rather than sitting on an <img>. */
.about-experience__video {
  background: url("/assets/img/bg-video.jpg") center center / cover no-repeat;
  border-radius: 10px;
  padding: 150px 0;
  display: grid;
  place-items: center;
}

.about-experience__video .hero__play {
  position: static;
  transform: none;
}

.about-experience__video .hero__play:hover {
  transform: scale(1.05);
}

/* --- 5. founding team (bg #F6FAFF, pad 90px 0 0) ------------------------ */

.team-band {
  background-color: #f6faff;
  /* Production runs this at `90px 0 0` because its name/role block is absolutely
     positioned inside the photo and only revealed on hover. Our card body is
     static and sits below the photo, so it needs real space underneath before
     the gradient band begins. */
  padding: 90px 0;
}

.team-band__head {
  max-width: 600px;
}

.team-band__head p {
  font-style: italic;
}

.team-grid .member {
  padding: 4px;
  margin-bottom: 10px;
}

/* --- 6. clients testimonial (bg-gradient, pad 100px 0 110px) ------------ */

/* Production puts this band on the theme's .bg-gradient: a left-to-right
   cyan -> soft-green ramp, so every bit of copy on it is white. */
.about-testimonials {
  padding: 100px 0 110px;
  background-image: linear-gradient(to right, var(--cyan), var(--green-soft));
  color: var(--white);
}

/* heading | intro copy | arrows, all on one centred row */
.tcar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 35px;
}

.tcar__headding {
  min-width: 35%;
  max-width: 35%;
}

.tcar__headding .eyebrow {
  color: var(--white);
  font-size: 16px;
}

.tcar__headding h2 {
  color: var(--white);
  font-size: clamp(1.9rem, 3vw, 36px);
  margin-bottom: 0;
}

.tcar__excerpt {
  flex: 1;
  margin: 0;
  padding-right: 100px;
  color: var(--white);
  font-size: 18px;
}

.tcar__arrows {
  display: flex;
}

/* 60x40 pills with a hairline border and white chevrons */
.tcar__arrow {
  width: 60px;
  height: 40px;
  border-radius: 25px;
  border: 2px solid #f2f5ff;
  background: none;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    opacity 0.25s ease;
}

.tcar__arrow + .tcar__arrow {
  margin-left: 15px;
}

.tcar__arrow--next svg {
  transform: rotate(180deg);
}

.tcar__arrow:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.3);
}

.tcar__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* two cards per view */
.carousel--2 .carousel__track {
  gap: 30px;
  grid-auto-columns: calc((100% - 30px) / 2);
}

.carousel--2 .carousel__slide {
  height: 100%;
}

/* ----------------------------------------------------- testimonial card --- */

.tcard {
  height: 100%;
  padding: 45px;
  border-radius: 20px;
  background-color: var(--white);
  position: relative;
  z-index: 1;
}

.tcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.tcard__image {
  position: relative;
  margin-right: 20px;
  flex: none;
}

.tcard__photo {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  transition: box-shadow 0.3s linear;
}

.tcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the theme over-scales the logo inside its circle */
  transform: scale(1.1);
  transition: transform 0.3s linear;
}

.tcard:hover .tcard__photo {
  box-shadow: 0 3px 10px rgba(111, 127, 144, 0.32);
}

/* gradient quote bubble tucked into the photo's bottom-right */
.tcard__quote {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background-image: linear-gradient(to right, var(--cyan), var(--green-soft));
}

.tcard__titles {
  flex-grow: 1;
  padding-right: 20px;
}

.tcard__name {
  font-family: "Red Hat Display", var(--font-head);
  font-size: clamp(1.25rem, 1.9vw, 24px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.tcard__position {
  display: block;
  color: var(--teal);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
}

.tcard__desc {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* --- 7. broad range of solutions (pad 90px 0 0) ------------------------- */

.about-partner {
  padding: 90px 0 0;
}

/* 40 / 60, not the even split the other sections use */
.about-partner__row {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: start;
}

.about-partner__left,
.about-partner__right {
  padding: 0 15px;
}

/* production sets this one heading in Red Hat Display */
.about-partner__title {
  max-width: 600px;
  font-family: "Red Hat Display", var(--font-head);
  font-size: clamp(2rem, 3.3vw, 42px);
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 15px;
}

/* The dotted world map is the counter's own background, sized to contain and
   pinned to the top, with the number sitting over it. */
.about-partner__counter {
  text-align: center;
  padding: 20px 0 100px;
  background-image: url("../assets/img/Map-counter.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.about-partner__count {
  display: block;
  font-family: "Red Hat Display", var(--font-head);
  font-weight: 900;
  font-size: clamp(4.5rem, 10vw, 148px);
  line-height: 1;
  color: var(--navy);
  margin-bottom: 8px;
}

/* the trailing "+" is roughly two-thirds the height and teal */
.about-partner__count i {
  font-style: normal;
  font-weight: 900;
  font-size: 0.65em;
  color: var(--teal);
}

.about-partner__count-label {
  display: block;
  font-family: "Red Hat Display", var(--font-head);
  font-size: clamp(1.15rem, 1.9vw, 24px);
  font-weight: 700;
  color: var(--muted);
}

.about-partner__copy {
  font-size: 17px;
  margin: 35px 0 30px;
}

/* the certs are a WP gallery in production: left-aligned, 15px gutters */
.certs--gallery {
  justify-content: flex-start;
  gap: 15px;
}

.certs--gallery img {
  height: auto;
  width: 170px;
  max-width: calc((100% - 30px) / 3);
}

@media (max-width: 1024px) {
  /* About section 6: production drops to 80px of padding, stacks the heading
     row and pulls the intro copy's 100px right inset. */
  .about-testimonials {
    padding: 80px 0;
  }

  .tcar__head {
    margin-bottom: 28px;
  }

  .tcar__headding {
    min-width: 100%;
    max-width: 100%;
  }

  .tcar__headding h2 {
    margin-bottom: 10px;
  }

  .tcar__excerpt {
    flex: 1 1 100%;
    padding-right: 0;
    margin-bottom: 25px;
  }

  /* About section 7: both columns go full width */
  .about-partner {
    padding: 80px 0 0;
  }

  .about-partner__row {
    grid-template-columns: 1fr;
  }

  .about-partner__counter {
    padding-bottom: 70px;
  }
}

/* production narrows the card's side padding well before it stacks */
@media (max-width: 1400px) {
  .tcard {
    padding-left: 25px;
    padding-right: 25px;
  }
}

/* About section 4 — production drops the tablet video panel to 190px of
   padding and the strengths card to 50px/20px, then stacks the two rows. */
@media (max-width: 1024px) {
  .about-experience__top {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 36px;
  }

  .about-experience__top .eyebrow,
  .about-experience__top h2 {
    max-width: none;
  }

  .about-experience__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .strengths-card {
    padding: 50px 20px;
  }

  .about-experience__video {
    padding: 190px 0;
  }
}

@media (max-width: 767px) {
  .about-experience__video {
    padding: 130px 0;
  }
}

@media (max-width: 900px) {
  .about-stats__panel {
    padding: 70px 15px;
  }

  .about-intro,
  .about-vision,
  .about-experience,
  .team-band,
  .about-testimonials,
  .about-partner {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .about-partner {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .carousel--2 .carousel__track {
    grid-auto-columns: 100%;
  }

  .tcard {
    padding: 30px 20px;
  }

  /* the logo moves above the name rather than beside it */
  .tcard__meta {
    display: block;
  }

  .tcard__image {
    margin: 0 0 25px;
    max-width: 100px;
  }

  .tcard__titles {
    padding-right: 0;
  }
}

@media (max-width: 700px) {

  .icon-box {
    gap: 14px;
  }

  .icon-box__icon {
    width: 48px;
  }
}

/* --- About section 2: hexagon banner box (production's pxl_banner1) ------ */

.about-banner {
  position: relative;
  min-height: 480px;
}

/* floating hex-grid graphic behind everything (theme animates it on a 9s loop
   with the same ±10px keyframes as the Why-Tridev photo) */
.about-banner__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/Vector-banner.png") center bottom / auto
    no-repeat;
  animation: photo-float 9s ease-out infinite;
  pointer-events: none;
}

/* the photo is clipped to a hexagon by the theme's mask */
.about-banner__photo {
  max-width: 72%;
  -webkit-mask-image: url("../assets/img/mask-banner.png");
  mask-image: url("../assets/img/mask-banner.png");
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.about-banner__photo img {
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.about-banner__photo:hover img {
  transform: scale(1.2);
}

/* gradient hexagon badge holding the years counter */
.about-banner__badge {
  position: absolute;
  bottom: 66px;
  left: 30px;
  z-index: 1;
  min-width: 160px;
  padding: 28px 15px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(
    90deg,
    var(--cyan) 0%,
    var(--green-soft) 50%,
    var(--cyan) 100%
  );
  -webkit-mask-image: url("../assets/img/mask-banner.png");
  mask-image: url("../assets/img/mask-banner.png");
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.about-banner__count {
  min-width: 80px;
  margin-bottom: 5px;
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
}

.about-banner__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}

.about-banner__label cite {
  display: block;
  font-size: 15px;
  line-height: 1;
  font-style: normal;
}

/* the trident mark, also hexagon-masked */
.about-banner__mark {
  position: absolute;
  bottom: 50px;
  right: 30px;
  width: 217px;
  height: 217px;
  -webkit-mask-image: url("../assets/img/mask-banner.png");
  mask-image: url("../assets/img/mask-banner.png");
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.about-banner__mark img {
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.about-banner__mark:hover img {
  transform: scale(1.2);
}

@media (max-width: 900px) {
  .about-banner {
    min-height: 400px;
  }

  .about-banner__mark {
    width: 150px;
    height: 150px;
    bottom: 20px;
    right: 0;
  }

  .about-banner__badge {
    bottom: 30px;
    left: 0;
    min-width: 140px;
    padding: 22px 12px;
  }

  .about-banner__count {
    font-size: 36px;
  }
}

@media (max-width: 620px) {
  .about-banner {
    min-height: 320px;
  }

  .about-banner__photo {
    max-width: 86%;
  }

  .about-banner__mark {
    display: none;
  }
}

/* =========================================================== manufacturing ===
   Production renders this whole page as one Elementor section in a single
   full-width column inside #pxl-main (padding: 100px 0), left-aligned, with no
   alternating background bands. Every value below comes from that page's own
   inline CSS or the theme stylesheet.
   ============================================================================ */

.mfg {
  padding: 100px 0;
}

.mfg__banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 35px;
}

.mfg__title {
  text-align: center;
  font-size: clamp(2rem, 3.8vw, 48px);
  margin-bottom: 20px;
}

.mfg__intro {
  max-width: 1099px;
  margin-bottom: 20px;
}

.mfg__intro p {
  font-size: 18px;
  margin-bottom: 20px;
}

.mfg__intro p:last-child {
  margin-bottom: 0;
}

/* the same #4286F5 Chakra Petch callout the About page uses */
.mfg__lead {
  max-width: 802px;
  color: #4286f5;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.mfg__qc {
  font-size: 18px;
  margin-bottom: 50px;
}

.mfg__head {
  margin-bottom: 20px;
}

.mfg__h2 {
  font-size: clamp(1.7rem, 2.6vw, 32px);
  line-height: 1em;
  margin-bottom: 30px;
}

.mfg__head .mfg__h2 {
  margin-bottom: 0;
}

.mfg__h2--center {
  text-align: center;
}

.mfg__workflow {
  font-size: 18px;
  margin-bottom: 40px;
}

/* three shots with 10px gutters and production's per-image height caps */
.mfg__shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.mfg__shots figure {
  margin: 0;
}

.mfg__shots img {
  width: 100%;
  height: 100%;
  max-height: 401px;
  object-fit: cover;
  border-radius: 8px;
}

/* ------------------------------------------------- 8-step process list --- */

/* pxl-process-list.width-item-50: two per row, each with a 40px numbered disc
   pulled out into a 65px gutter. */
.process {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -15px 50px;
  padding: 0;
}

.process__item {
  position: relative;
  min-width: 50%;
  max-width: 50%;
  padding: 0 15px 0 80px;
  margin: 15px 0;
}

.process__num {
  position: absolute;
  left: 15px;
  top: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e1f6f9;
  color: var(--teal);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
}

.process__label {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  color: #1c2539;
  margin-bottom: 10px;
}

.process__text {
  line-height: 1.625;
  margin: 0;
}

/* ------------------------------------------------------ single testimonial --- */

/* The theme draws its gradient squiggle under three of this page's headings
   (Testimonial, FAQ, Our Certifications) but not the other two. */
.mfg__squiggle {
  margin: -18px 0 30px;
  line-height: 0;
}

.mfg__squiggle--center {
  text-align: center;
}

/* pxl-testimonial-carousel1: everything sits on a pale rounded panel; the
   person occupies a 205px column and the quote sits to its right behind a
   dotted rule. */
.tquote {
  /* 205px person column, then the quote's 70px margin + 60px padding */
  --tq-person: 205px;
  --tq-gutter: 130px;
  background-color: #f4fcfd;
  border-radius: 20px;
  padding: 50px 40px 50px 60px;
  margin-bottom: 60px;
}

.tquote .carousel__track {
  grid-auto-columns: 100%;
  gap: 0;
}

.tquote__item {
  display: flex;
  align-items: center;
}

.tquote__person {
  min-width: 205px;
  max-width: 205px;
  text-align: center;
}

.tquote__name {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 5px;
}

.tquote__place {
  color: #4286f5;
  font-weight: 500;
  text-transform: capitalize;
}

.tquote__body {
  flex: 1;
  margin-left: 70px;
  padding-left: 60px;
  border-left: 1px dotted #d9d9d9;
}

.tquote__stars {
  color: #ffb422;
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 25px;
}

.tquote__desc {
  font-size: clamp(1.15rem, 1.9vw, 24px);
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: #046270;
  font-weight: 400;
  margin: 0 0 24px;
}

/* production renders these as 39x3px dashes, left-aligned under the quote */
.tquote .carousel__dots {
  justify-content: flex-start;
  gap: 2px;
  margin-top: 10px;
  margin-left: calc(var(--tq-person) + var(--tq-gutter));
}

.tquote .carousel__dots button {
  position: relative;
  width: 39px;
  height: 20px;
  border-radius: 0;
  background: none;
  transform: none;
}

.tquote .carousel__dots button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: #d2dbe8;
  transition: background-color 0.25s ease;
}

.tquote .carousel__dots button[aria-current="true"]::before,
.tquote .carousel__dots button:hover::before {
  background-color: var(--teal);
}

/* ---------------------------------------------------------------- FAQ --- */

/* pxl-accordion1 across two columns of four, using <details> so the toggle
   needs no JS. */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  margin-bottom: 70px;
}

.faq__item + .faq__item {
  margin-top: 25px;
}

.faq__q {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  padding: 28px 80px 28px 20px;
  border: 1px solid #d2dbe8;
  border-radius: 4px;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* the teal +/- toggle at the right edge */
.faq__q::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
}

.faq__item[open] > .faq__q::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.faq__item[open] > .faq__q {
  color: var(--teal-dark);
}

.faq__a {
  color: var(--muted);
  line-height: 1.875;
  font-size: 14px;
  padding: 22px 20px 0;
}

.faq__a p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------- certifications --- */

.certs--mfg {
  justify-content: center;
  gap: 30px;
}

.certs--mfg img {
  height: auto;
  width: 187px;
  max-width: calc((100% - 60px) / 3);
}

/* --------------------------------------------------- manufacturing tiers --- */

@media (max-width: 1024px) {
  .mfg {
    padding: 70px 0;
  }

  /* production left-aligns the page title from here down */
  .mfg__title {
    text-align: left;
  }
}

@media (max-width: 1024px) {
  .tquote {
    padding: 60px 30px;
  }
}

@media (max-width: 900px) {
  /* the quote's 205px person column and 130px gutter no longer fit */
  .tquote__item {
    display: block;
  }

  .tquote__person {
    min-width: 0;
    max-width: none;
    text-align: left;
    margin-bottom: 22px;
  }

  .tquote__body {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .tquote .carousel__dots {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .tquote {
    padding: 50px 15px;
  }

  .mfg__squiggle {
    margin-top: -10px;
  }

  .process {
    margin-bottom: 40px;
  }

  .process__item {
    min-width: 100%;
    max-width: 100%;
  }

  .mfg__shots {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .faq {
    grid-template-columns: 1fr;
    margin-bottom: 50px;
  }

  /* the two columns become one list, so the seam needs the same 25px gap */
  .faq__col + .faq__col {
    margin-top: 25px;
  }

  .faq__q {
    padding: 22px 62px 22px 16px;
  }

  .faq__q::after {
    right: 14px;
  }
}

/* ============================================================ contact page ===
   Production order: hero, one full-width contact-info card, a stretched map,
   then the form band. Values taken from the page's inline Elementor CSS and
   the theme's .pxl-contact-info / .pxl-contact-form1 rules.
   ============================================================================ */

.contact-info {
  background-color: var(--white);
  padding: 110px 0;
}

.info-card {
  border-radius: 10px;
  box-shadow: 0 5px 83px 0 rgba(13, 14, 67, 0.08);
  overflow: hidden;
}

/* pale teal header bar carrying the city name */
.info-card__head {
  background-color: #e1f6f9;
  color: var(--teal);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  text-align: center;
  padding: 15px;
  margin-bottom: 0;
}

.info-card__inner {
  padding: 30px 30px 45px;
}

/* the three rows are separated by a hairline, and the last one drops it */
.info-card__block {
  border-bottom: 1px solid rgba(4, 98, 112, 0.1);
  padding-bottom: 35px;
  margin-bottom: 35px;
}

.info-card__block:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.info-card__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}

.info-card__address {
  position: relative;
  padding-left: 25px;
  color: var(--muted);
  font-size: 17px;
}

.info-card__pin {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--teal);
}

.info-card__address a {
  color: inherit;
}

.info-card__address a:hover {
  color: var(--teal-dark);
}

.info-card__list {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

.info-card__list li + li {
  margin-top: 10px;
}

.info-card__list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.info-card__list a:hover {
  color: var(--teal-dark);
}

.info-card__list svg {
  flex: none;
  color: var(--teal);
}

/* the theme keeps the phone handset shaking, as in the footer */
.info-card__ring {
  animation: phone-shake 2s ease infinite;
}

.info-card__block--time {
  display: flex;
  flex-wrap: wrap;
}

/* 80px teal tile with a slowly rotating clock */
.info-card__clock {
  min-width: 80px;
  min-height: 80px;
  max-height: 80px;
  border-radius: 7px;
  background-color: var(--teal);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 20px 10px 0;
}

.info-card__clock svg {
  animation: clock-spin 6s infinite linear;
}

@keyframes clock-spin {
  to {
    transform: rotate(360deg);
  }
}

.info-card__time {
  font-size: 16px;
}

.info-card__hours {
  color: var(--muted);
}

.info-card__hours cite {
  display: block;
  font-style: normal;
  color: var(--teal);
}

/* ------------------------------------------------------------------ map --- */

/* Stretched full-bleed and 700px tall, as in production, with the theme's warm
   filter over the tiles. */
.map-embed {
  display: block;
  border: 0;
  width: 100%;
  height: 700px;
  filter: brightness(123%) contrast(100%) saturate(100%) blur(0.2px)
    hue-rotate(339deg);
}

/* ----------------------------------------------------------------- form --- */

/* #F5F8FD band with the two Vector graphics tucked into the top corners. */
.contact-form {
  padding: 90px 0;
  background-color: #f5f8fd;
  background-image: url("../assets/img/Vector-left1.png"),
    url("../assets/img/Vector-right1.png");
  background-position: top left, top right;
  background-repeat: no-repeat, no-repeat;
}

.contact-form__head {
  text-align: center;
  margin-bottom: 40px;
}

/* the only teal h2 on the site */
.contact-form__head h2 {
  color: var(--teal);
  font-size: clamp(2rem, 3.8vw, 48px);
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 0;
}

.cform {
  max-width: 750px;
  margin: 0 auto;
}

.cform__field {
  margin: 0 0 20px;
}

.cform__field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}

.cform__field input,
.cform__field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--navy);
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--white);
  border-radius: 25px;
  background-color: var(--white);
  transition: border-color 0.15s ease;
}

.cform__field textarea {
  height: 125px;
  padding: 18px 20px;
  resize: vertical;
}

.cform__field input:focus,
.cform__field textarea:focus {
  outline: none;
  border-color: var(--teal);
}

.cform__submit {
  text-align: center;
  margin: 0;
}

.cform__btn {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  height: 56px;
  padding: 0 100px;
  border: none;
  border-radius: 30px;
  background-color: var(--teal);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.18s ease;
}

.cform__btn:hover {
  background-color: var(--teal-dark);
  transform: translateY(-2px);
}

/* --------------------------------------------------------- contact tiers --- */

@media (max-width: 1024px) {
  .contact-info {
    padding: 80px 0;
  }

  .map-embed {
    height: 450px;
  }

  .cform__btn {
    padding: 0 50px;
  }
}

@media (max-width: 767px) {
  .contact-info {
    padding: 60px 0;
  }

  .info-card__inner {
    padding: 20px 15px 35px;
  }

  .contact-form {
    padding: 60px 0;
  }

  .cform__btn {
    width: 100%;
    padding: 0 24px;
  }
}