/* =========================================================
   UNEPP Website — CLEAN CONSOLIDATED style.css
   - Restores other pages layouts
   - Fixes Home stretch (scoped to body.home only)
   - Removes duplicates/conflicting blocks
   ========================================================= */

/* =========================
   Theme + Base
   ========================= */
:root{
  /* Core Layout */
  --bg:#ffffff;
  --panel:#ffffff;
  --card:#ffffff;
  --radius:18px;
  --max:1600px;

  /* Typography */
  --text:#0b1324;      /* nearly black navy */
  --muted:#334155;     /* medium slate */

  /* Brand */
  --brand:#F2C94C;       /* primary button color */
  --brand-hover:#E5B93F; /* slightly darker for hover */
  --brand-light:#1d4ed8;

  /* Button colors */
  --btn-bg:#F2C94C;
  --btn-bg-hover:#E5B93F;
  --btn-text:#111827;

  /* Lines & Shadows */
  --line:rgba(0,0,0,.06);
  --shadow:0 8px 22px rgba(0,0,0,.05);
}

/* Active item in ANY left sidebar index */
aside nav a.is-active{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  font-weight:700;
  border:none;
  border-radius:8px;
  padding:12px 18px;
  display:inline-block;
  transition:all 0.25s ease;
}

aside nav a.is-active:hover{
  background: var(--btn-bg-hover) !important;
  transform:translateY(-1px);
}


  /* Typography */
--text:#0b1324;      /* nearly black navy */
--muted:#334155;     /* medium slate */
 ,
p,
li,
span{
  color: var(--text);
}

  /* Brand */
--brand:#F2C94C;       /* primary button color */
--brand-hover:#E5B93F; /* slightly darker for hover */
  --brand-light:#1d4ed8;

  /* Lines & Shadows */
  --line:rgba(0,0,0,.06);
  --shadow:0 8px 22px rgba(0,0,0,.05);
}

/* =========================================
   Corporate-modern typography (UNEPP)
   ========================================= */

html{ font-size: 17px; }

body{
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4{
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2{
  font-size: clamp(30px, 2.6vw, 40px);
  margin: 10px 0 12px;
}

h3{
  font-size: clamp(18px, 1.35vw, 22px);
  margin: 0 0 8px;
}

.card h3{ margin:0 0 6px; } /* remove forced 16px */

.lead{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 65ch;
}




*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#1f2937;
  background:#ffffff;
  line-height:1.6;
}



/* Home only: keep the glow / radial accents */
.home{
  background: radial-gradient(900px 500px at 15% 0%, rgba(70,176,255,.18), transparent 50%),
              radial-gradient(700px 500px at 85% 10%, rgba(88,255,196,.10), transparent 45%),
              var(--bg);
}


/* Links + Media */
a{ color:inherit; text-decoration:none; }
img, video, svg, canvas{ max-width:100%; height:auto; display:block; }

/* Base text color */
p, li, span{ color: var(--text); }

/* Text formatting preference you used */
p, span, li{ text-align: justify; }

/* Layout container */
.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
}

/* =========================
   Header (Light - Sticky Safe)
   ========================= */

/* Ensure sticky is not broken by page overflow */
html, body {
  max-width: 100%;
}

/* Sticky Header */
.nav{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  backdrop-filter:none;
}

/* Inner Header Layout */
.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Brand */
.brand{
  display: flex;
  gap: 14px;
  align-items: center;
}

.logo{
  height: 42px;
  width: auto;
}

.brand h1{
  font-size: 16px;
  margin: 0;
  color: #111827;
}

.brand small{
  display: block;
  margin-top: 2px;
  color: #111827;
}

/* Menu */
.menu{
  display: flex;
  gap: 18px;
  align-items: center;
}

.menu a{
  color: #111827;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
}

.menu a:hover{
  background: rgba(0,0,0,0.04);
  color: #000;
}

