@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  /* Color and Font-Family */
  --inter: "Inter", sans-serif;
  --graspincontainer: 1720px;
  --header-h: 98px;
  --black: #111111;
  --white: #ffffff;
  --blue: #183A73;
  --red: #ED3237;
  --grey: #666666;
  /* Font-Size */
  --fs-80: 80px;
  --fs-50: 50px;
  --fs-32: 32px;
  --fs-30: 30px;
  --fs-26: 26px;
  --fs-22: 22px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
}

/* Lenis drives scrolling from its own loop; native smooth scrolling would
   fight it. Kept as a fallback for anyone Lenis bows out for — touch, reduced
   motion, or the admin bar — via the :not() guard. */
html:not(.lenis) {
  scroll-behavior: smooth;
}

/* --- Lenis --- */

html.lenis,
html.lenis body {
  height: auto;
}

/* Lenis only flags .lenis-smooth mid-glide, so key this on .lenis itself —
   otherwise native smooth scrolling stays on and fights the RAF loop. */
html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a:focus-visible {
  outline: none !important;
}

.post,
.page {
  margin: 0;
}

.row {
  margin: 0;
}

p,
ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

.row>* {
  padding-left: 0;
  padding-right: 0;
}

body {
  width: 100%;
  font-family: var(--inter);
  overflow-x: hidden !important;
  color: var(--grey);
  background-color: var(--white);
}

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

.graspin-container {
  width: 100%;
  max-width: var(--graspincontainer);
  margin: 0 auto;
}
/* ==========================================================================
   01. HEADER  (Figma 216:61 — 1920 x 98)

   Figma geometry this is built from:
     header      1920 x 98
     logo frame  x=20  y=10  240 x 78   inner image 220 x 58 (10px inset)
     nav frame   x=488.5  width 943  y=36  height 22  (items 32px apart)
     CTA frame   x=1716 y=19  183.13 x 58  (text inset 30px, arrow at 138)
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background-color: var(--white);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999;
}

.header-inner {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 21px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Logo (Figma: 220 x 58 image) --- */
.header-logo {
  flex-shrink: 0;
  width: 220px;
  line-height: 0%;
}

.header-logo a {
  display: block;
}

.header-logo img,
.header-logo svg {
  display: block;
  width: 220px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

.header-logo-text {
  font-family: var(--inter);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 223.08%;
  color: var(--blue);
}

/* --- Navigation (Figma: centred, 32px gaps) --- */
.header-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}

.header-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Each item spans the full bar height so the submenu can hang off its
   bottom edge, which is exactly the header edge. */
.header-nav .nav-list > li {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  list-style-type: none;
}

.header-nav .nav-list > li > a {
  display: inline-flex;
  align-items: center;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 122.22%;
  color: var(--black);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.header-nav .nav-list > li > a:hover,
.header-nav .nav-list > li.current-menu-item > a,
.header-nav .nav-list > li.current_page_item > a,
.header-nav .nav-list > li.current-menu-ancestor > a,
.header-nav .nav-list > li.current-menu-parent > a {
  color: var(--red);
}

/* Active item is Extra Bold in the design */
.header-nav .nav-list > li.current-menu-item > a,
.header-nav .nav-list > li.current_page_item > a {
  font-weight: 800;
}

/* --- Dropdown caret (Figma 216:74 — 15x15 down chevron) ---
   Uses the exported asset as a mask so it inherits currentColor and turns
   red with the link. The source points down already, so no rotation is
   applied at rest — rotating a right-arrow was what made it blur. */
.header-nav .nav-list > li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header-nav .nav-list > li.menu-item-has-children > a::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("../images/chevron-down.svg") no-repeat center center;
  mask: url("../images/chevron-down.svg") no-repeat center center;
  -webkit-mask-size: 15px 15px;
  mask-size: 15px 15px;
  transition: transform 0.3s ease;
}

.header-nav .nav-list > li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* Submenu drops from the bottom edge of the header, not from the link.
   The nav is a full-height flex child, so anchoring the submenu to the nav's
   own bottom edge puts it flush with the header edge automatically — no
   magic offset that has to be re-tuned at every breakpoint. */
.header-nav .nav-list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: 0;
  background-color: var(--white);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.header-nav .nav-list > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-nav .nav-list .sub-menu li {
  list-style-type: none;
}

