/* ==========================================================================
   Creative Arts — main stylesheet
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout helpers
   5.  Buttons
   6.  Header / topbar
   7.  Navigation
   8.  Hero
   9.  Icon card grid
   10. Dark overlay band
   11. Value cards
   12. CTA
   13. Page banner
   14. About sections
   15. Stats strip
   16. Customers
   17. Help cards
   18. Partners
   19. Services page
   20. Gallery
   21. Contact & forms
   22. Footer
   23. Motion utilities (reveal, progress bar, back-to-top)
   24. Modal
   25. Reduced motion
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */

:root {
  --blue-900: #14567F;   /* header + footer background */
  --blue-700: #1B6FA3;   /* section accents */
  --orange:   #F2A03D;   /* buttons, eyebrow text, stats, icons */
  --orange-d: #DE8B25;   /* button hover */
  --ink:      #16181C;   /* headings */
  --body:     #6B7280;   /* paragraph text */
  --surface:  #F5F6F7;   /* card + alt-section background */
  --white:    #FFFFFF;
  /* Warm tint of --orange, light enough to keep --ink label text at 16:1.
     Sits on the grey --surface the stats strip uses, so the cards read as
     panels rather than dissolving into the section behind them. */
  --stat-bg:       #FDF6EC;
  --stat-bg-hover: #FBEEDB;
  --radius:   10px;
  --radius-lg: 24px;
  --container: 1180px;

  --border: #E6E8EB;
  --shadow-rest: 0 2px 10px rgba(0, 0, 0, .05);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, .12);
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* Long decelerating tail — used for entrance reveals, where easing out
     hard reads as deliberate rather than springy. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --transition: .35s cubic-bezier(.4, 0, .2, 1);

  --font-head: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --section-y: 96px;
}

/* 2. Reset & base -------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

/* Visible keyboard focus everywhere, but not on mouse click. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--orange);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0 0 18px;
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: 46px; line-height: 1.15; }
h2 { font-size: 36px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

p {
  margin: 0 0 18px;
}

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

.eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.lead {
  font-size: 17px;
  line-height: 1.8;
}

/* 4. Layout helpers ------------------------------------------------------ */

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

.section {
  padding-block: var(--section-y);
}

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

.section--tight {
  padding-block: 64px;
}

.section__head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.section__head .eyebrow {
  text-align: center;
}

.section__head p {
  margin-bottom: 0;
}

.section__head--left {
  text-align: left;
  margin-inline: 0;
}

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

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

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

/* 5. Buttons ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 30px;
  background: var(--orange);
  color: var(--white);
  border: 2px solid transparent;
  /* Clips the sheen and the ripple to the pill; `isolation` keeps both
     effects behind the label but above the button's own background. */
  overflow: hidden;
  isolation: isolate;
  transition: background var(--transition), transform var(--transition),
              box-shadow var(--transition), color var(--transition),
              border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
  background: var(--orange-d);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(242, 160, 61, .38);
}

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

/* Light sweeps across the face on hover. */
.btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: -125%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .7s var(--ease);
}

.btn:hover::after,
.btn:focus-visible::after {
  left: 135%;
}

/* Ripple from the pointer. Appended by JS, removed when the animation ends. */
.btn__ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transform: scale(0);
  pointer-events: none;
  animation: btnRipple .6s var(--ease-out) forwards;
}

@keyframes btnRipple {
  from { transform: scale(0);   opacity: .75; }
  to   { transform: scale(1);   opacity: 0; }
}

.btn--outline {
  background: transparent;
  color: var(--orange);
  border-color: var(--orange);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--orange);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  color: var(--blue-900);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 9px 22px;
  font-size: 14px;
}

/* 6. Header / topbar ----------------------------------------------------- */

.header-info {
  background: #0e3f5c;
  color: var(--white);
  font-size: 13px;
}

.header-info__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 8px;
}

.header-info__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.header-info__list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-info__list svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .85;
}

.header-info__list a {
  color: inherit;
  opacity: .92;
}