/* CTA Button */
.cta{
  background: linear-gradient(135deg, var(--brand), #7cf7d0);
  color: #07101f !important;
  font-weight: 700;
}



/* =========================
   Footer (Light)
   ========================= */
.footer{
  background:#ffffff;
  color:#111827;
  border-top:1px solid #e5e7eb;
  padding:14px 0;   /* reduced from 26px */
  font-size:13px;
  line-height:1.4;
}

.footer a{
  color:#111827;
}

/* =========================
   Common UI
   ========================= */
.kicker{
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

h2{
  font-size:42px;
  margin:10px 0 10px;
  line-height:1.12;
}

.lead{
  color: var(--text);        /* change from muted to main text */
  font-size: 1.05rem;        /* ~18px (corporate feel) */
  max-width: 65ch;           /* slightly wider for white layout */
  margin-bottom: 16px;
  line-height: 1.75;
}

.lead + .lead{
  margin-top: 16px;
}

/* =========================================
   Primary Buttons (Gold)
   ========================================= */

.btn,
.cta,
.about-index nav a.is-active{
  display:inline-block;
  padding:12px 18px;
  border-radius:8px;
  background:#F2C94C;              /* unified gold */
  color:#111827 !important;        /* dark text for contrast */
  font-weight:700;
  text-decoration:none;
  border:none;
  transition:all 0.25s ease;
}

/* Hover effect */
.btn:hover,
.cta:hover,
.about-index nav a.is-active:hover{
  background:#E5B93F;              /* slightly darker on hover */
  transform:translateY(-1px);
}
/* =========================================
   Left index active link = same as .btn
   Applies to About / Capabilities / Projects / News / Careers / Contact
   ========================================= */

.about-index nav a.is-active,
.about-index nav a[aria-current="page"],
.about-index nav a[aria-current="true"]{
  background: var(--btn-bg);
  color: var(--btn-text) !important;
  font-weight:800;
  border:0;
  box-shadow: var(--btn-shadow);
}

.about-index nav a.is-active:hover,
.about-index nav a[aria-current="page"]:hover,
.about-index nav a[aria-current="true"]:hover{
  filter:brightness(1.02);
}


.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  min-width:0; /* prevents grid overflow */
}
.card h3{ margin:0 0 6px; }
.card p{
  margin:0;
  color:var(--text);
  font-size:1rem;
}

hr.line{ border:none; border-top:1px solid var(--line); margin:18px 0; }

/* badges (Projects cards etc.) */
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.badge{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:8px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
}
.badge:hover{ background: rgba(255,255,255,.08); }

/* Section spacing + anchor offset under sticky header */
.section{
  padding:34px 0;
  scroll-margin-top:90px;
}

/* =========================
   Home / Hero
   ========================= */
.hero{ padding:72px 0 34px; }

/* Keep hero-grid available for pages using it */
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:26px;
  align-items:stretch;
}
.hero-cards{ display:grid; gap:14px; }

/* =========================
   HOME ONLY (index.html) – Sticky-friendly overflow fix
   ========================= */

/* DO NOT set overflow on  if you want sticky to work reliably */
.home{
  overflow-x: visible;
}

/* Clip/hide horizontal overflow on content instead */
.home main{
  overflow-x: hidden; /* or use: overflow-x: clip; */
}


.home .home-hero{
  display:grid;
  gap:18px;
}

.home .home-row{ min-width:0; }

/* Bottom row: equal cards */
/* Desktop: 3 equal columns */
.home .home-row-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Tablet: 2 per row */
@media (max-width: 1200px){
  .home .home-row-3{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: stack */
@media (max-width: 768px){
  .home .home-row-3{
    grid-template-columns: 1fr;
  }
}


.home .home-row-3 > .card{ height:100%; }

/* Home marquee slider (continuous left -> right) */
.home .marquee{
  width:100%;
  overflow:hidden; /* key: clips the long track */
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:10px;
}

.home .marquee-track{
  display:inline-flex; /* key: avoids widening layout calculations */
  gap:16px;
  align-items:center;
  will-change: transform;
  animation: marqueeLTR 26s linear infinite;
}

body.home .marquee-track img{
  width:320px;
  height:185px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  flex: 0 0 auto;
}

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

body.home .marquee:hover .marquee-track{
  animation-play-state: paused;
}

/* =========================
   ABOUT: Our Partners (logo marquee)
   ========================= */
/* Our Partners — crisp scrolling marquee (Chrome-friendly) */
.partners-marquee{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:14px;

  /* Important: make it a scroll container but hide scrollbar */
  overflow-x: hidden;
  position: relative;
}

.partners-track{
  display:flex;
  gap:36px;
  align-items:center;
  width:max-content; /* track can be wider than container */
}

.partners-track img{
  height:42px;
  width:auto;
  flex-shrink:0;
}


@keyframes partnersScroll{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

.partners-marquee:hover .partners-track{
  animation-play-state: paused;
}


@media (max-width: 900px){
  .partners-track{ gap:26px; animation-duration: 105s; }
  .partners-track img{ height:38px; }
}



/* =========================
   Generic grids (Capabilities/Other)
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding:18px;
}
.item b{ display:block; margin-bottom:6px; }
.item span{
  color:var(--muted);
  font-size:14px;
  display:block;      /* helps justification */
  hyphens:auto;
}

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

/* =========================
   About page layout + left index
   ========================= */
.about-layout{
  display:grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap:36px;
  align-items:start;
}

.about-index{
  position:sticky;
  top:96px;
  height:fit-content;
  padding:16px;
  border-radius: var(--radius);
  background:#ffffff;
  color:#000;
  border:1px solid #e0e0e0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.about-index b{
  display:block;
  margin-bottom:12px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#000;
}

.about-index nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.about-index a{
  font-size:14px;
  color:#000;
  padding:6px 10px;
  border-radius:8px;
  outline:none;
}

.about-index a:hover{
  background:#f2f2f2;
}

.about-index a.active,
.about-index a:focus,
.about-index a:active{
  font-weight:700;
  background:#f2f2f2;
  border-left: 4px solid #000;
  padding-left:6px;
}

.about-content{ min-width:0; }

/* =========================
   Company overview (white card)
   ========================= */
.company-card{
  background:#ffffff;
  color:#0b1220;
  border:1px solid #e4e8f0;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.company-card .lead,
.company-card p{
  color:#2a2f3a;
  max-width:none; /* fill card width */
}

.brand-unepp{ color:#0b5ed7; font-weight:800; }
.brand-unified{ color:#2fae8f; font-weight:800; }
.brand-regulator{
  color:#0f172a;     /* strong navy-charcoal */
  font-weight:700;
}

.company-line{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap:18px;
  align-items:start;
  margin:18px 0;
}
.company-logo{
  width:130px;
  height:auto;
}

/* =========================
   Values section helpers
   ========================= */
.values-layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:28px;
  align-items:center;
}
.values-visual{ text-align:center; }
.values-visual img{
  max-width:100%;
  height:auto;
  border-radius:50%;
  box-shadow: var(--shadow);
}
.values-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}

/* =========================================
   ABOUT – Our Values (Exact Colors, All White Text)
   ========================================= */

#our-values .item{
  color:#ffffff !important;
  border:none;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* =========================================
   ABOUT – Updated Our Values Colors
   ========================================= */

/* HSE – Pink */
#our-values .value-hse{
  background:#E82676;
}

/* Quality – Dark Yellow */
#our-values .value-quality{
  background:#BF8C00;
}

/* Best Resources – Dark Green */
#our-values .value-resources{
  background:#29903F;
}