.header-nav .nav-list .sub-menu li a {
  display: block;
  padding: 14px 24px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 150%;
  color: var(--black);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.header-nav .nav-list .sub-menu li a:hover,
.header-nav .nav-list .sub-menu li.current-menu-item a {
  color: var(--red);
  background-color: rgba(237, 50, 55, 0.06);
}

/* --- CTA button (Figma: 183 x 58, text inset 30, gap 10) --- */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 58px;
  padding: 0 30px;
  background-color: var(--blue);
  border-radius: 100px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 122.22%;
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.header-cta:hover {
  background-color: var(--red);
  color: var(--white);
}

.header-cta .btn-arrow {
  width: 15px;
  height: auto;
  /* A true 45 degrees, so the arrow points cleanly up and to the right. */
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.header-cta:hover .btn-arrow {
  transform: rotate(0deg) translateX(3px);
}

.header-cta--mobile {
  display: none;
}

/* --- Hamburger --- */
.menu-toggle {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* above the off-canvas panel so it can be tapped to close */
  z-index: 1001;
}

.menu-toggle span {
  position: absolute;
  left: 50%;
  display: block;
  width: 24px;
  height: 2px;
  margin-left: -12px;
  background-color: var(--blue);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 27px; }

/* Open state: bars converge on the centre line and cross into an X */
.menu-toggle.is-active span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* --- Mobile overlay --- */
.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 17, 17, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}

.menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   COMMON BUTTONS
   ========================================================================== */

.btn-red,
.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 32px;
  border-radius: 100px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: normal;
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.btn-red { background-color: var(--red); }
.btn-red:hover { background-color: var(--blue); color: var(--white); }

.btn-blue { background-color: var(--blue); }
.btn-blue:hover { background-color: var(--red); color: var(--white); }

.btn-red .btn-arrow,
.btn-blue .btn-arrow {
  width: 18px;
  height: auto;
  transition: transform 0.3s ease;
}

.btn-red:hover .btn-arrow,
.btn-blue:hover .btn-arrow {
  transform: translateX(4px);
}

/* Offset for the fixed header */
.home-page {
  padding-top: 98px;
}


/* ==========================================================================
   01. HERO  (Figma 393:131 — 1920 x 909)

   Measured from Figma:
     hero        1920 x 909, background full-bleed, NO dark overlay
     content     x=373 y=368 -> 270px from the hero top, 1174 wide, centred
     heading     1174 x 184, 80px / 92px / -0.8px, uppercase, #fff
     gap         10px between heading and sub-text
     sub-text    790 x 84, 20px / 1.42 / -0.2px, #e5f1fa, centred
     gap         40px between the copy block and the button
     button      237 x 62, padding 20px 32px, gap 10px, radius 100px
   ========================================================================== */

.hero-sec {
  position: relative;
  width: 100%;
  /* Full viewport minus the fixed header. --header-h tracks the header at
     every breakpoint, so this stays in sync automatically. */
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 480px;
  overflow: hidden;
}

/* No poster on the video — a poster paints instantly and then swaps to the
   first frame, which reads as a flash. This gradient stands in instead: it
   approximates the video's opening frame, so the moment it starts playing
   there is nothing to notice. */
.hero-bg {
  position: absolute;
  inset: 0;
  /* Sampled from the video's own first frame, so the stand-in and the video
     read as the same picture. */
  background-color: #949ea0;
  background-image: linear-gradient(180deg, #90b0c6 0%, #b8bcb7 50%, #7d848670 78%, #4c565b 100%);
}

.hero-bg img,
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The video fades up over the gradient rather than appearing at full
   strength, which hides any small difference between the two. */
.hero-video {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-video.is-ready { opacity: 1; }

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

/* Overlay to hold the bright video back behind the copy. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60.01% 60.01% at 50% 50%, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%);
  pointer-events: none;
}

.hero-content {
  position: absolute;
  /* Figma places the copy 270px into a 909px hero — just above centre.
     Centring keeps that proportion now the height is viewport-driven. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1174px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  z-index: 2;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hero-title {
  width: 100%;
  font-family: var(--inter);
  font-size: var(--fs-80);
  font-weight: 700;
  line-height: 115%;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  color: var(--white);
}

.hero-text {
  width: 790px;
  max-width: 100%;
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: 142%;
  letter-spacing: -0.2px;
  color: #e5f1fa;
}

.hero-btn {
  padding: 20px 32px;
}

/* ==========================================================================
   SHARED SECTION HEADER
   ========================================================================== */

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sec-head--center {
  align-items: center;
  max-width: 1022px;
  margin: 0 auto;
  text-align: center;
}

.sec-head--left {
  align-items: flex-start;
  text-align: left;
}

.sec-eyebrow {
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 142%;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: var(--red);
}

.sec-title {
  font-family: var(--inter);
  font-size: var(--fs-50);
  font-weight: 800;
  line-height: 130%;
  letter-spacing: -0.5px;
  text-transform: capitalize;
  color: var(--black);
}

.sec-head--center .sec-eyebrow + .sec-title,
.sec-head--left .sec-eyebrow + .sec-title {
  margin-top: 0;
}

.sec-sub {
  max-width: 778px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.sec-sub--wide { max-width: 828px; }

.sec-head--left .sec-sub { max-width: 100%; }

/* Heading -> description is 20px. The header gap already supplies 10px, so
   the copy adds the other 10. Left-aligned headers are excluded: there the
   red rule sits between, carrying its own 28px either side. */
.sec-head--center .sec-sub { margin-top: 10px; }

/* Red rule under left-aligned headings */
/* The rule sits 28px clear of the title above and the copy below, per
   Figma. The header gap is 10px, so 18px of margin makes up the rest. */
.sec-head--left::after {
  content: "";
  display: block;
  width: 51px;
  height: 4px;
  margin: 18px 0;
  background-color: var(--red);
  order: 2;
}

.sec-head--left .sec-sub { order: 3; }


/* ==========================================================================
   02. ABOUT  (Figma 74:191 — 1720 x 680)

   Measured from Figma:
     section     1720 x 680, columns 82px apart
     left col    860 wide; image 826 x 648 at y=0
     strip       747 x 168 at x=113 y=512 — overlaps the image, flush with
                 the section bottom; 30px padding, inner row 678 x 108
     items       129 / 147 / 129 / 129 wide, dividers 1 x 94 centred in the
                 24px gaps either side
     icon        40 x 40, label 14px below it
     right col   778 wide, vertically centred (y=110.5 of 680)
     rhythm      eyebrow -> 10 -> heading -> 28 -> rule -> 28 -> body -> 28 -> button
   ========================================================================== */

.about-sec {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

/* Decorative pylon watermark (Figma 74:318, 299 x 458) */
.about-watermark {
  position: absolute;
  right: 24px;
  top: 50%;
  width: 299px;
  height: 458px;
  transform: translateY(-50%);
  background: url("../images/about-pylon.svg") no-repeat center / contain;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.about-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 82px;
}

/* --- Left: image with the overlapping red strip --- */
.about-media {
  position: relative;
  flex: 0 0 860px;
  max-width: 860px;
  min-height: 680px;
}

.about-img img {
  display: block;
  width: 826px;
  max-width: 100%;
  height: 648px;
  object-fit: cover;
}

.about-strip {
  position: absolute;
  left: 113px;
  top: 512px;
  width: 747px;
  max-width: calc(100% - 113px);
  padding: 30px;
  background-color: var(--red);
  filter: drop-shadow(0px 2px 2.5px rgba(51, 4, 4, 0.25));
}

/* Four equal columns, so every item gets the same width and both outer
   edges sit the same distance from the strip padding. The 40px grid gap
   separates the columns, so the items carry no padding of their own. */
.about-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
}

.about-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.about-feat-icon {
  display: block;
  color: var(--white);
}

.about-feat-icon img,
.about-feat-icon svg {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.about-feat p {
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 135%;
  letter-spacing: -0.2px;
  text-transform: capitalize;
  color: var(--white);
}

/* --- Right: copy --- */
.about-content {
  flex: 0 0 778px;
  max-width: 778px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

/* Figma: eyebrow -> 10 -> heading -> 28 -> rule -> 28 -> body.
   One flex gap cannot express two values, so the row gap is 28 and the
   heading is pulled up 18px to make the first gap 10. */
.about-content .sec-head--left .sec-title {
  margin-top: 0;
}

.about-content .sec-title {
  width: 629px;
  max-width: 100%;
}

.about-btn {
  padding: 20px 32px;
}


/* ==========================================================================
   03. OUR BUSINESS  (Figma 74:321 — 1720 x 722)

   Measured from Figma:
     header      1022 wide, centred; eyebrow -> 10 -> heading -> 20 -> subcopy
     header gap  50px above the card row
     cards       3 x 560 with 20px gaps = 1720 exactly, each 491 tall
     default     photo + bottom gradient, title 30/46 uppercase, red 48px
                 arrow button; padding 319 / 42 / 30 / 30
     hover       rgba(0,0,0,0.7) wash, content moves to the top (30,30),
                 description appears, white "Explore Solutions" pill
   ========================================================================== */

.business-sec { padding: 0 0 100px; }

.business-sec .sec-head--center {
  max-width: 1022px;
}

.business-row {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

.business-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 491px;
  overflow: hidden;
  isolation: isolate;
}

.business-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.business-card:hover .business-card-bg,
.business-card:focus-within .business-card-bg {
  transform: scale(1.06);
}

/* Default: gradient from the foot of the card. Hover: full dark wash. */
.business-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(195deg, rgba(0, 0, 0, 0) 57.78%, rgba(0, 0, 0, 1) 88.3%);
  transition: background 0.4s ease;
}

.business-card:hover::after,
.business-card:focus-within::after {
  background: rgba(0, 0, 0, 0.7);
}

/* justify-content cannot be transitioned, so the copy is anchored to the
   top and translated down for the default state. Figma: default title
   baseline sits at 319px, hover at 30px, so the shift is 289px. */
.business-card-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px 42px 30px 30px;
}

.business-card-copy {
  transform: translateY(var(--biz-shift, 289px));
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

.business-card:hover .business-card-copy,
.business-card:focus-within .business-card-copy {
  transform: translateY(0);
}

.business-card-title {
  max-width: 488px;
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: 153.33%;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--white);
}

/* Description only exists in the hover state */
.business-card-desc {
  max-width: 503px;
  margin-top: 13px;
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: 146%;
  letter-spacing: -0.2px;
  color: #e5f1fa;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

.business-card:hover .business-card-desc,
.business-card:focus-within .business-card-desc {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Red circular arrow — the default state */
.business-card-icon {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--red);
  border-radius: 100px;
  color: var(--white);
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.business-card-icon .btn-arrow { width: 18px; height: auto; }

.business-card:hover .business-card-icon,
.business-card:focus-within .business-card-icon {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* White pill — the hover state */
.business-card-btn {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 20px 32px;
  background-color: var(--white);
  border-radius: 100px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: normal;
  color: #305087;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease, background-color 0.3s ease;
}

.business-card-btn .btn-arrow { width: 18px; height: auto; }

.business-card:hover .business-card-btn,
.business-card:focus-within .business-card-btn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.business-card-btn:hover {
  background-color: var(--red);
  color: var(--white);
}


/* ==========================================================================
   04. WORLDWIDE MAP  (Figma 74:333 — 1720 x 991)

   Measured from Figma:
     header   1022 wide, centred; same 10 / 20 rhythm as Our Business
     gap      50px under the header
     map      1522 x 760, centred (99px either side of the 1720 container)
     pins     23 x 30, positioned by their TIP as a % of the map box so
              they stay locked to their country as the map scales
     section  181 + 50 + 760 = 991 exactly
   ========================================================================== */

.world-sec { padding: 0 0 0px; display:none;}

.world-sec .sec-head--center {
  max-width: 1022px;
}

.world-map {
  position: relative;
  width: 1522px;
  max-width: 100%;
  margin: 50px auto 0;
}

.world-map-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pin anchored by its tip: translate back by half its width and all of
   its height so the point sits exactly on the stored coordinate. */
.world-pin {
  position: absolute;
  width: 23px;
  height: 30px;
  transform: translate(-50%, -100%);
  background: url("../images/map-pin.svg") no-repeat center / contain;
  pointer-events: none;
}

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


/* ==========================================================================
   05. OUR EXPERTISE  (Figma 83:247 — 1720 x 647)

   Measured from Figma:
     header   1022 wide, centred; sub-copy 750 wide
     gap      50px under the header
     cards    4 x 415 with 20px gaps = 1720 exactly, each 416 tall
     default  photo + bottom gradient, title 26px semibold at the foot,
              padding 355 / 70 / 30 / 30
     hover    rgba(0,0,0,0.7) wash, title moves to 30,30 with a 30px gap
              to a disc list: 22px items, 18px apart, marker inset 33px
   ========================================================================== */

.expertise-sec { padding: 0 0 100px; }

.expertise-sec .sec-head--center {
  max-width: 1022px;
}

.sec-sub--narrow { max-width: 750px; }

.expertise-row {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

.expertise-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 416px;
  overflow: hidden;
  isolation: isolate;
}

.expertise-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.expertise-card:hover .expertise-card-bg,
.expertise-card:focus-within .expertise-card-bg {
  transform: scale(1.06);
}

/* Default: gradient from the foot. Hover: full dark wash. */
.expertise-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70.19%, rgba(0, 0, 0, 1) 100%);
  transition: background 0.4s ease;
}

.expertise-card:hover::after,
.expertise-card:focus-within::after {
  background: rgba(0, 0, 0, 0.7);
}

.expertise-card-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 70px 30px 30px;
}

/* Default title sits at 355px; hover lifts it to 30px, so the shift is 325. */
.expertise-card-title {
  transform: translateY(var(--exp-shift, 325px));
  font-family: var(--inter);
  font-size: var(--fs-26);
  font-weight: 600;
  line-height: normal;
  color: var(--white);
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

.expertise-card:hover .expertise-card-title,
.expertise-card:focus-within .expertise-card-title {
  transform: translateY(0);
}

/* Bullet list only exists in the hover state */
.expertise-card-list {
  margin: 30px 0 0;
  padding-left: 33px;
  list-style: disc;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0s,
    transform 0.4s cubic-bezier(0.33, 1, 0.68, 1) 0s,
    visibility 0s linear 0.4s;
}

/* On the way in the title leads and the list follows once it has landed;
   on the way out both leave together so the card closes cleanly. */
.expertise-card:hover .expertise-card-list,
.expertise-card:focus-within .expertise-card-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1) 0.3s,
    transform 0.45s cubic-bezier(0.33, 1, 0.68, 1) 0.3s,
    visibility 0s linear 0.3s;
}

.expertise-card-list li {
  list-style: disc;
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 400;
  line-height: normal;
  color: var(--white);
}

.expertise-card-list li + li {
  margin-top: 18px;
}

/* A tight 60ms stagger so the lines read as one deliberate sequence rather
   than arriving at random. Each line rises with the list, not after it. */
.expertise-card-list li {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.35s cubic-bezier(0.33, 1, 0.68, 1) 0s,
    transform 0.35s cubic-bezier(0.33, 1, 0.68, 1) 0s;
}

.expertise-card:hover .expertise-card-list li,
.expertise-card:focus-within .expertise-card-list li {
  opacity: 1;
  transform: translateY(0);
}

.expertise-card:hover .expertise-card-list li:nth-child(1),
.expertise-card:focus-within .expertise-card-list li:nth-child(1) { transition-delay: 0.36s; }
.expertise-card:hover .expertise-card-list li:nth-child(2),
.expertise-card:focus-within .expertise-card-list li:nth-child(2) { transition-delay: 0.42s; }
.expertise-card:hover .expertise-card-list li:nth-child(3),
.expertise-card:focus-within .expertise-card-list li:nth-child(3) { transition-delay: 0.48s; }
.expertise-card:hover .expertise-card-list li:nth-child(4),
.expertise-card:focus-within .expertise-card-list li:nth-child(4) { transition-delay: 0.54s; }
.expertise-card:hover .expertise-card-list li:nth-child(5),
.expertise-card:focus-within .expertise-card-list li:nth-child(5) { transition-delay: 0.6s; }

/* Anyone who prefers reduced motion gets the content without the movement. */
@media (prefers-reduced-motion: reduce) {
  .expertise-card-title,
  .expertise-card-list,
  .expertise-card-list li,
  .expertise-card-bg {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}


/* ==========================================================================
   06. CSR & SUSTAINABILITY  (Figma 74:2291 — 1820 x 536)

   Measured from Figma:
     block     1820 wide — breaks out of the 1720 container by 50px each side
     red slab  300 x 536 at x=0, sits BEHIND the tabs (margin-right: -200)
     tabs      563 wide, starting 100px in; 14px apart
               active 171 tall (70px padding), inactive 81 (25px padding)
     overlay   rgba(3, 34, 88, 0.8) on every tab image
     label     26px semibold white, 20px from the left edge
     copy      580 wide, 70px from the tabs, 36px top offset
               title 30px bold black -> 20px -> body 18px/1.6 #666, 12px apart
     image     437 x 457, 70px from the copy, same 36px top offset
   ========================================================================== */

.csr-sec {
  padding: 0 0 100px;
  overflow-x: clip;
}

/* The block is 1820 wide — 100px past the 1720 container. Centre it on the
   viewport rather than the container, and let .csr-sec clip the overhang so
   it never produces a horizontal scrollbar on narrower screens. */
.csr-wrap {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  width: min(1820px, calc(100vw - var(--sbw, 0px)));
  margin: 50px 0 0;
  margin-left: calc(0px - (100vw - var(--sbw, 0px) - 100%) / 2);
}

/* Figma nests the slab and the tab stack together, so the 70px gap only
   separates the three top-level blocks. Grouping them here keeps the
   slab overlap at exactly 200px. */
.csr-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* --- Left: red slab behind the tab stack --- */
.csr-slab {
  flex: 0 0 300px;
  width: 300px;
  height: 536px;
  margin-right: -200px;
  background-color: var(--red);
}

.csr-tabs {
  position: relative;
  z-index: 1;
  flex: 0 0 563px;
  max-width: 563px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.csr-tab {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 25px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: padding 0.35s ease;
}

.csr-tab.is-active {
  padding: 70px 20px;
}

.csr-tab-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csr-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(3, 34, 88, 0.8);
  transition: background-color 0.3s ease;
}

.csr-tab:hover::after {
  background-color: rgba(3, 34, 88, 0.65);
}

.csr-tab span {
  position: relative;
  z-index: 2;
  font-family: var(--inter);
  font-size: var(--fs-26);
  font-weight: 600;
  line-height: normal;
  color: var(--white);
}

/* --- Right: panel copy + image --- */
.csr-panels {
  flex: 1 1 auto;
  min-width: 0;
}

.csr-panel {
  display: none;
  align-items: flex-start;
  gap: 70px;
}

.csr-panel.is-active {
  display: flex;
}

.csr-panel-copy {
  flex: 0 0 580px;
  max-width: 580px;
  padding-top: 36px;
}

.csr-panel-copy h3 {
  margin-bottom: 20px;
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: normal;
  color: #000000;
}

.csr-panel-body p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.csr-panel-body p + p {
  margin-top: 12px;
}

.csr-panel-img {
  flex: 0 0 437px;
  max-width: 437px;
  padding-top: 36px;
}

.csr-panel-img img {
  display: block;
  width: 100%;
  height: 457px;
  object-fit: cover;
}


/* ==========================================================================
   09. PARTNERS  (Figma 180:103)
   ========================================================================== */

.partners-sec {
  padding: 80px 0;
  background-color: #f4f5fa;
}

.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 150px;
  margin-top: 40px;
}

/* Each logo keeps the intrinsic width Figma gives it; the shared 117px height
   is what lines them up, so the differing aspect ratios stay undistorted. */
.partner-item {
  flex: 0 0 auto;
  height: 117px;
}

.partner-item a {
  display: block;
  height: 100%;
}

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


/* ==========================================================================
   10. MANUFACTURING FACILITY  (Figma 88:606)
   ========================================================================== */

.facility-sec { padding: 100px 0; }

.facility-row {
  display: grid;
  grid-template-columns: 792px minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 148px;
}

/* 792 wide, not 782: the slab overhangs the photo by 10px on the right,
   and Figma measures the group including that overhang. */
.facility-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 792 / 698;
}

/* The red slab sits behind the photo, flush to the bottom-right of the
   media box. Figma has it at 585x515 inside a 792x698 group, i.e. ~74%
   on both axes — expressed as percentages it scales at every breakpoint
   without per-width tuning. */
/* Same construction as the division slab: the offset lives entirely on the
   slab, so the band is an even 10px on the two edges where it shows. */
.facility-slab {
  position: absolute;
  left: -10px;
  top: 10px;
  right: 10px;
  bottom: -10px;
  background-color: var(--red);
  z-index: 0;
}

.facility-media { overflow: visible; }

.facility-img {
  position: relative;
  z-index: 1;
  height: 100%;
}

.facility-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facility-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

/* The column gap is 30px; the button sits 50px below the cards, so it
   makes up the remaining 20px itself. */
.facility-content .btn-blue {
  margin-top: 20px;
}

.facility-item {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  padding: 20px;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.facility-item-icon {
  display: block;
  flex-shrink: 0;
  color: var(--blue);
}

.facility-item-icon img,
.facility-item-icon svg {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.facility-item-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.facility-item-copy h3 {
  font-family: var(--inter);
  font-size: var(--fs-26);
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -0.26px;
  color: var(--black);
}

.facility-item-copy p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}


/* ==========================================================================
   11. PROJECTS  (Figma 105:5110)
   ========================================================================== */

.projects-sec { padding: 0 0 100px; }

.projects-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0 50px;
}

/* Balances the View All link so the tab pair lands on the row centre. */
.projects-bar::before {
  content: "";
  flex: 0 0 auto;
  width: 68px;
}

.projects-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
}

.proj-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: 50px;
  padding: 0 24px;
  background: transparent;
  border: 1px solid var(--blue);
  border-radius: 100px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: normal;
  color: var(--blue);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.proj-tab.is-active,
.proj-tab:hover {
  background-color: var(--blue);
  color: var(--white);
}

.proj-tab svg {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.projects-viewall {
  flex: 0 0 auto;
}

.projects-viewall {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--red);
  transition: color 0.3s ease;
}

.projects-viewall:hover { color: var(--blue); }

.projects-row {
  display: flex;
  gap: 20px;
}

.project-card {
  flex: 1;
  min-width: 0;
}

.project-card.is-hidden { display: none; }

.project-photo img {
  display: block;
  width: 100%;
  height: 307px;
  object-fit: cover;
}

.project-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: -24px;
  padding: 20px;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.1));
}