.header-info__list a:hover,
.header-info__list a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.topbar {
  background: var(--blue-900);
  color: var(--white);
  padding-block: 18px;
}

.topbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}

/* The supplied lockup is white artwork, so it sits on the blue bars only. */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.logo img {
  height: 46px;
  width: auto;
  transition: opacity var(--transition);
}

.logo:hover img,
.logo:focus-visible img {
  opacity: .85;
}

.logo--footer {
  display: inline-block;
  margin-bottom: 20px;
}

.logo--footer img {
  height: 42px;
}

.search {
  display: flex;
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
  background: var(--white);
  border-radius: 30px;
  overflow: hidden;
  padding: 4px 4px 4px 20px;
}

.search__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}

.search__input::placeholder {
  color: #9AA1AC;
}

.search__input:focus {
  outline: none;
}

.search__btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--white);
  border-radius: 8px;
  transition: background var(--transition);
}

.search__btn:hover,
.search__btn:focus-visible {
  background: var(--orange-d);
}

.search__btn svg {
  width: 18px;
  height: 18px;
}

/* 7. Navigation ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  transition: padding var(--transition), box-shadow var(--transition),
              background var(--transition);
  padding-block: 18px;
  border-bottom: 1px solid var(--border);
}

.nav.scrolled {
  padding-block: 10px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
  border-bottom-color: transparent;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Fills the row so links sit left and the phone/chat meta sits right. */
.nav__panel {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__link {
  position: relative;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding-block: 6px;
  transition: color var(--transition);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width var(--transition);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  color: var(--orange);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after {
  width: 100%;
}

.nav__meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 26px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.nav__meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  transition: color var(--transition);
}

.nav__meta a:hover,
.nav__meta a:focus-visible {
  color: var(--orange);
}

.nav__meta svg {
  width: 16px;
  height: 16px;
  color: var(--orange);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--surface);
  place-items: center;
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: background var(--transition);
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--transition);
}

.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }

.nav__toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav__toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* 8. Hero ---------------------------------------------------------------- */

.hero {
  background: var(--surface);
  padding-block: 90px 100px;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero__title {
  margin-bottom: 22px;
}

.hero__text {
  max-width: 520px;
  margin-bottom: 32px;
}

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 86, 127, .18);
}

.hero__media img {
  display: block;
  width: 100%;
  /* Slide photographs are not all shot at the same ratio; pinning the frame
     keeps the carousel from changing height as it advances. */
  aspect-ratio: 760 / 620;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.hero__media:hover img {
  transform: scale(1.06);
}

.hero__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  color: var(--blue-900);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform var(--transition), background var(--transition),
              color var(--transition);
}

.hero__play::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  animation: pulse 2.4s ease-out infinite;
}

.hero__play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}

.hero__play:hover,
.hero__play:focus-visible {
  transform: scale(1.08);
  background: var(--orange);
  color: var(--white);
}