/* Client Integration – Dark Blue */
#our-values .value-client{
  background:#006AAB;
}

/* Codes and Standards – Red */
#our-values .value-standards{
  background:#BD2031;
}

/* Responsive to Market – Dark Purple */
#our-values .value-responsive{
  background:#821285;
}

/* Force ALL text inside value boxes to white */
#our-values .item b,
#our-values .item span,
#our-values .item p{
  color:#ffffff !important;
}

/* =========================
   Leadership (kept compatible)
   ========================= */
.leadership{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.leader{
  text-align:center;
  padding:18px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
}

.leader img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:50%;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
}

.leader b{ display:block; margin-bottom:4px; }
.leader span{
  display:block;
  margin-top:2px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  color:#ffffff;
  text-align:center;
}

/* =========================
   Projects page (filters + cards)
   ========================= */
.projects-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

/* Filters container */
.filters{
  display:grid;
  gap:14px;
  padding:18px;
  border:1px solid #d5dbe3;
  border-radius:14px;
  margin:16px 0 28px;
  background:#f7f9fc;
}

/* Inputs */
.filters input[type="search"],
.filters select{
  width:100%;
  height:50px;                 /* Controls box height */
  padding:0 16px;              /* Horizontal padding only */
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#ffffff;
  color:#1f2a37;
  font-size:1rem;
  font-weight:600;
  }

.filters input[type="search"]::placeholder{
  color:#64748b;
}

.filters-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

.filter-field{ flex: 1 1 200px; }
.filters-row select{ width:100%; }

.filters .btn{
  background:#ffffff;
  border:1px solid #cbd5e1;
  color:#1f2937;
  font-weight:600;
  cursor:pointer;
}
.filters .btn:hover{ background:#e2e8f0; }

/* Project card style (light cards) */
.project-card{
  border:1px solid #d5dbe3;
  border-radius:16px;
  padding:18px;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  transition:all 0.2s ease;
}
.project-card:hover{
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  h2{ font-size:34px; }
  .hero-grid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }

  /* Home: 3 boxes -> stack on mobile */
  body.home .home-row-3{
    grid-template-columns: 1fr;
  }

  body.home .marquee-track img{
    width:280px;
    height:165px;
  }

  .values-layout{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }

  .menu{ gap:8px; }
}

@media (max-width: 768px){
  .about-layout{ grid-template-columns:1fr; }
  .about-index{ display:none; }

  .company-line{ grid-template-columns: 1fr; }
  .company-logo{ width:110px; }
}

/* Home: justify text in ALL cards */
body.home .card p{
  text-align: justify;
  max-width: none;  /* remove width limitation inside cards */
}

/* =======================================
   ABOUT – Restore Leadership Box Colors
   ======================================= */

/* Base leadership card container */
#leadership .leadership-card{
  background: #ffffff;
  border: 1px solid #e4e8f0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* Reset generic leader override */
#leadership .leader{
  color: #ffffff;
  border-radius: var(--radius);
  padding: 18px;
}

/* CEO – executive gradient */
#leadership .leader.ceo{
  background: linear-gradient(
    135deg,
    #1c3faa,
    #0b1220
  );
  border: 1px solid rgba(70,176,255,0.55);
}

/* VPP + VPO – executive accent */
#leadership .leader-exec{
  background: linear-gradient(
    135deg,
    #102243,
    #0f2f3a
  );
  border: 1px solid rgba(124,247,208,0.45);
}

/* Text inside leadership boxes */
#leadership .leader b{
  color: #ffffff;
}

#leadership .leader span{
  color: #9fc5ff;
}

#leadership .leader .leader-desc{
  color: #c7d0e6;
}
/* =========================================
   ABOUT: Make section statements fill width
   (keep "Our Values" boxes unchanged)
   ========================================= */

/* Make About section intro statements full width + justified */
body.about .section-intro .lead{
  max-width: none;
  text-align: justify;
  margin-left: 0;
  margin-right: 0;
}

/* Also make normal About paragraphs in section cards fill width */
body.about .card .lead{
  max-width: none;
  text-align: justify;
}