.project-badge {
  position: absolute;
  left: 20px;
  top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 89px;
  height: 89px;
  background-color: #f4f7fa;
  border: 0.748px solid #b4c7e7;
  border-radius: 50%;
  color: var(--blue);
}

.project-badge img,
.project-badge svg {
  display: block;
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.project-copy {
  padding-left: 110px;
  min-height: 105px;
}

.project-cat {
  display: block;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.18px;
  text-transform: uppercase;
  color: var(--red);
}

.project-title {
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--blue);
}

.project-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.project-loc svg {
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.project-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.project-value-label {
  display: block;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.project-value-num {
  display: block;
  font-family: var(--inter);
  font-size: var(--fs-32);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.32px;
  color: var(--blue);
}

.project-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 7px 12px;
  background-color: var(--red);
  border-radius: 100px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--white);
  transition: background-color 0.3s ease;
}

.project-btn:hover { background-color: var(--blue); color: var(--white); }
.project-btn .btn-arrow { width: 16px; height: auto; }


/* ==========================================================================
   12. FAQ  (Figma 74:2386)
   ========================================================================== */

.faq-sec { padding: 0 0 100px; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 50px;
}

.faq-item {
  background-color: #f4f5fa;
  border: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq-item.is-open {
  background-color: var(--blue);
  border-color: var(--blue);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 32px 30px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: padding 0.3s ease;
}

.faq-item.is-open .faq-q { padding: 40px 30px 15px; }

.faq-q span {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 600;
  line-height: normal;
  color: #000000;
  transition: color 0.3s ease;
}

.faq-item.is-open .faq-q span { color: var(--white); }

/* Plus / minus icon */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: var(--black);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.faq-icon::before { width: 18px; height: 2.5px; }
.faq-icon::after { width: 2.5px; height: 18px; }

.faq-item.is-open .faq-icon::before { background-color: var(--white); }
.faq-item.is-open .faq-icon::after { opacity: 0; }

.faq-a { padding: 0 30px 40px; }

.faq-a p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: #e5f1fa;
}

.faq-a p + p { margin-top: 12px; }


/* ==========================================================================
   13. CTA BAND  (Figma 105:5109)
   ========================================================================== */

.cta-sec {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 423px;
  padding: 80px 0;
  overflow: hidden;
}

/* The uploaded artwork is the whole 1920x423 band with the mirrored towers
   already composed in, so it needs no splitting or flipping here. */
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1022px;
  margin: 0 auto;
  text-align: center;
}

.cta-inner .sec-sub { max-width: 826px; }

/* ==========================================================================
   FOOTER  (Figma 105:5337 — 1920 x 493)

   Figma geometry:
     footer        1920 x 493, bg #183A73, padding-top 80
     row           x=100 width 1720, columns 145px apart
     col widths    285 / 189 / 264 / 213 / 188  (x: 0 / 430 / 764 / 1173 / 1531)
     logo          266 x 69 at y=0
     blurb         y=90  (21px below logo)
     socials       y=219, 62px pills, 12px gap
     col title     h=33, first link at y=52 (19px below title)
     link pitch    37px (27px line + 10px gap)
     legal row     45px below columns, 20px above baseline
   ========================================================================== */

.site-footer {
  padding: 80px 0 20px;
  background-color: var(--blue);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px 80px;
}

/* --- Intro column (285px) --- */
.footer-col--intro {
  flex: 0 0 335px;
  max-width: 335px;
}

.footer-logo {
  width: 266px;
  max-width: 100%;
  line-height: 0%;
}

.footer-logo img,
.footer-logo svg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.footer-about {
  margin-top: 21px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 150%;
  color: #e5f1fa;
}

/* --- Socials (62px pills, 12px apart) --- */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 21px 0 0;
  padding: 0;
}

.footer-socials li {
  list-style-type: none;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 50px;
  transition: background-color 0.3s ease;
}

.footer-socials a:hover {
  background-color: var(--red);
}

/* One size at every width: the responsive steps that used to shrink this to
   16px are gone, since that was what made the marks hard to read on a phone. */
.footer-socials img,
.footer-socials svg {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* --- Link columns --- */
.footer-col--links:nth-of-type(2) { flex: 0 0 189px; max-width: 189px; } /* COMPANY 1 */
.footer-col--links:nth-of-type(3) { flex: 0 0 170px; max-width: 170px; } /* COMPANY 2 (headless) */
.footer-col--links:nth-of-type(4) { flex: 0 0 264px; max-width: 264px; } /* OUR BUSINESS */

/* Continuation column: the spacer heading keeps its links aligned with the
   titled column beside it, but must not be read out or seen. */
.footer-col-title--spacer {
  visibility: hidden;
}

.footer-col--contact {
  flex: 1 1 auto;
  min-width: 358px;
  max-width: 358px;
}

.footer-col-title {
  margin: 0 0 19px;
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 150%;
  text-transform: uppercase;
  color: var(--white);
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.footer-links li,
.footer-contact li {
  list-style-type: none;
}

.footer-links a {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 150%;
  color: #e5f1fa;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--red);
}

/* --- Contact --- */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.footer-contact li > a,
.footer-contact li > address {
  min-width: 0;
}

.footer-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2.5px;
  color: #e5f1fa;
}

.footer-contact-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.footer-contact-addr {
  margin-bottom: 4px;
}

.footer-contact address {
  margin: 0;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #e5f1fa;
}

.footer-contact address p {
  margin: 0;
}

.footer-contact address strong {
  font-weight: 600;
  color: var(--white);
}

.footer-contact a {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 150%;
  color: #e5f1fa;
  overflow-wrap: break-word;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: var(--red);
}

/* --- Legal bar --- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 45px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 150%;
  color: #e5f1fa;
}

.footer-bottom strong,
.footer-bottom b {
  font-weight: 600;
  color: var(--white);
}

/* The credit text may wrap its label in <strong>, so colour the inner
   element too — otherwise `.footer-bottom strong` wins on specificity and
   the hover never shows. */
.footer-bottom a,
.footer-bottom a strong,
.footer-bottom a b {
  font-weight: 600;
  color: var(--white);
  transition: color 0.3s ease;
}

.footer-bottom a:hover,
.footer-bottom a:hover strong,
.footer-bottom a:hover b {
  color: var(--red);
}


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

/* --- 01. Page hero — half height, shared by any inner page --- */

.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Shorter than the home page's full 100dvh, but tall enough to read as a
     banner rather than a strip. */
  min-height: calc(62vh - var(--header-h));
  min-height: calc(62dvh - var(--header-h));
  padding: 120px 0;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--blue);
}

.page-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A flat scrim plus the home page radial, so the copy stays readable even
   over a bright sky. */
.page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60.01% 60.01% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.00) 100%),
    linear-gradient(180deg, rgba(3, 34, 88, 0.55) 0%, rgba(3, 34, 88, 0.65) 100%);
}

.page-hero .graspin-container {
  position: relative;
  z-index: 2;
}

.page-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1022px;
  margin: 0 auto;
  text-align: center;
}

.page-hero-title {
  font-family: var(--inter);
  font-size: var(--fs-50);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.5px;
  text-transform: capitalize;
  color: var(--white);
}

.page-hero-text {
  max-width: 826px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: #e5f1fa;
}

/* --- 02. Company overview --- */

.overview-sec { padding: 100px 0; }

.overview-row {
  display: grid;
  grid-template-columns: 792px minmax(0, 1fr);
  align-items: center;
  gap: 100px;
}

/* Same red slab treatment as the facility block on the home page. */
.overview-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 792 / 620;
}

/* Matches the division and facility slabs: the offset lives entirely on the
   slab, so the red band is an even 10px wherever it shows and stays put
   however tall the copy column beside it grows. */
.overview-slab {
  position: absolute;
  left: -10px;
  top: 10px;
  right: 10px;
  bottom: -10px;
  background-color: var(--red);
  z-index: 0;
}

.overview-media { overflow: visible; }

.overview-img {
  position: relative;
  z-index: 1;
  height: 100%;
}

.overview-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.overview-body p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.overview-body p + p { margin-top: 16px; }

.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  border-left: 4px solid var(--red);
}

.overview-stat-num {
  font-family: var(--inter);
  font-size: var(--fs-32);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.32px;
  color: var(--blue);
}