@keyframes pulse {
  0%   { transform: scale(.9);  opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* 8b. Hero carousel ------------------------------------------------------ */

/*
 * Slides sit side by side in a flex track that is translated horizontally.
 * Content inside a slide is animated by .is-active rather than the shared
 * .reveal observer — off-screen slides never intersect the viewport, so an
 * observer would leave slides 2 and 3 permanently invisible.
 */

.hero--carousel {
  padding-block: 0;
  position: relative;
}

.hero-carousel {
  position: relative;
}

.hero-carousel__viewport {
  overflow: hidden;
}

.hero-carousel__track {
  display: flex;
  transition: transform .7s var(--ease);
  will-change: transform;
}

.hero-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding-block: 86px 108px;
}

/*
 * Entrance stagger. JS numbers each child of .hero__copy into --i, so the
 * order follows the markup instead of hard-coded :nth-child rules.
 */
.hero-carousel__slide.is-active .hero__copy > * {
  animation: heroIn .8s var(--ease-out) both;
  animation-delay: calc(.14s + var(--i, 0) * .1s);
}

.hero-carousel__slide.is-active .hero__media {
  animation: heroMedia .95s var(--ease-out) both;
  animation-delay: .12s;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroMedia {
  from { opacity: 0; transform: translateY(34px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* The CTA wrapper carries the reveal; the button inside keeps its transform. */
.hero__cta {
  display: inline-block;
}

/*
 * Magnetic hero CTA. JS writes the pointer offset into --mx / --my; the hover
 * lift is folded into the same transform so the two never overwrite each other.
 */
.hero__cta .btn {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .3s var(--ease-out), background var(--transition),
              box-shadow var(--transition), color var(--transition),
              border-color var(--transition);
}

.hero__cta .btn:hover,
.hero__cta .btn:focus-visible {
  transform: translate3d(var(--mx), calc(var(--my) - 3px), 0);
}

/* The heading's second line sits in its own block so it always wraps to a
   line of its own, whatever the copy length. */
.hero__title-type {
  display: block;
}

.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--blue-900);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  transition: background var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}

.hero-carousel__arrow svg {
  width: 22px;
  height: 22px;
}

.hero-carousel__arrow--prev {
  left: 22px;
}

.hero-carousel__arrow--prev svg {
  transform: rotate(180deg);
}

.hero-carousel__arrow--next {
  right: 22px;
}

.hero-carousel__arrow:hover,
.hero-carousel__arrow:focus-visible {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 12px 28px rgba(242, 160, 61, .4);
}

.hero-carousel__arrow--prev:hover {
  transform: translateY(-50%) translateX(-3px);
}

.hero-carousel__arrow--next:hover {
  transform: translateY(-50%) translateX(3px);
}

/* 9. Icon card grid ------------------------------------------------------ */

.icon-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 26px;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
  height: 100%;
}

.icon-card:hover,
.icon-card:focus-within {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.icon-card__icon {
  width: 84px;
  height: 84px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: rgba(242, 160, 61, .1);
  margin-bottom: 22px;
  transition: background var(--transition), transform var(--transition);
}

.icon-card__icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.icon-card:hover .icon-card__icon {
  background: rgba(242, 160, 61, .2);
  transform: translateY(-4px) scale(1.05);
}

.icon-card__title {
  font-size: 18px;
  margin-bottom: 10px;
  transition: color var(--transition);
}

.icon-card:hover .icon-card__title {
  color: var(--orange);
}

.icon-card p {
  font-size: 14.5px;
  margin: 0;
}

.icon-card__badge {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: rgba(27, 111, 163, .1);
  border-radius: 20px;
  padding: 3px 12px;
}

/* 10. Dark overlay band -------------------------------------------------- */

.band {
  position: relative;
  padding-block: 120px;
  background-color: var(--blue-900);
  /* Weighted to the left, where .band__inner holds all the copy: near-opaque
     brand navy behind the text, thinning to the right so the photograph
     behind the band is actually visible. A flat black wash muted it to mud. */
  background-image: linear-gradient(
                      100deg,
                      rgba(8, 32, 48, .90) 0%,
                      rgba(8, 32, 48, .78) 44%,
                      rgba(8, 32, 48, .44) 100%
                    ),
                    var(--band-image, url('../images/banner-quality.svg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--white);
}

.band__inner {
  max-width: 660px;
}

.band h2 {
  color: var(--white);
  margin-bottom: 20px;
}

.band p {
  color: rgba(255, 255, 255, .86);
  margin-bottom: 30px;
}

.band .eyebrow {
  color: var(--orange);
}

/* 11. Value cards -------------------------------------------------------- */

.value-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
  height: 100%;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.value-card__icon {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(242, 160, 61, .14);
  color: var(--orange);
  transition: background var(--transition), color var(--transition);
}

.value-card__icon svg {
  width: 28px;
  height: 28px;
}

.value-card:hover .value-card__icon {
  background: var(--orange);
  color: var(--white);
}

/* Full-colour illustration icons: they carry their own palette and halo, so
   they drop the tinted disc and the orange hover fill the line icons use. */
.value-card__icon--img {
  width: 72px;
  height: 72px;
  background: none;
}

.value-card__icon--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.value-card:hover .value-card__icon--img {
  background: none;
}

.value-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.value-card p {
  font-size: 14.5px;
  margin: 0;
}

/* 12. CTA ---------------------------------------------------------------- */

.cta {
  text-align: center;
  padding-block: 96px;
}

.cta h2 {
  max-width: 640px;
  margin-inline: auto;
}

.cta p {
  max-width: 560px;
  margin: 0 auto 32px;
}

/* 13. Page banner -------------------------------------------------------- */

.page-banner {
  position: relative;
  padding-block: 130px;
  text-align: center;
  color: var(--white);
  background-color: var(--blue-900);
  /* Graded rather than flat: the photograph reads through the top of the
     frame, and the scrim thickens toward the breadcrumb where the smallest
     text sits. Worst case (a white area of the photo behind the subtitle)
     still composites to ~4.6:1 against white. */
  background-image: linear-gradient(
                      rgba(11, 47, 70, .58) 0%,
                      rgba(11, 47, 70, .74) 46%,
                      rgba(11, 47, 70, .86) 100%
                    ),
                    var(--band-image, url('../images/banner-page.svg'));
  background-size: cover;
  background-position: center;
  border-radius: 0 0 40px 40px;
}

.page-banner h1 {
  color: var(--white);
  margin-bottom: 12px;
  /* Holds the heading legible over the lighter top of the scrim. */
  text-shadow: 0 2px 18px rgba(6, 28, 42, .55);
}

.page-banner p {
  color: rgba(255, 255, 255, .92);
  font-size: 17px;
  margin: 0;
  text-shadow: 0 1px 12px rgba(6, 28, 42, .5);
}

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}

.breadcrumb a:hover {
  color: var(--orange);
}

.breadcrumb span[aria-hidden] {
  opacity: .6;
}

/* 14. About sections ----------------------------------------------------- */

.figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.figure img {
  width: 100%;
  transition: transform .6s var(--ease);
}

.figure:hover img {
  transform: scale(1.08);
}

.figure-wrap {
  position: relative;
}

.deco-circle {
  position: absolute;
  left: -34px;
  bottom: -34px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-image: repeating-linear-gradient(
    45deg,
    var(--orange) 0 6px,
    transparent 6px 12px
  );
  z-index: 2;
}

/* 15. Stats strip -------------------------------------------------------- */

.stats {
  background: var(--surface);
}

/* The grid already stretches all four cards to a common height, but the
   labels don't all run to the same number of lines — "Expert Team" is one,
   "Shoe Manufacturers in Agra" is two. Left top-aligned, the shorter cards
   pool their slack at the bottom and the row looks unevenly spaced. Centring
   the content splits that slack evenly above and below instead, so every card
   shows identical breathing room whatever its label does. */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--stat-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 24px;
  text-align: center;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition);
}

.stat:hover {
  transform: translateY(-8px);
  background: var(--stat-bg-hover);
  box-shadow: var(--shadow-hover);
}

.stat__value {
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--orange);
  /* Spacing comes from the flex gap above, so it stays equal in every card. */
  margin-bottom: 0;
}

.stat__label {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  /* Inherited --body grey lands at 4.4:1 on the tint — just under AA. */
  color: var(--ink);
}

/* 16. Customers ---------------------------------------------------------- */

/*
 * Intro row: copy left, media right. The media column holds the section
 * image when one is set, with the headline figure beneath it; with no image
 * the figure card fills the column on its own so the row still reads as two
 * balanced halves.
 */
.customers__intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}

