/* ═══════════════════════════════════════════════════════════════
   ONESTO UNIFIED PAGE LAYER
   Loaded on every page after style.css (see functions.php).

   1. Tokens
   2. Photo hero            template-parts/hero-photo.php
   3. Closing call to action template-parts/page-cta.php
   4. Default page content  page.php, Terms, Blogs and similar
   5. Older page layouts    sp-, mei-, cbam- section families, brought
                            in line with the new navy / amber design
   6. Photo bands and quote backgrounds
   ═══════════════════════════════════════════════════════════════ */

/* 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  --u-field:        #F0F5FA;
  --u-field-2:      #E4ECF5;
  --u-white:        #FFFFFF;
  --u-navy:         #042C53;
  --u-navy-deep:    #021D38;
  --u-mute:         #54688A;
  --u-amber:        #FAC775;
  --u-amber-ink:    #412402;
  --u-rule:         #C8D6E6;
  --u-rule-navy:    #1D456F;
  --u-on-navy:      #EAF1F8;
  --u-on-navy-mute: #9FB6CE;
  --u-pad:          clamp(64px, 7vw, 108px);
  --u-wrap:         1180px;
  --u-gutter:       clamp(20px, 4vw, 44px);
}

/* 2. PHOTO HERO ───────────────────────────────────────────────
   Same look as the home page hero: dark navy gradient with two soft
   glows, white headline, short amber line, amber button, and a photo
   card on the opposite side of the headline. */