.overview-stat-label {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

/* --- 03. Group companies --- */

.gc-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.gc-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
}

.gc-card {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

/* Logos vary in aspect ratio, so a fixed band keeps every card aligned. */
.gc-card-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gc-card-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.gc-card-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background-color: #f4f7fa;
  border: 0.748px solid #b4c7e7;
  border-radius: 50%;
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 700;
  color: var(--blue);
}

.gc-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 30px;
}

.gc-card-name {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.22px;
  color: var(--blue);
}

.gc-card-tag {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.16px;
  text-transform: uppercase;
  color: var(--red);
}

.gc-card-text {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.gc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.16px;
  color: var(--red);
  transition: color 0.3s ease;
}

.gc-card-link .btn-arrow {
  width: 16px;
  height: auto;
}

.gc-card-link:hover { color: var(--blue); }

/* --- 04. Mission & vision --- */

.mv-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.mv-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.mv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 50px;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.mv-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #f4f7fa;
  border: 0.748px solid #b4c7e7;
  border-radius: 50%;
  color: var(--blue);
}

.mv-card-icon img,
.mv-card-icon svg {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.mv-card-title {
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.3px;
  color: var(--blue);
}

.mv-card-text {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

/* --- 05. Management team --- */

.team-sec { padding: 100px 0; }

.team-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
}

.team-card {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.team-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 40px;
  border-top: 4px solid var(--red);
}

.team-card-name {
  font-family: var(--inter);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.26px;
  color: var(--blue);
}

.team-card-role {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.18px;
  text-transform: uppercase;
  color: var(--red);
}

.team-card-bio {
  margin-top: 10px;
}

.team-card-bio p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.team-card-bio p + p { margin-top: 12px; }


/* ==========================================================================
   OUR BUSINESS PAGE
   ========================================================================== */

/* --- Divisions --- */

.division-sec { padding: 100px 0; }

/* The intro heading opens this section on both Our Business and Expertise,
   so the first row needs clearance beneath it. */
.division-sec .sec-head--center { margin-bottom: 60px; }

/* Anchored divisions stop clear of the fixed header rather than under it. */
.division-row[id] { scroll-margin-top: calc(var(--header-h) + 40px); }

.division-row {
  display: grid;
  grid-template-columns: 792px minmax(0, 1fr);
  align-items: center;
  gap: 100px;
}

.division-row + .division-row { margin-top: 100px; }

/* Every other block puts the picture on the right, so the page alternates. */
.division-row--flip .division-media { order: 2; }
.division-row--flip .division-content { order: 1; }

.division-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 792 / 620;
}

/* The slab is the only thing offset: it sits flush with the photo on two
   sides and extends 10px past it on the other two, so the red band reads the
   same width on every edge where it shows. The photo fills its own box. */
.division-slab {
  position: absolute;
  left: 10px;
  top: 10px;
  right: -10px;
  bottom: -10px;
  background-color: var(--red);
  z-index: 0;
}

/* Mirrored so the slab always sits on the outer edge of the picture. */
.division-row--flip .division-slab {
  left: -10px;
  right: 10px;
}

.division-media { overflow: visible; }

.division-img {
  position: relative;
  z-index: 1;
  height: 100%;
}

.division-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.division-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.division-body p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.division-body p + p { margin-top: 16px; }

.division-points {
  display: grid;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.division-points li {
  position: relative;
  padding-left: 34px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--blue);
}

/* Red tick, drawn in CSS so it needs no asset. */
.division-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}

/* --- Capability strip --- */

.bizcap-sec {
  padding: 100px 0;
  background-color: var(--blue);
}

.bizcap-sec .sec-title { color: var(--white); }
.bizcap-sec .sec-sub { color: #e5f1fa; }

.bizcap-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.bizcap-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px 30px;
  background-color: rgba(255, 255, 255, 0.06);
  border-top: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
  text-align: center;
  align-items: center;
}

.bizcap-num {
  font-family: var(--inter);
  font-size: var(--fs-32);
  font-weight: 800;
  line-height: 130%;
  letter-spacing: -0.32px;
  color: var(--white);
}

.bizcap-label {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: #e5f1fa;
}


/* ==========================================================================
   EXPERTISE PAGE
   ========================================================================== */

/* --- Detail cards --- */

.expdetail-sec { padding: 100px 0; }

.expdetail-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
}

.expdetail-card {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px;
  background-color: var(--white);
  border-top: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.expdetail-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.22px;
  color: var(--blue);
}

.expdetail-text {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}


/* ==========================================================================
   MANUFACTURING FACILITY PAGE
   ========================================================================== */

/* --- 02. Overview --- */

.mfov-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mfov-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
  border-left: 3px solid var(--red);
}

.mfov-stat-num {
  font-family: var(--inter);
  font-size: var(--fs-32);
  font-weight: 800;
  line-height: 120%;
  letter-spacing: -0.64px;
  color: var(--blue);
}

.mfov-stat-label {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 140%;
  color: var(--grey);
}

/* --- 03. Infrastructure --- */

.mfinf-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.mfinf-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
}

.mfinf-card {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px;
  background-color: var(--white);
  border-top: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.mfinf-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.44px;
  color: var(--blue);
}

.mfinf-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: var(--grey);
}

/* --- 04. Capacity --- */

.mfcap-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mfcap-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px;
  background-color: #f4f5fa;
  border-top: 4px solid var(--red);
}

.mfcap-num {
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 800;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: var(--blue);
}

.mfcap-label {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.18px;
  color: var(--black);
}

.mfcap-note {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 155%;
  color: var(--grey);
}

/* --- 05. Process --- */

.mfproc-sec {
  padding: 100px 0;
  background-color: var(--blue);
}

.mfproc-sec .sec-title { color: var(--white); }
.mfproc-sec .sec-sub { color: #e5f1fa; }

.mfproc-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.mfproc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px 30px;
  background-color: rgba(255, 255, 255, 0.06);
  border-top: 4px solid #bebebe;
}

.mfproc-num {
  font-family: var(--inter);
  font-size: var(--fs-32);
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.64px;
  color: #bebebe;
}

.mfproc-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.44px;
  color: var(--white);
}

.mfproc-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: #e5f1fa;
}

/* --- 06. Details of equipments --- */

.mfeq-sec { padding: 100px 0; }

/* Lets a wide table scroll inside itself rather than the page. */
.mfeq-wrap {
  margin-top: 50px;
  overflow-x: auto;
}

.mfeq-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  /* An outer edge so the table reads as one block rather than floating rows. */
  border: 1px solid #e3e6ef;
}

.mfeq-table th {
  padding: 20px 24px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--blue);
  white-space: nowrap;
}

.mfeq-table td {
  padding: 22px 24px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 155%;
  color: var(--grey);
  border-bottom: 1px solid #e3e6ef;
  vertical-align: top;
}

.mfeq-table tbody tr:nth-child(even) { background-color: #f8f9fc; }

.mfeq-name {
  display: block;
  font-size: var(--fs-18);
  font-weight: 600;
  letter-spacing: -0.18px;
  color: var(--blue);
}

.mfeq-note {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-16);
  line-height: 155%;
  color: var(--grey);
}


/* ==========================================================================
   PROJECTS PAGE
   ========================================================================== */

.pjgroup-sec { padding: 100px 0; }

/* Alternating ground so the two groups read as separate sections. */
.pjgroup-sec--alt { background-color: #f4f5fa; }

.pjgroup-sec .projects-row { margin-top: 50px; }

/* Three to a row here — the home page relies on flex:1 across a single row,
   but this page can carry any number of projects, so they need to wrap. */
.pjgroup-sec .projects-row { flex-wrap: wrap; }

.pjgroup-sec .project-card {
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
}

/* --- Richer project cards (Projects page only) --- */

.pjgroup-sec .project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
}

/* The body stretches so every card in a row ends level. */
.pjgroup-sec .project-body {
  flex: 1;
  gap: 14px;
}

.pjgroup-sec .project-photo { position: relative; }

/* Status pill, sat clear of the round badge below it. */
.project-status {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 7px 16px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0.3px;
  color: var(--white);
  background-color: var(--blue);
  border-radius: 100px;
}

.project-scope {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: var(--grey);
}

.project-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid #e3e6ef;
}

.project-meta li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.project-meta-label {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--grey);
}

.project-meta-val {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 145%;
  color: var(--blue);
}

/* The value strip closes the card, pushed to the bottom edge. */
.pjgroup-sec .project-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #e3e6ef;
}


/* ==========================================================================
   ESG PAGE
   ========================================================================== */

/* --- 02 / 05. Commitment and carbon pillar lists --- */

.esgcom-list {
  display: grid;
  gap: 18px;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.esgcom-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 20px;
  border-left: 3px solid var(--red);
}

.esgcom-item-title {
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 135%;
  letter-spacing: -0.2px;
  color: var(--blue);
}

.esgcom-item-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: var(--grey);
}

/* --- 03. Roadmap 2026 --- */

.esgroad-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.esgroad-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.esgroad-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 30px;
  background-color: var(--white);
  border-top: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.esgroad-year {
  align-self: flex-start;
  padding: 5px 14px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--blue);
  border-radius: 100px;
}

.esgroad-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.44px;
  color: var(--blue);
}

.esgroad-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: var(--grey);
}

/* --- 04. ESG pillars — the shared tab block needs its own top padding
   here, since on the home page the section above it supplies the space. --- */

.esgpil-sec { padding-top: 100px; }

/* Carbon accounting sits between two white sections, so it takes the grey
   ground to keep the page alternating. Scoped to the modifier — the
   commitment row shares .division-sec and stays white. */
.esgcarb-sec { background-color: #f4f5fa; }

/* --- 06. CSR --- */

.esgcsr-sec { padding: 100px 0; }

.esgcsr-body {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.esgcsr-body p {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.esgcsr-body p + p { margin-top: 14px; }

.esgcsr-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.esgcsr-card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.esgcsr-photo img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.esgcsr-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 30px;
  border-top: 4px solid var(--red);
}

/* No photograph on these cards yet, so the red rule sits at the very top
   rather than under an image. */
.esgcsr-card:not(:has(.esgcsr-photo)) .esgcsr-copy { padding-top: 30px; }

.esgcsr-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.44px;
  color: var(--blue);
}

.esgcsr-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: var(--grey);
}


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-sec { padding: 100px 0; }

.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 80px;
}

/* --- Left: details --- */

.contact-list {
  display: grid;
  gap: 26px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-icon {
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--blue);
  background-color: #f4f5fa;
  border-radius: 50%;
}

.contact-item-copy {
  min-width: 0;
  padding-top: 4px;
}

.contact-item-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--red);
}

.contact-item-copy address,
.contact-item-copy p,
.contact-item-copy a {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  font-style: normal;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--blue);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* The address is a <p> inside an <address>, and both keep a default bottom
   margin, so the gap under it stacked twice and pushed the rows apart.
   The list's own gap sets the spacing between rows instead. */
.contact-item-copy address,
.contact-item-copy address p,
.contact-item-copy p {
  margin: 0;
}

.contact-item-copy a:hover { color: var(--red); }

/* --- Right: the form panel --- */

.contact-form,
.contact-form {
  padding: 50px;
  background-color: #f4f5fa;
  border-top: 4px solid var(--red);
}

.contact-form-title {
  font-family: var(--inter);
  font-size: var(--fs-32);
  font-weight: 800;
  line-height: 130%;
  letter-spacing: -0.64px;
  color: var(--blue);
}

.contact-form-sub {
  margin-top: 8px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: var(--grey);
}