.customers__intro-copy h2 {
  margin-bottom: 18px;
}

/* A short rule under the eyebrow, anchoring the left-aligned column. */
.eyebrow--ruled::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--orange);
}

.customers__lead {
  margin-top: 18px;
  margin-bottom: 0;
}

.customers__media {
  display: grid;
  gap: 20px;
}

.customers__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-rest);
}

.customers__stat {
  background: var(--blue-700);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px 34px;
  box-shadow: var(--shadow-rest);
}

.customers__stat-figure {
  display: block;
  font-family: var(--font-head);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
}

.customers__stat-label {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.customers__stat-body {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  /* White at .78 keeps it clearly secondary while staying past AA on blue. */
  color: rgba(255, 255, 255, .78);
}

/* Delivery cities, on their own full-width card between intro and brands. */
.customers__cities-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 24px 28px;
  margin-bottom: 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
}

.customers__cities-title {
  margin: 0;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--body);
}

.customers__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.customers__cities li {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.customers__brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 92px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  /* Brand colour on the leading edge, so the grid scans as a client list. */
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

/*
 * Scoped to the list so the hover transform outranks .reveal.is-visible's
 * `transform: none`, which is otherwise an equal-specificity later rule.
 */
.customers__brands .brand-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-left-color: var(--blue-700);
}