/* IMPORTANT: keep the "Our Values" grid box text unchanged */
body.about #our-values .item span,
body.about #our-values .item p,
body.about #our-values .item .lead{
  max-width: none;        /* ok */
  text-align: justify;    /* keep as-is, but ensure not overridden */
}
/* =========================================
   CAPABILITIES: Section statements full width
   ========================================= */

/* Make section intro statements fill width + justified */
body.capabilities .section-intro .lead{
  max-width: none;
  text-align: justify;
  margin-left: 0;
  margin-right: 0;
}

/* If any capability cards contain .lead text */
body.capabilities .card .lead{
  max-width: none;
  text-align: justify;
}

/* Keep internal capability grid boxes unchanged */
body.capabilities .item span,
body.capabilities .item p{
  text-align: justify;  /* maintain consistency */
}
/* =========================================
   CAPABILITIES: Center top images
   ========================================= */

/* If image is inside capability-visual wrapper */
body.capabilities .capability-visual{
  text-align: center;
}

body.capabilities .capability-visual img{
  margin: 0 auto;
}

/* If image is directly inside a section or card */
body.capabilities .section img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================
   PROJECTS: Section statement full width
   ========================================= */

/* Make Projects section intro statement full width + justified */
body.projects .section-intro .lead{
  max-width: none;
  text-align: justify;
  margin-left: 0;
  margin-right: 0;
}

/* If there are any .lead paragraphs inside cards */
body.projects .card .lead{
  max-width: none;
  text-align: justify;
}
/* =========================================
   PROJECTS: Make SEARCH box full width
   ========================================= */

/* Ensure search row occupies full container width */
body.projects .filters-row-search{
  display: flex;
  width: 100%;
}

/* Make the search field stretch completely */
body.projects .filters-row-search .filter-field{
  flex: 1 1 100%;
  width: 100%;
}

/* Force input to fill available space */
body.projects .filters-row-search input[type="search"]{
  width: 100%;
  max-width: none;
}

/* =========================================
   Projects – PDF List Styling
   ========================================= */

.project-pdfs{
  margin-top: 20px;
}

.project-pdfs .pdf-list ul{
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.project-pdfs .pdf-list li{
  margin: 10px 0;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.project-pdfs .pdf-list a{
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
}

.project-pdfs .pdf-list li:hover{
  background: #f7f9fc;
}

/* =========================================
   ABOUT – Leadership Equal Box Sizes
   ========================================= */

#leadership .leadership{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}

/* Make CEO behave like others */
#leadership .leader-ceo{
  grid-column: auto;
}
/* =========================================
   ABOUT – Leadership Layout (CEO Centered)
   ========================================= */

/* First row (CEO only) */
#leadership .leadership:first-of-type{
  display:flex;
  justify-content:center;
}

/* Make CEO same width as the two below */
#leadership .leader-ceo{
  width:100%;
  max-width:420px;   /* match width of bottom boxes */
}

/* Bottom two leaders */
#leadership .two-col{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
  margin-top:14px;
}

/* Mobile stacking */
@media (max-width: 768px){
  #leadership .two-col{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   ABOUT – Milestones White Card Override
   ========================================= */

#milestones .card{
  background:#ffffff;
  color:#000000;
  border:1px solid #e4e8f0;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* Ensure list text stays black */
#milestones .card li,
#milestones .card b{
  color:#000000;
}
/* =========================================
   ABOUT – Center Titles in Our Values Boxes
   ========================================= */

#our-values .item b{
  display:block;
  text-align:center;
  margin-bottom:8px;
}
/* =========================================
   ABOUT – Force Our Values Text to White
   ========================================= */

#our-values .item,
#our-values .item b,
#our-values .item span,
#our-values .item p{
  color:#ffffff !important;
}


/* =========================================
   HOME – Force footer to appear (restore normal scroll)
   ========================================= */



/* Ensure hero doesn't lock the viewport height */
body.home .hero{
  height: auto !important;
  min-height: 0 !important;
}

/* Make footer definitely render on top of backgrounds */
body.home footer.footer{
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}
/* ===== UNEPP Values Wheel Section ===== */
.values-section{
  padding: 40px 0;
}

.values-stage{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: nowrap; /* keep side-by-side even on mobile */
  padding: 0 20px;
}

/* Wheel */
.values-wrapper{
  position: relative;
  width: 520px;
  height: 520px;
  flex: 0 0 auto;
}

.values-rotating{
  position: absolute;
  inset: 0;
  transition: transform 1.2s ease-in-out;
  will-change: transform;
}