.contact-form-missing {
  font-family: var(--inter);
  font-size: var(--fs-18);
  line-height: 160%;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   Gravity Forms — this install runs GF 2.9's Orbital theme, whose framework
   layer is driven by CSS custom properties. Setting those is how the form is
   meant to be themed, and it avoids fighting Gravity's own specificity, so
   almost nothing below needs an override.
   -------------------------------------------------------------------------- */

.carapply-form .gform_wrapper.gform-theme--framework,
.contact-form .gform_wrapper.gform-theme--framework {
  /* Type */
  --gf-form-font-family: var(--inter);
  --gf-label-font-family: var(--inter);
  --gf-ctrl-label-font-family: var(--inter);
  --gf-ctrl-font-family: var(--inter);
  --gf-ctrl-btn-font-family: var(--inter);

  --gf-ctrl-label-font-size-primary: var(--fs-16);
  --gf-ctrl-label-font-weight-primary: 600;
  --gf-ctrl-label-color-primary: var(--blue);
  --gf-ctrl-label-font-size-secondary: var(--fs-16);
  --gf-ctrl-label-color-secondary: var(--grey);
  --gf-ctrl-desc-font-size: var(--fs-16);

  /* Inputs */
  --gf-ctrl-font-size: var(--fs-16);
  --gf-ctrl-color: var(--black);
  --gf-ctrl-bg-color: var(--white);
  --gf-ctrl-border-color: #d8dce8;
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-border-color-hover: #b9c1d6;
  --gf-ctrl-border-color-focus: var(--blue);
  --gf-ctrl-radius: 0px;
  --gf-ctrl-size-sm-height: 52px;
  --gf-ctrl-size-md-height: 52px;
  --gf-ctrl-size-lg-height: 56px;
  --gf-ctrl-padding-x: 18px;
  --gf-ctrl-placeholder-color: #9aa2b5;

  /* Sub-labels (First / Last / Country) default to 13px — the theme floor is
     16px, so raise them here rather than leaving them below it. */
  --gf-ctrl-sub-label-font-size: var(--fs-16);
  --gf-ctrl-sub-label-color: var(--grey);

  /* Focus ring in the brand blue rather than Gravity's default */
  --gf-ctrl-shadow-focus: 0 0 0 3px rgba(24, 58, 115, 0.12);
  --gf-local-color-primary: var(--blue);

  /* Required marker and errors in the brand red */
  --gf-ctrl-required-color: var(--red);
  --gf-ctrl-border-color-error: var(--red);
  --gf-ctrl-desc-color-error: var(--red);
  --gf-local-color-error: var(--red);

  /* Submit button */
  --gf-ctrl-btn-font-size: var(--fs-18);
  --gf-ctrl-btn-font-weight: 600;
  --gf-ctrl-btn-radius: 100px;
  --gf-ctrl-btn-padding-x: 38px;
  --gf-ctrl-btn-size-md-height: 54px;
  --gf-ctrl-btn-bg-color-primary: var(--blue);
  --gf-ctrl-btn-bg-color-hover-primary: var(--red);
  --gf-ctrl-btn-bg-color-active-primary: var(--red);
  --gf-ctrl-btn-color-primary: var(--white);
  --gf-ctrl-btn-border-color-primary: var(--blue);
  --gf-ctrl-btn-border-color-hover-primary: var(--red);
  --gf-ctrl-btn-border-color-active-primary: var(--red);

  /* Row rhythm */
  --gf-field-gap-y: 22px;
  --gf-form-gap-y: 26px;
}

.carapply-form .gform_wrapper { margin-top: 26px; }
.contact-form .gform_wrapper { margin-top: 26px; }

/* Orbital sizes these from its own `sm` scale, which the variables above do
   not reach on this form, so set them directly. Every value here matches the
   theme's 16px minimum. */
.carapply-form .gform_wrapper input[type="text"],
.contact-form .gform_wrapper input[type="text"],
.carapply-form .gform_wrapper input[type="email"],
.contact-form .gform_wrapper input[type="email"],
.carapply-form .gform_wrapper input[type="tel"],
.contact-form .gform_wrapper input[type="tel"],
.carapply-form .gform_wrapper input[type="number"],
.contact-form .gform_wrapper input[type="number"],
.carapply-form .gform_wrapper input[type="url"],
.contact-form .gform_wrapper input[type="url"],
.carapply-form .gform_wrapper select,
.contact-form .gform_wrapper select {
  height: 52px;
  font-size: var(--fs-16);
  line-height: 52px;
}

.carapply-form .gform_wrapper .gform-field-label--type-sub,
.contact-form .gform_wrapper .gform-field-label--type-sub {
  font-size: var(--fs-16);
  color: var(--grey);
}

/* These two are set by an Orbital rule that outranks the block above, and
   both land under the theme's 16px floor, so they need the override. */
.carapply-form .gform_wrapper .gform-phone__dial-code { font-size: var(--fs-16) !important; }
.contact-form .gform_wrapper .gform-phone__dial-code { font-size: var(--fs-16) !important; }

.carapply-form .gform_wrapper .gform_button,
.contact-form .gform_wrapper .gform_button {
  font-size: var(--fs-18) !important;
  font-weight: 600;
}

/* Gravity already renders its own asterisk inside .gfield_required, so this
   only colours it — adding one here would double it up. The "(Required)"
   text variant is hidden in case a field is set to use it. */
.carapply-form .gform_wrapper .gfield_required_text { display: none; }
.contact-form .gform_wrapper .gfield_required_text { display: none; }

/* Orbital sets its own required colour through a variable that outranks a
   plain rule here, so the brand red needs the override. */
.carapply-form .gform_wrapper .gfield_required,
.contact-form .gform_wrapper .gfield_required,
.carapply-form .gform_wrapper .gfield_required_asterisk,
.contact-form .gform_wrapper .gfield_required_asterisk {
  margin-left: 3px;
  font-weight: 700;
  color: var(--red) !important;
}

/* Nested spans would otherwise inherit the margin and space the asterisk out. */
.carapply-form .gform_wrapper .gfield_required .gfield_required { margin-left: 0; }
.contact-form .gform_wrapper .gfield_required .gfield_required { margin-left: 0; }

/* The legend repeats what the asterisks already say, and the form's own
   sub-copy covers it, so it is dropped. */
.carapply-form .gform_wrapper .gform_required_legend { display: none; }
.contact-form .gform_wrapper .gform_required_legend { display: none; }

/* Every field carries the same 1px border as the phone control, so the whole
   form reads as one set. */
.carapply-form .gform_wrapper input[type="text"],
.contact-form .gform_wrapper input[type="text"],
.carapply-form .gform_wrapper input[type="email"],
.contact-form .gform_wrapper input[type="email"],
.carapply-form .gform_wrapper input[type="tel"],
.contact-form .gform_wrapper input[type="tel"],
.carapply-form .gform_wrapper input[type="number"],
.contact-form .gform_wrapper input[type="number"],
.carapply-form .gform_wrapper input[type="url"],
.contact-form .gform_wrapper input[type="url"],
.carapply-form .gform_wrapper select,
.contact-form .gform_wrapper select,
.carapply-form .gform_wrapper textarea,
.contact-form .gform_wrapper textarea {
  border: 1px solid #d8dce8;
}

/* No browser outline on any field — focus is shown by the border and ring
   below instead, so it stays in the theme's colours. */
.carapply-form .gform_wrapper input:focus,
.contact-form .gform_wrapper input:focus,
.carapply-form .gform_wrapper input:focus-visible,
.contact-form .gform_wrapper input:focus-visible,
.carapply-form .gform_wrapper select:focus,
.contact-form .gform_wrapper select:focus,
.carapply-form .gform_wrapper select:focus-visible,
.contact-form .gform_wrapper select:focus-visible,
.carapply-form .gform_wrapper textarea:focus,
.contact-form .gform_wrapper textarea:focus,
.carapply-form .gform_wrapper textarea:focus-visible,
.contact-form .gform_wrapper textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24, 58, 115, 0.12);
}

/* The number input sits inside the bordered wrapper, so it shows nothing of
   its own — the wrapper's :focus-within carries the state. */
.carapply-form .gform_wrapper input.gform-phone__input:focus,
.contact-form .gform_wrapper input.gform-phone__input:focus,
.carapply-form .gform_wrapper input.gform-phone__input:focus-visible,
.contact-form .gform_wrapper input.gform-phone__input:focus-visible {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The dropdown's search box keeps a visible focus, minus the browser ring. */
.carapply-form .gform_wrapper .gform-phone__search:focus,
.contact-form .gform_wrapper .gform-phone__search:focus,
.carapply-form .gform_wrapper .gform-phone__search:focus-visible,
.contact-form .gform_wrapper .gform-phone__search:focus-visible {
  outline: none !important;
  border-color: var(--blue);
  box-shadow: none;
}

/* --- Validation ----------------------------------------------------------
   The per-field messages say everything the summary box does, so the box is
   redundant here and is hidden. Each control turns red instead. */

.carapply-form .gform_wrapper .gform_validation_errors { display: none; }
.contact-form .gform_wrapper .gform_validation_errors { display: none; }

.carapply-form .gform_wrapper .gfield_error input,
.contact-form .gform_wrapper .gfield_error input,
.carapply-form .gform_wrapper .gfield_error select,
.contact-form .gform_wrapper .gfield_error select,
.carapply-form .gform_wrapper .gfield_error textarea,
.contact-form .gform_wrapper .gfield_error textarea {
  border-color: var(--red);
}

/* The phone control's border lives on the wrapper, not the input, so the
   error state has to be set there or it stays grey. */
.carapply-form .gform_wrapper .gfield_error .gform-phone__input-wrapper,
.contact-form .gform_wrapper .gfield_error .gform-phone__input-wrapper {
  border-color: var(--red);
}

.carapply-form .gform_wrapper .gfield_error .gform-phone__input-wrapper:focus-within,
.contact-form .gform_wrapper .gfield_error .gform-phone__input-wrapper:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(237, 50, 55, 0.12);
}

.carapply-form .gform_wrapper .gfield_error input:focus,
.contact-form .gform_wrapper .gfield_error input:focus,
.carapply-form .gform_wrapper .gfield_error textarea:focus,
.contact-form .gform_wrapper .gfield_error textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(237, 50, 55, 0.12);
}

/* --- Phone field ---------------------------------------------------------
   Gravity splits this into a country button and a number input, each with its
   own "Country" / "Phone Number" sub-label above it. The field already has a
   "Phone" label, so those two are redundant on the page — hidden visually but
   left in the DOM, since the button and input still need accessible names.
   The two controls are then joined into one bordered unit. */