.brand-card__name {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.brand-card__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}

/*
 * Closing line, set as a pull quote. The quote mark is decoration, so it is
 * generated rather than written into the copy.
 */
.customers__note {
  position: relative;
  max-width: 820px;
  margin: 48px auto 0;
  padding-top: 34px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
}

.customers__note::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 68px;
  line-height: 1;
  color: var(--orange);
}

/* 17. Help cards --------------------------------------------------------- */

.help-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.help-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.help-card__media {
  overflow: hidden;
}

.help-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 520 / 380;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.help-card:hover .help-card__media img {
  transform: scale(1.08);
}

.help-card__body {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.help-card__body h3 {
  font-size: 19px;
  color: var(--orange);
  margin: 0;
}

.help-card__body p {
  font-size: 14.5px;
  margin: 0;
  flex: 1;
}

/* 18. Partners ----------------------------------------------------------- */

/*
 * Logo carousel. The track holds two identical copies of the list, so sliding
 * it exactly -50% lands the second copy where the first began and the loop is
 * seamless. Duration is set from the measured width by main.js so the logos
 * travel at a constant speed however many brands are on the list; the value
 * below is the no-JS fallback.
 */
.partners-marquee {
  --partners-duration: 40s;
  overflow: hidden;
  /* Fade the logos out at both edges instead of clipping them mid-logo. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 80px,
                      #000 calc(100% - 80px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 80px,
                      #000 calc(100% - 80px), transparent);
}

.partners-marquee__track {
  display: flex;
  width: max-content;
  animation: partners-scroll var(--partners-duration) linear infinite;
}

/* Pause so a logo can be read, or its link clicked, without chasing it. */
.partners-marquee:hover .partners-marquee__track,
.partners-marquee:focus-within .partners-marquee__track {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partners {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Spacing lives on the item as a trailing margin, not as a gap on the list.
 * That makes one copy of the list exactly n x (width + margin) wide, so the
 * -50% slide lands precisely on the seam. A gap between the two lists would
 * leave the loop a half-gap short and stutter on every repeat.
 */
.partner {
  flex: 0 0 auto;
  width: 170px;
  margin-right: 24px;
  display: grid;
  place-items: center;
  padding: 14px;
  filter: grayscale(1);
  opacity: .6;
  transition: filter var(--transition), opacity var(--transition),
              transform var(--transition);
}

.partner:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-4px);
}

.partner img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Reduced motion: stop the travel entirely and hand the strip back to the
 * user as something they can scroll themselves.
 */
@media (prefers-reduced-motion: reduce) {
  .partners-marquee {
    overflow-x: auto;
  }

  .partners-marquee__track {
    animation: none;
  }
}

/* 19. Services page ------------------------------------------------------ */

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
  height: 100%;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.product-card__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: rgba(27, 111, 163, .08);
  margin-bottom: 18px;
  transition: background var(--transition), transform var(--transition);
}

.product-card__icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.product-card:hover .product-card__icon {
  background: rgba(242, 160, 61, .16);
  transform: translateY(-4px) scale(1.05);
}

.product-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.product-card p {
  font-size: 14px;
  margin: 0;
}

/* Market solution cards — dark overlay, title slides up on hover */
.solution-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  isolation: isolate;
}