.values-rotating img{
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Static center */
.values-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.values-center h2{
  margin: 0;
  font-size: 40px;
  font-weight: 900;
  color: #000;
  line-height: 1.05;
}

/* Dynamic box */
.value-box{
  flex: 1 1 auto;
  min-width: 320px;
  max-width: 480px;
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: background-color .35s ease;
}

.value-title{
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}

.value-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Fade animation */
.fade{
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.fade.show{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive (still side-by-side) */
@media (max-width: 820px){
  .values-wrapper{ width: 360px; height: 360px; }
  .values-center h2{ font-size: 28px; }
  .value-title{ font-size: 22px; }
  .value-box{ padding: 18px; min-width: 220px; }
  .values-stage{ gap: 14px; }
}

@media (max-width: 520px){
  .values-wrapper{ width: 280px; height: 280px; }
  .values-center h2{ font-size: 22px; }
  .value-title{ font-size: 18px; }
  .value-desc{ font-size: 13px; }
  .value-box{ min-width: 200px; }
}

/* Hidden measurer */
.measure-wrap{
  position: absolute;
  left: -99999px;
  top: -99999px;
  visibility: hidden;
  pointer-events: none;
  width: 480px;
}
.measure-box{
  padding: 24px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
.measure-title{
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}
.measure-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
/* ===== OUR VALUES (Wheel + Dynamic Box) ===== */
#our-values .values-stage-unepp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:nowrap; /* keep side-by-side */
}

/* Wheel */
#our-values .values-wheel-unepp{
  position:relative;
  width:520px;
  height:520px;
  flex:0 0 520px;
}

#our-values .values-wheel-rotator-unepp{
  position:absolute;
  inset:0;
  transition:transform 1.2s ease-in-out;
  will-change:transform;
}

#our-values .values-wheel-rotator-unepp img{
  width:100%;
  height:100%;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Static center */
#our-values .values-wheel-center-unepp{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  text-align:center;
}

#our-values .values-wheel-center-text-unepp{
  font-weight:900;
  color:#000;
  line-height:1.05;
  font-size:40px;
}

/* Dynamic Box */
#our-values .values-box-unepp{
  flex:0 1 460px;              /* fixed readable width */
  max-width:460px;
  margin-left:auto;            /* keeps space from wheel */
  margin-right:auto;           /* balances space inside card */
  border-radius:18px;
  padding:26px 28px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;      /* vertical centering */
  text-align:center;           /* horizontal centering */
  box-shadow:0 12px 34px rgba(0,0,0,0.16);
  transition:background-color .35s ease;
}


#our-values .values-box-title-unepp{
  margin:0 0 14px;
  font-size:28px;
  font-weight:900;
  text-align:center;
  color:#ffffff;
}

#our-values .values-box-desc-unepp{
  margin:0 auto;
  font-size:15px;
  line-height:1.7;
  max-width:420px;        /* centers readable paragraph block */
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  color:#ffffff;          /* ensure always white */
  opacity:1;
}


/* Fade */
#our-values .fade{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
#our-values .fade.show{
  opacity:1;
  transform:translateY(0);
}

/* Measurer */
#our-values .values-measure-wrap-unepp{
  position:absolute;
  left:-99999px;
  top:-99999px;
  visibility:hidden;
  pointer-events:none;
}
#our-values .values-measure-box-unepp{
  padding:24px;
  box-sizing:border-box;
}
#our-values .values-measure-title-unepp{
  margin:0 0 12px;
  font-size:28px;
  font-weight:900;
  text-align:center;
}
#our-values .values-measure-desc-unepp{
  margin:0;
  font-size:15px;
  line-height:1.65;
}

/* Responsive but still side-by-side */
@media (max-width: 900px){
  #our-values .values-wheel-unepp{ width:360px; height:360px; flex:0 0 360px; }
  #our-values .values-wheel-center-text-unepp{ font-size:28px; }
  #our-values .values-box-title-unepp{ font-size:22px; }
  #our-values .values-box-unepp{ padding:18px; }
}

@media (max-width: 560px){
  #our-values .values-wheel-unepp{ width:280px; height:280px; flex:0 0 280px; }
  #our-values .values-wheel-center-text-unepp{ font-size:22px; }
  #our-values .values-box-title-unepp{ font-size:18px; }
  #our-values .values-box-desc-unepp{ font-size:13px; }
}
#our-values .values-stage-unepp{
  display:flex;
  align-items:center;
  justify-content:center;  /* keeps group centered */
  gap:60px;                /* proper visual breathing room */
}
#our-values .values-grid,
#our-values .values-grid .item{
  display: none !important;
}
/* ===== FORCE VALUES LAYOUT FIX ===== */

#our-values .values-stage-unepp{
  display: grid !important;
  grid-template-columns: 520px 520px;
  justify-content: center;
  align-items: center;
  column-gap: 60px;
}

#our-values .values-wheel-unepp{
  width: 520px !important;
  height: 520px !important;
}

#our-values .values-box-unepp{
  max-width: 520px !important;
  width: 100%;
}
#our-values .values-box-title-unepp{
  font-size: 36px !important;   /* Larger */
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
}
#our-values .values-box-desc-unepp{
  font-size: 18px !important;   /* Bigger */
  line-height: 1.75 !important;
  color: #ffffff !important;    /* Force white */
  opacity: 1 !important;        /* Remove faint look */
  text-align: justify !important;
  text-justify: inter-word;
}

/* =========================================
   OUR VALUES – Wheel + Dynamic Box (FINAL OVERRIDES)
   ========================================= */
#our-values .values-stage-unepp{
  display:grid !important;
  grid-template-columns: 520px 1fr;
  align-items:center;
  column-gap: 60px;
}

#our-values .values-wheel-unepp{ justify-self:start; }