.carapply-form .gform_wrapper .ginput_country-selector_container > label,
.contact-form .gform_wrapper .ginput_country-selector_container > label,
.carapply-form .gform_wrapper .ginput_phone_container > label,
.contact-form .gform_wrapper .ginput_phone_container > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One control: the country button sits flush against the number input. */
.carapply-form .gform_wrapper .gform-phone__input-wrapper,
.contact-form .gform_wrapper .gform-phone__input-wrapper {
  /* Gravity lays this out as a grid, so the columns are set here rather than
     with flex — otherwise the country segment keeps its own short height. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  height: 52px;
  background-color: var(--white);
  border: 1px solid #d8dce8;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.carapply-form .gform_wrapper .gform-phone__input-wrapper:focus-within,
.contact-form .gform_wrapper .gform-phone__input-wrapper:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24, 58, 115, 0.12);
}

.carapply-form .gform_wrapper .ginput_country-selector_container,
.contact-form .gform_wrapper .ginput_country-selector_container {
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* The selector is a plain segment with a divider, not a pill button. */
.carapply-form .gform_wrapper .gform-phone__country-selector,
.contact-form .gform_wrapper .gform-phone__country-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  /* Orbital pins its tertiary button to 38px; clear that so it fills the row. */
  min-height: 100% !important;
  padding: 0 14px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--black);
  /* Flat against the wrapper: no border or tint of its own, so the flag and
     dial code read as part of the same white control as the number input. */
  background-color: var(--white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.carapply-form .gform_wrapper .gform-phone__country-selector:hover,
.contact-form .gform_wrapper .gform-phone__country-selector:hover,
.carapply-form .gform_wrapper .gform-phone__country-selector:focus,
.contact-form .gform_wrapper .gform-phone__country-selector:focus,
.carapply-form .gform_wrapper .gform-phone__country-selector:focus-visible,
.contact-form .gform_wrapper .gform-phone__country-selector:focus-visible {
  /* The wrapper already shows the focus state for the whole control, so the
     button must not draw a second ring of its own. */
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background-color: var(--white) !important;
}

.carapply-form .gform_wrapper .gform-phone__dial-code,
.contact-form .gform_wrapper .gform-phone__dial-code {
  font-family: var(--inter);
  font-weight: 500;
  color: var(--black);
}

/* The number input fills the rest; its own border now belongs to the wrapper. */
.carapply-form .gform_wrapper .ginput_phone_container,
.contact-form .gform_wrapper .ginput_phone_container {
  min-width: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.carapply-form .gform_wrapper input.gform-phone__input,
.contact-form .gform_wrapper input.gform-phone__input {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  font-size: var(--fs-16);
  line-height: normal;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.carapply-form .gform_wrapper input.gform-phone__input:focus,
.contact-form .gform_wrapper input.gform-phone__input:focus {
  border: 0;
  box-shadow: none;
}

/* The country dropdown, matched to the rest of the form. */
.carapply-form .gform_wrapper .gform-phone__dropdown,
.contact-form .gform_wrapper .gform-phone__dropdown {
  border: 1px solid #d8dce8;
  border-radius: 0;
}

.carapply-form .gform_wrapper .gform-phone__search,
.contact-form .gform_wrapper .gform-phone__search {
  height: 44px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  border-radius: 0;
}

/* Textarea needs a usable working height — the height vars only cover inputs. */
.carapply-form .gform_wrapper textarea,
.contact-form .gform_wrapper textarea {
  min-height: 150px;
  padding: 14px 18px;
  resize: vertical;
}

/* Confirmation message, styled like the rest of the page. */
.carapply-form .gform_confirmation_message,
.contact-form .gform_confirmation_message {
  padding: 22px 24px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 160%;
  color: var(--blue);
  background-color: var(--white);
  border-left: 4px solid var(--red);
}

/* --- 03. Map — full width, capped at 1902px --- */

.contact-map {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #f4f5fa;
}

.contact-map-inner {
  width: 100%;
  max-width: 1902px;
  height: 520px;
}

.contact-map-inner iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   THANK YOU + 404
   ========================================================================== */

/* --- 404 keeps the centred single column --- */

.err-sec {
  display: flex;
  align-items: center;
  /* The header is fixed, so clear it with margin — otherwise the 404 numerals
     sit behind it at every width where the padding is smaller. */
  margin-top: var(--header-h);
  min-height: calc(72dvh - var(--header-h));
  padding: 110px 0;
  background-color: #f4f5fa;
}

.err-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.err-head { width: 100%; }

.err-sec .sec-title { margin-top: 10px; }

.err-sec .sec-sub {
  max-width: 720px;
  margin: 20px auto 0;
}

.err-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 44px;
}

/* --- Thank you — a two-column split filling the viewport ------------------
   The section takes the full height left under the fixed header and centres
   its content both ways, so the page reads as one composed screen rather
   than something to scroll. */

.ty-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The header is fixed, so its height is cleared with margin rather than
     subtracted here — otherwise the panel's top edge sits behind it. */
  margin-top: var(--header-h);
  min-height: calc(100dvh - var(--header-h));
  padding: 100px 0;
  background-color: #f4f5fa;
}

.ty-sec > .graspin-container { width: 100%; }

.ty-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  width: 100%;
}

/* --- Left: the message --- */

.ty-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ty-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 28px;
  color: var(--white);
  background-color: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(24, 58, 115, 0.08);
}

.ty-head { width: 100%; }

.ty-sec .sec-title { margin-top: 10px; }

.ty-sec .sec-sub {
  max-width: 560px;
  margin: 20px auto 0;
}

.ty-direct {
  margin-top: 34px;
  padding: 22px 28px;
  background-color: var(--white);
  border-left: 4px solid var(--blue);
}

.ty-direct-title {
  display: block;
  margin-bottom: 12px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--red);
}

.ty-direct-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ty-direct-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ty-direct-icon {
  display: flex;
  align-items: center;
  color: var(--blue);
}

.ty-direct-list a {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--blue);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ty-direct-list a:hover { color: var(--red); }

.ty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}

/* --- Right: the panel --- */

.ty-right {
  padding: 46px 44px;
  background-color: var(--white);
  border-top: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.ty-panel-title,
.ty-links-title {
  display: block;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--red);
}

.ty-steps {
  display: grid;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

/* Each step is a number beside its copy, so the column reads as a sequence. */
.ty-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.ty-step-num {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.44px;
  color: var(--red);
}

.ty-step-copy { min-width: 0; }

.ty-step-title {
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 135%;
  letter-spacing: -0.2px;
  color: var(--blue);
}

.ty-step-text {
  margin-top: 4px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  color: var(--grey);
}

.ty-links {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid #e3e6ef;
}

/* Two across, so four links take half the height they did in one column. */
.ty-links ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* Each link is its own tile. The negative margin the plain list used to bleed
   its hover past the panel padding is gone — it would hang the boxes outside
   the panel edges. */
.ty-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--blue);
  text-decoration: none;
  background-color: var(--white);
  border: 1px solid #e3e6ef;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ty-links a:hover {
  color: var(--red);
  background-color: #f4f5fa;
  border-color: var(--red);
}

/* The label holds one line at every width — tuning padding per breakpoint
   would always leave some width where "Manufacturing Facility" breaks. */
.ty-links a span {
  min-width: 0;
  white-space: nowrap;
}

/* The arrow travels on hover, matching the buttons elsewhere. */
.ty-links a svg {
  flex: 0 1 auto;
  width: 18px;
  height: auto;
  transition: transform 0.3s ease;
}

.ty-links a:hover svg { transform: translateX(4px); }

/* --- 404 --- */

/* The numerals sit behind the heading as a watermark rather than shouting. */
.err-code {
  font-family: var(--inter);
  font-size: 150px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -6px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(24, 58, 115, 0.18);
  margin-bottom: 20px;
}

.err-links {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid #dfe3ee;
  width: 100%;
}

.err-links-title {
  display: block;
  margin-bottom: 14px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--grey);
}

.err-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.err-links a {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.err-links a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}


/* ==========================================================================
   CARD HOVER STATES
   Most cards on the site were static. These give them one consistent
   response: a small lift and a deeper shadow, with the red accent widening
   where a card already has one.

   The base cards use `filter: drop-shadow`, which is expensive to animate,
   so the hover shadow is painted with `box-shadow` instead and only
   transform and box-shadow are transitioned.
   ========================================================================== */

/* --- White cards on a light ground, with a red top rule --- */

.expdetail-card,
.mfinf-card,
.esgroad-step,
.bizcap-item,
.mfcap-item,
.esgcsr-card,
.gc-card,
.team-card,
.mv-card,
.facility-item,
.ty-step,
.mfproc-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.expdetail-card:hover,
.mfinf-card:hover,
.esgroad-step:hover,
.esgcsr-card:hover,
.gc-card:hover,
.team-card:hover,
.mv-card:hover,
.facility-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(24, 58, 115, 0.16);
}

/* Cards sitting on the blue band lift the same way, but a dark shadow would
   be invisible — they lighten their own ground instead. */
.mfproc-card:hover,
.bizcap-item:hover {
  transform: translateY(-6px);
  background-color: rgba(255, 255, 255, 0.12);
}

/* The capacity figures sit on white, so they take the grey ground. */
.mfcap-item:hover {
  transform: translateY(-6px);
  background-color: #eef0f7;
}

/* The red rule is left at a fixed width on purpose. Growing a border on
   hover makes the card taller, which reflows the page and shunts the cards
   beside it — so the lift and shadow above carry the whole interaction. */

/* --- Cards with a photograph: a slow push in behind the copy --- */

.esgcsr-photo { overflow: hidden; }

.esgcsr-photo img { transition: transform 0.6s ease; }

.esgcsr-card:hover .esgcsr-photo img { transform: scale(1.05); }

/* Project cards are left static on purpose — they already carry a photo, a
   badge, a value and a button, so a hover state on top read as noise. */

/* --- Group company cards: the logo settles as the card lifts --- */

.gc-card-logo img { transition: transform 0.45s ease; }
.gc-card:hover .gc-card-logo img { transform: scale(1.06); }

/* --- Partner logos --- */

.partner-item img {
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

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

/* --- Contact rows: the icon fills as the row is entered --- */

.contact-icon {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-item:hover .contact-icon {
  color: var(--white);
  background-color: var(--blue);
}

/* --- Thank you steps --- */

.ty-step-title { transition: color 0.3s ease; }
.ty-step:hover .ty-step-title { color: var(--red); }

/* Motion is a nicety here, so anyone who would rather not have it keeps the
   colour changes and loses the movement. */
@media (prefers-reduced-motion: reduce) {
  .expdetail-card,
  .mfinf-card,
  .esgroad-step,
  .bizcap-item,
  .mfcap-item,
  .esgcsr-card,
  .gc-card,
  .team-card,
  .mv-card,
  .facility-item,
  .mfproc-card,
  .esgcsr-photo img,
  .gc-card-logo img,
  .partner-item img {
    transition: none;
  }

  .expdetail-card:hover,
  .mfinf-card:hover,
  .esgroad-step:hover,
  .esgcsr-card:hover,
  .gc-card:hover,
  .team-card:hover,
  .mv-card:hover,
  .facility-item:hover,
  .mfproc-card:hover,
  .bizcap-item:hover,
  .mfcap-item:hover {
    transform: none;
  }

  .esgcsr-card:hover .esgcsr-photo img,
  .gc-card:hover .gc-card-logo img,
  .partner-item:hover img {
    transform: none;
  }
}


/* ==========================================================================
   ABOUT — CORE VALUES + OUR COMMITMENT
   Both reuse .mv-card; only the grid and the motto line are new.
   ========================================================================== */

.cv-sec { padding: 100px 0; }

.cv-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.cv-card { padding: 40px 34px; }

/* The value's own phrase, set apart from the explanation beneath it. */
.cv-card-motto {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  font-style: italic;
  line-height: 145%;
  letter-spacing: -0.18px;
  color: var(--red);
}

.cm-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.cm-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.cm-card { padding: 44px 38px; }


/* ==========================================================================
   ESG PAGE — COMMITMENTS
   ========================================================================== */

/* --- 02. Intro --- */

.esgintro-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

/* Lead statement on the left, the dated commitments on the right, so the
   section opens on the targets rather than on prose about them. */
.esgintro-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 80px;
}

.esgintro-copy { min-width: 0; }

/* The copy column is already narrower than the container; capping it again
   wrapped the lead far short of the heading above it. */
.esgintro-copy .sec-sub { max-width: 100%; }

.esgintro-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background-color: #dfe3ee;
}

.esgintro-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 26px;
  background-color: var(--white);
}

.esgintro-figure-date {
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 800;
  line-height: 115%;
  letter-spacing: -0.6px;
  color: var(--red);
}

.esgintro-figure-label {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 155%;
  color: var(--blue);
}

/* --- 03. Pillars --- */

.esgpillar-sec { padding: 90px 0; }

.esgpillar-sec--alt { background-color: #f4f5fa; }

.esgpillar-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  padding-bottom: 34px;
  border-bottom: 1px solid #dfe3ee;
}

/* The numeral sits quietly beside the pillar name rather than competing
   with it, so the three pillars read as a sequence. */