.solution-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .6s var(--ease);
}

.solution-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(11, 47, 70, .88) 0%, rgba(11, 47, 70, .35) 55%, rgba(11, 47, 70, .15) 100%);
  transition: background var(--transition);
}

.solution-card:hover img {
  transform: scale(1.08);
}

.solution-card:hover::after {
  background: linear-gradient(to top, rgba(11, 47, 70, .94) 0%, rgba(11, 47, 70, .7) 60%, rgba(11, 47, 70, .5) 100%);
}

.solution-card__body {
  padding: 30px 26px;
  width: 100%;
  transition: transform var(--transition);
}

.solution-card:hover .solution-card__body {
  transform: translateY(-8px);
}

.solution-card h3 {
  color: var(--white);
  font-size: 20px;
  margin-bottom: 10px;
}

.solution-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition), opacity var(--transition);
}

.solution-card:hover p,
.solution-card:focus-within p {
  max-height: 200px;
  opacity: 1;
}

/* Infrastructure list */
.spec-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  font-size: 15px;
}

.spec-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(242, 160, 61, .18);
}

.spec-list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* Centred photo with a caption. Capped near the source width so the
   photograph is never upscaled past its native resolution. */
.photo-figure {
  max-width: 520px;
  margin: 0 auto 48px;
}

.photo-figure .figure {
  border-radius: var(--radius);
  box-shadow: var(--shadow-rest);
}

.photo-figure img {
  width: 100%;
}

.photo-figure figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--body);
}

/* Shop floor gallery. The source photographs are a mix of portrait and
   landscape, so every frame is locked to one ratio and the photo is cropped
   into it rather than setting the row height. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 56px;
}

.photo-grid__item {
  margin: 0;
}

.photo-grid__item .figure {
  box-shadow: var(--shadow-rest);
}

.photo-grid__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-grid__item figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
}

.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-rest);
  height: 100%;
}

.panel h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

/* 20. Gallery -------------------------------------------------------------- */

.gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.gallery-search {
  display: flex;
  max-width: 360px;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 30px;
  overflow: hidden;
  padding: 4px 4px 4px 18px;
}

.gallery-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 14px;
  min-width: 0;
}

.gallery-search input:focus {
  outline: none;
}

.gallery-search button {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--orange);
  color: var(--white);
  transition: background var(--transition);
}

.gallery-search button:hover {
  background: var(--orange-d);
}

.gallery-search svg {
  width: 16px;
  height: 16px;
}

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-filters a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 30px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  transition: background var(--transition), color var(--transition);
}

.gallery-filters a:hover,
.gallery-filters a.is-active {
  background: var(--orange);
  color: var(--white);
}

.gallery-filters .count {
  font-size: 11.5px;
  opacity: .75;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.gallery-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: zoom-in;
}

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

.gallery-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}

.gallery-card:hover .gallery-card__media img {
  transform: scale(1.08);
}

.gallery-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 20px;
  color: var(--white);
  background: linear-gradient(0deg, rgba(11, 47, 70, .88) 0%, rgba(11, 47, 70, 0) 55%);
  opacity: 0;
  transition: opacity var(--transition);
}

.gallery-card:hover .gallery-card__overlay,
.gallery-card:focus-visible .gallery-card__overlay {
  opacity: 1;
}

.gallery-card__cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
}

.gallery-card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
}

.gallery-card__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 47, 70, .55);
  color: var(--white);
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}

.gallery-card__zoom svg {
  width: 16px;
  height: 16px;
}

.gallery-card:hover .gallery-card__zoom,
.gallery-card:focus-visible .gallery-card__zoom {
  opacity: 1;
  transform: scale(1);
}

.gallery-card:hover .gallery-card__zoom {
  background: var(--orange);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  min-width: 42px;
  height: 42px;
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--transition), color var(--transition),
              transform var(--transition);
}