#our-values .values-box-unepp{
  width: min(520px, 100%);
  justify-self:center; /* centers between wheel edge and card right edge */
  background: rgba(255,255,255,.06); /* JS will override with value color */
  color:#ffffff !important;
}

/* Typography */
#our-values .values-box-title-unepp{
  font-size: 36px !important;
  font-weight: 900 !important;
  color:#ffffff !important;
  text-align:center;
  margin: 0 0 16px !important;
}

#our-values .values-box-desc-unepp{
  font-size: 18px !important;
  line-height: 1.75 !important;
  color:#ffffff !important;
  opacity: 1 !important;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens:auto;
}

/* Hide any legacy values grid if still present somewhere */
#our-values .values-grid,
#our-values .values-layout{
  display:none !important;
}
/* Ensure footer sticks to bottom when content is short */
html, body {
  height: 100%;
}

body.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.home main {
  flex: 1;
}
/* =========================================
   CAPABILITIES – Software Continuous Marquee
   ========================================= */

body.capabilities .software-marquee{
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 18px 10px;
  margin-top: 10px;
}

body.capabilities .software-track{
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  will-change: transform;
  animation: softwareLTR 40s linear infinite;
}

body.capabilities .software-track img{
  height: 60px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: 0.3s ease;
}


body.capabilities .software-track img:hover{
  opacity: 1;
  transform: scale(1.05);
}

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