.oh-hero,
body.onesto-skin .u-hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, #031a33 0%, #020f20 55%, #010811 100%) !important;
  color: var(--u-field);
}
.oh-hero { padding: clamp(130px, 13vw, 170px) 0 clamp(64px, 8vw, 100px); }
body.onesto-skin .u-hero-section { padding-bottom: clamp(64px, 8vw, 100px) !important; }
.oh-hero::before,
body.onesto-skin .u-hero-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -8%;
  width: clamp(420px, 55vw, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1a68ad;
  opacity: .3;
  filter: blur(90px);
  pointer-events: none;
}
.oh-hero::after,
body.onesto-skin .u-hero-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -26%;
  left: -10%;
  width: clamp(360px, 45vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--u-amber);
  opacity: .1;
  filter: blur(100px);
  pointer-events: none;
}
.oh-hero *, .oh-hero *::before, .oh-hero *::after { box-sizing: border-box; }
.oh-hero .oh-wrap { max-width: 1160px; margin: 0 auto; padding: 0 5%; }
.oh-hero .oh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5.5vw, 80px);
  align-items: center;
}
.oh-hero .oh-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(240, 245, 250, .7);
  text-decoration: none;
  transition: color .2s ease;
}
.oh-hero .oh-back:hover { color: var(--u-amber); }
.oh-hero .oh-back svg { color: var(--u-amber); }
.oh-hero .oh-title,
body.onesto-skin .u-hero-section h1 {
  margin: 0 !important;
  max-width: 18ch !important;
  font-size: clamp(2rem, 4.1vw, 3.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.14 !important;
  letter-spacing: -.01em !important;
  color: var(--u-field) !important;
  text-wrap: balance;
}
.oh-hero .oh-title em,
.oh-hero .oh-title .period,
body.onesto-skin .u-hero-section h1 em { font-style: normal !important; color: inherit !important; text-decoration: none !important; font-weight: inherit !important; }
.oh-hero .oh-title em { display: inline; }
.oh-hero .oh-divider { width: 64px; height: 2px; margin: 26px 0; background: var(--u-amber); }
.oh-hero .oh-lede {
  max-width: 30em;
  margin: 0;
  font-size: clamp(1.02rem, 1.2vw, 1.12rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(240, 245, 250, .8);
}
.oh-hero .oh-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.oh-hero .oh-note { margin: 18px 0 0; font-size: .9rem; color: rgba(240, 245, 250, .6); }

/* Buttons: the home page's square amber button and its ghost partner */
.oh-btn,
body.onesto-skin .u-hero-section [class*="-btn-solid"],
body.onesto-skin .u-hero-section [class*="-btn-line"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px !important;
  border: 1px solid transparent;
  border-radius: 2px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.oh-hero .oh-btn--solid,
body.onesto-skin .u-hero-section [class*="-btn-solid"] { background: var(--u-amber) !important; border-color: var(--u-amber) !important; color: var(--u-navy) !important; }
.oh-hero .oh-btn--solid:hover,
body.onesto-skin .u-hero-section [class*="-btn-solid"]:hover { opacity: .85; }
.oh-hero .oh-btn--line,
body.onesto-skin .u-hero-section [class*="-btn-line"] { background: transparent !important; border-color: rgba(240, 245, 250, .4) !important; color: var(--u-field) !important; }
.oh-hero .oh-btn--line:hover,
body.onesto-skin .u-hero-section [class*="-btn-line"]:hover { border-color: var(--u-amber) !important; color: var(--u-amber) !important; }
.oh-hero .oh-btn:focus-visible { outline: 2px solid var(--u-amber); outline-offset: 3px; }

/* Text inside the two-column intro of the service heroes */
body.onesto-skin .u-hero-section p { color: rgba(240, 245, 250, .8) !important; }
body.onesto-skin .u-hero-section strong { color: var(--u-field) !important; }
body.onesto-skin .u-hero-section [class*="hero-cols"] { border-top-color: rgba(240, 245, 250, .14) !important; }

/* Photo card, styled like the cards in the home hero */
.oh-hero .oh-media,
.u-hero-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  max-height: 520px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--u-navy);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.oh-hero .oh-media::after,
.u-hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 15, 32, 0) 55%, rgba(2, 15, 32, .35) 100%);
  pointer-events: none;
}
.oh-hero .oh-media > img,
.u-hero-figure > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.oh-hero .oh-media--logo > img { filter: saturate(.85) brightness(.7); }
.oh-hero .oh-logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(62%, 300px);
  aspect-ratio: 16 / 10;
  padding: 28px;
  background: var(--u-white);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(2, 29, 56, .35);
}
.oh-hero .oh-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Photo beside the headline of the service heroes: wrapper becomes a two-column grid */
.u-hero-section { padding-top: clamp(130px, 13vw, 170px) !important; }
.u-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.u-hero-grid > * { grid-column: 1; }
.u-hero-grid > .u-hero-figure { grid-column: 2; grid-row: 1 / span 2; align-self: end; aspect-ratio: 4 / 3; max-height: 360px; }
.u-hero-grid > [class*="hero-cols"] { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .oh-hero .oh-grid { grid-template-columns: minmax(0, 1fr); }
  .oh-hero .oh-media { aspect-ratio: 16 / 10; max-height: none; }
  .u-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .u-hero-grid > .u-hero-figure { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 10; max-height: none; margin-top: 28px; }
}
@media (max-width: 520px) {
  .oh-hero { padding-top: 108px; }
  .oh-hero .oh-actions { flex-direction: column; align-items: stretch; }
  .oh-hero .oh-media, .u-hero-grid > .u-hero-figure { aspect-ratio: 4 / 3; }
}