.pagination a:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-2px);
}

.pagination .is-current {
  background: var(--orange);
  color: var(--white);
}

.pagination .is-disabled {
  opacity: .45;
}

/* Lightbox: full-image preview opened from a gallery card. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 20, 28, .92);
}

.lightbox.is-open {
  display: flex;
  animation: fadeIn .3s var(--ease);
}

.lightbox__figure {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__figure img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.lightbox__caption {
  margin-top: 16px;
  text-align: center;
  color: var(--white);
  max-width: 640px;
}

.lightbox__cat {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}

.lightbox__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  transition: background var(--transition), transform var(--transition);
}

.lightbox__close svg,
.lightbox__nav svg {
  width: 18px;
  height: 18px;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--orange);
}

.lightbox__close {
  top: -52px;
  right: 0;
}

.lightbox__nav--prev {
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--next {
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav:hover {
  transform: translateY(-50%) scale(1.06);
}

/* 21. Contact & forms ---------------------------------------------------- */

.form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 34px;
  box-shadow: var(--shadow-rest);
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.field .req {
  color: var(--orange);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 15px;
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 160, 61, .18);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #D64545;
}

.error {
  display: block;
  color: #D64545;
  font-size: 13px;
  margin-top: 6px;
}

.info-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-rest);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.info-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}

.info-card__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(242, 160, 61, .14);
  color: var(--orange);
  transition: background var(--transition), color var(--transition);
}

.info-card__icon svg {
  width: 24px;
  height: 24px;
}

.info-card:hover .info-card__icon {
  background: var(--orange);
  color: var(--white);
}

.info-card h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.info-card p,
.info-card a {
  font-size: 14.5px;
  margin: 0;
  transition: color var(--transition);
}

.info-card a:hover {
  color: var(--orange);
}

.map {
  line-height: 0;
}

.map iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1E9E62;
  color: var(--white);
  padding: 14px 22px;
  border-radius: 50px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  font-size: 14.5px;
  font-weight: 500;
  animation: toastIn .45s var(--ease);
  max-width: calc(100vw - 32px);
}

.toast svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.toast--error {
  background: #D64545;
}

.toast__close {
  color: inherit;
  opacity: .8;
  font-size: 18px;
  line-height: 1;
}

.toast__close:hover {
  opacity: 1;
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 22. Footer ------------------------------------------------------------- */

.footer {
  background: var(--blue-900);
  color: rgba(255, 255, 255, .78);
  padding-top: 80px;
}

.footer h4 {
  color: var(--white);
  font-size: 17px;
  margin-bottom: 22px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.2fr;
  gap: 56px;
  padding-bottom: 56px;
}

.footer p {
  font-size: 14.5px;
  margin-bottom: 18px;
}

.footer__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  margin-bottom: 10px;
}

.footer__contact svg {
  width: 16px;
  height: 16px;
  color: var(--orange);
  flex: none;
}

.footer__contact a {
  transition: color var(--transition);
}

.footer__contact a:hover {
  color: var(--orange);
}

.footer__links li + li {
  margin-top: 12px;
}

.footer__links a {
  display: inline-block;
  font-size: 14.5px;
  transition: transform var(--transition), color var(--transition);
}

.footer__links a:hover,
.footer__links a:focus-visible {
  transform: translateX(5px);
  color: var(--orange);
}

.newsletter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.newsletter input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  border-radius: 30px;
  padding: 13px 20px;
  color: var(--white);
  font-size: 14px;
  transition: border-color var(--transition), background var(--transition);
}

.newsletter input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.newsletter input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 255, 255, .13);
}

.newsletter .error {
  color: #FFC9C9;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
}

.socials {
  display: flex;
  gap: 12px;
}

.social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  transition: transform .6s var(--ease), background var(--transition),
              color var(--transition);
}

.social svg {
  width: 17px;
  height: 17px;
}

.social:hover,
.social:focus-visible {
  transform: rotate(360deg);
  background: var(--orange);
  color: var(--white);
}