.esgpillar-num {
  font-family: var(--inter);
  font-size: var(--fs-50);
  font-weight: 800;
  /* Matches .sec-title's line box so both sets of caps start level. */
  line-height: 127%;
  letter-spacing: -1px;
  color: #bebebe;
}

.esgpillar-intro { min-width: 0; }

.esgpillar-intro .sec-sub {
  max-width: 900px;
  margin-top: 14px;
}

.esgpillar-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.esgpillar-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 30px;
  background-color: var(--white);
  border-top: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.esgpillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(24, 58, 115, 0.16);
}

.esgpillar-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.44px;
  color: var(--blue);
}

.esgpillar-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 165%;
  color: var(--grey);
}

/* The dated targets under a pillar, called out from the prose. */
.esgpillar-targets {
  margin-top: 34px;
  padding: 28px 32px;
  background-color: var(--white);
  border-left: 4px solid var(--blue);
}

.esgpillar-sec--alt .esgpillar-targets { background-color: var(--white); }

.esgpillar-targets-title {
  display: block;
  margin-bottom: 14px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--red);
}

.esgpillar-targets ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esgpillar-targets li {
  position: relative;
  padding-left: 30px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 155%;
  letter-spacing: -0.18px;
  color: var(--blue);
}

.esgpillar-targets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 12px;
  background-color: var(--red);
  border-radius: 50%;
}

/* --- 04. Roadmap table --- */

.esgroad-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.esgroad-wrap {
  margin-top: 50px;
  overflow-x: auto;
}

.esgroad-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  border: 1px solid #e3e6ef;
}

.esgroad-table th {
  padding: 20px 24px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--blue);
  white-space: nowrap;
}

.esgroad-table td {
  padding: 22px 24px;
  border-bottom: 1px solid #e3e6ef;
  vertical-align: middle;
}

.esgroad-table tbody tr { background-color: var(--white); }
.esgroad-table tbody tr:nth-child(even) { background-color: #fbfcfe; }

.esgroad-commitment {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.18px;
  color: var(--blue);
}

.esgroad-target {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 150%;
  color: var(--red);
  white-space: nowrap;
}

.esgroad-note {
  max-width: 820px;
  margin: 26px auto 0;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.18px;
  text-align: center;
  color: var(--blue);
}

/* --- 05. Policies & certifications --- */

.esgpol-sec {
  padding: 100px 0;
  background-color: var(--white);
}

.esgpol-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.esgpol-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 28px;
  background-color: var(--white);
  border: 1px solid #e3e6ef;
  border-left: 4px solid var(--red);
}

.esgpol-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--white);
  background-color: var(--blue);
  border-radius: 50%;
}

.esgpol-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.esgpol-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 145%;
  letter-spacing: -0.18px;
  color: var(--blue);
  text-decoration: none;
}

a.esgpol-name:hover { color: var(--red); }

a.esgpol-name svg {
  flex: 0 0 auto;
  width: 16px;
  height: auto;
  transition: transform 0.3s ease;
}

a.esgpol-name:hover svg { transform: translateX(4px); }

.esgpol-note {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 155%;
  color: var(--grey);
}

/* ==========================================================================
   CAREERS  (listing page + single job)

   Cards follow the same conventions as the rest of the site: white ground,
   the shared drop-shadow, blue titles and grey body copy.
   ========================================================================== */

/* --- 02. Open positions --- */

.carop-sec { padding: 100px 0; }

.carop-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.carop-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 44px 40px;
  background-color: var(--white);
  border-top: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(24, 58, 115, 0.14);
}

.carop-card--closed { border-top-color: #bebebe; }

.carop-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.carop-dept {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--red);
}

.carop-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #1c7a4a;
  background-color: #e8f5ee;
  border-radius: 40px;
}

.carop-status--closed {
  color: var(--grey);
  background-color: #f0f0f0;
}

.carop-title {
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: 138%;
  letter-spacing: -0.3px;
  color: var(--blue);
}

.carop-title a {
  color: inherit;
  transition: color 0.25s ease;
}

.carop-title a:hover { color: var(--red); }

.carop-text {
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.18px;
  color: var(--grey);
}

.carop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.carop-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 150%;
  color: var(--blue);
}

.carop-meta svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--red);
}

.carop-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--blue);
  transition: color 0.25s ease, gap 0.25s ease;
}

.carop-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.carop-link:hover {
  gap: 14px;
  color: var(--red);
}

.carop-empty {
  max-width: 760px;
  margin: 40px auto 0;
  font-family: var(--inter);
  font-size: var(--fs-18);
  line-height: 165%;
  text-align: center;
  color: var(--grey);
}

/* --- 03. Why join --- */

.carwhy-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.carwhy-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.carwhy-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 34px;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carwhy-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(24, 58, 115, 0.14);
}

.carwhy-num {
  font-family: var(--inter);
  font-size: var(--fs-50);
  font-weight: 800;
  line-height: 127%;
  letter-spacing: -1px;
  color: #bebebe;
}

.carwhy-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 145%;
  letter-spacing: -0.22px;
  color: var(--blue);
}

.carwhy-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 165%;
  color: var(--grey);
}

/* ==========================================================================
   SINGLE CAREER
   ========================================================================== */

/* --- 01. Hero --- */

.carhero-sec {
  margin-top: var(--header-h);
  padding: 70px 0 80px;
  background-color: #f4f5fa;
}

.carhero-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--grey);
}

.carhero-crumb a {
  color: var(--blue);
  transition: color 0.25s ease;
}

.carhero-crumb a:hover { color: var(--red); }

.carhero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 980px;
  margin-top: 26px;
}

.carhero-dept {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--red);
}

.carhero-title {
  font-family: var(--inter);
  font-size: var(--fs-50);
  font-weight: 800;
  line-height: 122%;
  letter-spacing: -1px;
  color: var(--black);
}

.carhero-text {
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.2px;
  color: var(--grey);
}

.carhero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.carhero-chips li {
  padding: 9px 20px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--blue);
  background-color: var(--white);
  border: 1px solid #dfe3ee;
  border-radius: 40px;
}

.carhero-btn { margin-top: 10px; }

.carhero-closed {
  margin-top: 10px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--red);
}

/* --- 02. Role overview table --- */

.carov-sec { padding: 100px 0; }

.carov-heading { margin-bottom: 40px; }

.carov-wrap { width: 100%; }

.carov-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dfe3ee;
}

.carov-table th,
.carov-table td {
  padding: 22px 28px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  line-height: 160%;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #dfe3ee;
}

.carov-table th {
  width: 280px;
  font-weight: 700;
  color: var(--blue);
  background-color: #f4f5fa;
  border-right: 1px solid #dfe3ee;
}

.carov-table td {
  font-weight: 400;
  color: var(--grey);
}

.carov-table tr:last-child th,
.carov-table tr:last-child td { border-bottom: 0; }

/* --- 03. Purpose --- */

.carpur-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.carpur-box {
  padding: 60px;
  background-color: var(--white);
  border-left: 5px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.carpur-text {
  margin-top: 20px;
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 400;
  line-height: 168%;
  letter-spacing: -0.2px;
  color: var(--grey);
}

/* --- 04. Key responsibilities --- */

.carresp-sec { padding: 100px 0; }

.carresp-heading { margin-bottom: 50px; }

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

.carresp-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 44px 40px;
  background-color: var(--white);
  border-top: 4px solid #bebebe;
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carresp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(24, 58, 115, 0.14);
}

.carresp-num {
  font-family: var(--inter);
  font-size: var(--fs-30);
  font-weight: 800;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: #bebebe;
}

.carresp-title {
  font-family: var(--inter);
  font-size: var(--fs-22);
  font-weight: 700;
  line-height: 145%;
  letter-spacing: -0.22px;
  color: var(--blue);
}

.carresp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.carresp-list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 165%;
  color: var(--grey);
}

.carresp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background-color: var(--red);
  border-radius: 50%;
}

/* --- 05. Candidate profile --- */

.carprof-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.carprof-heading { margin-bottom: 50px; }

.carprof-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

.carprof-card {
  padding: 50px 44px;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.carprof-card--must { border-top: 4px solid var(--red); }
.carprof-card--good { border-top: 4px solid var(--blue); }

.carprof-title {
  margin-bottom: 20px;
  font-family: var(--inter);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -0.26px;
  color: var(--blue);
}

.carprof-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carprof-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 168%;
  color: var(--grey);
}

.carprof-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  background-color: var(--red);
  border-radius: 50%;
}

.carprof-card--good .carprof-list li::before { background-color: var(--blue); }

/* --- 06. Behavioural competencies --- */

.carbeh-sec { padding: 100px 0; }

.carbeh-heading { margin-bottom: 50px; }

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

.carbeh-card {
  padding: 40px 36px;
  background-color: var(--white);
  border-left: 4px solid var(--red);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carbeh-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(24, 58, 115, 0.14);
}

.carbeh-title {
  margin-bottom: 12px;
  font-family: var(--inter);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 145%;
  letter-spacing: -0.2px;
  color: var(--blue);
}

.carbeh-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 168%;
  color: var(--grey);
}

/* --- 07. What we offer --- */

.caroff-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.caroff-heading { margin-bottom: 44px; }

.caroff-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background-color: #dfe3ee;
}

.caroff-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 30px 28px;
  background-color: var(--white);
}

.caroff-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--white);
  background-color: var(--red);
  border-radius: 50%;
}

.caroff-text {
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 165%;
  color: var(--blue);
}

/* --- 08. Reporting structure --- */

.cartree-sec { padding: 100px 0; }

.cartree-heading { margin-bottom: 40px; }

.cartree-list {
  margin: 0;
  padding: 44px 40px;
  list-style: none;
  background-color: #f4f5fa;
  border-left: 5px solid var(--blue);
}

.cartree-item {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 11px 0 11px 22px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 150%;
  color: var(--blue);
}

.cartree-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background-color: #b4c7e7;
  transform: translateY(-50%);
}

.cartree-item--d0 {
  padding-left: 0;
  font-size: var(--fs-20);
  font-weight: 700;
}

.cartree-item--d0::before { display: none; }

.cartree-item--d1 { margin-left: 34px; }
.cartree-item--d2 { margin-left: 68px; }
.cartree-item--d3 { margin-left: 102px; font-size: var(--fs-16); color: var(--grey); }
.cartree-item--d4 { margin-left: 136px; font-size: var(--fs-16); color: var(--grey); }

.cartree-item--self { font-weight: 800; color: var(--red); }

.cartree-tag {
  padding: 3px 12px;
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--red);
  border-radius: 40px;
}

/* --- 09. Apply --- */

.carapply-sec {
  padding: 100px 0;
  background-color: #f4f5fa;
}

.carapply-box {
  padding: 70px 60px;
  background-color: var(--white);
  filter: drop-shadow(0px 2px 5px rgba(48, 80, 135, 0.1));
}

.carapply-head { margin-bottom: 40px; }

.carapply-head .sec-title { margin-top: 6px; }

.carapply-head .sec-sub {
  max-width: 820px;
  margin-top: 14px;
}

.carapply-fallback {
  font-family: var(--inter);
  font-size: var(--fs-18);
  line-height: 165%;
  color: var(--grey);
}

.carapply-btn { margin-top: 24px; }

/* --- 10. Back link --- */

/* Padding is set with the apply section in the bottom-strip block below, so
   the two are adjusted together rather than fighting each other. */
.carback-sec { padding: 34px 0 70px; }

.carback-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--inter);
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--blue);
  transition: color 0.25s ease, gap 0.25s ease;
}

.carback-link svg {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
}

.carback-link:hover {
  gap: 16px;
  color: var(--red);
}