body.capabilities .software-marquee:hover .software-track{
  animation-play-state: paused;
}
body.capabilities .software-logo img{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* =========================
   ABOUT: Our Partners (logo marquee)
   ========================= */
.partners-marquee{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:14px;
}

.partners-marquee:hover .partners-track{
  animation-play-state: paused;
}

/* Slightly smaller logos on mobile */
@media (max-width: 900px){
  .partners-track img{ height:40px; }
}
/* ABOUT: Single-section view (left index acts like tabs) */
body.about .about-section{
  display:none;
}

body.about .about-section.is-active{
  display:block;
}
/* =========================================
   Active left index button (match .btn style)
   ========================================= */

.about-index nav a.is-active{
  background:#F2C94C !important;     /* unified gold */
  color:#111827 !important;          /* dark text */
  font-weight:700;
  border:none;
}


.about-index nav a.is-active:hover{
  background:#E5B93F !important;
  transform:translateY(-1px);
}
/* ===============================
   Capabilities Section Titles
   Match other page headings
   =============================== */

.capabilities .section-intro h3{
  font-size: 28px;        /* match your h2 size if 28px */
  font-weight: 800;       /* same bold weight */
  margin: 0 0 12px;
  color: #111827;
}
/* Partners marquee container */
.partners-marquee {
  padding: 20px 0;
  overflow: hidden;
}

/* Logo sizing */

/* Optional subtle hover */
.partners-track img:hover {
  transform: scale(1.08);
}

/* =========================
   Partners Marquee (CSS Animation)
   ========================= */

.partners-marquee{
  overflow: hidden;
  position: relative;
}

.partners-track{
  display: inline-flex;
  align-items: center;
  gap: 25px;
  will-change: transform;
  animation: partnersScroll 45s linear infinite; /* <-- SPEED HERE */
}

.partners-track img{
  height: 75px;
  width: auto;
  object-fit: contain;
}

@keyframes partnersScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Contact Page Offices */

.office-card {
  text-align: left;
}

.office-logo {
  text-align: center;
  margin-bottom: 18px;
}

.office-logo img {
  height: 75px;
  object-fit: contain;
}

.office-details h3 {
  margin: 0 0 10px 0;
}

.office-details p {
  margin: 0 0 14px 0;
}

/* ===== Projects Filters – Elevated Version ===== */
body.projects .projects-filters input[type="search"],
body.projects .projects-filters select{
  width:100%;
  height:54px;
  padding:0 16px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#ffffff;
  color:#1f2a37;
  font-size:1rem;
  font-weight:600;
  box-sizing:border-box;

  /* SHADE */
  box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;
  transition: all 0.2s ease;
}


/* Optional: placeholder visibility */
body.projects .projects-filters input[type="search"]::placeholder{
  color:#64748b;
  opacity:1;
}
/* =========================================================
   Projects page — filter polish (ADD THIS AT END OF style.css)
   ========================================================= */

/* 1) Shadow + pop for filter boxes */
body.projects .projects-filters input[type="search"],
body.projects .projects-filters select{
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* nicer focus */
body.projects .projects-filters input[type="search"]:focus,
body.projects .projects-filters select:focus{
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border-color: var(--brand, #46b0ff);
  outline: none;
}

/* 2) Bigger filter titles (SEARCH / COMPANY / etc.) */
body.projects .projects-filters label{
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #0f172a;
  margin-bottom: 6px;
  display: inline-block;
}

/* 3) Gap above Reset button */
body.projects .projects-filters .filters-actions{
  margin-top: 16px;
}

/* If your reset button is NOT inside .filters-actions, use this instead */
/*
body.projects .projects-filters .btn{
  margin-top: 16px;
}
*/
/* Gap above Reset row */
body.projects .projects-filters .filters-row-reset{
  margin-top: 20px;
}
/* =========================================================
   PROJECTS — Filters polish (correct selectors)
   ========================================================= */

/* 1) Make the filter boxes “pop” (shadow) */
body.projects .projects-filters input[type="search"],
body.projects .projects-filters select{
  box-shadow: 0 6px 14px rgba(0,0,0,0.10) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

body.projects .projects-filters input[type="search"]:focus,
body.projects .projects-filters select:focus{
  box-shadow: 0 10px 22px rgba(0,0,0,0.16) !important;
  border-color: var(--brand, #46b0ff);
  outline: none;
}

/* 2) Bigger filter titles (Search / Company / etc.) */
body.projects .projects-filters label.kicker{
  font-size: 0.95rem;   /* bigger than your current 12px kicker */
  font-weight: 800;
  letter-spacing: .10em;
  margin-bottom: 8px;
  display: inline-block;
}

/* 3) Gap above Reset button */
body.projects .projects-filters .filters-row-reset{
  margin-top: 18px;
}


/* =========================================================
   PROJECTS — FINAL FILTER UI (authoritative override)
   Supports both legacy .filters and current .projects-filters
   ========================================================= */
body.projects .filters input[type="search"],
body.projects .filters select,
body.projects .projects-filters input[type="search"],
body.projects .projects-filters select{
  height:54px;
  padding:0 16px;
  border-radius:12px;
  box-sizing:border-box;
  background:#ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10) !important; /* pop */
}

body.projects .filters input[type="search"]:focus,
body.projects .filters select:focus,
body.projects .projects-filters input[type="search"]:focus,
body.projects .projects-filters select:focus{
  box-shadow: 0 12px 26px rgba(0,0,0,0.16) !important;
  border-color: var(--brand, #F2C94C);
  outline:none;
}

/* Bigger filter titles (SEARCH / COMPANY / etc.) */
body.projects .projects-filters label.kicker,
body.projects .filters label.kicker{
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .10em;
  margin-bottom: 8px;
  display: inline-block;
}

/* Gap above Reset row */
body.projects .projects-filters .filters-row-reset,
body.projects .filters .filters-row-reset{
  margin-top: 18px;
}
/* Projects filters — light grey fields */
body.projects .projects-filters input[type="search"],
body.projects .projects-filters select{
  background-color: #f3f6f9;   /* soft light grey */
  border: 1px solid #d8dee6;
  box-shadow: none;            /* remove shadow if present */
}

/* Slightly darker on focus */
body.projects .projects-filters input[type="search"]:focus,
body.projects .projects-filters select:focus{
  background-color: #e9eef5;
  border-color: var(--brand);
  outline: none;
}
body.projects .projects-filters input[type="search"],
body.projects .projects-filters select{
  background-color: #f3f6f9;
  border: 1px solid #cbd5e1;
  box-shadow: none;
  transition: all 0.2s ease;
}

body.projects .projects-filters input[type="search"]:focus,
body.projects .projects-filters select:focus{
  background-color: #e9eef5;
  border-color: var(--brand);
  outline: none;
}
.map-embed{
  margin-top: 20px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* Make search full width */
.filter-full {
  width: 100%;
}

/* Ensure first row stretches */
.filters-row-search {
  display: flex;
}

/* Gap before reset button */
.filters-spacer {
  height: 20px;
}


/* =========================================================
   CAREERS — Mirror Projects Portfolio (authoritative)
   - Same layout, fonts, colors, shadows as Projects filters
   ========================================================= */

/* Make Careers intro statement full width (match Projects) */
body.careers .section-intro .lead{
  max-width:none;
  text-align:justify;
  margin-left:0;
  margin-right:0;
}

/* Filters container (same visual as Projects) */
body.projects .projects-filters,
body.careers  .projects-filters{
  background:#f7f9fc;
  border:1px solid #d5dbe3;
  border-radius:14px;
  padding:18px;
  margin:16px 0 28px;
}

/* Rows */
body.projects .projects-filters .filters-row,
body.careers  .projects-filters .filters-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

/* Search row full width */
body.projects .projects-filters .filters-row-search,
body.careers  .projects-filters .filters-row-search{
  display:flex;
  width:100%;
}
body.projects .projects-filters .filters-row-search .filter-full,
body.careers  .projects-filters .filters-row-search .filter-full{
  flex:1 1 100%;
  width:100%;
}

/* Labels (SEARCH / DISCIPLINE / etc.) */
body.projects .projects-filters label,
body.careers  .projects-filters label{
  display:block;
  margin:0 0 8px;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0f172a;
}

/* Fields: light grey + shadow like Projects */
body.projects .projects-filters input[type="search"],
body.projects .projects-filters select,
body.careers  .projects-filters input[type="search"],
body.careers  .projects-filters select{
  width:100%;
  height:54px;
  padding:0 16px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background-color:#f3f6f9 !important;
  color:#1f2a37;
  font-size:1rem;
  font-weight:600;
  box-sizing:border-box;

  /* pop / shade */
  box-shadow: 0 8px 18px rgba(0,0,0,0.10) !important;
  transition: all .2s ease;
}

body.projects .projects-filters input[type="search"]::placeholder,
body.careers  .projects-filters input[type="search"]::placeholder{
  color:#64748b;
  opacity:1;
}

/* Focus */
body.projects .projects-filters input[type="search"]:focus,
body.projects .projects-filters select:focus,
body.careers  .projects-filters input[type="search"]:focus,
body.careers  .projects-filters select:focus{
  background-color:#e9eef5 !important;
  border-color: var(--brand);
  box-shadow: 0 12px 26px rgba(0,0,0,0.16) !important;
  outline:none;
}

/* Gap above Reset row */
body.projects .projects-filters .filters-row-reset,
body.careers  .projects-filters .filters-row-reset{
  margin-top:18px;
}
/* Careers + Projects — 4 equal filters row */
body.projects .filters-row-4col,
body.careers  .filters-row-4col{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
}
/* Force filter rows to occupy full width of the filters box */
body.projects .projects-filters .filters-row,
body.careers  .projects-filters .filters-row{
  width: 100%;
}

/* 4 equal columns that fill the full width (same as search row) */
body.projects .projects-filters .filters-row-4col,
body.careers  .projects-filters .filters-row-4col{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Ensure each filter block stretches */
body.projects .projects-filters .filters-row-4col .filter,
body.careers  .projects-filters .filters-row-4col .filter{
  width: 100%;
  min-width: 0; /* prevents overflow from long labels */
}
/* =========================================
   PROCUREMENT — Rotating Wheel + Dynamic Box
   (scoped so it won’t affect other sections)
   ========================================= */

#procurement .procurement-stage{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:28px;
  align-items:center;
}

#procurement .procurement-wheel{
  position:relative;
  width:400px;
  margin:0 auto;
}

#procurement .procurement-wheel-rotator{
  transition:transform 1s ease;
  transform-origin: 50% 50%;
}

#procurement .procurement-wheel img{
  width:100%;
  display:block;
}

/* Center text overlay (does NOT rotate) */
#procurement .procurement-wheel-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

#procurement .procurement-wheel-center-text{
  text-align:center;
  font-weight:900;
  font-size:18px;
  letter-spacing:1px;
  line-height:1.2;
  text-transform:uppercase;

  color:#000 !important;      /* FORCE black */
  text-shadow:none !important; /* REMOVE any shadow */
}

/* Dynamic box */
#procurement .procurement-box{
  border-radius:var(--radius);
  padding:24px;
  color:#ffffff;
  transition:background-color 0.6s ease;
}

#procurement .procurement-box h3{
  margin:0 0 10px;
  font-size:20px;
  color:#ffffff;
  text-align:left;
}

#procurement .procurement-box p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:#ffffff;
  text-align:justify;
}