/* 23. Motion utilities --------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/*
 * Reveal directions. A stagger group picks one with a reveal-fx--* class so
 * consecutive sections do not all animate the same way. The variant only
 * describes where the card travels from; :not(.is-visible) keeps it clear of
 * the finished state above, whatever order the rules land in.
 */
.reveal-fx--left .reveal:not(.is-visible) {
  transform: translateX(-48px);
}

.reveal-fx--right .reveal:not(.is-visible) {
  transform: translateX(48px);
}

.reveal-fx--zoom .reveal:not(.is-visible) {
  transform: scale(.92);
}

.reveal-fx--rise .reveal:not(.is-visible) {
  transform: translateY(56px) scale(.97);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--orange);
  z-index: 999;
  transition: width .1s linear;
}

.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 400;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(242, 160, 61, .42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), background var(--transition);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--orange-d);
  transform: translateY(-3px);
}

.to-top svg {
  width: 20px;
  height: 20px;
}

/* Floating contact dock. Stacks above .to-top, which keeps the corner, so the
   two never overlap whether or not the back-to-top button is showing. */
.float-actions {
  position: fixed;
  right: 26px;
  bottom: 86px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.float-actions__btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition);
}

.float-actions__btn svg {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
}

.float-actions__btn:hover {
  transform: translateY(-3px);
}

.float-actions__btn--whatsapp {
  background: #25d366;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
}

.float-actions__btn--whatsapp:hover {
  background: #1eb658;
}

.float-actions__btn--call {
  background: var(--blue-700);
  box-shadow: 0 10px 26px rgba(20, 86, 127, .42);
}

.float-actions__btn--call:hover {
  background: var(--blue-900);
}

/* Slow outward ring, so the dock reads as live without nagging. */
.float-actions__btn--whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: floatPulse 2.4s var(--ease) infinite;
}

@keyframes floatPulse {
  0%   { opacity: .65; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.65); }
  100% { opacity: 0;   transform: scale(1.65); }
}

/* Label that slides out on hover and on keyboard focus. */
.float-actions__btn::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--blue-900);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
}

.float-actions__btn:hover::after,
.float-actions__btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}

/* 24. Modal -------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 20, 28, .82);
}

.modal.is-open {
  display: flex;
  animation: fadeIn .3s var(--ease);
}

.modal__dialog {
  position: relative;
  width: min(920px, 100%);
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.modal__dialog iframe,
.modal__dialog video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.modal__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  padding: 24px;
}

.modal__placeholder strong {
  font-family: var(--font-head);
  color: var(--white);
  font-size: 20px;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  transition: background var(--transition), transform var(--transition);
}

.modal__close:hover {
  background: var(--orange);
  transform: rotate(90deg);
}

body.modal-open {
  overflow: hidden;
}

/* 25. Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal-fx--left .reveal:not(.is-visible),
  .reveal-fx--right .reveal:not(.is-visible),
  .reveal-fx--zoom .reveal:not(.is-visible),
  .reveal-fx--rise .reveal:not(.is-visible) {
    transform: none;
  }

  /* The carousel still changes slides, it just jumps instead of sliding. */
  .hero-carousel__track {
    transition: none;
  }

  .hero-carousel__slide.is-active .hero__copy > *,
  .hero-carousel__slide.is-active .hero__media {
    animation: none;
  }

  /* No sheen sweep and no magnetic drift. */
  .btn::after {
    display: none;
  }

  .hero__cta .btn,
  .hero__cta .btn:hover,
  .hero__cta .btn:focus-visible {
    transform: none;
  }

  .customers__brands .brand-card:hover {
    transform: none;
  }

  .band,
  .page-banner {
    background-attachment: scroll;
  }

  .hero__media:hover img,
  .figure:hover img,
  .help-card:hover .help-card__media img,
  .gallery-card:hover .gallery-card__media img,
  .solution-card:hover img {
    transform: none;
  }

  .float-actions__btn--whatsapp::before {
    animation: none;
    opacity: 0;
  }
}