/* --------------------------------------------------------------------------
   CAREERS — application form

   Extends the shared Gravity theming with what this form needs: a custom
   select, validation text under each control, a shorter message box, and a
   submit button matching the site's CTA buttons rather than Orbital's.
   -------------------------------------------------------------------------- */

/* --- 1. Position dropdown -------------------------------------------------
   Orbital's select keeps the browser's native arrow, which does not match
   anything else here. Strip it and draw our own chevron. */

.carapply-form .gform_wrapper select {
  width: 100%;
  /* Height is set with the other controls in the two-column block below, so
     every field in a row matches. */
  padding: 0 52px 0 18px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--black);
  background-color: var(--white);
  border: 1px solid #d8dce8;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Chevron in the brand blue, drawn rather than loaded so no request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23183A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.carapply-form .gform_wrapper select:hover { border-color: #b9c1d6; }

.carapply-form .gform_wrapper select:focus,
.carapply-form .gform_wrapper select:focus-visible {
  outline: none !important;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24, 58, 115, 0.12);
}

/* The placeholder row reads as placeholder text, the real roles as values. */
.carapply-form .gform_wrapper select:invalid,
.carapply-form .gform_wrapper select option[value=""] {
  color: #9aa2b5;
}

.carapply-form .gform_wrapper select option {
  padding: 10px;
  font-size: var(--fs-16);
  color: var(--black);
}

.carapply-form .gform_wrapper .gfield_error select { border-color: var(--red); }

/* --- 2. Validation under the field ---------------------------------------
   The message is Gravity's own element; it just needs to sit below the
   control with room to breathe, and read at the theme's 16px floor. */

.carapply-form .gform_wrapper .gfield_validation_message,
.carapply-form .gform_wrapper .validation_message {
  margin-top: 8px;
  padding: 0;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 150%;
  color: var(--red);
  background: none;
  border: 0;
}

/* The summary box at the top repeats every message below, so it is hidden
   here exactly as it is on the contact form. */
.carapply-form .gform_wrapper .gform_validation_errors { display: none; }

/* --- 3. Message box ------------------------------------------------------- */

.carapply-form .gform_wrapper textarea,
.carapply-form .gform_wrapper textarea.small {
  height: 120px;
  min-height: 120px;
  padding: 16px 18px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  line-height: 155%;
  border: 1px solid #d8dce8;
  border-radius: 0;
  resize: vertical;
}

/* --- 4. Submit button ----------------------------------------------------
   The button's own styling lives in the FORM SUBMIT BUTTONS block near the
   end of this file, which covers this form and the contact form together:
   blue at rest, red on hover, centred in the footer. An earlier version here
   set the reverse colours, so it is gone rather than left to be overridden. */

/* Gravity's ajax spinner sits next to the button and otherwise jumps the row. */
.carapply-form .gform_wrapper .gform_ajax_spinner {
  margin-left: 14px;
  vertical-align: middle;
}

/* --- 5. File upload ------------------------------------------------------
   The default control is a bare browser button; give it the same frame as
   every other field so the form reads as one set. */

.carapply-form .gform_wrapper input[type="file"] {
  /* Flex so the button and the file name sit on one baseline; the browser
     lays this out as inline content otherwise and the button overflows the
     dashed frame. */
  display: flex;
  align-items: center;
  width: 100%;
  /* Height is set with the other controls in the two-column block below. */
  font-family: var(--inter);
  font-size: var(--fs-16);
  line-height: 1.4;
  color: var(--grey);
  background-color: var(--white);
  border: 1px dashed #c3cadb;
  border-radius: 0;
  cursor: pointer;
}

.carapply-form .gform_wrapper input[type="file"]:hover { border-color: var(--blue); }

.carapply-form .gform_wrapper input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--white);
  background-color: var(--blue);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.carapply-form .gform_wrapper input[type="file"]::file-selector-button:hover {
  background-color: var(--red);
}

.carapply-form .gform_wrapper .gform_fileupload_rules {
  margin-top: 8px;
  font-size: var(--fs-16);
  color: var(--grey);
}

/* --- Bottom strip spacing -------------------------------------------------
   The apply section's bottom padding and the back link's own top space were
   stacking into a large empty band. The link now sits close under the form
   and keeps its breathing room below, against the footer. */

.carapply-sec { padding-bottom: 80px; }

/* Padding itself lives on the .carback-sec rule above; only the ground colour
   is set here, so the link sits on the same grey as the section above it
   rather than on a white band of its own. */
.carback-sec { background-color: #f4f5fa; }

/* --------------------------------------------------------------------------
   CAREERS — two-column form corrections

   The form now runs two fields per row, which exposed height differences that
   did not show when everything was full width: measured 52px for the text and
   phone controls against 56px for the select and 62px for the file input, so
   each row sat unevenly. One height for every control fixes it.
   -------------------------------------------------------------------------- */

/* --- 1. One control height across the form ------------------------------- */

.carapply-form .gform_wrapper select {
  height: 52px;
  /* Vertically centres the value the way the text inputs do. */
  line-height: 52px;
}

.carapply-form .gform_wrapper input[type="file"] {
  height: 52px;
  min-height: 52px;
  padding: 0 14px;
  padding-top: 8px;
  /* Chrome does not apply auto margins to ::file-selector-button, so the
     button cannot absorb the free space itself. Centring the flex line is
     what actually works: button and file name centre as a pair, and since
     "No file chosen" is replaced by a short file name once one is picked,
     the button reads as centred either way. */
  justify-content: center;
}

.carapply-form .gform_wrapper input[type="file"]::file-selector-button {
  height: 36px;
  margin-right: 14px;
  padding: 0 18px;
}

/* Keeps the button inside the 52px frame rather than setting the height. */
.carapply-form .gform_wrapper input[type="file"]::file-selector-button {
  height: 36px;
  padding: 0 18px;
}

/* --- 2. Country selector -------------------------------------------------
   Orbital sizes this from its own scale and wins over the shared rule, so the
   dial code was rendering at 14px, below the theme's 16px floor. */

.carapply-form .gform_wrapper .gform-phone__country-selector,
.carapply-form .gform_wrapper .gform-phone__country-selector span,
.carapply-form .gform_wrapper .gform-phone__dial-code {
  font-size: var(--fs-16) !important;
}

/* The flag sits on the text baseline rather than floating above it. */
.carapply-form .gform_wrapper .gform-phone__country-selector img,
.carapply-form .gform_wrapper .gform-phone__flag {
  width: 22px;
  height: auto;
  flex: 0 0 auto;
}

/* A divider between the country segment and the number, so the two read as
   two parts of one control instead of one wide box. */
.carapply-form .gform_wrapper .ginput_country-selector_container {
  border-right: 1px solid #e4e8f0;
}

/* --- 3. One focus treatment on every control -----------------------------
   Same 1px blue border and 3px ring everywhere, including the file input,
   which previously had no focus state at all. */

.carapply-form .gform_wrapper input[type="text"]:focus,
.carapply-form .gform_wrapper input[type="text"]:focus-visible,
.carapply-form .gform_wrapper input[type="email"]:focus,
.carapply-form .gform_wrapper input[type="email"]:focus-visible,
.carapply-form .gform_wrapper input[type="tel"]:focus,
.carapply-form .gform_wrapper input[type="tel"]:focus-visible,
.carapply-form .gform_wrapper input[type="number"]:focus,
.carapply-form .gform_wrapper input[type="number"]:focus-visible,
.carapply-form .gform_wrapper input[type="file"]:focus,
.carapply-form .gform_wrapper input[type="file"]:focus-visible,
.carapply-form .gform_wrapper select:focus,
.carapply-form .gform_wrapper select:focus-visible,
.carapply-form .gform_wrapper textarea:focus,
.carapply-form .gform_wrapper textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(24, 58, 115, 0.12) !important;
}

/* The file input keeps its dashed frame, turning solid blue on focus so the
   change is unmistakable. */
.carapply-form .gform_wrapper input[type="file"]:focus,
.carapply-form .gform_wrapper input[type="file"]:focus-visible {
  border-style: solid !important;
}

/* The phone's border lives on the wrapper, so its ring is set there. */
.carapply-form .gform_wrapper .gform-phone__input-wrapper:focus-within {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(24, 58, 115, 0.12) !important;
}

/* Errors use the same shape in the brand red, so focus and error never look
   like two different systems. */
.carapply-form .gform_wrapper .gfield_error input:focus,
.carapply-form .gform_wrapper .gfield_error select:focus,
.carapply-form .gform_wrapper .gfield_error textarea:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(237, 50, 55, 0.12) !important;
}

.carapply-form .gform_wrapper .gfield_error .gform-phone__input-wrapper:focus-within {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(237, 50, 55, 0.12) !important;
}

/* --- 4. Centred submit ---------------------------------------------------- */

.carapply-form .gform_wrapper .gform_footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
}

/* --------------------------------------------------------------------------
   FORM SUBMIT BUTTONS + REQUIRED NOTICES

   Applies to both the careers application form and the contact form, so the
   two behave identically.
   -------------------------------------------------------------------------- */

/* --- Submit buttons: blue resting, red on hover --------------------------
   The reverse of what the careers button was doing, and matching .btn-blue,
   which is the pattern the rest of the site uses. */

.carapply-form .gform_wrapper .gform_button,
.carapply-form .gform_wrapper input[type="submit"],
.contact-form .gform_wrapper .gform_button,
.contact-form .gform_wrapper input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 20px 32px !important;
  font-family: var(--inter);
  font-size: var(--fs-18) !important;
  font-weight: 600;
  line-height: normal;
  color: var(--white) !important;
  text-transform: none;
  letter-spacing: normal;
  background-color: var(--blue) !important;
  border: 0 !important;
  border-radius: 100px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.carapply-form .gform_wrapper .gform_button:hover,
.carapply-form .gform_wrapper input[type="submit"]:hover,
.contact-form .gform_wrapper .gform_button:hover,
.contact-form .gform_wrapper input[type="submit"]:hover {
  color: var(--white) !important;
  background-color: var(--red) !important;
}

.carapply-form .gform_wrapper .gform_button:focus-visible,
.contact-form .gform_wrapper .gform_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(24, 58, 115, 0.25);
}

/* --- Both submit buttons centred ----------------------------------------- */

.carapply-form .gform_wrapper .gform_footer,
.contact-form .gform_wrapper .gform_footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
  padding: 0;
}

/* --- Required-field notices ----------------------------------------------
   Two separate elements said the same thing as the asterisks themselves:
   Gravity's legend, and a line of our own in the contact template. Both go.
   The asterisks stay, so the requirement is still marked. */

.carapply-form .gform_wrapper .gform_required_legend,
.contact-form .gform_wrapper .gform_required_legend {
  display: none !important;
}

.contact-form-sub { display: none; }

/* --------------------------------------------------------------------------
   Footer social icons

   The icons are stroke-drawn on a 30-unit viewBox at stroke-width 1.5. Because
   the stroke is measured in viewBox units, it thins as the icon scales down:
   1.5 x (16/30) = 0.8px at the smallest size, a sub-pixel hairline against the
   blue that all but disappears on a phone.

   non-scaling-stroke holds the stroke at a constant device width whatever the
   icon size, and a slightly stronger pill keeps the shape readable too.
   -------------------------------------------------------------------------- */

.footer-socials svg [stroke],
.footer-socials svg path,
.footer-socials svg rect,
.footer-socials svg circle,
.footer-socials svg line {
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   Contact form validation messages

   Matches the careers form: the message sits under its control, in brand red
   at the theme's 16px floor, with the summary box at the top hidden because
   it only repeats what each field already says.
   -------------------------------------------------------------------------- */

.contact-form .gform_wrapper .gfield_validation_message,
.contact-form .gform_wrapper .validation_message {
  margin-top: 8px;
  padding: 0;
  font-family: var(--inter);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 150%;
  color: var(--red);
  background: none;
  border: 0;
}