/* 3. CLOSING CALL TO ACTION ─────────────────────────────────── */
html body .pg-cta {
  position: relative;
  overflow: hidden;
  background: var(--u-navy);
  color: var(--u-on-navy);
  padding: var(--u-pad) var(--u-gutter);
  text-align: left;
}
.pg-cta .pg-cta-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--u-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: end;
}
.pg-cta .pg-cta-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--u-on-navy);
}
.pg-cta .pg-cta-label::before { content: ""; width: 22px; height: 1px; background: var(--u-amber); }
html body .pg-cta h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--u-on-navy);
}
html body .pg-cta h2 em { font-style: italic; color: var(--u-amber); }
html body .pg-cta p {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--u-on-navy-mute);
  opacity: 1;
}
html body .pg-cta .pg-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  background: var(--u-amber);
  border: 1px solid var(--u-amber);
  color: var(--u-amber-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
html body .pg-cta .pg-cta-btn:hover { background: transparent; color: var(--u-on-navy); border-color: var(--u-on-navy); }
.pg-cta .pg-cta-mail { display: block; margin-top: 18px; font-size: 14px; color: var(--u-on-navy-mute); }
.pg-cta .pg-cta-mail a { color: var(--u-on-navy); }
/* Photo texture behind the closing band */
.pg-cta .pg-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.pg-cta .pg-cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; display: block; }
.pg-cta .pg-cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 44, 83, .96) 0%, rgba(4, 44, 83, .78) 55%, rgba(4, 44, 83, .5) 100%);
}
@media (max-width: 900px) {
  .pg-cta .pg-cta-wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* 4. DEFAULT PAGE CONTENT ───────────────────────────────────── */
html body .content-section { background: var(--u-white); padding: var(--u-pad) var(--u-gutter); }
html body .content-wrapper { max-width: 760px; }
html body .content-wrapper h1,
html body .content-wrapper h2,
html body .content-wrapper h3 { font-weight: 500; color: var(--u-navy); letter-spacing: -.01em; }
html body .content-wrapper h2 { font-size: clamp(28px, 3.2vw, 40px); }
html body .content-wrapper h3 { font-size: clamp(22px, 2.2vw, 28px); }
html body .content-wrapper p,
html body .content-wrapper ul,
html body .content-wrapper ol { font-size: 17px; font-weight: 400; line-height: 1.75; color: var(--u-mute); }
html body .content-wrapper li::before { color: var(--u-amber); }
html body .content-wrapper a { color: var(--u-navy); text-decoration-color: var(--u-amber); text-underline-offset: 3px; }
html body .content-wrapper strong { color: var(--u-navy); font-weight: 600; }
html body .content-wrapper img { max-width: 100%; height: auto; border-radius: 6px; }

/* 5. OLDER PAGE LAYOUTS ─────────────────────────────────────────
   Older templates (Market Entry, Matchmaking, Ongoing Support,
   Regulatory, Sustainability, Trade & Sourcing, Logistics, CBAM,
   Market Entry India) keep their content and structure; these rules
   bring their type, labels and text colours in line with the new
   service pages. "html body" outranks the templates' own inline CSS. */

/* Section labels: navy with a short amber rule, as on the new pages */
body.onesto-skin .sp-label,
body.onesto-skin .mei-sec-label,
body.onesto-skin .cbam-sec-label,
body.onesto-skin .cbam-col-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  opacity: 1;
  color: var(--u-navy) !important;
  margin-bottom: 20px;
}
body.onesto-skin .sp-label::before,
body.onesto-skin .mei-sec-label::before,
body.onesto-skin .cbam-sec-label::before,
body.onesto-skin .cbam-col-label::before {
  content: "";
  display: block;
  flex: none;
  width: 22px;
  height: 1px;
  background: var(--u-amber);
  opacity: 1;
}
/* Labels sitting on a navy band */
body.onesto-skin .sp-dark .sp-label,
body.onesto-skin .sp-stats .sp-label,
body.onesto-skin .mei-client .mei-sec-label,
body.onesto-skin .cbam-why .cbam-sec-label,
body.onesto-skin .cbam-why .cbam-col-label,
body.onesto-skin .cbam-quotes .cbam-sec-label,
body.onesto-skin .cbam-contact .cbam-sec-label,
body.onesto-skin .cbam-consequences .cbam-sec-label,
body.onesto-skin section[style*="--teal-dark"] .sp-label { color: var(--u-on-navy) !important; }
/* The two Ongoing Support templates swap the bands: services on navy, signals on light */
body.onesto-skin .sp-dark[style*="--cream"] .sp-label { color: var(--u-navy) !important; }