/* Fade like “Our Values” */
#procurement .fade{
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
#procurement .fade.show{
  opacity:1;
  transform:none;
}

/* Hidden measurer (stable height, not visible) */
#procurement .procurement-measure-wrap{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
#procurement .procurement-measure-box{
  padding:24px;
}
#procurement .procurement-measure-title{
  margin:0 0 10px;
  font-size:20px;
}
#procurement .procurement-measure-desc{
  margin:0;
  font-size:15px;
  line-height:1.6;
}

/* Responsive */
@media (max-width: 900px){
  #procurement .procurement-stage{
    grid-template-columns:1fr;
  }
  #procurement .procurement-wheel{
    width:300px;
  }
}
.cv-upload-section{
  background:#f8fafc;
  padding:60px 0;
  margin-top:60px;
}

.cv-upload-section h2{
  font-size:28px;
  margin-bottom:10px;
}

.cv-upload-section p{
  margin-bottom:30px;
  color:var(--muted);
}

.cv-upload-section .form-row{
  display:flex;
  gap:20px;
  margin-bottom:20px;
}

.cv-upload-section input{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #d8dee6;
  font-size:14px;
}

.cv-upload-section input[type="file"]{
  background:#fff;
}
/* Career CV box — match portfolio card style */
body.careers .career-box{
  background:#f3f6f9;          /* same blue-grey as filters */
  border-radius:18px;
  padding:40px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
  border:1px solid #d8dee6;
  margin-top:30px;             /* reduced gap */
}

body.careers .career-box h2{
  margin-bottom:10px;
}

body.careers .career-box .lead{
  margin-bottom:30px;
  max-width:60ch;
}

/* Form layout */
body.careers .cv-form .form-row{
  display:flex;
  gap:20px;
  margin-bottom:20px;
}

body.careers .cv-form input{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d8dee6;
  font-size:14px;
  background:#f8fafc;
}

body.careers .cv-form input:focus{
  border-color:var(--brand);
  outline:none;
  background:#ffffff;
}

body.careers .consent-row{
  font-size:14px;
  color:var(--muted);
}
body.careers .career-box{
  margin-top:20px;
}
/* Reduce vertical spacing ONLY before CV box section */
body.careers .section:last-of-type{
  padding-top:30px;     /* reduce from default 80px */
}

/* Remove extra top margin if any */
body.careers .career-box{
  margin-top:0;
}
/* Reduce bottom padding of section above CV */
body.careers .section:nth-last-of-type(2){
  padding-bottom:30px;
}
body.careers .career-box .lead{
  max-width:100%;
}
body.careers .career-box p{
  width:100%;
}
body.careers .section:last-of-type{
  padding-top:10px;
}