/* Headings: medium weight, tighter scale */
body.onesto-skin .sp-h2,
body.onesto-skin .sp-dark-h2,
body.onesto-skin .mei-intro-h2,
body.onesto-skin .mei-services-h2,
body.onesto-skin .mei-client-h2,
body.onesto-skin .mei-faq-h2,
body.onesto-skin .mei-related-h2,
body.onesto-skin .cbam-big-h2,
body.onesto-skin .cbam-services-h2,
body.onesto-skin .cbam-faq-h2,
body.onesto-skin .cbam-contact-h2 {
  font-size: clamp(31px, 4.2vw, 52px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
}
/* The old two-column grids used a 120px gap, which squeezed the headings */
@media (min-width: 1081px) {
  body.onesto-skin .sp-intro-inner,
  body.onesto-skin .sp-dark-inner { gap: clamp(48px, 6vw, 88px); }
}
body.onesto-skin .sp-h2,
body.onesto-skin .mei-intro-h2,
body.onesto-skin .mei-services-h2,
body.onesto-skin .mei-faq-h2,
body.onesto-skin .mei-related-h2,
body.onesto-skin .cbam-big-h2,
body.onesto-skin .cbam-services-h2,
body.onesto-skin .cbam-faq-h2 { color: var(--u-navy); }
body.onesto-skin .sp-h2 em,
body.onesto-skin .sp-dark-h2 em,
body.onesto-skin [class^="mei-"] h2 em,
body.onesto-skin [class*=" mei-"] h2 em,
body.onesto-skin [class^="cbam-"] h2 em { color: var(--u-amber); font-style: italic; }
body.onesto-skin .sp-svc-title,
body.onesto-skin .mei-service-title,
body.onesto-skin .mei-related-title,
body.onesto-skin .cbam-service-title,
body.onesto-skin .cbam-card-title { font-weight: 500; line-height: 1.2; }
body.onesto-skin .sp-faq-q,
body.onesto-skin .mei-faq-q,
body.onesto-skin .cbam-faq-q { font-weight: 500; }

/* Body copy: solid muted navy instead of faded ink */
body.onesto-skin .sp-body,
body.onesto-skin .sp-svcs-note,
body.onesto-skin .sp-svc-body,
body.onesto-skin .sp-faq-note,
body.onesto-skin .sp-faq-a,
body.onesto-skin .mei-intro-body,
body.onesto-skin .mei-services-note,
body.onesto-skin .mei-service-body,
body.onesto-skin .mei-faq-a,
body.onesto-skin .mei-related-body,
body.onesto-skin .cbam-body-text,
body.onesto-skin .cbam-services-note,
body.onesto-skin .cbam-service-body,
body.onesto-skin .cbam-card-body,
body.onesto-skin .cbam-faq-a { opacity: 1; color: var(--u-mute); font-weight: 400; }
body.onesto-skin .sp-svc-sub li { opacity: 1; color: var(--u-mute); }
body.onesto-skin .sp-svc-num,
body.onesto-skin .mei-service-num,
body.onesto-skin .cbam-service-num { opacity: 1; color: var(--u-mute); font-style: normal; font-weight: 600; letter-spacing: .12em; }

/* Text on navy bands */
body.onesto-skin .sp-dark-body,
body.onesto-skin .sp-signal,
body.onesto-skin .sp-stat-l,
body.onesto-skin .mei-client-sub,
body.onesto-skin .mei-client-item,
body.onesto-skin .cbam-why-item,
body.onesto-skin .cbam-contact-sub,
body.onesto-skin .cbam-q-attr { opacity: 1; color: var(--u-on-navy-mute); font-weight: 400; }
body.onesto-skin .sp-signal::before,
body.onesto-skin .mei-client-item::before { color: var(--u-amber); }
body.onesto-skin .sp-stat-n { font-weight: 500; }
/* Ongoing Support swaps the bands, so its signal list sits on light */
body.onesto-skin .sp-dark[style*="--cream"] .sp-dark-body,
body.onesto-skin .sp-dark[style*="--cream"] .sp-signal { color: var(--u-mute); }
body.onesto-skin .sp-dark[style*="--cream"] .sp-dark-h2 { color: var(--u-navy); }
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-h2 { color: var(--u-on-navy); }
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-svcs-note,
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-svc-body,
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-svc-sub li,
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-svc-num { color: var(--u-on-navy-mute); }
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-svc-title { color: var(--u-on-navy); }
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-svc-list,
body.onesto-skin .sp-svcs[style*="--teal-dark"] .sp-svc { border-color: var(--u-rule-navy); }

/* Callout note */
body.onesto-skin .sp-note {
  background: var(--u-white);
  border-left: 2px solid var(--u-amber);
  color: var(--u-mute);
  opacity: 1;
}

/* Service rows: amber accent bar on hover is already there; keep rules light */
body.onesto-skin .sp-svc-list,
body.onesto-skin .sp-svc { border-color: var(--u-rule); }
body.onesto-skin .sp-faq { background: var(--u-white); }
body.onesto-skin .sp-faq-item { border-color: var(--u-rule); }
body.onesto-skin .sp-faq-q::after { color: var(--u-navy); opacity: .6; }

/* Quote marks were navy-on-navy and invisible */
body.onesto-skin .sp-qmark,
body.onesto-skin .cbam-q-mark { color: var(--u-amber); opacity: .7; }
body.onesto-skin .sp-qattr { color: var(--u-on-navy-mute); }
body.onesto-skin .sp-qattr span { color: var(--u-amber); }

/* 6. PHOTO BANDS AND QUOTE BACKGROUNDS ───────────────────────── */
/* A photo laid behind a navy band (quote sections, closing CTA) */
.u-photo-bg { position: relative; isolation: isolate; }
.u-photo-bg > .u-photo-bg__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.u-photo-bg > .u-photo-bg__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .38; }
.u-photo-bg > .u-photo-bg__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(4, 44, 83, .55) 0%, rgba(4, 44, 83, .92) 75%);
}
html body .sp-quote.u-photo-bg .sp-qwm { z-index: 0; }
html body .sp-quote.u-photo-bg .sp-qinner { z-index: 2; }

/* Full-width photo strip used inside content (e.g. between sections) */
.u-photo-strip {
  margin: 0;
  max-width: var(--u-wrap);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--u-gutter);
}
.u-photo-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: 6px;
}
.u-photo-strip figcaption {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--u-mute);
}
@media (max-width: 640px) {
  .u-photo-strip img { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .oh-btn, .oh-hero .oh-back { transition: none; }
}

/* 7. HOME-PAGE LOOK FOR SERVICE PAGES ───────────────────────────
   Applies to body.onesto-skin (set in functions.php). Headings use the
   home page's type scale and its emphasis style (upright, bold, amber
   underline), cards get the home page's rounded corners, and every dark
   band carries a darkened photo behind it, like the home team band. */

/* Section headings */
body.onesto-skin section:not(.oh-hero):not(.u-hero-section) h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  text-wrap: balance;
}
body.onesto-skin section:not(.oh-hero):not(.u-hero-section) h3 { font-weight: 600 !important; letter-spacing: -.005em; }
body.onesto-skin section:not(.oh-hero):not(.u-hero-section) :is(h2, h3) em {
  font-style: normal !important;
  font-weight: 700 !important;
  color: inherit !important;
  text-decoration: underline;
  text-decoration-color: var(--u-amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

/* Cards: the home page's rounded corners */
body.onesto-skin section [class$="-card"],
body.onesto-skin section [class*="-card "] { border-radius: 8px; }

/* Dark bands: a darkened photo behind the navy, chosen per page below */
body.onesto-skin {
  --u-band-photo: url("../photos/globe-study.jpg");
  --u-band-shade: linear-gradient(160deg, rgba(3, 26, 51, .93) 0%, rgba(2, 15, 32, .9) 55%, rgba(1, 8, 17, .94) 100%);
}
body.onesto-skin :is(
  [class*="-band-navy"],
  .sp-stats, .sp-dark:not([style*="--cream"]), .sp-svcs[style*="--teal-dark"],
  .mei-client, .tse-services--navy, .tse-sectors--navy, .tse-faq--navy,
  .indh-corridor--emerging, .cbam-consequences, .cbam-why,
  .id-stats, .id-band, .ed-stats, .ed-band,
  .pp-dark.pp-section, .pm-dark.pm-section, .gd-topics,
  .rl-partner, .rl-process, .rl-faq
) {
  background-image: var(--u-band-shade), var(--u-band-photo) !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Closing bands get the navy silk texture used by the closing call to action */
body.onesto-skin :is(
  section[class$="-closing"], .svcm-cta, .tse-cta, .bl-cta, .gl-cta, .cbam-contact
) {
  background-image: var(--u-band-shade), url("../photos/texture-navy-silk.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}
@media (max-width: 760px) {
  body.onesto-skin { --u-band-photo: url("../photos/globe-study-800.jpg"); }
}

/* The closing call to action's headline emphasis, like the rest */
html body .pg-cta h2 em { font-style: normal; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--u-amber); text-decoration-thickness: 3px; text-underline-offset: 7px; }

/* Background photo for each page's dark bands */
body.onesto-t-company-formation-in-europe { --u-band-photo: url("../photos/europe-coast-dusk.jpg"); }
body.onesto-t-company-formation-india { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-cross-cultural-training-india { --u-band-photo: url("../photos/desk-leather-journal.jpg"); }
body.onesto-t-index { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-interim-and-country-management-india { --u-band-photo: url("../photos/notebook-marble-desk.jpg"); }
body.onesto-t-licences-permits-and-registrations { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-ma-and-joint-ventures-india { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-page { --u-band-photo: url("../photos/texture-marble-gold.jpg"); }
body.onesto-t-page-accounting-tax-payroll { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-page-agrosupermart { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-blog { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-blogs { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-bng-logistics { --u-band-photo: url("../photos/port-containers.jpg"); }
body.onesto-t-page-business-matchmaking { --u-band-photo: url("../photos/india-jali-lattice.jpg"); }
body.onesto-t-page-business-matchmaking-europe { --u-band-photo: url("../photos/europe-coast-dusk.jpg"); }
body.onesto-t-page-cbam-compliance { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-contract-manufacturing-oem { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-distribution-partner-search-india { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-easeup { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-page-engineering-project-support { --u-band-photo: url("../photos/port-containers.jpg"); }
body.onesto-t-page-europe-desk { --u-band-photo: url("../photos/europe-coast-dusk.jpg"); }
body.onesto-t-page-european-companies-entering-india { --u-band-photo: url("../photos/india-jali-corridor.jpg"); }
body.onesto-t-page-family-hub { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-government-affairs { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-page-griffin-collective { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-guides { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-hr-consulting-payroll { --u-band-photo: url("../photos/desk-leather-journal.jpg"); }
body.onesto-t-page-india-desk { --u-band-photo: url("../photos/india-jali-lattice.jpg"); }
body.onesto-t-page-industries { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-industry { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-legal-advisory { --u-band-photo: url("../photos/desk-leather-journal.jpg"); }
body.onesto-t-page-logistics { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-logistics-warehousing-customs { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-manufacturing-plant-setup { --u-band-photo: url("../photos/port-containers.jpg"); }
body.onesto-t-page-market-entry-europe { --u-band-photo: url("../photos/europe-coast-dusk.jpg"); }
body.onesto-t-page-market-entry-india { --u-band-photo: url("../photos/india-jali-lattice.jpg"); }
body.onesto-t-page-marutee { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-nec { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-nimble-india { --u-band-photo: url("../photos/desk-leather-journal.jpg"); }
body.onesto-t-page-ongoing-support { --u-band-photo: url("../photos/india-jali-lattice.jpg"); }
body.onesto-t-page-ongoing-support-europe { --u-band-photo: url("../photos/sea-horizon-dusk.jpg"); }
body.onesto-t-page-privacy-policy { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-page-real-estate { --u-band-photo: url("../photos/globe-study.jpg"); }
body.onesto-t-page-recruitment-executive-search { --u-band-photo: url("../photos/desk-leather-journal.jpg"); }
body.onesto-t-page-regulatory-compliance { --u-band-photo: url("../photos/desk-leather-journal.jpg"); }
body.onesto-t-page-service { --u-band-photo: url("../photos/europe-stone-stairs.jpg"); }
body.onesto-t-page-services { --u-band-photo: url("../photos/map-compass.jpg"); }
body.onesto-t-page-supplier-qualification-qc { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-page-sustainability-services { --u-band-photo: url("../photos/europe-coast-dusk.jpg"); }
body.onesto-t-page-terms { --u-band-photo: url("../photos/legal-leather-books.jpg"); }
body.onesto-t-page-trade-sourcing-europe { --u-band-photo: url("../photos/port-containers.jpg"); }
body.onesto-t-page-trade-sourcing-india { --u-band-photo: url("../photos/port-cranes-dusk.jpg"); }
body.onesto-t-remote-and-engineering-teams-india { --u-band-photo: url("../photos/desk-leather-journal.jpg"); }
body.onesto-t-trade-missions-and-buyer-visits-india { --u-band-photo: url("../photos/letter-wax-seal.jpg"); }

/* Internal drafting notes in the privacy policy stay out of public view until filled in */
.pp-main p:has(> .pp-flag) { display: none; }

/* 8. HOME PAGE PHOTOS ─────────────────────────────────────────
   Photos behind the four dark sections of the home page. Only the
   background changes: a navy tint over a photo, so layout and text
   stay exactly as designed. Phones load the 800px versions. */
body.home-vibe {
  --hp-photo-shade: linear-gradient(160deg, rgba(3, 26, 51, .82) 0%, rgba(2, 15, 32, .74) 55%, rgba(1, 8, 17, .84) 100%);
}
body.home-vibe section.sv-section {
  background-color: var(--teal-dark);
  background-image: var(--hp-photo-shade), url("../photos/globe-study.jpg");
  background-size: cover;
  background-position: center;
}
body.home-vibe section.hw-section {
  background-color: var(--teal-dark);
  background-image: var(--hp-photo-shade), url("../photos/notebook-marble-desk.jpg");
  background-size: cover;
  background-position: center;
}
body.home-vibe .team-section .tm-bg {
  background-image: var(--hp-photo-shade), url("../photos/studio-team-table.jpg");
  background-size: cover;
  background-position: center;
}
body.home-vibe section.quote-sec.qs-sec {
  background-image: var(--hp-photo-shade), url("../photos/sea-horizon-dusk.jpg");
  background-size: cover;
  background-position: center;
}
@media (max-width: 800px) {
  body.home-vibe section.sv-section { background-image: var(--hp-photo-shade), url("../photos/globe-study-800.jpg"); }
  body.home-vibe section.hw-section { background-image: var(--hp-photo-shade), url("../photos/notebook-marble-desk-800.jpg"); }
  body.home-vibe .team-section .tm-bg { background-image: var(--hp-photo-shade), url("../photos/studio-team-table-800.jpg"); }
  body.home-vibe section.quote-sec.qs-sec { background-image: var(--hp-photo-shade), url("../photos/sea-horizon-dusk-800.jpg"); }
}