/* ==========================================================================
   Shawn Cargo Logistics — 2026 Design System
   Project: Shawn Cargo Logistics | Home page + CMS Builder theme
   --------------------------------------------------------------------------
   Loaded AFTER homepage-redesign.css. Scoped to body.sh-2026 so pages that
   have not yet been migrated keep their existing styling untouched.
   ========================================================================== */

body.sh-2026{
  /* Brand */
  --sh-navy:#0D2B45;
  --sh-navy-deep:#071B2E;
  --sh-navy-darkest:#061524;
  --sh-navy-mid:#1A3F5C;
  --sh-orange:#E8530E;
  --sh-orange-hover:#C9440A;
  --sh-orange-soft:rgba(232,83,14,.10);
  --sh-orange-line:rgba(232,83,14,.26);

  /* Neutrals */
  --sh-white:#fff;
  --sh-off:#F8F9FA;
  --sh-line:#E4E6E9;
  --sh-ink:#1A1A1A;
  --sh-muted:#6B6B6B;
  --sh-slate:#5A6B7D;

  /* Type — existing site fonts, unchanged */
  --sh-head:"Montserrat","Segoe UI",Arial,sans-serif;
  --sh-body:"Lato","Segoe UI",Arial,sans-serif;

  /* Spacing scale — 8px base */
  --sh-1:8px; --sh-2:16px; --sh-3:24px; --sh-4:32px;
  --sh-5:48px; --sh-6:64px; --sh-7:96px;

  --sh-shell:1280px;
  /* Corner radius for every card, button, input and panel in the 2026 theme.
     Change here only — 30+ rules read from it, so all redesigned pages stay
     consistent and any future page inherits the same value. Circular elements
     (WhatsApp button, scroll-to-top) and full-bleed mobile menu rows set their
     own radius deliberately and are unaffected. */
  --sh-r:10px;
  --sh-ease:cubic-bezier(.22,.8,.3,1);
}

/* --------------------------------------------------------------------------
   Neutralise the legacy global radius override inside the new theme.
   homepage-redesign.css forces border-radius:10px!important on everything
   matching [class*="card"], [class*="box"], buttons, inputs, etc.
   -------------------------------------------------------------------------- */
body.sh-2026 :where(
  .sh-btn,.sh-btn-o,.sh-card,.sh-svc,.sh-opp,.sh-stat,.sh-partner,
  .sh-tag,.sh-ico,.sh-field input,.sh-field select,.sh-field textarea,
  .sh-form-card,.sh-roles
){ border-radius:var(--sh-r)!important; }

body.sh-2026{
  font-family:var(--sh-body);
  color:var(--sh-ink);
  background:var(--sh-white);
  line-height:1.7;
  overflow-x:hidden;
  max-width:100%;
}
html:has(body.sh-2026){overflow-x:hidden}

/* Reveal animations start offset horizontally; without containment the
   right-hand ones (fade-right / slide-right) widen the page. */
body.sh-2026 main,
body.sh-2026 .sh-sec,
body.sh-2026 .sh-band,
body.sh-2026 .sh-mosaic,
body.sh-2026 .sh-metrics,
body.sh-2026 .sh-contact,
body.sh-2026 .sh-cta,
body.sh-2026 .sl-partners-section,
body.sh-2026 .sl-impact-section,
body.sh-2026 .sl-home-contact{max-width:100%;overflow-x:clip}

/* Fallback for browsers without overflow:clip */
@supports not (overflow:clip){
  body.sh-2026 main,
  body.sh-2026 .sh-sec,
  body.sh-2026 .sh-band,
  body.sh-2026 .sh-mosaic,
  body.sh-2026 .sh-metrics,
  body.sh-2026 .sh-contact,
  body.sh-2026 .sh-cta{overflow-x:hidden}
}
body.sh-2026 img{max-width:100%;display:block}

.sh-shell{max-width:var(--sh-shell);margin:0 auto;padding:0 var(--sh-4)}
.sh-sec{padding:var(--sh-7) 0}
.sh-sec--off{background:var(--sh-off)}

.sh-kicker{
  display:block;font-family:var(--sh-head);font-size:12px;font-weight:700;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--sh-orange);
}
.sh-title{
  font-family:var(--sh-head);font-weight:800;
  font-size:clamp(26px,3vw,38px);line-height:1.25;
  color:var(--sh-navy);margin-top:var(--sh-2);
}
.sh-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sh-5);margin-bottom:var(--sh-5);
}
.sh-head p{font-size:15px;line-height:1.85;color:var(--sh-muted);max-width:400px}
.sh-dark .sh-title{color:#fff}
.sh-dark .sh-head p{color:rgba(255,255,255,.6)}

/* ---------- Buttons ---------- */
.sh-btn,.sh-btn-o{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sh-head);font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:15px 30px;border:1px solid transparent;
  transition:.35s var(--sh-ease);cursor:pointer;text-decoration:none;
}
.sh-btn{background:var(--sh-orange);color:#fff;border-color:var(--sh-orange)}
.sh-btn:hover{background:var(--sh-orange-hover);border-color:var(--sh-orange-hover);transform:translateY(-2px);color:#fff}
.sh-btn-o{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.sh-btn-o:hover{border-color:var(--sh-orange);color:var(--sh-orange);transform:translateY(-2px)}
.sh-link{
  font-family:var(--sh-head);font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--sh-orange);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;
}

/* ---------- Icon chips ---------- */
.sh-ico{
  display:flex;align-items:center;justify-content:center;
  background:var(--sh-orange-soft);border:1px solid var(--sh-orange-line);
  color:var(--sh-orange);flex:none;
}
.sh-ico svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   HEADER + TOPBAR  (restyles existing sl- markup, no PHP change needed)
   ========================================================================== */
body.sh-2026 .sl-topbar{
  background:var(--sh-navy-darkest);padding:10px 0;font-size:13px;border:0;
  /* The header sits at z-index 900. Without a higher stacking context here,
     the Portal Logins panel is painted underneath it and its first entries
     disappear behind the white bar. */
  position:relative;z-index:950;
}
body.sh-2026 .sl-topbar .sl-portal-login{position:relative;z-index:960}
body.sh-2026 .sl-topbar .sl-portal-login__menu{z-index:970}
body.sh-2026 .sl-topbar__inner{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sh-3);flex-wrap:wrap;
}
/* Light text for the dark bar itself. The :not() keeps it out of the white
   Portal Logins panel, whose links must stay dark. */
body.sh-2026 .sl-topbar a:not(.sl-portal-login__menu a),
body.sh-2026 .sl-topbar button{color:rgba(255,255,255,.62);transition:color .3s}
body.sh-2026 .sl-topbar a:not(.sl-portal-login__menu a):hover,
body.sh-2026 .sl-topbar button:hover{color:#fff}

/* Portal Logins panel — dark text on white, stated explicitly */
body.sh-2026 .sl-topbar .sl-portal-login__menu{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  box-shadow:0 24px 60px rgba(7,27,46,.20);
}
body.sh-2026 .sl-topbar .sl-portal-login__menu a{
  color:var(--sh-navy)!important;
  font-family:var(--sh-head);font-size:13px;font-weight:600;
  letter-spacing:.3px;
  border-bottom:1px solid var(--sh-line);
}
body.sh-2026 .sl-topbar .sl-portal-login__menu a:last-child{border-bottom:0}
body.sh-2026 .sl-topbar .sl-portal-login__menu a:hover,
body.sh-2026 .sl-topbar .sl-portal-login__menu a:focus-visible{
  color:var(--sh-orange)!important;padding-left:7px;
}
body.sh-2026 .sl-topbar .sl-portal-login__menu:before{
  background:#fff;border-color:var(--sh-line);
}
body.sh-2026 .sl-topbar svg:not(.sl-social__link svg){color:var(--sh-orange)}
/* The Portal Logins button already has an orange fill, so its icon and
   chevron are white rather than orange-on-orange. */
body.sh-2026 .sl-topbar .sl-portal-login__toggle svg,
body.sh-2026 .sl-topbar .sl-portal-login__toggle svg *{
  color:#fff!important;stroke:#fff!important;
}
body.sh-2026 .sl-topbar .sl-portal-login__toggle svg [fill]:not([fill="none"]){fill:#fff!important}
/* Social glyphs inherit their link colour, not the topbar orange, so the
   white-on-orange hover state stays legible. */
body.sh-2026 .sl-topbar .sl-social__link svg,
.sl-social__link svg{color:inherit!important}
body.sh-2026 .sl-topbar__contact{display:flex;gap:var(--sh-4);flex-wrap:wrap}
body.sh-2026 .sl-topbar__links{display:flex;gap:var(--sh-3);align-items:center}

body.sh-2026 .sl-header{
  position:relative;left:0;right:0;z-index:900;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(13,43,69,.10);
  box-shadow:none;transition:.4s var(--sh-ease);
}
/* Home page floats the header over the hero; slightly more translucent
   there so the banner reads through it. */
body.sh-home .sl-header{
  position:absolute;top:auto;
  background:rgba(255,255,255,.86);
  border-bottom-color:rgba(255,255,255,.35);
}
body.sh-2026 .sl-header.is-stuck{
  position:fixed;top:0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:rgba(13,43,69,.10);
  box-shadow:0 2px 26px rgba(13,43,69,.13);
}
body.sh-2026 .sl-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sh-4);
  padding-top:10px;padding-bottom:10px;transition:padding .35s var(--sh-ease);
}
body.sh-2026 .sl-header.is-stuck .sl-header__inner{padding-top:7px;padding-bottom:7px}

/* ---- Logo: sits directly on the light header in its official colours ---- */
body.sh-2026 .sl-brand{
  display:inline-flex;align-items:center;flex:none;
  background:none;padding:0;box-shadow:none;
}
body.sh-2026 .sl-brand img{
  height:92px;width:auto;max-height:92px;filter:none;
  transition:height .35s var(--sh-ease),max-height .35s var(--sh-ease);
}
body.sh-2026 .sl-header.is-stuck .sl-brand img{height:66px;max-height:66px}

/* ---- Nav: the container holds <a> and <div.sl-nav-group> directly ---- */
body.sh-2026 .sl-nav{
  display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;
}
body.sh-2026 .sl-nav > a,
body.sh-2026 .sl-nav-group > button{
  font-family:var(--sh-head);font-size:13.5px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--sh-navy)!important;
  padding:0 0 7px;position:relative;white-space:nowrap;
  background:none!important;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .3s;text-decoration:none;
}
body.sh-2026 .sl-nav > a::after,
body.sh-2026 .sl-nav-group > button::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--sh-orange);transition:width .35s var(--sh-ease);
}
body.sh-2026 .sl-nav > a:hover,
body.sh-2026 .sl-nav > a.is-active,
body.sh-2026 .sl-nav-group > button:hover,
body.sh-2026 .sl-nav-group.is-active > button{color:var(--sh-orange)!important}
body.sh-2026 .sl-nav > a:hover::after,
body.sh-2026 .sl-nav > a.is-active::after,
body.sh-2026 .sl-nav-group > button:hover::after,
body.sh-2026 .sl-nav-group.is-active > button::after{width:100%}

/* Chevron */
/* Thin chevron rather than a solid triangle */
body.sh-2026 .sl-nav-chevron{
  width:8px;height:8px;display:inline-block;flex:none;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;
  border-radius:1px;
  transform:rotate(45deg);margin-top:-4px;
  transition:transform .3s var(--sh-ease),opacity .3s;opacity:.75;
}
body.sh-2026 .sl-nav-group:hover .sl-nav-chevron{opacity:1}
body.sh-2026 .sl-nav-group:hover .sl-nav-chevron{transform:rotate(-135deg);margin-top:2px}

/* ---- Dropdowns ---- */
body.sh-2026 .sl-nav-group{position:relative}
body.sh-2026 .sl-dropdown{
  position:absolute;top:100%;left:0;margin-top:14px;
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  box-shadow:0 24px 60px rgba(7,27,46,.20);padding:26px 28px;min-width:260px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--sh-ease),transform .28s var(--sh-ease),visibility .28s;
  z-index:950;
}
/* The legacy stylesheet draws a rotated white square above the panel as a
   pointer. It is positioned for the old dropdown and shows as a stray diamond,
   so it is replaced with an invisible strip that simply bridges the gap
   between the nav item and the panel so hover is not lost. */
body.sh-2026 .sl-dropdown::before,
body.sh-2026 .sl-dropdown:before{
  content:"";position:absolute;top:-14px;left:0;right:0;
  width:auto;height:14px;
  background:none!important;border:0!important;
  transform:none!important;border-radius:0!important;
}
body.sh-2026 .sl-nav-group:hover > .sl-dropdown,
body.sh-2026 .sl-nav-group:focus-within > .sl-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
body.sh-2026 .sl-dropdown--services{
  display:grid;grid-template-columns:minmax(230px,.9fr) minmax(420px,1.5fr);
  gap:24px 34px;width:max-content;max-width:min(880px,92vw);
  left:50%;transform:translateX(-50%) translateY(10px);
}
body.sh-2026 .sl-nav-group:hover > .sl-dropdown--services,
body.sh-2026 .sl-nav-group:focus-within > .sl-dropdown--services{transform:translateX(-50%) translateY(0)}

/* "View All Services" — full-width tinted bar across the top */
body.sh-2026 .sl-dropdown__all{
  grid-column:1/-1;display:block;margin:0 0 24px;padding:16px 20px;
  background:linear-gradient(90deg,rgba(232,83,14,.07),rgba(232,83,14,.02));
  border:1px solid rgba(232,83,14,.16);
  border-radius:var(--sh-r)!important;
}
body.sh-2026 .sl-dropdown__all b{
  color:var(--sh-navy);font-size:14px;font-weight:700;letter-spacing:.2px;
  text-transform:none;
}
body.sh-2026 .sl-dropdown__all:hover{
  background:linear-gradient(90deg,rgba(232,83,14,.12),rgba(232,83,14,.04));
  border-color:rgba(232,83,14,.3);
}
body.sh-2026 .sl-dropdown__all:hover b{color:var(--sh-orange)}

/* Section label with a rule running to the right */
body.sh-2026 .sl-dropdown__section-title{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sh-head);font-size:11px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--sh-orange);
  margin:0 0 14px;padding:0;border:0;white-space:nowrap;
}
body.sh-2026 .sl-dropdown__section-title::after{
  content:"";flex:1;height:1px;background:var(--sh-line);
}

body.sh-2026 .sl-dropdown__column--core{
  border-right:1px solid var(--sh-line);padding-right:40px;
}
body.sh-2026 .sl-dropdown__links{display:grid;gap:0}
body.sh-2026 .sl-dropdown__links--hub{grid-template-columns:1fr 1fr;gap:0 40px}

body.sh-2026 .sl-dropdown a{
  display:block;padding:11px 12px;margin:0 -12px;
  border-radius:var(--sh-r)!important;text-decoration:none;
  transition:background .22s var(--sh-ease),color .22s var(--sh-ease);
}
body.sh-2026 .sl-dropdown a:hover{background:rgba(232,83,14,.06)}
body.sh-2026 .sl-dropdown b{
  font-family:var(--sh-head);font-size:14px;font-weight:600;
  letter-spacing:.1px;text-transform:none;color:var(--sh-navy);
  line-height:1.45;display:block;transition:color .22s;
}
body.sh-2026 .sl-dropdown a:hover b{color:var(--sh-orange)}

/* Opportunities: two even columns, matching the services panel rhythm */
body.sh-2026 .sl-dropdown--opportunities{
  display:grid;grid-template-columns:1fr 1fr;gap:0 48px;
  min-width:0;width:max-content;max-width:min(720px,92vw);
  left:auto;right:0;padding:26px 30px;
}

body.sh-2026 .sl-menu-button{color:var(--sh-navy);background:none;border:0}

/* ==========================================================================
   HERO — video background
   ========================================================================== */
.sh-hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  overflow:hidden;background:var(--sh-navy-deep);
}
.sh-hero__media{position:absolute;inset:0}
.sh-hero__media video,.sh-hero__media img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(1.10) saturate(1.14) contrast(1.02);
}
@keyframes sh-kenburns{
  0%{transform:scale(1.04)}
  50%{transform:scale(1.13) translate(-1.2%,-.8%)}
  100%{transform:scale(1.04)}
}
.sh-hero__media img.sh-hero__still{animation:sh-kenburns 22s ease-in-out infinite}
.sh-hero .sh-kicker{text-shadow:0 1px 10px rgba(4,16,29,.5)}
/* Lighter scrim so the photography reads. Kept strongest behind the copy on
   the left and released across the right, where there is no text to protect. */
.sh-hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(6,21,36,.80) 0%,
      rgba(7,27,46,.60) 38%,
      rgba(7,27,46,.28) 70%,
      rgba(7,27,46,.18) 100%),
    linear-gradient(to top,rgba(6,21,36,.42) 0%,rgba(6,21,36,0) 45%);
}
.sh-hero__inner{position:relative;z-index:5;width:100%;padding-top:180px;padding-bottom:var(--sh-7)}
.sh-hero__slide{display:none}
.sh-hero__slide.is-active{display:block}
.sh-hero h1{
  font-family:var(--sh-head);font-weight:800;
  font-size:clamp(38px,5.4vw,68px);line-height:1.1;color:#fff;
  margin:var(--sh-3) 0;max-width:16ch;
  text-shadow:0 2px 18px rgba(4,16,29,.45);
}
.sh-hero h1 em{font-style:normal;color:var(--sh-orange)}
.sh-hero p{
  font-size:17px;line-height:1.9;color:rgba(255,255,255,.88);
  max-width:520px;margin-bottom:var(--sh-5);
  text-shadow:0 1px 12px rgba(4,16,29,.45);
}
.sh-hero__btns{display:flex;gap:12px;flex-wrap:wrap}
.sh-hero__dots{display:flex;gap:8px;margin-top:var(--sh-6)}
.sh-hero__dots button{
  width:34px;height:3px;padding:0;border:0;background:rgba(255,255,255,.25);
  border-radius:999px;cursor:pointer;transition:.3s var(--sh-ease);
}
.sh-hero__dots button.is-active{background:var(--sh-orange);width:52px}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.sh-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-3)}
.sh-svc{
  background:#fff;border:1px solid var(--sh-line);overflow:hidden;
  display:flex;flex-direction:column;transition:.4s var(--sh-ease);text-decoration:none;
}
.sh-svc:hover{transform:translateY(-6px);border-color:rgba(232,83,14,.4);box-shadow:0 18px 46px rgba(13,43,69,.13)}
.sh-svc__img{position:relative;height:180px;overflow:hidden;background:var(--sh-navy)}
.sh-svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--sh-ease)}
.sh-svc:hover .sh-svc__img img{transform:scale(1.09)}
.sh-svc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,27,46,.72),rgba(7,27,46,.06))}
.sh-svc__num{
  position:absolute;top:14px;right:16px;z-index:3;font-family:var(--sh-head);
  font-size:13px;font-weight:800;color:rgba(255,255,255,.55);letter-spacing:1px;
}
/* Anchored to the card, not the photo — the photo container clips its
   overflow to contain the zoom, which would cut the badge in half. */
.sh-svc{position:relative}
.sh-svc__ico{
  position:absolute;left:20px;top:147px;z-index:5;
  width:66px;height:66px;padding:11px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--sh-line);
  border-radius:var(--sh-r)!important;
  box-shadow:0 10px 26px rgba(13,43,69,.18);
  transition:border-color .35s var(--sh-ease),box-shadow .35s var(--sh-ease);
}
.sh-svc__ico svg{width:100%;height:100%;display:block}

/* ------------------------------------------------------------------
   Three-layer illustrated service icons.
   The markup carries .icon-fill / .icon-base / .icon-accent and the
   original theme coloured them through --service-* variables that no
   longer exist here, so they are defined explicitly.
   ------------------------------------------------------------------ */
body.sh-2026 .sl-service-icon-svg{width:100%;height:100%;display:block;overflow:visible}
body.sh-2026 .sl-service-icon-svg .icon-fill{
  fill:rgba(232,83,14,.13);stroke:none;
}
body.sh-2026 .sl-service-icon-svg .icon-base{
  fill:none;stroke:var(--sh-navy);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}
body.sh-2026 .sl-service-icon-svg .icon-accent{
  fill:none;stroke:var(--sh-orange);stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Card hover deepens the tint */
.sh-svc:hover .sl-service-icon-svg .icon-fill{fill:rgba(232,83,14,.22)}
.sh-svc:hover .sh-svc__ico{border-color:rgba(232,83,14,.42)}
.sh-svc__body{padding:calc(var(--sh-5) + 8px) var(--sh-3) var(--sh-3);flex:1;display:flex;flex-direction:column}
.sh-svc__body h3{font-family:var(--sh-head);font-size:17px;font-weight:700;color:var(--sh-navy);margin-bottom:10px}
.sh-svc__body p{font-size:14px;line-height:1.8;color:var(--sh-muted);margin-bottom:var(--sh-2)}
.sh-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sh-3)}
.sh-tags span{font-size:11.5px;color:var(--sh-slate);background:#F2F4F6;padding:5px 10px;letter-spacing:.3px}
.sh-svc__link{
  margin-top:auto;font-family:var(--sh-head);font-size:11.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--sh-orange);
  display:inline-flex;align-items:center;gap:7px;
}
.sh-svc__link i{font-style:normal;transition:transform .3s var(--sh-ease)}
.sh-svc:hover .sh-svc__link i{transform:translateX(5px)}
.sh-svc--centred{grid-column:2}

/* ==========================================================================
   IMAGE BANDS + MOSAIC
   ========================================================================== */
.sh-band{position:relative;min-height:400px;display:flex;align-items:center;overflow:hidden}
/* As a flex item the shell would shrink to its content and then be centred
   by margin:0 auto, pushing the copy inward. Force it to fill the row. */
.sh-band > .sh-shell{flex:1 1 100%;width:100%;max-width:var(--sh-shell);margin-left:auto;margin-right:auto}
.sh-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-band__scrim{position:absolute;inset:0;background:linear-gradient(95deg,rgba(7,27,46,.92),rgba(7,27,46,.62))}
.sh-band__inner{
  position:relative;z-index:3;width:100%;max-width:640px;
  padding:var(--sh-7) 0;
  text-align:left;margin-left:0;margin-right:auto;
}
.sh-band__inner h2,
.sh-band__inner p,
.sh-band__inner .sh-kicker{text-align:left;margin-left:0}
.sh-band h2{font-family:var(--sh-head);font-weight:800;font-size:clamp(26px,3.4vw,42px);line-height:1.2;color:#fff;margin:var(--sh-2) 0 var(--sh-3)}
.sh-band p{font-size:16px;line-height:1.9;color:rgba(255,255,255,.72);margin-bottom:var(--sh-4)}

.sh-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;height:300px}
.sh-mosaic figure{position:relative;overflow:hidden;margin:0}
.sh-mosaic img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .9s var(--sh-ease),filter .5s}
.sh-mosaic figure:hover img{transform:scale(1.07);filter:saturate(1.05)}
.sh-mosaic figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,27,46,.62),transparent 55%)}
.sh-mosaic figcaption{
  position:absolute;left:var(--sh-3);bottom:var(--sh-3);z-index:3;
  font-family:var(--sh-head);font-size:12px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:#fff;
}

/* ==========================================================================
   PARTNERS / STATISTICS / WHY / OPPORTUNITIES / METRICS
   ========================================================================== */
.sh-partner-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sh-2)}
.sh-partner{
  background:var(--sh-off);border:1px solid var(--sh-line);height:110px;
  display:flex;align-items:center;justify-content:center;padding:var(--sh-2);transition:.35s var(--sh-ease);
}
.sh-partner:hover{background:#fff;border-color:rgba(232,83,14,.4);transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,43,69,.1)}
.sh-partner img{max-height:52px;max-width:100%;object-fit:contain;filter:none;opacity:1}

.sh-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-3)}
.sh-stat{background:#fff;border:1px solid var(--sh-line);padding:var(--sh-5);display:flex;align-items:center;gap:var(--sh-3)}
.sh-stat .sh-ico{width:60px;height:60px}
.sh-stat .sh-ico svg{width:26px;height:26px}
.sh-stat b{font-family:var(--sh-head);font-size:44px;font-weight:800;color:var(--sh-navy);line-height:1;display:block}
.sh-stat small{font-size:14px;color:var(--sh-muted);display:block;margin-top:6px}

.sh-why{position:relative;overflow:hidden;background:var(--sh-navy-deep)}
.sh-why>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.sh-why__scrim{position:absolute;inset:0;background:linear-gradient(160deg,rgba(6,21,36,.94),rgba(7,27,46,.86))}
.sh-why .sh-shell{position:relative;z-index:3}
.sh-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-5) var(--sh-4)}
.sh-feat .sh-ico{width:56px;height:56px;background:rgba(232,83,14,.14);border-color:rgba(232,83,14,.32);margin-bottom:var(--sh-2)}
.sh-feat .sh-ico svg{width:25px;height:25px}
.sh-feat h3{font-family:var(--sh-head);font-size:17px;font-weight:700;color:#fff;margin-bottom:9px}
.sh-feat p{font-size:14px;line-height:1.85;color:rgba(255,255,255,.56)}

.sh-opp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sh-2);margin-bottom:var(--sh-4)}
.sh-opp{
  border:1px solid var(--sh-line);padding:var(--sh-3);background:#fff;
  display:flex;flex-direction:column;transition:.4s var(--sh-ease);text-decoration:none;
}
.sh-opp:hover{transform:translateY(-6px);border-color:rgba(232,83,14,.4);box-shadow:0 16px 40px rgba(13,43,69,.12)}
.sh-opp b{font-family:var(--sh-head);font-size:26px;font-weight:800;color:var(--sh-line);line-height:1;transition:color .35s}
.sh-opp:hover b{color:rgba(232,83,14,.35)}
.sh-opp .sh-ico{width:54px;height:54px;padding:9px;margin:var(--sh-2) 0}
.sh-opp .sh-ico svg{width:100%;height:100%;display:block}
.sh-opp h3{font-family:var(--sh-head);font-size:15px;font-weight:700;color:var(--sh-navy);margin-bottom:8px}
.sh-opp p{font-size:13px;line-height:1.75;color:var(--sh-muted);margin-bottom:var(--sh-2)}
.sh-opp em{
  margin-top:auto;font-style:normal;font-family:var(--sh-head);font-size:11px;
  font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--sh-orange);
}
.sh-roles{
  background:var(--sh-off);border:1px solid var(--sh-line);
  padding:var(--sh-3) var(--sh-4);display:flex;align-items:center;
  gap:var(--sh-4);flex-wrap:wrap;
}
.sh-roles strong{font-family:var(--sh-head);font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sh-navy)}
.sh-roles a{font-size:14px;color:var(--sh-slate);display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:color .3s}
.sh-roles a:hover{color:var(--sh-orange)}

.sh-metrics{background:var(--sh-navy);padding:var(--sh-6) 0}
.sh-metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sh-3)}
.sh-metric{text-align:center;padding:0 var(--sh-2)}
.sh-metric svg{width:30px;height:30px;stroke:var(--sh-orange);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto}
.sh-metric b{font-family:var(--sh-head);font-size:26px;font-weight:800;color:#fff;display:block;margin-top:var(--sh-2)}
.sh-metric small{font-size:13px;color:rgba(255,255,255,.55);display:block;margin-top:6px}

/* ==========================================================================
   CONTACT + CTA
   ========================================================================== */
.sh-contact{display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.sh-contact__side{position:relative;overflow:hidden;display:flex;align-items:center}
.sh-contact__side>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-contact__scrim{position:absolute;inset:0;background:linear-gradient(150deg,rgba(6,21,36,.93),rgba(7,27,46,.78))}
.sh-contact__copy{position:relative;z-index:3;padding:var(--sh-7) var(--sh-5);max-width:560px;margin-left:auto}
.sh-contact__copy h2{font-family:var(--sh-head);font-weight:800;font-size:clamp(26px,2.8vw,36px);color:#fff;margin:var(--sh-2) 0 var(--sh-3);line-height:1.25}
.sh-contact__copy p{font-size:16px;line-height:1.9;color:rgba(255,255,255,.68);margin-bottom:var(--sh-4)}
.sh-ci{display:flex;align-items:center;gap:12px;color:#fff;font-size:15px;margin-bottom:14px}
.sh-ci svg{width:18px;height:18px;stroke:var(--sh-orange);fill:none;stroke-width:1.8;flex:none}
.sh-ci a{color:#fff;text-decoration:none}
.sh-ci a:hover{color:var(--sh-orange)}
.sh-contact__form{background:var(--sh-off);display:flex;align-items:center;padding:var(--sh-7) var(--sh-5)}
.sh-form-card{background:#fff;border:1px solid var(--sh-line);padding:var(--sh-5);width:100%;max-width:560px}
.sh-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sh-field{margin-bottom:12px}
.sh-field label{display:block;font-family:var(--sh-head);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--sh-slate);margin-bottom:7px}
.sh-field input,.sh-field select,.sh-field textarea{
  width:100%;border:1px solid var(--sh-line);padding:13px 15px;
  font-family:var(--sh-body);font-size:15px;color:var(--sh-ink);background:#fff;transition:.25s;
}
.sh-field input:focus,.sh-field select:focus,.sh-field textarea:focus{
  outline:0;border-color:var(--sh-orange);box-shadow:0 0 0 3px rgba(232,83,14,.11);
}
.sh-field textarea{resize:vertical;min-height:110px}
.sh-form-card .sh-btn{width:100%;justify-content:center;margin-top:var(--sh-1)}

.sh-cta{background:var(--sh-orange);padding:var(--sh-6) 0}
.sh-cta .sh-shell{display:flex;align-items:center;justify-content:space-between;gap:var(--sh-5);flex-wrap:wrap}
.sh-cta span{font-family:var(--sh-head);font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.sh-cta h2{font-family:var(--sh-head);font-weight:800;font-size:clamp(22px,2.6vw,32px);color:#fff;margin-top:12px;line-height:1.3}
.sh-cta__btns{display:flex;gap:12px;flex-wrap:wrap}
.sh-cta .sh-btn-o{border-color:rgba(255,255,255,.7)}
.sh-cta .sh-btn-o:hover{background:#fff;color:var(--sh-orange);border-color:#fff}
.sh-cta .sh-btn-o.is-solid{background:#fff;color:var(--sh-orange);border-color:#fff}
.sh-cta .sh-btn-o.is-solid:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-sh-anim]{opacity:0;will-change:transform,opacity}
[data-sh-anim="fade-up"]{transform:translateY(42px)}
[data-sh-anim="fade-down"]{transform:translateY(-42px)}
[data-sh-anim="fade-left"]{transform:translateX(-52px)}
[data-sh-anim="fade-right"]{transform:translateX(52px)}
[data-sh-anim="slide-up"]{transform:translateY(76px)}
[data-sh-anim="slide-down"]{transform:translateY(-76px)}
[data-sh-anim="slide-left"]{transform:translateX(-88px)}
[data-sh-anim="slide-right"]{transform:translateX(88px)}
[data-sh-anim="zoom-in"]{transform:scale(.88)}
[data-sh-anim="zoom-out"]{transform:scale(1.14)}
[data-sh-anim].is-revealed{
  opacity:1;transform:none;
  transition:opacity .8s var(--sh-ease),transform .8s var(--sh-ease);
}

/* ==========================================================================
   CMS BUILDER BLOCKS — inherit the same design language
   ========================================================================== */
body.sh-2026 .sl-builder-page{font-family:var(--sh-body);color:var(--sh-ink)}
body.sh-2026 .sl-builder-page .sl-shell{max-width:var(--sh-shell);padding:0 var(--sh-4)}
body.sh-2026 .sl-content-section{padding:var(--sh-7) 0}
body.sh-2026 .sl-content-section--soft{background:var(--sh-off)}

body.sh-2026 .sl-section-label,
body.sh-2026 .sl-page-eyebrow{
  font-family:var(--sh-head);font-size:12px;font-weight:700;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--sh-orange);display:block;
}
body.sh-2026 .sl-section-heading h2{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(26px,3vw,38px);
  line-height:1.25;color:var(--sh-navy);margin-top:var(--sh-2);
}
body.sh-2026 .sl-section-heading p{font-size:15px;line-height:1.85;color:var(--sh-muted)}

body.sh-2026 .sl-builder-hero{background:var(--sh-navy-deep);position:relative;overflow:hidden}
body.sh-2026 .sl-builder-hero__inner{padding:var(--sh-7) 0;position:relative;z-index:3}
body.sh-2026 .sl-builder-hero h1{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(32px,4.4vw,54px);
  line-height:1.14;color:#fff;
}
body.sh-2026 .sl-builder-hero p{font-size:17px;line-height:1.9;color:rgba(255,255,255,.72);max-width:560px}

body.sh-2026 .sl-builder-cards,
body.sh-2026 .sl-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-3)}
body.sh-2026 .sl-builder-cards > *,
body.sh-2026 .sl-feature-grid > article{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-3);transition:.4s var(--sh-ease);
}
body.sh-2026 .sl-builder-cards > *:hover,
body.sh-2026 .sl-feature-grid > article:hover{
  transform:translateY(-6px);border-color:rgba(232,83,14,.4);box-shadow:0 16px 40px rgba(13,43,69,.12);
}
body.sh-2026 .sl-feature-grid h3,
body.sh-2026 .sl-builder-cards h3{font-family:var(--sh-head);font-size:17px;font-weight:700;color:var(--sh-navy);margin-bottom:9px}
body.sh-2026 .sl-feature-grid p,
body.sh-2026 .sl-builder-cards p{font-size:14px;line-height:1.8;color:var(--sh-muted)}
body.sh-2026 .sl-builder-card-icon,
body.sh-2026 .sl-feature-grid > article > span:first-child{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--sh-orange-soft);border:1px solid var(--sh-orange-line);
  border-radius:var(--sh-r)!important;color:var(--sh-orange);margin-bottom:var(--sh-2);
}

body.sh-2026 .sl-builder-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sh-3)}
body.sh-2026 .sl-builder-stats > *{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-4);text-align:center;
}
body.sh-2026 .sl-builder-stats b{font-family:var(--sh-head);font-size:38px;font-weight:800;color:var(--sh-navy);line-height:1;display:block}
body.sh-2026 .sl-builder-stats span{font-size:14px;color:var(--sh-muted);display:block;margin-top:8px}

body.sh-2026 .sl-builder-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sh-2)}
body.sh-2026 .sl-builder-gallery figure{position:relative;overflow:hidden;margin:0;border-radius:var(--sh-r)}
body.sh-2026 .sl-builder-gallery img{width:100%;height:220px;object-fit:cover;transition:transform .8s var(--sh-ease)}
body.sh-2026 .sl-builder-gallery figure:hover img{transform:scale(1.07)}

body.sh-2026 .sl-builder-image-text{display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-6);align-items:center}
body.sh-2026 .sl-builder-image-text__media img{width:100%;border-radius:var(--sh-r)}
body.sh-2026 .sl-builder-image-text__copy h2{font-family:var(--sh-head);font-weight:800;color:var(--sh-navy)}
body.sh-2026 .sl-builder-image-text__copy p{font-size:15px;line-height:1.85;color:var(--sh-muted)}

body.sh-2026 .sl-builder-slider{position:relative;overflow:hidden;border-radius:var(--sh-r)}
body.sh-2026 .sl-builder-slider__dots{display:flex;gap:8px;justify-content:center;margin-top:var(--sh-3)}
body.sh-2026 .sl-builder-slider__dots button{
  width:34px;height:3px;padding:0;border:0;background:var(--sh-line);cursor:pointer;transition:.3s;
}
body.sh-2026 .sl-builder-slider__dots button[aria-current="true"],
body.sh-2026 .sl-builder-slider__dots .is-active{background:var(--sh-orange);width:52px}

body.sh-2026 .sl-faq-layout,body.sh-2026 .sl-faq-list{display:grid;gap:12px}
body.sh-2026 .sl-faq-list > *{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;padding:var(--sh-3);
}
body.sh-2026 .sl-faq-list summary,
body.sh-2026 .sl-faq-list h3{font-family:var(--sh-head);font-size:16px;font-weight:700;color:var(--sh-navy);cursor:pointer}
body.sh-2026 .sl-faq-list p{font-size:14px;line-height:1.85;color:var(--sh-muted);margin-top:10px}

body.sh-2026 .sl-cta-section{background:var(--sh-orange);padding:var(--sh-6) 0}
body.sh-2026 .sl-cta-card{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sh-5);flex-wrap:wrap;background:transparent;border:0;box-shadow:none;
}
body.sh-2026 .sl-cta-card h2{font-family:var(--sh-head);font-weight:800;font-size:clamp(22px,2.6vw,32px);color:#fff}
body.sh-2026 .sl-cta-card p{color:rgba(255,255,255,.82)}

body.sh-2026 .sl-enquiry-section{background:var(--sh-off);padding:var(--sh-7) 0}
body.sh-2026 .sl-enquiry-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-6);align-items:center}
body.sh-2026 .sl-enquiry-card,
body.sh-2026 .sl-service-form{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;padding:var(--sh-5);
}
body.sh-2026 .sl-enquiry-card input,body.sh-2026 .sl-enquiry-card select,body.sh-2026 .sl-enquiry-card textarea,
body.sh-2026 .sl-service-form input,body.sh-2026 .sl-service-form select,body.sh-2026 .sl-service-form textarea{
  width:100%;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:13px 15px;font-family:var(--sh-body);font-size:15px;background:#fff;transition:.25s;
}
body.sh-2026 .sl-enquiry-card input:focus,body.sh-2026 .sl-service-form input:focus,
body.sh-2026 .sl-enquiry-card select:focus,body.sh-2026 .sl-service-form select:focus,
body.sh-2026 .sl-enquiry-card textarea:focus,body.sh-2026 .sl-service-form textarea:focus{
  outline:0;border-color:var(--sh-orange);box-shadow:0 0 0 3px rgba(232,83,14,.11);
}
body.sh-2026 .sl-enquiry-card label,body.sh-2026 .sl-service-form label{
  font-family:var(--sh-head);font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--sh-slate);
}

body.sh-2026 .sl-builder-page .sl-btn{
  font-family:var(--sh-head);font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;padding:15px 30px;border-radius:var(--sh-r)!important;
  border:1px solid transparent;transition:.35s var(--sh-ease);
}
body.sh-2026 .sl-builder-page .sl-btn--primary{background:var(--sh-orange);border-color:var(--sh-orange);color:#fff}
body.sh-2026 .sl-builder-page .sl-btn--primary:hover{background:var(--sh-orange-hover);border-color:var(--sh-orange-hover);transform:translateY(-2px)}
body.sh-2026 .sl-builder-page .sl-btn--outline{border-color:var(--sh-line);color:var(--sh-navy);background:transparent}
body.sh-2026 .sl-builder-page .sl-btn--outline:hover{border-color:var(--sh-orange);color:var(--sh-orange);transform:translateY(-2px)}

body.sh-2026 .sl-builder-rich{font-size:16px;line-height:1.9;color:var(--sh-ink)}
body.sh-2026 .sl-builder-rich h2,body.sh-2026 .sl-builder-rich h3{font-family:var(--sh-head);font-weight:800;color:var(--sh-navy);margin:var(--sh-4) 0 var(--sh-2)}
body.sh-2026 .sl-builder-rich a{color:var(--sh-orange)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
body.sh-2026 .sl-footer{background:var(--sh-navy-darkest);padding:var(--sh-7) 0 var(--sh-3)}
body.sh-2026 .sl-footer h5,body.sh-2026 .sl-footer h4{
  font-family:var(--sh-head);font-size:11.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:#fff;margin-bottom:var(--sh-3);
}
body.sh-2026 .sl-footer a{color:rgba(255,255,255,.45);font-size:14px;transition:.3s;text-decoration:none}
body.sh-2026 .sl-footer a:hover{color:var(--sh-orange)}
body.sh-2026 .sl-footer p{font-size:14px;line-height:1.9;color:rgba(255,255,255,.45)}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  [data-sh-anim]{opacity:1!important;transform:none!important;transition:none!important}
  .sh-hero__media img.sh-hero__still{animation:none}
  .sh-svc,.sh-opp,.sh-partner,.sh-mosaic img,.sh-svc__img img{transition:none!important}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .sh-svc-grid{grid-template-columns:repeat(2,1fr)}
  .sh-svc--centred{grid-column:auto}
  .sh-opp-grid{grid-template-columns:repeat(3,1fr)}
  .sh-partner-grid{grid-template-columns:repeat(4,1fr)}
  .sh-metric-grid{grid-template-columns:repeat(3,1fr);gap:var(--sh-5) var(--sh-3)}
  body.sh-2026 .sl-builder-cards,body.sh-2026 .sl-feature-grid{grid-template-columns:repeat(2,1fr)}
  body.sh-2026 .sl-builder-stats{grid-template-columns:repeat(2,1fr)}
  body.sh-2026 .sl-builder-gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  body.sh-2026{--sh-7:64px;--sh-6:48px}
  .sh-head{flex-direction:column;align-items:flex-start;gap:var(--sh-3)}
  .sh-feat-grid{grid-template-columns:repeat(2,1fr)}
  .sh-contact{grid-template-columns:1fr}
  .sh-contact__copy{margin-left:0;padding:var(--sh-6) var(--sh-4)}
  .sh-contact__form{padding:var(--sh-6) var(--sh-4)}
  .sh-mosaic{grid-template-columns:1fr 1fr;height:400px}
  .sh-mosaic figure:first-child{grid-column:1/-1}
  body.sh-2026 .sl-builder-image-text,body.sh-2026 .sl-enquiry-layout{grid-template-columns:1fr;gap:var(--sh-4)}
  body.sh-2026 .sl-header{position:relative;background:rgba(255,255,255,.97)}
  body.sh-2026 .sl-header.is-stuck{position:fixed;background:rgba(255,255,255,.97)}
  .sh-hero__inner{padding-top:var(--sh-6)}
}
@media (max-width:640px){
  .sh-svc-grid,.sh-opp-grid,.sh-stat-grid,.sh-feat-grid{grid-template-columns:1fr}
  .sh-partner-grid{grid-template-columns:repeat(2,1fr)}
  .sh-metric-grid{grid-template-columns:repeat(2,1fr)}
  .sh-form-row{grid-template-columns:1fr}
  .sh-hero{min-height:auto}
  .sh-hero__inner{padding-bottom:var(--sh-6)}
  body.sh-2026 .sl-builder-cards,body.sh-2026 .sl-feature-grid,
  body.sh-2026 .sl-builder-stats{grid-template-columns:1fr}
  body.sh-2026 .sl-builder-gallery{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   SHARED SECTION FUNCTIONS
   slp_partner_section() / slp_statistics_section() / slp_home_contact_form()
   emit their own markup and are reused on other pages, so they are restyled
   here rather than rewritten.
   ========================================================================== */

/* ---- Partners ---- */
body.sh-2026 .sl-partners-section{padding:var(--sh-7) 0 var(--sh-6);background:#fff;border:0}
body.sh-2026 .sl-partners-section__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sh-5);margin-bottom:var(--sh-5);flex-wrap:wrap;
}
body.sh-2026 .sl-partner-track{
  display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sh-2);
  overflow:visible;transform:none;
}
body.sh-2026 .sl-partner-card{
  background:var(--sh-off);border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  height:110px;display:flex;align-items:center;justify-content:center;
  padding:var(--sh-2);margin:0;min-width:0;flex:none;transition:.35s var(--sh-ease);box-shadow:none;
}
body.sh-2026 .sl-partner-card:hover{
  background:#fff;border-color:rgba(232,83,14,.4);
  transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,43,69,.1);
}
body.sh-2026 .sl-partner-card img{
  max-height:52px;max-width:100%;width:auto;object-fit:contain;
  filter:none;opacity:1;
}
/* Legacy stylesheet paints a 3px orange bar across the top of each card
   on hover; the new design does not use it. */
body.sh-2026 .sl-partner-card::before,
body.sh-2026 .sl-partner-card::after{display:none!important;content:none!important}
body.sh-2026 .sl-partner-controls,
body.sh-2026 .sl-partner-scroll-hint{display:none}

/* The legacy marquee script clones every card to fake an infinite loop.
   The grid layout shows all of them at once, so the clones are hidden. */
body.sh-2026 .sl-partner-card[data-partner-clone="true"],
body.sh-2026 .sl-partner-track > [aria-hidden="true"][data-partner-clone]{display:none!important}
body.sh-2026 .sl-partner-track{transform:none!important;transition:none!important}

/* ---- Statistics / impact ---- */
body.sh-2026 .sl-impact-section{padding:var(--sh-7) 0;background:var(--sh-off)}
body.sh-2026 .sl-impact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sh-3);
}
body.sh-2026 .sl-impact-grid > *{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-5);display:flex;align-items:center;gap:var(--sh-3);
  box-shadow:none;transition:.35s var(--sh-ease);
}
body.sh-2026 .sl-impact-grid > *:hover{border-color:rgba(232,83,14,.4);transform:translateY(-4px)}
/* Markup is <b><em>prefix</em><strong>value</strong><em>suffix</em></b>.
   Without an explicit inline row the suffix wraps under the number. */
body.sh-2026 .sl-impact-grid b{
  display:flex;align-items:baseline;gap:2px;
  font-family:var(--sh-head);font-size:44px;font-weight:800;
  color:var(--sh-navy);line-height:1;white-space:nowrap;
}
body.sh-2026 .sl-impact-grid b strong{
  font-family:var(--sh-head);font-size:1em;font-weight:800;
  color:var(--sh-navy);line-height:1;display:inline-block;
}
body.sh-2026 .sl-impact-grid b em{
  font-style:normal;font-size:.7em;font-weight:800;
  color:var(--sh-orange);line-height:1;display:inline-block;
}
body.sh-2026 .sl-impact-grid article{
  display:flex;align-items:center;gap:var(--sh-3);flex-wrap:nowrap;
}
body.sh-2026 .sl-impact-grid article > span{
  flex:none;width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  background:var(--sh-orange-soft);border:1px solid var(--sh-orange-line);
  border-radius:var(--sh-r)!important;color:var(--sh-orange);
}
body.sh-2026 .sl-impact-grid small{font-size:14px;color:var(--sh-muted);display:block;margin-top:8px;line-height:1.5}
body.sh-2026 .sl-impact-grid article > div{min-width:0}
body.sh-2026 .sl-impact-grid svg{width:26px;height:26px;stroke:var(--sh-orange);fill:none;stroke-width:1.7}

/* ---- Home contact form ---- */
body.sh-2026 .sl-home-contact{padding:0;background:var(--sh-off)}
body.sh-2026 .sl-home-contact-card{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-5);box-shadow:none;
}
body.sh-2026 .sl-home-contact-copy h2{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(26px,2.8vw,36px);
  color:var(--sh-navy);line-height:1.25;
}
body.sh-2026 .sl-home-contact-copy p{font-size:16px;line-height:1.9;color:var(--sh-muted)}
body.sh-2026 .sl-home-contact-detail{color:var(--sh-navy);font-size:15px}
body.sh-2026 .sl-home-contact-detail svg{stroke:var(--sh-orange);fill:none}
body.sh-2026 .sl-home-contact-form input,
body.sh-2026 .sl-home-contact-form select,
body.sh-2026 .sl-home-contact-form textarea{
  width:100%;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:13px 15px;font-family:var(--sh-body);font-size:15px;
  color:var(--sh-ink);background:#fff;transition:.25s;
}
body.sh-2026 .sl-home-contact-form input:focus,
body.sh-2026 .sl-home-contact-form select:focus,
body.sh-2026 .sl-home-contact-form textarea:focus{
  outline:0;border-color:var(--sh-orange);box-shadow:0 0 0 3px rgba(232,83,14,.11);
}
body.sh-2026 .sl-home-contact-form label{
  font-family:var(--sh-head);font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--sh-slate);
}
body.sh-2026 .sl-home-contact-form .sl-btn--primary{
  background:var(--sh-orange);border:1px solid var(--sh-orange);color:#fff;
  font-family:var(--sh-head);font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;padding:15px 30px;border-radius:var(--sh-r)!important;
  transition:.35s var(--sh-ease);
}
body.sh-2026 .sl-home-contact-form .sl-btn--primary:hover{
  background:var(--sh-orange-hover);border-color:var(--sh-orange-hover);transform:translateY(-2px);
}

@media (max-width:1100px){
  body.sh-2026 .sl-partner-track{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  body.sh-2026 .sl-partner-track{grid-template-columns:repeat(2,1fr)}
  body.sh-2026 .sl-partners-section__head{flex-direction:column;align-items:flex-start}
}


/* ---- Header / nav responsive corrections ---- */
@media (max-width:1100px){
  body.sh-2026 .sl-brand img{height:56px;max-height:56px}
  body.sh-2026 .sl-header.is-stuck .sl-brand img{height:48px;max-height:48px}
  body.sh-2026 .sl-header{position:relative;background:rgba(255,255,255,.97)}
  body.sh-2026 .sl-header__inner{padding-top:10px;padding-bottom:10px;position:relative}

  body.sh-2026 .sl-menu-button{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;color:var(--sh-navy);
  }

  /* Slide-down panel. Hidden until the script adds .is-open */
  body.sh-2026 .sl-nav{
    position:absolute;top:100%;left:0;right:0;width:100%;
    display:block;flex-direction:column;gap:0;
    background:#fff;border-top:1px solid var(--sh-line);
    box-shadow:0 20px 40px rgba(13,43,69,.16);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .38s var(--sh-ease),visibility .38s;
    padding:0;
  }
  body.sh-2026 .sl-nav.is-open{
    max-height:calc(100vh - 120px);overflow-y:auto;visibility:visible;
    padding:var(--sh-1) 0 var(--sh-3);
    -webkit-overflow-scrolling:touch;
  }
  body.sh-2026 .sl-nav > a,
  body.sh-2026 .sl-nav-group{width:100%;max-width:100%}

  body.sh-2026 .sl-nav > a,
  body.sh-2026 .sl-nav-group > button{
    width:100%;padding:15px var(--sh-4);margin:0;
    font-size:13px;letter-spacing:1.1px;
    justify-content:space-between;text-align:left;
    border-bottom:1px solid var(--sh-line);
  }
  body.sh-2026 .sl-nav > a::after,
  body.sh-2026 .sl-nav-group > button::after{display:none}
  body.sh-2026 .sl-nav > a.is-active,
  body.sh-2026 .sl-nav-group.is-open > button{color:var(--sh-orange)!important;background:var(--sh-off)}
  body.sh-2026 .sl-nav-group > button .sl-nav-chevron{transition:transform .3s var(--sh-ease)}
  body.sh-2026 .sl-nav-group.is-open > button .sl-nav-chevron{transform:rotate(180deg)}

  /* Dropdowns collapse by default and open with .is-open from the script */
  body.sh-2026 .sl-dropdown,
  body.sh-2026 .sl-dropdown--services,
  body.sh-2026 .sl-dropdown--opportunities{
    position:static;left:auto;right:auto;top:auto;
    transform:none!important;opacity:1;visibility:visible;
    margin:0;box-shadow:none;border:0;border-radius:0!important;
    background:var(--sh-off);
    padding:0;min-width:0;width:100%;max-width:100%;
    display:none;
  }
  body.sh-2026 .sl-nav-group.is-open > .sl-dropdown{
    display:block;padding:var(--sh-2) 0 var(--sh-3);
  }
  body.sh-2026 .sl-dropdown::before{display:none}
  body.sh-2026 .sl-dropdown__column--core{
    border-right:0;padding-right:0;margin-bottom:var(--sh-2);
  }
  body.sh-2026 .sl-dropdown__links,
  body.sh-2026 .sl-dropdown__links--hub{grid-template-columns:1fr;gap:0}
  body.sh-2026 .sl-dropdown a{
    padding:11px var(--sh-4) 11px calc(var(--sh-4) + 12px);margin:0;
    border-radius:0!important;
  }
  body.sh-2026 .sl-dropdown a:hover,
  body.sh-2026 .sl-dropdown a:active{background:rgba(232,83,14,.08)}
  body.sh-2026 .sl-dropdown b{font-size:12px;letter-spacing:.3px;color:var(--sh-navy)}
  body.sh-2026 .sl-dropdown__all{
    border-bottom:1px solid var(--sh-line);padding:0;margin:0;
  }
  body.sh-2026 .sl-dropdown__all b{color:var(--sh-orange)}
  body.sh-2026 .sl-dropdown__section-title{
    padding:var(--sh-2) var(--sh-4) 8px;margin:0;
    border-bottom:1px solid var(--sh-line);font-size:10px;
  }
  body.sh-2026 .sl-callback{
    width:calc(100% - var(--sh-4) * 2);margin:var(--sh-3) var(--sh-4) 0;
    justify-content:center;
  }
  body.sh-2026 .sl-callback::before{display:none}

  /* Stop the page scrolling behind an open menu */
  body.sl-menu-locked{overflow:hidden}
}
@media (max-width:640px){
  body.sh-2026 .sl-brand img{height:46px;max-height:46px}
  body.sh-2026 .sl-header.is-stuck .sl-brand img{height:42px;max-height:42px}
  body.sh-2026 .sl-nav > a,
  body.sh-2026 .sl-nav-group > button{padding-left:var(--sh-3);padding-right:var(--sh-3)}
  body.sh-2026 .sl-dropdown a{padding-left:calc(var(--sh-3) + 12px);padding-right:var(--sh-3)}
  body.sh-2026 .sl-dropdown__section-title{padding-left:var(--sh-3);padding-right:var(--sh-3)}
  body.sh-2026 .sl-callback{width:calc(100% - var(--sh-3) * 2);margin-left:var(--sh-3);margin-right:var(--sh-3)}
}

/* ==========================================================================
   SOCIAL LINKS — topbar and footer
   Rendered by slp_social_links(); networks are added or hidden by editing
   the 'social' array in config/homepage-redesign.php.
   ========================================================================== */
.sl-social{display:inline-flex;align-items:center;gap:8px}
.sl-social__link{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--sh-r)!important;
  transition:color .28s var(--sh-ease),background .28s var(--sh-ease),
             border-color .28s var(--sh-ease),transform .28s var(--sh-ease);
}
.sl-social__link svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}
/* Small sizes need a heavier line to stay legible */
.sl-social--topbar .sl-social__link svg{stroke-width:2.2}

/* ---- Topbar variant: sits on the dark utility bar ---- */
.sl-social--topbar{
  margin-right:var(--sh-2);padding-right:var(--sh-2);
  border-right:1px solid rgba(255,255,255,.20);gap:9px;
}
.sl-social--topbar .sl-social__link{
  width:34px;height:34px;padding:7px;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
}
.sl-social--topbar .sl-social__link:hover,
.sl-social--topbar .sl-social__link:focus-visible{
  color:#fff!important;background:var(--sh-orange);border-color:var(--sh-orange);
  transform:translateY(-2px);outline:0;
}
.sl-social--topbar .sl-social__link:hover svg{stroke:#fff}

/* ---- Footer variant ---- */
.sl-social--footer{margin-top:var(--sh-3);gap:10px}
.sl-social--footer .sl-social__link{
  width:40px;height:40px;padding:9px;
  color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
}
.sl-social--footer .sl-social__link:hover,
.sl-social--footer .sl-social__link:focus-visible{
  color:#fff!important;background:var(--sh-orange);border-color:var(--sh-orange);
  transform:translateY(-3px);outline:0;
}
.sl-social--footer .sl-social__link:hover svg{stroke:#fff}

@media (prefers-reduced-motion:reduce){
  .sl-social__link{transition:none}
  .sl-social__link:hover{transform:none}
}
@media (max-width:640px){
  .sl-social--topbar{
    margin-right:0;padding-right:0;border-right:0;
  }
  .sl-social--footer{justify-content:flex-start}
}

/* ==========================================================================
   SCROLL TO TOP
   Appears once the visitor is a screen or so down the page.
   ========================================================================== */
.sh-to-top{
  position:fixed;right:28px;bottom:102px;z-index:940;
  width:52px;height:52px;padding:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sh-orange);color:#fff;
  border:1px solid var(--sh-orange);border-radius:50%;
  box-shadow:0 10px 30px rgba(232,83,14,.38);
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .32s var(--sh-ease),transform .32s var(--sh-ease),
             visibility .32s,background .28s var(--sh-ease),box-shadow .28s var(--sh-ease);
}
.sh-to-top svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}
.sh-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sh-to-top:hover{
  background:var(--sh-orange-hover);border-color:var(--sh-orange-hover);
  transform:translateY(-4px) scale(1.05);box-shadow:0 14px 36px rgba(232,83,14,.48);
}
.sh-to-top:focus-visible{outline:3px solid rgba(232,83,14,.35);outline-offset:3px}
.sh-to-top:active{transform:translateY(-1px) scale(.98)}

@media (max-width:640px){
  .sh-to-top{right:18px;bottom:86px;width:46px;height:46px;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .sh-to-top{transition:opacity .2s linear,visibility .2s;transform:none}
  .sh-to-top.is-visible{transform:none}
  .sh-to-top:hover{transform:none}
}

/* ==========================================================================
   MOBILE LAYOUT CORRECTIONS
   Loaded last so these win over the section rules above.
   ========================================================================== */
@media (max-width:820px){
  /* Nothing may exceed the viewport width */
  body.sh-2026,
  body.sh-2026 main{max-width:100vw;overflow-x:hidden}
  body.sh-2026 .sh-shell{padding-left:var(--sh-3);padding-right:var(--sh-3)}

  /* Topbar: stack contact details, keep them readable */
  body.sh-2026 .sl-topbar{padding:8px 0}
  body.sh-2026 .sl-topbar__inner{
    flex-direction:column;align-items:flex-start;gap:6px;
  }
  body.sh-2026 .sl-topbar__contact{
    flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;
  }

  /* Hero */
  .sh-hero{min-height:auto}
  .sh-hero__inner{padding-top:var(--sh-6);padding-bottom:var(--sh-6)}
  .sh-hero h1{font-size:clamp(28px,7.5vw,40px);max-width:100%}
  .sh-hero p{font-size:15px;max-width:100%}
  .sh-hero__btns{gap:10px}
  .sh-hero__btns .sh-btn,
  .sh-hero__btns .sh-btn-o{
    flex:1 1 100%;justify-content:center;padding:14px 20px;font-size:11px;
  }
  .sh-hero__dots{margin-top:var(--sh-4)}

  /* Section headings */
  .sh-title{font-size:clamp(22px,5.6vw,28px)}
  .sh-head p{max-width:100%;font-size:14px}

  /* Bands */
  .sh-band{min-height:auto}
  .sh-band__inner{padding:var(--sh-6) 0;max-width:100%}
  .sh-band h2{font-size:clamp(22px,5.6vw,30px)}
  .sh-band p{font-size:14px}

  /* Cards */
  .sh-svc__img{height:190px}
  .sh-svc__ico{top:157px;width:58px;height:58px;padding:10px}
  .sh-svc__body{padding:calc(var(--sh-5) + 4px) var(--sh-3) var(--sh-3)}

  /* Opportunities + roles */
  .sh-roles{flex-direction:column;align-items:flex-start;gap:12px;padding:var(--sh-3)}
  .sh-roles a{font-size:14px}

  /* CTA */
  .sh-cta .sh-shell{flex-direction:column;align-items:flex-start;gap:var(--sh-3)}
  .sh-cta__btns{width:100%;flex-direction:column}
  .sh-cta__btns .sh-btn-o{width:100%;justify-content:center}

  /* Contact */
  .sh-contact__form{padding:var(--sh-6) var(--sh-3)}
  .sh-contact__copy{padding:var(--sh-6) var(--sh-3)}
  .sh-form-card{padding:var(--sh-3);max-width:100%}

  /* Footer */
  body.sh-2026 .sl-footer{padding:var(--sh-6) 0 var(--sh-3)}
}

@media (max-width:640px){
  .sh-mosaic{grid-template-columns:1fr;height:auto}
  .sh-mosaic figure{height:200px}
  .sh-mosaic figure:first-child{grid-column:auto}
  .sh-form-row{grid-template-columns:1fr;gap:0}
  .sh-metric-grid{grid-template-columns:1fr 1fr;gap:var(--sh-4) var(--sh-2)}
  .sh-metric small{font-size:12px}
  .sh-svc__img{height:170px}
  .sh-svc__ico{top:137px}
  body.sh-2026 .sl-partner-track{grid-template-columns:1fr 1fr}
  body.sh-2026 .sl-partner-card{height:88px}
  .sl-social--footer{flex-wrap:wrap}
}

/* ==========================================================================
   MOBILE TOPBAR
   Left: phone, mail and track icons. Right: social icons.
   Portal Logins moves into the burger menu instead.
   ========================================================================== */
@media (max-width:820px){
  body.sh-2026 .sl-topbar{padding:9px 0}

  /* display:contents lifts the children of .sl-topbar__links up so every
     item becomes a direct flex child and can be ordered freely. */
  body.sh-2026 .sl-topbar__inner{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    align-items:center;gap:14px;
  }
  body.sh-2026 .sl-topbar__links{display:contents}

  /* --- Left cluster --- */
  body.sh-2026 .sl-topbar__contact{
    order:1;display:flex;flex-direction:row;align-items:center;gap:14px;
  }
  body.sh-2026 .sl-topbar__contact a,
  body.sh-2026 .sl-topbar__links > a{
    display:inline-flex!important;align-items:center;justify-content:center;
    padding:0;color:rgba(255,255,255,.85);
  }
  body.sh-2026 .sl-topbar__links > a{order:2}
  /* Icons only — labels are hidden, but kept for screen readers */
  body.sh-2026 .sl-topbar__contact a span,
  body.sh-2026 .sl-topbar__links > a span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  body.sh-2026 .sl-topbar__contact svg,
  body.sh-2026 .sl-topbar__links > a svg{
    width:19px;height:19px;flex:none;color:var(--sh-orange);
  }
  body.sh-2026 .sl-topbar__contact a:active svg,
  body.sh-2026 .sl-topbar__links > a:active svg{opacity:.6}

  /* --- Right cluster --- */
  .sl-social--topbar{
    order:3;margin-left:auto;margin-right:0;
    padding-right:0;border-right:0;gap:8px;
  }
  .sl-social--topbar .sl-social__link{width:30px;height:30px;padding:6px}

  /* Portal logins live in the burger menu on mobile */
  body.sh-2026 .sl-topbar .sl-portal-login{display:none}
}

@media (max-width:400px){
  body.sh-2026 .sl-topbar__inner{gap:10px}
  body.sh-2026 .sl-topbar__contact{gap:11px}
  body.sh-2026 .sl-topbar__contact svg,
  body.sh-2026 .sl-topbar__links > a svg{width:18px;height:18px}
  .sl-social--topbar{gap:6px}
  .sl-social--topbar .sl-social__link{width:28px;height:28px;padding:5px}
}

/* ==========================================================================
   PORTAL LOGINS IN THE MOBILE MENU
   ========================================================================== */
body.sh-2026 .sl-nav-portal{display:none}
@media (max-width:1100px){
  body.sh-2026 .sl-nav-portal{display:block}
  body.sh-2026 .sl-dropdown--portal{
    position:static;opacity:1;visibility:visible;transform:none!important;
    box-shadow:none;border:0;background:var(--sh-off);
    width:100%;max-width:100%;min-width:0;padding:0;margin:0;display:none;
  }
  body.sh-2026 .sl-nav-portal.is-open > .sl-dropdown--portal{
    display:block;padding:var(--sh-2) 0 var(--sh-3);
  }
}

/* ==========================================================================
   PORTAL LOGINS — explicit styling
   Stated outright so no legacy rule can leave these items invisible.
   ========================================================================== */
@media (max-width:1100px){
  /* The topbar version is fully suppressed, menu included */
  body.sh-2026 .sl-topbar .sl-portal-login,
  body.sh-2026 .sl-topbar .sl-portal-login__toggle,
  body.sh-2026 .sl-topbar .sl-portal-login__menu{display:none!important}

  body.sh-2026 .sl-nav-portal{display:block!important;width:100%}
  body.sh-2026 .sl-nav-portal > button{
    display:flex!important;align-items:center;justify-content:space-between;
    width:100%;padding:15px var(--sh-4);
    font-family:var(--sh-head);font-size:13px;font-weight:600;
    letter-spacing:1.1px;text-transform:uppercase;
    color:var(--sh-navy)!important;background:none!important;
    border:0;border-bottom:1px solid var(--sh-line);cursor:pointer;
  }
  body.sh-2026 .sl-nav-portal.is-open > button{
    color:var(--sh-orange)!important;background:var(--sh-off)!important;
  }
  body.sh-2026 .sl-dropdown--portal a{
    display:block!important;padding:11px var(--sh-4) 11px calc(var(--sh-4) + 12px);
    margin:0;border:0;border-radius:0!important;background:none;
  }
  body.sh-2026 .sl-dropdown--portal a b{
    display:block!important;
    font-family:var(--sh-head);font-size:12px;font-weight:600;
    letter-spacing:.3px;text-transform:uppercase;
    color:var(--sh-navy)!important;
  }
  body.sh-2026 .sl-dropdown--portal a:active b,
  body.sh-2026 .sl-dropdown--portal a:hover b{color:var(--sh-orange)!important}
}
@media (max-width:640px){
  body.sh-2026 .sl-nav-portal > button{padding-left:var(--sh-3);padding-right:var(--sh-3)}
  body.sh-2026 .sl-dropdown--portal a{
    padding-left:calc(var(--sh-3) + 12px);padding-right:var(--sh-3);
  }
}

/* ==========================================================================
   CONTACT PAGE MAP
   ========================================================================== */
body.sh-2026 .sh-map-section{padding:0 0 var(--sh-7);background:#fff}
body.sh-2026 .sh-map-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sh-4);margin-bottom:var(--sh-4);flex-wrap:wrap;
}
body.sh-2026 .sh-map-frame{
  position:relative;width:100%;height:440px;overflow:hidden;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  background:var(--sh-off);
}
body.sh-2026 .sh-map-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  /* Neutral tone until hover so the map does not fight the page for attention */
  filter:grayscale(28%) contrast(1.02);
  transition:filter .4s var(--sh-ease);
}
body.sh-2026 .sh-map-frame:hover iframe{filter:none}

@media (max-width:820px){
  body.sh-2026 .sh-map-section{padding-bottom:var(--sh-6)}
  body.sh-2026 .sh-map-head{flex-direction:column;align-items:flex-start;gap:var(--sh-3)}
  body.sh-2026 .sh-map-head .sh-btn{width:100%;justify-content:center}
  body.sh-2026 .sh-map-frame{height:320px}
}
@media (max-width:480px){
  body.sh-2026 .sh-map-frame{height:260px}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-map-frame iframe{transition:none}
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   Sits in the bottom-right corner; the scroll-to-top button stacks above it.
   ========================================================================== */
.sh-whatsapp{
  position:fixed;right:22px;bottom:28px;z-index:945;
  width:62px;height:62px;padding:16px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;border:0;border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:transform .3s var(--sh-ease),box-shadow .3s var(--sh-ease),
             background .3s var(--sh-ease);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.sh-whatsapp svg{
  width:100%;height:100%;display:block;
  fill:#fff!important;stroke:none!important;
}
.sh-whatsapp svg path{fill:#fff!important;stroke:none!important}
.sh-whatsapp:hover{
  background:#20BD5A;transform:translateY(-3px) scale(1.06);
  box-shadow:0 14px 32px rgba(0,0,0,.24);
}
.sh-whatsapp:focus-visible{
  outline:3px solid rgba(37,211,102,.4);outline-offset:3px;
}
.sh-whatsapp:active{transform:translateY(-1px) scale(.97)}

/* A soft pulse draws the eye once without being a constant distraction */
@keyframes sh-wa-pulse{
  0%{box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 0 rgba(37,211,102,0)}
}
@media (prefers-reduced-motion:no-preference){
  .sh-whatsapp{animation:sh-wa-pulse 2.8s ease-out 3}
}

@media (max-width:640px){
  .sh-whatsapp{right:18px;bottom:18px;width:56px;height:56px;padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .sh-whatsapp{transition:none;animation:none}
  .sh-whatsapp:hover{transform:none}
}

/* ==========================================================================
   ABOUT US PAGE
   Appended so no existing rule is modified. All selectors are prefixed
   .sh-ab- and cannot collide with the home page or shared components.
   ========================================================================== */

/* ---- Hero ---- */
body.sh-2026 .sh-ab-hero{
  position:relative;min-height:520px;display:flex;align-items:center;
  overflow:hidden;background:var(--sh-navy-deep);
}
body.sh-2026 .sh-ab-hero > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.10) saturate(1.14) contrast(1.02);
}
body.sh-2026 .sh-ab-hero__scrim{
  position:absolute;inset:0;
  background:
    /* Slightly deeper through the middle than before. The new About hero is a
       bright sky photograph, and the paragraph was reaching only 3.9:1 at its
       lightest point, under the 4.5:1 body-text threshold. The right-hand
       side is unchanged, so the loading bays and trucks stay visible. */
    linear-gradient(95deg,
      rgba(6,21,36,.86) 0%,
      rgba(7,27,46,.72) 40%,
      rgba(7,27,46,.38) 72%,
      rgba(7,27,46,.22) 100%),
    linear-gradient(to top,rgba(6,21,36,.38) 0%,rgba(6,21,36,0) 45%);
}
body.sh-2026 .sh-ab-hero > .sh-shell{position:relative;z-index:3;width:100%}
body.sh-2026 .sh-ab-hero__inner{padding:var(--sh-7) 0;max-width:760px}
body.sh-2026 .sh-ab-hero h1{
  font-family:var(--sh-head);font-weight:800;
  font-size:clamp(32px,4.6vw,58px);line-height:1.12;color:#fff;
  margin:var(--sh-3) 0;
  text-shadow:0 2px 18px rgba(4,16,29,.45);
}
body.sh-2026 .sh-ab-hero h1 span{display:block;color:#FF7A3D}
body.sh-2026 .sh-ab-hero .sh-kicker{text-shadow:0 1px 10px rgba(4,16,29,.5)}
body.sh-2026 .sh-ab-hero p{
  font-size:17px;line-height:1.9;color:rgba(255,255,255,.88);
  max-width:560px;margin-bottom:var(--sh-5);
  text-shadow:0 1px 12px rgba(4,16,29,.45);
}
body.sh-2026 .sh-ab-hero__btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Introduction ---- */
body.sh-2026 .sh-ab-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-7);align-items:center;
}
body.sh-2026 .sh-ab-intro__text{
  font-size:15px;line-height:1.9;color:var(--sh-muted);margin-top:var(--sh-3);
}
body.sh-2026 .sh-ab-intro__btn{margin-top:var(--sh-4)}
body.sh-2026 .sh-ab-intro__media{position:relative;padding-left:46px}
body.sh-2026 .sh-ab-intro__media img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;
  border-radius:var(--sh-r)!important;
  /* Given a frame of its own: a hairline plus a soft warm shadow, so the
     photograph sits on the page rather than floating on it. */
  border:1px solid var(--sh-line);
  box-shadow:0 18px 44px rgba(120,70,40,.12);
}
/* Dark translucent panel anchored to the lower-left, overhanging the image
   onto the page background. Frosted so the photograph reads through it. */
body.sh-2026 .sh-ab-intro__card{
  position:absolute;left:-46px;bottom:0;width:300px;z-index:3;
  background:rgba(13,43,69,.90);
  /* Was blur(12px), which smeared the photograph behind the card into a
     muddy band. Reduced to a light blur, with the panel slightly more opaque
     so the text keeps its contrast without the smearing. */
  backdrop-filter:blur(4px) saturate(1.1);
  -webkit-backdrop-filter:blur(4px) saturate(1.1);
  border:0;border-radius:var(--sh-r)!important;
  padding:30px 28px;
  /* Was rgba(6,21,36,.34), a heavy navy shadow that fell across the
     photograph behind it. Softened and warmed to match the rest of the site. */
  box-shadow:0 14px 34px rgba(120,70,40,.16);
}
body.sh-2026 .sh-ab-intro__card .sh-ico{
  width:54px;height:54px;margin-bottom:var(--sh-3);
  /* On the navy panel an orange-tinted tile reads muddy; white reads clean.
     The orange values that were here are removed, not just overridden. */
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
}
body.sh-2026 .sh-ab-intro__card .sh-ico svg{width:24px;height:24px}
body.sh-2026 .sh-ab-intro__card h4{
  font-family:var(--sh-head);font-size:20px;font-weight:800;line-height:1.3;
  color:#fff;margin-bottom:12px;
}
body.sh-2026 .sh-ab-intro__card p{
  font-size:14px;line-height:1.8;color:rgba(255,255,255,.76);
}

/* ---- Direction cards ---- */
body.sh-2026 .sh-ab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-3)}
body.sh-2026 .sh-ab-card{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-4);transition:.4s var(--sh-ease);
}
body.sh-2026 .sh-ab-card:hover{
  transform:translateY(-6px);border-color:rgba(232,83,14,.4);
  box-shadow:0 18px 46px rgba(13,43,69,.13);
}
body.sh-2026 .sh-ab-card .sh-ico{width:56px;height:56px;margin-bottom:var(--sh-3)}
body.sh-2026 .sh-ab-card .sh-ico svg{width:25px;height:25px}
body.sh-2026 .sh-ab-card h3{
  font-family:var(--sh-head);font-size:18px;font-weight:700;
  color:var(--sh-navy);margin-bottom:10px;
}
body.sh-2026 .sh-ab-card p{font-size:14px;line-height:1.8;color:var(--sh-muted)}

/* ---- Journey phases ---- */
body.sh-2026 .sh-ab-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sh-3)}
body.sh-2026 .sh-ab-phase{
  position:relative;background:#fff;border:1px solid var(--sh-line);
  border-radius:var(--sh-r)!important;padding:var(--sh-4);
  transition:.4s var(--sh-ease);overflow:hidden;
}
body.sh-2026 .sh-ab-phase::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--sh-orange);transition:width .45s var(--sh-ease);
}
body.sh-2026 .sh-ab-phase:hover{
  transform:translateY(-6px);border-color:rgba(232,83,14,.4);
  box-shadow:0 16px 40px rgba(13,43,69,.12);
}
body.sh-2026 .sh-ab-phase:hover::after{width:100%}
body.sh-2026 .sh-ab-phase b{
  display:block;font-family:var(--sh-head);font-size:12px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--sh-orange);
  margin-bottom:var(--sh-2);
}
body.sh-2026 .sh-ab-phase h3{
  font-family:var(--sh-head);font-size:16px;font-weight:700;
  color:var(--sh-navy);margin-bottom:10px;
}
body.sh-2026 .sh-ab-phase p{font-size:13.5px;line-height:1.8;color:var(--sh-muted)}

/* ---- Ecosystem ---- */
body.sh-2026 .sh-ab-eco{
  /* align-items:center floated the shorter column, so the heading started
     well below the top of the photograph. Both columns now start level. */
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-7);align-items:start;
}
body.sh-2026 .sh-ab-eco__media img{
  width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center;
  border-radius:var(--sh-r)!important;
}
body.sh-2026 .sh-ab-eco__boxes{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-2);margin-top:var(--sh-4);
}
body.sh-2026 .sh-ab-eco__box{
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-3);background:#fff;transition:.35s var(--sh-ease);
}
body.sh-2026 .sh-ab-eco__box:hover{
  border-color:rgba(232,83,14,.4);transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(13,43,69,.1);
}
body.sh-2026 .sh-ab-eco__box svg{
  width:24px;height:24px;stroke:var(--sh-orange);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px;
}
body.sh-2026 .sh-ab-eco__box h4{
  font-family:var(--sh-head);font-size:15px;font-weight:700;
  color:var(--sh-navy);margin-bottom:7px;
}
body.sh-2026 .sh-ab-eco__box p{font-size:13px;line-height:1.75;color:var(--sh-muted)}

/* ---- Client reviews ---- */
/* White partners band above, off-white contact section below. A slightly
   deeper tint plus hairlines keeps this band distinct from both. */
body.sh-2026 .sh-ab-reviews{
  overflow:hidden;background:#EDF1F5;
  border-top:1px solid var(--sh-line);
  border-bottom:1px solid var(--sh-line);
  padding-top:var(--sh-6);padding-bottom:var(--sh-6);
}
body.sh-2026 .sh-ab-reviews__head{text-align:center;margin-bottom:var(--sh-4)}
body.sh-2026 .sh-ab-reviews__head p{
  font-size:15px;line-height:1.8;color:var(--sh-muted);
  max-width:560px;margin:var(--sh-2) auto 0;
}

/* Continuous marquee. The track holds two copies of the list, so shifting it
   by exactly -50% loops without a visible jump. */
body.sh-2026 .sh-ab-marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
body.sh-2026 .sh-ab-marquee__track{
  display:flex;gap:var(--sh-3);width:max-content;
  animation:sh-marquee 46s linear infinite;
}
body.sh-2026 .sh-ab-marquee:hover .sh-ab-marquee__track,
body.sh-2026 .sh-ab-marquee:focus-within .sh-ab-marquee__track{animation-play-state:paused}
@keyframes sh-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

body.sh-2026 .sh-ab-review{
  flex:0 0 380px;width:380px;
  background:#fff;border:1px solid var(--sh-line);
  box-shadow:0 2px 10px rgba(13,43,69,.04);border-radius:var(--sh-r)!important;
  padding:var(--sh-4);display:flex;flex-direction:column;
  transition:border-color .35s var(--sh-ease),box-shadow .35s var(--sh-ease);
}
body.sh-2026 .sh-ab-review:hover{
  border-color:rgba(232,83,14,.4);box-shadow:0 16px 40px rgba(13,43,69,.12);
}
body.sh-2026 .sh-ab-review__stars{
  color:var(--sh-orange);font-size:15px;letter-spacing:3px;margin-bottom:var(--sh-2);
}
body.sh-2026 .sh-ab-review p{
  font-size:14px;line-height:1.85;color:var(--sh-muted);margin-bottom:var(--sh-3);
}
body.sh-2026 .sh-ab-review footer{
  margin-top:auto;padding-top:var(--sh-2);border-top:1px solid var(--sh-line);
}
body.sh-2026 .sh-ab-review footer b{
  display:block;font-family:var(--sh-head);font-size:14px;font-weight:700;color:var(--sh-navy);
}
body.sh-2026 .sh-ab-review footer span{font-size:13px;color:var(--sh-slate)}

/* Pending state — compact, not a half-empty panel */
body.sh-2026 .sh-ab-pending{
  max-width:640px;margin:0 auto;background:#fff;
  border:1px dashed var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-4);display:flex;gap:var(--sh-3);align-items:center;
}
body.sh-2026 .sh-ab-pending .sh-ico{width:48px;height:48px}
body.sh-2026 .sh-ab-pending .sh-ico svg{width:22px;height:22px}
body.sh-2026 .sh-ab-pending h3{
  font-family:var(--sh-head);font-size:16px;font-weight:700;
  color:var(--sh-navy);margin-bottom:6px;
}
body.sh-2026 .sh-ab-pending p{font-size:13.5px;line-height:1.75;color:var(--sh-muted)}

@media (max-width:640px){
  body.sh-2026 .sh-ab-review{flex:0 0 290px;width:290px;padding:var(--sh-3)}
  body.sh-2026 .sh-ab-marquee__track{animation-duration:34s}
  body.sh-2026 .sh-ab-pending{flex-direction:column;align-items:flex-start;text-align:left}
}

/* Motion off: static, scrollable row instead of an animated one */
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-ab-marquee{
    -webkit-mask-image:none;mask-image:none;
    overflow-x:auto;padding:0 var(--sh-4);
  }
  body.sh-2026 .sh-ab-marquee__track{animation:none}
  body.sh-2026 .sh-ab-review[aria-hidden="true"]{display:none}
  body.sh-2026 .sh-ab-review{transition:none}
}

/* ---- Contact ----
   Rendered exactly as on the home page so both sections share one set of
   rules. Only the anchor offset is About-specific. */
body.sh-2026 #about-contact{scroll-margin-top:120px}

/* ---- CTA (centred variant) ---- */
body.sh-2026 .sh-ab-cta .sh-shell{
  flex-direction:column;align-items:center;text-align:center;gap:var(--sh-4);
}
body.sh-2026 .sh-ab-cta .sh-cta__btns{justify-content:center}

/* ---- Responsive ---- */
@media (max-width:1100px){
  body.sh-2026 .sh-ab-cards{grid-template-columns:repeat(2,1fr)}
  body.sh-2026 .sh-ab-journey{grid-template-columns:repeat(2,1fr)}
  body.sh-2026 .sh-ab-reviews__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  body.sh-2026 .sh-ab-intro,
  body.sh-2026 .sh-ab-eco,
  body.sh-2026 .sh-ab-contact{grid-template-columns:1fr;gap:var(--sh-5)}
  body.sh-2026 .sh-ab-intro__media{padding-left:0}
  body.sh-2026 .sh-ab-intro__card{
    position:static;width:100%;margin-top:var(--sh-3);
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--sh-navy);padding:var(--sh-4);
  }
  body.sh-2026 .sh-ab-intro__media img{aspect-ratio:16/10}
  body.sh-2026 .sh-ab-eco__media img{aspect-ratio:4/3}
}
@media (max-width:820px){
  body.sh-2026 .sh-ab-hero{min-height:auto}
  body.sh-2026 .sh-ab-hero__inner{padding:var(--sh-6) 0}
  body.sh-2026 .sh-ab-hero h1{font-size:clamp(28px,7.5vw,40px)}
  body.sh-2026 .sh-ab-hero p{font-size:15px}
  body.sh-2026 .sh-ab-hero__btns .sh-btn,
  body.sh-2026 .sh-ab-hero__btns .sh-btn-o{flex:1 1 100%;justify-content:center}
  body.sh-2026 .sh-ab-pending{flex-direction:column;gap:var(--sh-2)}
}
@media (max-width:640px){
  body.sh-2026 .sh-ab-cards,
  body.sh-2026 .sh-ab-journey,
  body.sh-2026 .sh-ab-eco__boxes,
  body.sh-2026 .sh-ab-reviews__grid{grid-template-columns:1fr}
  body.sh-2026 .sh-ab-intro__media img,
  body.sh-2026 .sh-ab-eco__media img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-ab-card,
  body.sh-2026 .sh-ab-phase,
  body.sh-2026 .sh-ab-eco__box,
  body.sh-2026 .sh-ab-review{transition:none!important}
  body.sh-2026 .sh-ab-phase::after{transition:none}
}

/* ==========================================================================
   ABOUT — CARD HOVER ANIMATIONS
   Ported from the approved reference design. Four layers move together:
   the card lifts, the icon flips to solid orange with a slight tilt, the
   heading turns orange and nudges right, a soft glow grows from the top-right
   corner and a bar draws along the bottom edge.
   ========================================================================== */

/* ---- Light cards: Our Direction, Journey phases, Ecosystem boxes ---- */
body.sh-2026 .sh-ab-card,
body.sh-2026 .sh-ab-phase,
body.sh-2026 .sh-ab-eco__box{
  position:relative;overflow:hidden;will-change:transform;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             box-shadow .45s ease,
             border-color .35s ease;
}

/* Corner glow */
body.sh-2026 .sh-ab-card::after{
  content:"";position:absolute;right:-65px;top:-65px;
  width:130px;height:130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,83,14,.13),rgba(232,83,14,.03) 55%,transparent 70%);
  opacity:.7;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
}
body.sh-2026 .sh-ab-card:hover::after{
  transform:scale(2.1) translate(-15px,15px);opacity:1;
}

/* Bar drawing along the bottom edge */
body.sh-2026 .sh-ab-card::before{
  content:"";position:absolute;left:0;bottom:0;width:0;height:3px;z-index:5;
  background:linear-gradient(90deg,var(--sh-orange),#FF8A4C);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-ab-card:hover::before{width:100%}

body.sh-2026 .sh-ab-card:hover,
body.sh-2026 .sh-ab-phase:hover{
  transform:translateY(-12px) scale(1.015);
  box-shadow:0 22px 50px rgba(4,25,49,.13);
  border-color:rgba(232,83,14,.35);
}

/* Icon: tinted square flips to solid orange and tilts */
body.sh-2026 .sh-ab-card .sh-ico{
  position:relative;z-index:2;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             background .35s ease,color .35s ease,
             box-shadow .35s ease,stroke .35s ease;
}
body.sh-2026 .sh-ab-card:hover .sh-ico{
  background:var(--sh-orange);border-color:var(--sh-orange);color:#fff;
  transform:rotate(-5deg) translateY(-3px) scale(1.08);
  box-shadow:0 10px 25px rgba(232,83,14,.25);
}

/* Heading responds too */
body.sh-2026 .sh-ab-card h3,
body.sh-2026 .sh-ab-phase h3,
body.sh-2026 .sh-ab-eco__box h4{
  position:relative;z-index:2;
  transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-ab-card:hover h3,
body.sh-2026 .sh-ab-phase:hover h3,
body.sh-2026 .sh-ab-eco__box:hover h4{
  color:var(--sh-orange);transform:translateX(3px);
}
body.sh-2026 .sh-ab-card p,
body.sh-2026 .sh-ab-phase p,
body.sh-2026 .sh-ab-eco__box p{position:relative;z-index:2}

/* Journey phases already draw a bar; keep it and match the timing */
body.sh-2026 .sh-ab-phase::after{
  background:linear-gradient(90deg,var(--sh-orange),#FF8A4C);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}

/* ---- Dark section: Why Choose Us ---- */
body.sh-2026 .sh-why .sh-feat{
  position:relative;padding:18px;border-radius:var(--sh-r);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s ease;
}
body.sh-2026 .sh-why .sh-feat::before{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--sh-orange);transition:width .45s ease;
}
body.sh-2026 .sh-why .sh-feat:hover{
  background:rgba(255,255,255,.035);transform:translateY(-7px);
}
body.sh-2026 .sh-why .sh-feat:hover::before{width:100%}
body.sh-2026 .sh-why .sh-feat .sh-ico{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             background .35s ease,color .35s ease,box-shadow .35s ease;
}
body.sh-2026 .sh-why .sh-feat:hover .sh-ico{
  background:var(--sh-orange);border-color:var(--sh-orange);color:#fff;
  transform:rotate(-8deg) scale(1.08);
  box-shadow:0 10px 25px rgba(232,83,14,.20);
}
body.sh-2026 .sh-why .sh-feat h3{transition:color .3s ease}
body.sh-2026 .sh-why .sh-feat:hover h3{color:#FF7840}

/* ---- Motion preferences respected ---- */
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-ab-card,
  body.sh-2026 .sh-ab-phase,
  body.sh-2026 .sh-ab-eco__box,
  body.sh-2026 .sh-why .sh-feat,
  body.sh-2026 .sh-ab-card .sh-ico,
  body.sh-2026 .sh-why .sh-feat .sh-ico{transition:none!important}
  body.sh-2026 .sh-ab-card:hover,
  body.sh-2026 .sh-ab-phase:hover,
  body.sh-2026 .sh-ab-eco__box:hover,
  body.sh-2026 .sh-why .sh-feat:hover{transform:none}
  body.sh-2026 .sh-ab-card:hover .sh-ico,
  body.sh-2026 .sh-why .sh-feat:hover .sh-ico{transform:none}
  body.sh-2026 .sh-ab-card::after,
  body.sh-2026 .sh-ab-eco__box::after{transition:none}
}

/* ==========================================================================
   ECOSYSTEM BOXES — dedicated hover
   Vertical bar grows down the left edge, icon sits in a filled tile.
   ========================================================================== */
body.sh-2026 .sh-ab-eco__box{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--sh-line);padding:25px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-ab-eco__box::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:0;z-index:5;
  background:linear-gradient(to bottom,var(--sh-orange),#FF9B6C);
  transition:height .45s ease;
}
body.sh-2026 .sh-ab-eco__box::after{
  content:"";position:absolute;right:-50px;top:-50px;
  width:100px;height:100px;border-radius:50%;pointer-events:none;
  background:rgba(232,83,14,.055);
  transition:transform .6s ease;
}
body.sh-2026 .sh-ab-eco__box:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 20px 45px rgba(4,25,49,.11);
  border-color:rgba(232,83,14,.3);
}
body.sh-2026 .sh-ab-eco__box:hover::before{height:100%}
body.sh-2026 .sh-ab-eco__box:hover::after{transform:scale(2)}

/* Icon sits in its own tinted tile that fills orange on hover */
body.sh-2026 .sh-ab-eco__box svg{
  box-sizing:content-box;width:20px;height:20px;padding:12px;
  border-radius:var(--sh-r);margin-bottom:15px;
  background:var(--sh-orange-soft);stroke:var(--sh-orange);
  position:relative;z-index:2;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),
             background .3s ease,stroke .3s ease,box-shadow .3s ease;
}
body.sh-2026 .sh-ab-eco__box:hover svg{
  background:var(--sh-orange);stroke:#fff;
  transform:rotate(-6deg) scale(1.1);
  box-shadow:0 8px 20px rgba(232,83,14,.2);
}
body.sh-2026 .sh-ab-eco__box h4,
body.sh-2026 .sh-ab-eco__box p{position:relative;z-index:2}
body.sh-2026 .sh-ab-eco__box h4{
  transition:color .3s ease,transform .3s ease;
}
body.sh-2026 .sh-ab-eco__box:hover h4{
  color:var(--sh-orange);transform:translateX(3px);
}

@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-ab-eco__box,
  body.sh-2026 .sh-ab-eco__box svg{transition:none!important}
  body.sh-2026 .sh-ab-eco__box:hover,
  body.sh-2026 .sh-ab-eco__box:hover svg{transform:none}
  body.sh-2026 .sh-ab-eco__box::after{transition:none}
}

/* ==========================================================================
   REVEAL FAILSAFE
   homepage-redesign.js adds .js-reveal (opacity:0) to headings, cards and
   grids, then removes it on scroll via IntersectionObserver. If any part of
   that chain fails — a JS error, a blocked file, an observer that never fires
   — the content stays invisible even though it is present in the HTML.

   Content visibility is not worth risking for an entrance animation, so the
   hiding is cancelled outright. Pages keep every other legacy style; they
   simply render their content immediately instead of fading it in.
   ========================================================================== */
.js-reveal,
.js-reveal:not(.is-revealed){
  opacity:1!important;
  translate:none!important;
  transform:none!important;
  visibility:visible!important;
  animation:none!important;
}

/* The 2026 theme has its own reveal system with the same risk. Keep the
   animation, but never let an element stay hidden for more than a moment. */
@keyframes sh-reveal-failsafe{to{opacity:1;translate:none;transform:none}}
[data-sh-anim]:not(.is-revealed){
  animation:sh-reveal-failsafe .01s linear 3s forwards;
}

@media (prefers-reduced-motion:reduce){
  [data-sh-anim],
  [data-sh-anim]:not(.is-revealed){
    opacity:1!important;transform:none!important;
    animation:none!important;transition:none!important;
  }
}

/* ==========================================================================
   ABOUT — OUR TEAM
   Appended; no existing rule is modified. Both tiers share one 4-column grid
   so the cards align, with the two directors centred in the middle columns.
   ========================================================================== */
/* Journey (white) sits above and the ecosystem (off-white) below, so this
   band takes a slightly deeper tint with hairlines to separate from both. */
body.sh-2026 .sh-team{
  background:#EDF1F5;
  border-top:1px solid var(--sh-line);
  border-bottom:1px solid var(--sh-line);
  padding-top:var(--sh-6);padding-bottom:var(--sh-6);
}
body.sh-2026 .sh-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sh-3)}
body.sh-2026 .sh-team-grid--lead{margin-bottom:var(--sh-3)}
body.sh-2026 .sh-team-grid--lead .sh-team-card:nth-child(1){grid-column:2}
body.sh-2026 .sh-team-grid--lead .sh-team-card:nth-child(2){grid-column:3}

body.sh-2026 .sh-team-card{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  box-shadow:0 2px 10px rgba(13,43,69,.04);
  display:flex;flex-direction:column;
  transition:transform .45s var(--sh-ease),box-shadow .45s ease,border-color .35s ease;
}
/* Corner glow */
body.sh-2026 .sh-team-card::after{
  content:"";position:absolute;right:-60px;top:-60px;
  width:120px;height:120px;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,rgba(232,83,14,.14),rgba(232,83,14,.03) 55%,transparent 70%);
  opacity:.7;transition:transform .7s var(--sh-ease),opacity .4s ease;
}
body.sh-2026 .sh-team-card:hover::after{transform:scale(2.1) translate(-14px,14px);opacity:1}
/* Bar along the bottom edge */
body.sh-2026 .sh-team-card::before{
  content:"";position:absolute;left:0;bottom:0;width:0;height:3px;z-index:6;
  background:linear-gradient(90deg,var(--sh-orange),#FF8A4C);
  transition:width .5s var(--sh-ease);
}
body.sh-2026 .sh-team-card:hover::before{width:100%}
body.sh-2026 .sh-team-card:hover{
  transform:translateY(-12px) scale(1.015);
  box-shadow:0 22px 50px rgba(4,25,49,.13);
  border-color:rgba(232,83,14,.35);
}

body.sh-2026 .sh-team-card__photo{
  position:relative;overflow:hidden;background:var(--sh-navy-deep);aspect-ratio:1/1;
}
body.sh-2026 .sh-team-card--lead .sh-team-card__photo{aspect-ratio:4/5}
body.sh-2026 .sh-team-card__photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:saturate(.95);transition:transform .8s var(--sh-ease),filter .5s ease;
}
body.sh-2026 .sh-team-card:hover .sh-team-card__photo img{transform:scale(1.07);filter:saturate(1.06)}
body.sh-2026 .sh-team-card__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,27,46,.58),rgba(7,27,46,0) 48%);
}
body.sh-2026 .sh-team-card__badge{
  position:absolute;left:14px;bottom:12px;z-index:3;
  font-family:var(--sh-head);font-size:9.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:#fff;background:rgba(232,83,14,.92);
  padding:5px 10px;border-radius:var(--sh-r)!important;
  transition:transform .4s var(--sh-ease),background .3s ease;
}
body.sh-2026 .sh-team-card--lead .sh-team-card__badge{left:18px;bottom:16px;font-size:10.5px;padding:6px 12px}
body.sh-2026 .sh-team-card:hover .sh-team-card__badge{transform:translateY(-3px);background:var(--sh-orange)}

body.sh-2026 .sh-team-card__body{padding:20px;flex:1;display:flex;flex-direction:column;position:relative;z-index:5}
body.sh-2026 .sh-team-card--lead .sh-team-card__body{padding:var(--sh-3)}
body.sh-2026 .sh-team-card__body h3{
  font-family:var(--sh-head);font-size:16.5px;font-weight:800;color:var(--sh-navy);
  margin-bottom:5px;transition:color .3s ease,transform .35s var(--sh-ease);
}
body.sh-2026 .sh-team-card--lead .sh-team-card__body h3{font-size:20px}
body.sh-2026 .sh-team-card:hover .sh-team-card__body h3{color:var(--sh-orange);transform:translateX(3px)}
body.sh-2026 .sh-team-card__role{
  font-family:var(--sh-head);font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--sh-slate);margin-bottom:12px;
}
body.sh-2026 .sh-team-card--lead .sh-team-card__role{font-size:12px;margin-bottom:var(--sh-2)}
body.sh-2026 .sh-team-card__body p{font-size:12.5px;line-height:1.75;color:var(--sh-muted)}
body.sh-2026 .sh-team-card--lead .sh-team-card__body p{font-size:13.5px;line-height:1.8}

@media (max-width:1100px){
  body.sh-2026 .sh-team-grid{grid-template-columns:repeat(2,1fr)}
  body.sh-2026 .sh-team-grid--lead .sh-team-card:nth-child(1){grid-column:1}
  body.sh-2026 .sh-team-grid--lead .sh-team-card:nth-child(2){grid-column:2}
}
@media (max-width:620px){
  body.sh-2026 .sh-team-grid{grid-template-columns:1fr}
  body.sh-2026 .sh-team-grid--lead .sh-team-card:nth-child(1),
  body.sh-2026 .sh-team-grid--lead .sh-team-card:nth-child(2){grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-team-card,
  body.sh-2026 .sh-team-card::after,
  body.sh-2026 .sh-team-card__photo img,
  body.sh-2026 .sh-team-card__badge,
  body.sh-2026 .sh-team-card__body h3{transition:none!important}
  body.sh-2026 .sh-team-card:hover,
  body.sh-2026 .sh-team-card:hover .sh-team-card__photo img,
  body.sh-2026 .sh-team-card:hover .sh-team-card__badge,
  body.sh-2026 .sh-team-card:hover .sh-team-card__body h3{transform:none}
}

/* ==========================================================================
   SHARED PAGE HERO SUPPORT
   Gallery and Contact reuse the About hero (.sh-ab-hero). Only the dashed
   eyebrow is shared here.
   ========================================================================== */
body.sh-2026 .sh-kicker--dash{display:inline-flex;align-items:center;gap:12px}
body.sh-2026 .sh-kicker--dash::before{content:"";width:26px;height:2px;background:var(--sh-orange)}

/* ==========================================================================
   GALLERY
   The existing filter markup and its data-gallery-* hooks are untouched;
   only presentation is layered on so the filter script keeps working.
   ========================================================================== */
body.sh-2026 .sh-gallery{padding:var(--sh-7) 0;background:var(--sh-off)}
body.sh-2026 .sh-gallery__head{text-align:center;max-width:760px;margin:0 auto var(--sh-5)}
body.sh-2026 .sh-gallery__head .sl-section-label{
  display:inline-flex;align-items:center;gap:12px;color:var(--sh-orange);
  font-family:var(--sh-head);font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
}
body.sh-2026 .sh-gallery__head .sl-section-label::before,
body.sh-2026 .sh-gallery__head .sl-section-label::after{
  content:"";width:26px;height:2px;background:var(--sh-orange);
}
body.sh-2026 .sh-gallery__head h2{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(28px,3.4vw,44px);
  line-height:1.2;color:var(--sh-navy);margin:var(--sh-2) 0;
}
body.sh-2026 .sh-gallery__head p{font-size:15.5px;line-height:1.9;color:var(--sh-muted)}
body.sh-2026 .sh-gallery__head::after{
  content:"";display:block;width:56px;height:3px;background:var(--sh-orange);
  border-radius:2px;margin:var(--sh-3) auto 0;
}

/* Filter tabs */
body.sh-2026 .sh-gallery .sl-gallery-toolbar{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--sh-4);
}
body.sh-2026 .sh-gallery .sl-gallery-filter{
  font-family:var(--sh-head);font-size:13.5px;font-weight:700;color:#fff;
  background:var(--sh-navy);border:1px solid var(--sh-navy);
  padding:15px 28px;border-radius:var(--sh-r)!important;cursor:pointer;
  position:relative;transition:.3s var(--sh-ease);
}
body.sh-2026 .sh-gallery .sl-gallery-filter span{opacity:.6;margin-left:6px;font-size:12px}
body.sh-2026 .sh-gallery .sl-gallery-filter:hover{background:#134063;transform:translateY(-2px)}
body.sh-2026 .sh-gallery .sl-gallery-filter.is-active{
  background:var(--sh-orange);border-color:var(--sh-orange);
}
body.sh-2026 .sh-gallery .sl-gallery-filter.is-active::after{
  content:"";position:absolute;left:24px;right:24px;bottom:8px;height:3px;
  background:rgba(255,255,255,.85);border-radius:2px;
}
body.sh-2026 .sh-gallery .sl-gallery-results{
  text-align:center;font-size:13.5px;color:var(--sh-muted);margin-bottom:var(--sh-4);
}
body.sh-2026 .sh-gallery .sl-gallery-results strong{color:var(--sh-navy);font-family:var(--sh-head)}

/* Image cards */
body.sh-2026 .sh-gallery .sl-gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-3);
}
body.sh-2026 .sh-gallery .sl-gallery-card{
  position:relative;overflow:hidden;border-radius:var(--sh-r)!important;
  border:1px solid var(--sh-line);background:var(--sh-navy-deep);
  box-shadow:0 2px 10px rgba(13,43,69,.04);
  transition:transform .45s var(--sh-ease),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-gallery .sl-gallery-card:hover{
  transform:translateY(-10px);box-shadow:0 24px 54px rgba(4,25,49,.18);
  border-color:rgba(232,83,14,.35);
}
body.sh-2026 .sh-gallery .sl-gallery-image-wrap{
  position:relative;aspect-ratio:3/4;overflow:hidden;
}
body.sh-2026 .sh-gallery .sl-gallery-image-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--sh-ease),filter .5s ease;filter:saturate(.96);
}
body.sh-2026 .sh-gallery .sl-gallery-card:hover .sl-gallery-image-wrap img{
  transform:scale(1.07);filter:saturate(1.06);
}
body.sh-2026 .sh-gallery .sl-gallery-image-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,27,46,.88) 0%,rgba(7,27,46,.30) 45%,rgba(7,27,46,0) 70%);
}
body.sh-2026 .sh-gallery .sl-gallery-open{
  position:absolute;right:18px;bottom:18px;z-index:3;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:.35s var(--sh-ease);
}
body.sh-2026 .sh-gallery .sl-gallery-card:hover .sl-gallery-open{
  background:var(--sh-orange);border-color:var(--sh-orange);transform:translateX(4px);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
body.sh-2026 .sh-contact-page .sl-contact-details{display:grid;gap:12px;margin-top:var(--sh-4)}
body.sh-2026 .sh-contact-page .sl-contact-card{
  display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:20px;position:relative;overflow:hidden;
  transition:transform .4s var(--sh-ease),box-shadow .4s ease,border-color .35s ease;
}
body.sh-2026 .sh-contact-page .sl-contact-card::after{
  content:"";position:absolute;right:-40px;top:-40px;width:80px;height:80px;border-radius:50%;
  background:rgba(232,83,14,.07);transition:transform .6s var(--sh-ease);
}
body.sh-2026 .sh-contact-page .sl-contact-card:hover{
  border-color:rgba(232,83,14,.35);transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(13,43,69,.09);
}
body.sh-2026 .sh-contact-page .sl-contact-card:hover::after{transform:scale(2)}
body.sh-2026 .sh-contact-page .sl-contact-card svg{
  width:20px;height:20px;flex:none;stroke:var(--sh-orange);fill:none;stroke-width:1.8;
}

/* Form card with an orange top edge */
body.sh-2026 .sh-contact-page .sl-contact-form-wrap{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-5);position:relative;overflow:hidden;
  box-shadow:0 18px 46px rgba(13,43,69,.08);
}
body.sh-2026 .sh-contact-page .sl-contact-form-wrap::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--sh-orange),#FF8A4C);
}
body.sh-2026 .sh-contact-page .sl-contact-form label{
  font-family:var(--sh-head);font-size:12px;font-weight:700;color:var(--sh-navy);
}
body.sh-2026 .sh-contact-page .sl-contact-form input,
body.sh-2026 .sh-contact-page .sl-contact-form select,
body.sh-2026 .sh-contact-page .sl-contact-form textarea{
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:14px 16px;font-family:var(--sh-body);font-size:15px;
}
body.sh-2026 .sh-contact-page .sl-contact-form input:focus,
body.sh-2026 .sh-contact-page .sl-contact-form select:focus,
body.sh-2026 .sh-contact-page .sl-contact-form textarea:focus{
  outline:0;border-color:var(--sh-orange);box-shadow:0 0 0 3px rgba(232,83,14,.11);
}

/* Map card */
body.sh-2026 .sh-map-frame{
  position:relative;border-radius:var(--sh-r)!important;overflow:hidden;
}
body.sh-2026 .sh-map-frame::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--sh-orange),#FF8A4C);
}

/* Dark CTA band */
body.sh-2026 .sh-contact-cta{
  background:linear-gradient(120deg,#061524,var(--sh-navy) 60%,#123353);
  padding:var(--sh-6) 0;
}
body.sh-2026 .sh-contact-cta .sh-shell{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--sh-5);flex-wrap:wrap;
}
body.sh-2026 .sh-contact-cta h2{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(26px,3vw,38px);
  color:#fff;margin:12px 0 10px;
}
body.sh-2026 .sh-contact-cta p{color:rgba(255,255,255,.72);font-size:15px;max-width:560px}

@media (max-width:1000px){
  body.sh-2026 .sh-gallery .sl-gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body.sh-2026 .sh-gallery .sl-gallery-grid{grid-template-columns:1fr}
  body.sh-2026 .sh-gallery .sl-gallery-filter{padding:12px 20px;font-size:12.5px}
  body.sh-2026 .sh-contact-cta .sh-shell{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-gallery .sl-gallery-card,
  body.sh-2026 .sh-gallery .sl-gallery-image-wrap img,
  body.sh-2026 .sh-contact-page .sl-contact-card{transition:none!important}
  body.sh-2026 .sh-gallery .sl-gallery-card:hover,
  body.sh-2026 .sh-contact-page .sl-contact-card:hover{transform:none}
  body.sh-2026 .sh-gallery .sl-gallery-card:hover .sl-gallery-image-wrap img{transform:none}
}

/* ==========================================================================
   GALLERY — CATEGORY CARDS
   Shown when no photographs are published yet, and as the category browser.
   ========================================================================== */
body.sh-2026 .sh-gal-cats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sh-3);
}
body.sh-2026 .sh-gal-cat{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:3/4;overflow:hidden;text-decoration:none;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  background:linear-gradient(180deg,#E6EAEF 0%,#C9D2DB 34%,#16385a 76%,#0b2440 100%);
  transition:transform .45s var(--sh-ease),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-gal-cat:hover{
  transform:translateY(-10px);box-shadow:0 24px 54px rgba(4,25,49,.22);
  border-color:rgba(232,83,14,.4);
}
body.sh-2026 .sh-gal-cat__badge{
  position:absolute;top:20px;left:20px;z-index:3;
  width:46px;height:46px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--sh-navy);
  box-shadow:0 6px 18px rgba(4,25,49,.18);
  transition:transform .4s var(--sh-ease),background .3s ease,color .3s ease;
}
body.sh-2026 .sh-gal-cat__badge svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
body.sh-2026 .sh-gal-cat:hover .sh-gal-cat__badge{
  background:var(--sh-orange);color:#fff;transform:rotate(-6deg) scale(1.08);
}
body.sh-2026 .sh-gal-cat__body{position:relative;z-index:2;padding:var(--sh-3);color:#fff}
body.sh-2026 .sh-gal-cat__num{
  font-family:var(--sh-head);font-size:13px;font-weight:800;
  color:var(--sh-orange);letter-spacing:1px;
}
body.sh-2026 .sh-gal-cat__body h3{
  font-family:var(--sh-head);font-size:20px;font-weight:800;color:#fff;
  margin:6px 0 8px;transition:color .3s ease,transform .35s var(--sh-ease);
}
body.sh-2026 .sh-gal-cat:hover .sh-gal-cat__body h3{transform:translateX(3px)}
body.sh-2026 .sh-gal-cat__body p{
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.76);max-width:88%;
}
body.sh-2026 .sh-gal-cat__arrow{
  position:absolute;right:18px;bottom:20px;z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:.35s var(--sh-ease);
}
body.sh-2026 .sh-gal-cat__arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
body.sh-2026 .sh-gal-cat:hover .sh-gal-cat__arrow{
  background:var(--sh-orange);border-color:var(--sh-orange);transform:translateX(4px);
}
body.sh-2026 .sh-gal-note{
  text-align:center;font-size:13.5px;line-height:1.8;color:var(--sh-muted);
  max-width:620px;margin:var(--sh-5) auto 0;
}

@media (max-width:1100px){
  body.sh-2026 .sh-gal-cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  body.sh-2026 .sh-gal-cats{grid-template-columns:1fr}
  body.sh-2026 .sh-gal-cat{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-gal-cat,
  body.sh-2026 .sh-gal-cat__badge,
  body.sh-2026 .sh-gal-cat__arrow{transition:none!important}
  body.sh-2026 .sh-gal-cat:hover,
  body.sh-2026 .sh-gal-cat:hover .sh-gal-cat__badge,
  body.sh-2026 .sh-gal-cat:hover .sh-gal-cat__arrow{transform:none}
}

/* ---- Gallery category filter tabs ---- */
body.sh-2026 .sh-gal-tabs{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--sh-5);
}
body.sh-2026 .sh-gal-tab{
  position:relative;font-family:var(--sh-head);font-size:13.5px;font-weight:700;
  color:#fff;background:var(--sh-navy);border:1px solid var(--sh-navy);
  padding:15px 28px;border-radius:var(--sh-r)!important;cursor:pointer;
  transition:.3s var(--sh-ease);
}
body.sh-2026 .sh-gal-tab:hover{background:#134063;transform:translateY(-2px)}
body.sh-2026 .sh-gal-tab.is-active{
  background:var(--sh-orange);border-color:var(--sh-orange);
  box-shadow:0 10px 26px rgba(232,83,14,.28);
}
body.sh-2026 .sh-gal-tab.is-active::after{
  content:"";position:absolute;left:24px;right:24px;bottom:8px;height:3px;
  background:rgba(255,255,255,.85);border-radius:2px;
}
body.sh-2026 .sh-gal-tab:focus-visible{outline:3px solid rgba(232,83,14,.35);outline-offset:3px}
@media (max-width:600px){
  body.sh-2026 .sh-gal-tab{padding:12px 20px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-gal-tab{transition:none}
  body.sh-2026 .sh-gal-tab:hover{transform:none}
}

/* ---- Map header: pill + action button ---- */
body.sh-2026 .sh-map-head__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.sh-2026 .sh-map-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(16,163,74,.10);color:#0F9D58;
  font-family:var(--sh-head);font-size:12px;font-weight:700;
  padding:8px 14px;border-radius:999px;
}
body.sh-2026 .sh-map-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#0F9D58}
@media (max-width:820px){
  body.sh-2026 .sh-map-head__actions{width:100%}
  body.sh-2026 .sh-map-head__actions .sh-btn{flex:1;justify-content:center}
}

/* ---- Contact section layout ----
   The legacy stylesheet declares .sl-contact-layout twice and the later rule
   collapses it to a single column, which left the form card unconstrained.
   The grid is restated here along with the shell width. */
body.sh-2026 .sh-contact-page .sl-contact-layout{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:var(--sh-6);align-items:start;
  max-width:var(--sh-shell);margin:0 auto;
  padding-left:var(--sh-4);padding-right:var(--sh-4);
}
body.sh-2026 .sh-contact-page .sl-contact-details{min-width:0}
body.sh-2026 .sh-contact-page .sl-contact-form-wrap{min-width:0;margin:0}

/* Intro heading occupies its own full-width row above the two columns */
body.sh-2026 .sh-contact-intro{
  max-width:var(--sh-shell);margin:0 auto var(--sh-5);
  padding-left:var(--sh-4);padding-right:var(--sh-4);
}
body.sh-2026 .sh-contact-intro .sh-title{margin-top:var(--sh-2)}
body.sh-2026 .sh-contact-intro p{
  font-size:15px;line-height:1.9;color:var(--sh-muted);
  max-width:720px;margin-top:var(--sh-2);
}

/* The form card keeps its own heading */
body.sh-2026 .sh-contact-page .sl-contact-form-wrap > .sl-section-label{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--sh-2);
}
body.sh-2026 .sh-contact-page .sl-contact-form-wrap > h2{
  font-family:var(--sh-head);font-weight:800;
  font-size:clamp(24px,2.6vw,34px);line-height:1.25;
  color:var(--sh-navy);margin:0 0 var(--sh-3);
}
/* Cards start level with the form card */
body.sh-2026 .sh-contact-page .sl-contact-details{padding-top:4px}

/* Form fields */
body.sh-2026 .sh-contact-page .sl-contact-form{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-2);
}
body.sh-2026 .sh-contact-page .sl-form-full{grid-column:1/-1}
body.sh-2026 .sh-contact-page .sl-contact-form label{
  display:block;margin-bottom:8px;
}
body.sh-2026 .sh-contact-page .sl-contact-form input,
body.sh-2026 .sh-contact-page .sl-contact-form select,
body.sh-2026 .sh-contact-page .sl-contact-form textarea{
  width:100%;background:#fff;
}
body.sh-2026 .sh-contact-page .sl-contact-form textarea{min-height:150px;resize:vertical}
body.sh-2026 .sh-contact-page .sl-contact-form .sl-btn,
body.sh-2026 .sh-contact-page .sl-contact-form button[type="submit"]{
  grid-column:1/-1;width:100%;justify-content:center;
  background:var(--sh-orange);border:1px solid var(--sh-orange);color:#fff;
  font-family:var(--sh-head);font-size:13px;font-weight:700;letter-spacing:1.2px;
  padding:17px 30px;border-radius:var(--sh-r)!important;
  display:inline-flex;align-items:center;gap:10px;transition:.35s var(--sh-ease);
}
body.sh-2026 .sh-contact-page .sl-contact-form .sl-btn:hover,
body.sh-2026 .sh-contact-page .sl-contact-form button[type="submit"]:hover{
  background:var(--sh-orange-hover);border-color:var(--sh-orange-hover);transform:translateY(-2px);
}

@media (max-width:960px){
  body.sh-2026 .sh-contact-page .sl-contact-layout{
    grid-template-columns:1fr;gap:var(--sh-5);
  }
}
@media (max-width:640px){
  body.sh-2026 .sh-contact-page .sl-contact-layout,
  body.sh-2026 .sh-contact-intro{
    padding-left:var(--sh-3);padding-right:var(--sh-3);
  }
  body.sh-2026 .sh-contact-page .sl-contact-form{grid-template-columns:1fr}
  body.sh-2026 .sh-contact-page .sl-contact-form-wrap{padding:var(--sh-3)}
}

/* ==========================================================================
   OPPORTUNITY PAGES
   One template shared by all five partner pages. Appended; nothing existing
   is modified.
   ========================================================================== */
body.sh-2026 .sh-opp-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,#061524 0%,var(--sh-navy) 52%,#16405f 100%);
}
body.sh-2026 .sh-opp-hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 82% 30%,rgba(232,83,14,.20),transparent 62%);
}
body.sh-2026 .sh-opp-hero__inner{
  position:relative;z-index:3;display:grid;grid-template-columns:1.2fr .8fr;
  gap:var(--sh-6);align-items:center;
  padding-top:var(--sh-7);padding-bottom:var(--sh-7);
}
body.sh-2026 .sh-opp-hero h1{
  font-family:var(--sh-head);font-weight:800;
  font-size:clamp(30px,4.2vw,52px);line-height:1.14;color:#fff;margin:var(--sh-3) 0;
}
body.sh-2026 .sh-opp-hero h1 span{color:var(--sh-orange);display:block}
body.sh-2026 .sh-opp-hero p{
  font-size:16px;line-height:1.9;color:rgba(255,255,255,.78);
  max-width:520px;margin-bottom:var(--sh-5);
}

/* Intro heading */
body.sh-2026 .sh-opp-intro{text-align:center;max-width:760px;margin:0 auto}
body.sh-2026 .sh-opp-intro .sh-kicker--dash{justify-content:center}
body.sh-2026 .sh-opp-intro .sh-kicker--dash::after{content:"";width:26px;height:2px;background:var(--sh-orange)}
body.sh-2026 .sh-opp-intro .sh-title span{color:var(--sh-orange);display:block}
body.sh-2026 .sh-opp-intro p{font-size:15px;line-height:1.9;color:var(--sh-muted);margin-top:var(--sh-2)}

/* Two-card rows */
body.sh-2026 .sh-opp-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-3);align-items:start}
body.sh-2026 .sh-opp-card{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-4);box-shadow:0 2px 10px rgba(13,43,69,.04);
  transition:transform .45s var(--sh-ease),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-opp-card::after{
  content:"";position:absolute;right:-60px;top:-60px;width:120px;height:120px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,83,14,.12),transparent 68%);
  transition:transform .7s var(--sh-ease);
}
body.sh-2026 .sh-opp-card:hover{
  transform:translateY(-8px);box-shadow:0 22px 50px rgba(4,25,49,.12);
  border-color:rgba(232,83,14,.32);
}
body.sh-2026 .sh-opp-card:hover::after{transform:scale(2)}
body.sh-2026 .sh-opp-card__num{
  position:absolute;top:var(--sh-3);right:var(--sh-4);z-index:2;
  font-family:var(--sh-head);font-size:22px;font-weight:800;color:var(--sh-line);
}
body.sh-2026 .sh-opp-card__ico{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:var(--sh-r)!important;
  background:var(--sh-orange-soft);border:1px solid var(--sh-orange-line);
  color:var(--sh-orange);margin-bottom:var(--sh-3);
  transition:transform .4s var(--sh-ease),background .3s ease,color .3s ease;
}
body.sh-2026 .sh-opp-card__ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
body.sh-2026 .sh-opp-card:hover .sh-opp-card__ico{
  background:var(--sh-orange);color:#fff;transform:rotate(-6deg) scale(1.07);
}
body.sh-2026 .sh-opp-card h3{
  position:relative;z-index:2;font-family:var(--sh-head);font-size:20px;font-weight:800;
  color:var(--sh-navy);margin:var(--sh-2) 0 var(--sh-3);line-height:1.3;
}
body.sh-2026 .sh-opp-ticks,body.sh-2026 .sh-opp-dots{
  position:relative;z-index:2;list-style:none;display:grid;gap:10px;margin:0;padding:0;
}
body.sh-2026 .sh-opp-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--sh-slate)}
body.sh-2026 .sh-opp-ticks svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:var(--sh-orange);fill:none;stroke-width:2.6}
body.sh-2026 .sh-opp-dots li{position:relative;padding-left:18px;font-size:14px;line-height:1.7;color:var(--sh-slate)}
body.sh-2026 .sh-opp-dots li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--sh-orange);
}

/* Application journey */
body.sh-2026 .sh-opp-journey__head{margin-bottom:var(--sh-5);max-width:760px}
body.sh-2026 .sh-opp-journey__head .sh-title span{color:var(--sh-orange);display:block}
body.sh-2026 .sh-opp-journey__head p{font-size:15px;line-height:1.9;color:var(--sh-muted);margin-top:var(--sh-2)}
body.sh-2026 .sh-opp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-3)}
body.sh-2026 .sh-opp-step{
  position:relative;background:#fff;border:1px solid var(--sh-line);
  border-radius:var(--sh-r)!important;padding:var(--sh-4);
  box-shadow:0 2px 10px rgba(13,43,69,.04);
  transition:transform .45s var(--sh-ease),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-opp-step:hover{
  transform:translateY(-8px);box-shadow:0 20px 46px rgba(4,25,49,.12);border-color:rgba(232,83,14,.32);
}
body.sh-2026 .sh-opp-step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--sh-r)!important;
  background:var(--sh-navy);color:#fff;
  font-family:var(--sh-head);font-size:14px;font-weight:800;margin-bottom:var(--sh-3);
  transition:background .3s ease;
}
body.sh-2026 .sh-opp-step:hover .sh-opp-step__num{background:var(--sh-orange)}
body.sh-2026 .sh-opp-step h3{font-family:var(--sh-head);font-size:18px;font-weight:800;color:var(--sh-navy);margin-bottom:10px}
body.sh-2026 .sh-opp-step p{font-size:13.5px;line-height:1.8;color:var(--sh-muted)}

/* Responsible opportunity band */
body.sh-2026 .sh-opp-responsible{
  background:linear-gradient(115deg,#061524,var(--sh-navy) 58%,#123353);
  padding:var(--sh-7) 0;
}
body.sh-2026 .sh-opp-responsible__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sh-6);align-items:center;
}
body.sh-2026 .sh-opp-responsible h2{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(26px,3vw,38px);
  line-height:1.25;color:#fff;margin-top:var(--sh-2);
}
body.sh-2026 .sh-opp-responsible__list{display:grid;gap:12px}
body.sh-2026 .sh-opp-resp-item{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--sh-r)!important;padding:16px 18px;
  font-size:14px;line-height:1.7;color:rgba(255,255,255,.86);
  transition:background .3s ease,border-color .3s ease,transform .35s var(--sh-ease);
}
body.sh-2026 .sh-opp-resp-item:hover{
  background:rgba(255,255,255,.08);border-color:rgba(232,83,14,.4);transform:translateX(4px);
}
body.sh-2026 .sh-opp-resp-item svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--sh-orange);fill:none;stroke-width:2.6}

/* FAQ */
body.sh-2026 .sh-opp-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sh-6);align-items:start}
body.sh-2026 .sh-opp-faq p{font-size:15px;line-height:1.9;color:var(--sh-muted);margin-top:var(--sh-2)}
body.sh-2026 .sh-opp-faq__list{display:grid;gap:12px}
body.sh-2026 .sh-opp-faq__item{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:18px 22px;transition:border-color .3s ease,box-shadow .3s ease;
}
body.sh-2026 .sh-opp-faq__item[open]{border-color:rgba(232,83,14,.32);box-shadow:0 12px 30px rgba(13,43,69,.08)}
body.sh-2026 .sh-opp-faq__item summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--sh-head);font-size:15px;font-weight:700;color:var(--sh-navy);
  cursor:pointer;list-style:none;
}
body.sh-2026 .sh-opp-faq__item summary::-webkit-details-marker{display:none}
body.sh-2026 .sh-opp-faq__item summary span{
  position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--sh-orange-soft);transition:transform .3s var(--sh-ease),background .3s ease;
}
body.sh-2026 .sh-opp-faq__item summary span::before,
body.sh-2026 .sh-opp-faq__item summary span::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--sh-orange);
  transform:translate(-50%,-50%);transition:opacity .25s ease;
}
body.sh-2026 .sh-opp-faq__item summary span::before{width:10px;height:2px}
body.sh-2026 .sh-opp-faq__item summary span::after{width:2px;height:10px}
body.sh-2026 .sh-opp-faq__item[open] summary span{background:var(--sh-orange)}
body.sh-2026 .sh-opp-faq__item[open] summary span::before,
body.sh-2026 .sh-opp-faq__item[open] summary span::after{background:#fff}
body.sh-2026 .sh-opp-faq__item[open] summary span::after{opacity:0}
body.sh-2026 .sh-opp-faq__item p{font-size:14px;line-height:1.85;color:var(--sh-muted);margin-top:12px}

/* Orange CTA band */
body.sh-2026 .sh-opp-cta{background:var(--sh-orange);padding:var(--sh-6) 0}
body.sh-2026 .sh-opp-cta .sh-shell{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sh-5);flex-wrap:wrap;
}
body.sh-2026 .sh-opp-cta .sh-kicker--dash{color:rgba(255,255,255,.85)}
body.sh-2026 .sh-opp-cta .sh-kicker--dash::before{background:rgba(255,255,255,.85)}
body.sh-2026 .sh-opp-cta h2{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(24px,2.8vw,34px);
  color:#fff;margin-top:12px;line-height:1.3;max-width:640px;
}
body.sh-2026 .sh-opp-cta .sh-btn-o{border-color:rgba(255,255,255,.7)}
body.sh-2026 .sh-opp-cta .sh-btn-o.is-solid{background:#fff;color:var(--sh-orange);border-color:#fff}
body.sh-2026 .sh-opp-cta .sh-btn-o.is-solid:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}

@media (max-width:1000px){
  body.sh-2026 .sh-opp-hero__inner,
  body.sh-2026 .sh-opp-responsible__inner,
  body.sh-2026 .sh-opp-faq{grid-template-columns:1fr;gap:var(--sh-5)}
  body.sh-2026 .sh-opp-duo{grid-template-columns:1fr}
  body.sh-2026 .sh-opp-steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.sh-2026 .sh-opp-hero__inner{padding-top:var(--sh-6);padding-bottom:var(--sh-6)}
  body.sh-2026 .sh-opp-cta .sh-shell{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-opp-card,body.sh-2026 .sh-opp-step,
  body.sh-2026 .sh-opp-resp-item,body.sh-2026 .sh-opp-card__ico{transition:none!important}
  body.sh-2026 .sh-opp-card:hover,body.sh-2026 .sh-opp-step:hover,
  body.sh-2026 .sh-opp-resp-item:hover{transform:none}
}

/* ---- Opportunity pages: contact heading in its own row ---- */
body.sh-2026 .sh-opp-contact-intro{
  max-width:var(--sh-shell);margin:0 auto var(--sh-5);
  padding-left:var(--sh-4);padding-right:var(--sh-4);
}
body.sh-2026 .sh-opp-contact-intro .sh-title{margin-top:var(--sh-2)}
body.sh-2026 .sh-opp-contact-intro p{
  font-size:15px;line-height:1.9;color:var(--sh-muted);
  max-width:720px;margin-top:var(--sh-2);
}
/* The component's own heading is suppressed; keep its spacing tidy */
body.sh-2026 .sh-opp-page .sl-home-contact-copy > h2:empty,
body.sh-2026 .sh-opp-page .sl-home-contact-copy > p:empty{display:none}
body.sh-2026 .sh-opp-page .sl-home-contact-section{padding-top:0}
@media (max-width:640px){
  body.sh-2026 .sh-opp-contact-intro{padding-left:var(--sh-3);padding-right:var(--sh-3)}
}

/* ---- Opportunity intro: heading and the two cards are one section ---- */
body.sh-2026 .sh-opp-intro-sec{background:var(--sh-off)}
body.sh-2026 .sh-opp-intro-sec .sh-opp-intro{
  text-align:center;max-width:760px;margin:0 auto var(--sh-5);
}
body.sh-2026 .sh-opp-intro-sec .sh-opp-intro .sh-kicker{justify-content:center}
body.sh-2026 .sh-opp-intro-sec .sh-opp-intro p{
  font-size:15px;line-height:1.9;color:var(--sh-muted);margin-top:var(--sh-2);
}
body.sh-2026 .sh-opp-intro-sec .sh-opp-duo{margin-top:0}

/* ---- Opportunity contact: remove the component's duplicate heading ----
   The heading now lives in .sh-opp-contact-intro above, so the copy column's
   own label and empty heading are suppressed and the two columns start level. */
body.sh-2026 .sh-opp-page .sl-home-contact-copy > .sl-section-label{display:none}
body.sh-2026 .sh-opp-page .sl-home-contact-copy > h2{display:none}
body.sh-2026 .sh-opp-page .sl-home-contact-copy > p:first-of-type:empty{display:none}
body.sh-2026 .sh-opp-page .sl-home-contact-details{margin-top:0}
body.sh-2026 .sh-opp-page .sl-home-contact-layout{align-items:start}
body.sh-2026 .sh-opp-page .sl-home-contact-copy{padding-top:0}
body.sh-2026 .sh-opp-page .sl-home-contact-card{margin-top:0}

/* ==========================================================================
   OPPORTUNITY CONTACT SECTION
   Matches the Contact page: intro row, two columns, and the same card
   treatment and hover so the two pages behave identically.
   ========================================================================== */
body.sh-2026 .sh-opp-page .sl-home-contact-layout{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:var(--sh-6);align-items:start;
  max-width:var(--sh-shell);margin:0 auto;
  padding-left:var(--sh-4);padding-right:var(--sh-4);
}
body.sh-2026 .sh-opp-page .sl-home-contact-copy,
body.sh-2026 .sh-opp-page .sl-home-contact-card{min-width:0}
body.sh-2026 .sh-opp-page .sl-home-contact-details{display:grid;gap:12px}

/* Contact cards — same as .sh-contact-page .sl-contact-card */
body.sh-2026 .sh-opp-page .sl-home-contact-detail{
  display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:20px;position:relative;overflow:hidden;
  transition:transform .4s var(--sh-ease),box-shadow .4s ease,border-color .35s ease;
}
body.sh-2026 .sh-opp-page .sl-home-contact-detail::after{
  content:"";position:absolute;right:-40px;top:-40px;width:80px;height:80px;
  border-radius:50%;background:rgba(232,83,14,.07);
  transition:transform .6s var(--sh-ease);
}
body.sh-2026 .sh-opp-page .sl-home-contact-detail:hover{
  border-color:rgba(232,83,14,.35);transform:translateY(-6px);
  box-shadow:0 16px 38px rgba(13,43,69,.10);
}
body.sh-2026 .sh-opp-page .sl-home-contact-detail:hover::after{transform:scale(2)}
body.sh-2026 .sh-opp-page .sl-home-contact-detail svg{
  width:20px;height:20px;flex:none;stroke:var(--sh-orange);fill:none;stroke-width:1.8;
  position:relative;z-index:2;transition:transform .4s var(--sh-ease);
}
body.sh-2026 .sh-opp-page .sl-home-contact-detail:hover svg{transform:scale(1.12)}
body.sh-2026 .sh-opp-page .sl-home-contact-detail b,
body.sh-2026 .sh-opp-page .sl-home-contact-detail span,
body.sh-2026 .sh-opp-page .sl-home-contact-detail a{position:relative;z-index:2}

/* Form card — orange top edge, as on the Contact page */
body.sh-2026 .sh-opp-page .sl-home-contact-card{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-5);position:relative;overflow:hidden;
  box-shadow:0 18px 46px rgba(13,43,69,.08);
}
body.sh-2026 .sh-opp-page .sl-home-contact-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--sh-orange),#FF8A4C);
}

@media (max-width:960px){
  body.sh-2026 .sh-opp-page .sl-home-contact-layout{
    grid-template-columns:1fr;gap:var(--sh-5);
  }
}
@media (max-width:640px){
  body.sh-2026 .sh-opp-page .sl-home-contact-layout{
    padding-left:var(--sh-3);padding-right:var(--sh-3);
  }
  body.sh-2026 .sh-opp-page .sl-home-contact-card{padding:var(--sh-3)}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-opp-page .sl-home-contact-detail{transition:none!important}
  body.sh-2026 .sh-opp-page .sl-home-contact-detail:hover,
  body.sh-2026 .sh-opp-page .sl-home-contact-detail:hover svg{transform:none}
}

/* ---- Opportunity contact: heading and columns are one section ---- */
body.sh-2026 .sh-opp-contact{background:var(--sh-off)}
/* The component brings its own section padding and background; both are
   neutralised so the wrapper controls the whole block. */
body.sh-2026 .sh-opp-contact .sl-home-contact-section{
  padding:0!important;background:transparent!important;
  border-top:0!important;border-bottom:0!important;
}
body.sh-2026 .sh-opp-contact .sh-opp-contact-intro{margin-bottom:var(--sh-5)}

/* ==========================================================================
   OPPORTUNITY CARDS — hover aligned to the About page
   Same easing, durations and transform values so the two pages behave
   identically. Appended last so these values win.
   ========================================================================== */
body.sh-2026 .sh-opp-card,
body.sh-2026 .sh-opp-step{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-opp-card:hover,
body.sh-2026 .sh-opp-step:hover{
  transform:translateY(-12px) scale(1.015);
  box-shadow:0 22px 50px rgba(4,25,49,.13);
  border-color:rgba(232,83,14,.35);
}

/* Corner glow */
body.sh-2026 .sh-opp-card::after,
body.sh-2026 .sh-opp-step::after{
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
  opacity:.7;
}
body.sh-2026 .sh-opp-card:hover::after,
body.sh-2026 .sh-opp-step:hover::after{
  transform:scale(2.1) translate(-15px,15px);opacity:1;
}

/* Bar drawing along the bottom edge */
body.sh-2026 .sh-opp-card::before,
body.sh-2026 .sh-opp-step::before{
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-opp-card:hover::before,
body.sh-2026 .sh-opp-step:hover::before{width:100%}

/* Icon flips to solid orange with a tilt */
body.sh-2026 .sh-opp-card__ico,
body.sh-2026 .sh-opp-step b{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             background .35s ease,color .35s ease,box-shadow .35s ease;
}
body.sh-2026 .sh-opp-card:hover .sh-opp-card__ico{
  background:var(--sh-orange);border-color:var(--sh-orange);color:#fff;
  transform:rotate(-5deg) translateY(-3px) scale(1.08);
  box-shadow:0 10px 25px rgba(232,83,14,.25);
}
body.sh-2026 .sh-opp-step:hover b{
  background:var(--sh-orange);
  transform:rotate(-5deg) scale(1.08);
  box-shadow:0 10px 25px rgba(232,83,14,.25);
}

/* Heading turns orange and nudges right */
body.sh-2026 .sh-opp-card h3,
body.sh-2026 .sh-opp-step h3{
  transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-opp-card:hover h3,
body.sh-2026 .sh-opp-step:hover h3{
  color:var(--sh-orange);transform:translateX(3px);
}

@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-opp-card,
  body.sh-2026 .sh-opp-step,
  body.sh-2026 .sh-opp-card__ico,
  body.sh-2026 .sh-opp-step b,
  body.sh-2026 .sh-opp-card h3,
  body.sh-2026 .sh-opp-step h3{transition:none!important}
  body.sh-2026 .sh-opp-card:hover,
  body.sh-2026 .sh-opp-step:hover,
  body.sh-2026 .sh-opp-card:hover .sh-opp-card__ico,
  body.sh-2026 .sh-opp-step:hover b,
  body.sh-2026 .sh-opp-card:hover h3,
  body.sh-2026 .sh-opp-step:hover h3{transform:none}
}

/* ==========================================================================
   OPPORTUNITY CARDS — matched to the approved PartnerFranchise reference
   Values taken directly from that stylesheet. Differences from the earlier
   build: the accent bar sits on the TOP edge and scales from the left, the
   icon stays tinted rather than filling solid, and the tilt is -8deg.
   ========================================================================== */
body.sh-2026 .sh-opp-card,
body.sh-2026 .sh-opp-step{
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             box-shadow .45s ease,border-color .35s ease;
}

/* Top accent bar, scaling out from the left */
body.sh-2026 .sh-opp-card::before,
body.sh-2026 .sh-opp-step::before{
  content:"";position:absolute;top:0;left:0;bottom:auto;
  width:100%;height:4px;z-index:5;
  background:linear-gradient(90deg,var(--sh-orange),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-opp-card:hover::before,
body.sh-2026 .sh-opp-step:hover::before{transform:scaleX(1);width:100%}

/* Corner glow, lower-right */
body.sh-2026 .sh-opp-card::after,
body.sh-2026 .sh-opp-step::after{
  content:"";position:absolute;right:-80px;bottom:-80px;top:auto;
  width:150px;height:150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,83,14,.09),transparent 70%);
  opacity:1;transition:transform .5s ease;
}
body.sh-2026 .sh-opp-card:hover::after,
body.sh-2026 .sh-opp-step:hover::after{transform:scale(1.6)}

body.sh-2026 .sh-opp-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 70px rgba(7,29,56,.10);
  border-color:rgba(232,83,14,.22);
}
body.sh-2026 .sh-opp-step:hover{
  transform:translateY(-9px);
  box-shadow:0 25px 50px rgba(7,29,56,.10);
  border-color:rgba(232,83,14,.20);
}

/* Icon tile keeps its tint and tilts */
body.sh-2026 .sh-opp-card__ico{
  width:55px;height:55px;border-radius:14px;
  background:rgba(232,83,14,.08);color:var(--sh-orange);
  border:0;margin-bottom:25px;
  transition:transform .4s ease,background .4s ease;
}
body.sh-2026 .sh-opp-card:hover .sh-opp-card__ico{
  transform:rotate(-8deg) scale(1.1);
  background:rgba(232,83,14,.14);
  box-shadow:none;
}

/* Numbered step badge flips navy to orange */
body.sh-2026 .sh-opp-step b{
  border-radius:9px;background:var(--sh-navy);color:#fff;
  transition:transform .35s ease,background .35s ease;
}
body.sh-2026 .sh-opp-step:hover b{
  transform:rotate(-8deg) scale(1.1);
  background:var(--sh-orange);box-shadow:none;
}

/* The faint watermark icon in the corner of each step */
body.sh-2026 .sh-opp-step svg{
  color:rgba(232,83,14,.14);stroke:currentColor;
  transition:transform .4s ease,color .4s ease;
}
body.sh-2026 .sh-opp-step:hover svg{
  color:var(--sh-orange);transform:scale(1.15) rotate(-8deg);
}

/* Headings stay navy, as in the reference */
body.sh-2026 .sh-opp-card:hover h3,
body.sh-2026 .sh-opp-step:hover h3{color:var(--sh-navy);transform:none}

/* Assurance pills slide right */
body.sh-2026 .sh-opp-resp-item{
  transition:transform .35s ease,background .35s ease,border-color .35s ease;
}
body.sh-2026 .sh-opp-resp-item:hover{
  transform:translateX(8px);
  background:rgba(255,255,255,.08);
  border-color:rgba(232,83,14,.30);
}
body.sh-2026 .sh-opp-resp-item:hover::after{height:0}

/* FAQ rows nudge right */
body.sh-2026 .sh-opp-faq details{
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
body.sh-2026 .sh-opp-faq details:hover{transform:translateX(3px)}
body.sh-2026 .sh-opp-faq details[open]{
  border-color:rgba(232,83,14,.25);
  box-shadow:0 15px 35px rgba(7,29,56,.06);
}

@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-opp-card,body.sh-2026 .sh-opp-step,
  body.sh-2026 .sh-opp-card__ico,body.sh-2026 .sh-opp-step b,
  body.sh-2026 .sh-opp-step svg,body.sh-2026 .sh-opp-resp-item,
  body.sh-2026 .sh-opp-faq details{transition:none!important}
  body.sh-2026 .sh-opp-card:hover,body.sh-2026 .sh-opp-step:hover,
  body.sh-2026 .sh-opp-resp-item:hover,body.sh-2026 .sh-opp-faq details:hover,
  body.sh-2026 .sh-opp-card:hover .sh-opp-card__ico,
  body.sh-2026 .sh-opp-step:hover b,
  body.sh-2026 .sh-opp-step:hover svg{transform:none}
}

/* ---- "What we review" band ----
   Sits between the pathway steps and the navy responsible section, both of
   which are light, so this takes a deeper tint with hairlines to separate. */
body.sh-2026 .sh-opp-review{
  background:#EDF1F5;
  border-top:1px solid var(--sh-line);
  border-bottom:1px solid var(--sh-line);
}
/* Cards stay white so they lift off the tinted surface */
body.sh-2026 .sh-opp-review .sh-opp-card{
  background:#fff;box-shadow:0 2px 10px rgba(13,43,69,.04);
}

/* ---- Opportunity hero: background photograph ----
   Matches the treatment on About, Gallery and Contact. */
body.sh-2026 .sh-opp-hero{position:relative;overflow:hidden}
body.sh-2026 .sh-opp-hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.10) saturate(1.14) contrast(1.02);z-index:0;
}
body.sh-2026 .sh-opp-hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(95deg,
      rgba(6,21,36,.90) 0%,
      rgba(7,27,46,.72) 40%,
      rgba(7,27,46,.38) 72%,
      rgba(7,27,46,.26) 100%),
    linear-gradient(to top,rgba(6,21,36,.40) 0%,rgba(6,21,36,0) 45%);
}
body.sh-2026 .sh-opp-hero__glow{z-index:2}
body.sh-2026 .sh-opp-hero__inner{position:relative;z-index:3}
body.sh-2026 .sh-opp-hero h1{text-shadow:0 2px 18px rgba(4,16,29,.45)}
body.sh-2026 .sh-opp-hero p{text-shadow:0 1px 12px rgba(4,16,29,.45)}

/* ---- Opportunity hero is now a single column ---- */
body.sh-2026 .sh-opp-hero__inner{
  display:block;max-width:var(--sh-shell);margin:0 auto;
}
body.sh-2026 .sh-opp-hero__inner > div{max-width:760px}
body.sh-2026 .sh-opp-hero p{max-width:560px}

/* ==========================================================================
   CAREERS PAGE
   Appended; nothing existing is modified. Hover values match the approved
   PartnerFranchise reference used on the opportunity pages.
   ========================================================================== */
body.sh-2026 .sh-careers-hero{
  position:relative;overflow:hidden;min-height:520px;display:flex;align-items:center;
  background:var(--sh-navy-deep);
}
body.sh-2026 .sh-careers-hero > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.10) saturate(1.14) contrast(1.02);
}
body.sh-2026 .sh-careers-hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(95deg,rgba(6,21,36,.90) 0%,rgba(7,27,46,.72) 40%,
      rgba(7,27,46,.38) 72%,rgba(7,27,46,.26) 100%),
    linear-gradient(to top,rgba(6,21,36,.40) 0%,rgba(6,21,36,0) 45%);
}
body.sh-2026 .sh-careers-hero__inner{
  position:relative;z-index:3;padding-top:var(--sh-7);padding-bottom:var(--sh-7);
}
body.sh-2026 .sh-careers-hero h1{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(32px,4.4vw,54px);
  line-height:1.14;color:#fff;margin:var(--sh-3) 0;max-width:16ch;
  text-shadow:0 2px 18px rgba(4,16,29,.45);
}
body.sh-2026 .sh-careers-hero p{
  font-size:16px;line-height:1.9;color:rgba(255,255,255,.82);
  max-width:560px;margin-bottom:var(--sh-5);text-shadow:0 1px 12px rgba(4,16,29,.45);
}
body.sh-2026 .sh-careers-head{text-align:center;max-width:720px;margin:0 auto var(--sh-5)}
body.sh-2026 .sh-careers-head::after{
  content:"";display:block;width:56px;height:3px;background:var(--sh-orange);
  border-radius:2px;margin:var(--sh-3) auto 0;
}
body.sh-2026 .sh-careers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sh-3)}
body.sh-2026 .sh-careers-card{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;padding:var(--sh-4);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-careers-card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--sh-orange),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-careers-card::after{
  content:"";position:absolute;right:-80px;bottom:-80px;width:150px;height:150px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,83,14,.09),transparent 70%);
  transition:transform .5s ease;
}
body.sh-2026 .sh-careers-card:hover{
  transform:translateY(-10px);box-shadow:0 25px 70px rgba(7,29,56,.10);
  border-color:rgba(232,83,14,.22);
}
body.sh-2026 .sh-careers-card:hover::before{transform:scaleX(1)}
body.sh-2026 .sh-careers-card:hover::after{transform:scale(1.6)}
body.sh-2026 .sh-careers-card__ico{
  position:relative;z-index:2;width:55px;height:55px;border-radius:14px;
  background:rgba(232,83,14,.08);color:var(--sh-orange);
  display:flex;align-items:center;justify-content:center;margin-bottom:25px;
  transition:transform .4s ease,background .4s ease;
}
body.sh-2026 .sh-careers-card__ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7}
body.sh-2026 .sh-careers-card:hover .sh-careers-card__ico{
  transform:rotate(-8deg) scale(1.1);background:rgba(232,83,14,.14);
}
body.sh-2026 .sh-careers-card h3{
  position:relative;z-index:2;font-family:var(--sh-head);font-size:19px;font-weight:800;
  color:var(--sh-navy);margin-bottom:10px;
}
body.sh-2026 .sh-careers-card p{
  position:relative;z-index:2;font-size:14.5px;line-height:1.8;color:var(--sh-muted);
}
body.sh-2026 .sh-careers-working{background:var(--sh-off)}
body.sh-2026 .sh-careers-split{
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sh-6);align-items:center;
}
body.sh-2026 .sh-careers-split p{
  font-size:15.5px;line-height:1.9;color:var(--sh-muted);margin-top:var(--sh-3);
}
body.sh-2026 .sh-careers-apply{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-5);box-shadow:0 18px 46px rgba(13,43,69,.08);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-careers-apply::after{
  content:"";position:absolute;right:-60px;top:-60px;width:150px;height:150px;
  border-radius:50%;background:rgba(232,83,14,.09);transition:transform .5s ease;
}
body.sh-2026 .sh-careers-apply:hover{
  transform:translateY(-8px);box-shadow:0 25px 60px rgba(7,29,56,.12);
  border-color:rgba(232,83,14,.22);
}
body.sh-2026 .sh-careers-apply:hover::after{transform:scale(1.5)}
body.sh-2026 .sh-careers-apply__ico{
  position:relative;z-index:2;width:55px;height:55px;border-radius:14px;
  background:rgba(232,83,14,.08);color:var(--sh-orange);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sh-3);
  transition:transform .4s ease,background .4s ease;
}
body.sh-2026 .sh-careers-apply__ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7}
body.sh-2026 .sh-careers-apply:hover .sh-careers-apply__ico{
  transform:rotate(-8deg) scale(1.1);background:rgba(232,83,14,.14);
}
body.sh-2026 .sh-careers-apply h3{
  position:relative;z-index:2;font-family:var(--sh-head);font-size:22px;font-weight:800;
  color:var(--sh-navy);margin-bottom:12px;
}
body.sh-2026 .sh-careers-apply p{
  position:relative;z-index:2;font-size:14.5px;line-height:1.85;
  color:var(--sh-muted);margin:0 0 var(--sh-3);
}
body.sh-2026 .sh-careers-apply a{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sh-head);font-size:13.5px;font-weight:700;
  color:var(--sh-orange);text-decoration:none;
}
body.sh-2026 .sh-careers-apply a svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.sh-2026 .sh-careers-apply a:hover svg{transform:translateX(4px)}

@media (max-width:1000px){
  body.sh-2026 .sh-careers-grid{grid-template-columns:repeat(2,1fr)}
  body.sh-2026 .sh-careers-split{grid-template-columns:1fr;gap:var(--sh-5)}
}
@media (max-width:640px){
  body.sh-2026 .sh-careers-grid{grid-template-columns:1fr}
  body.sh-2026 .sh-careers-hero{min-height:auto}
  body.sh-2026 .sh-careers-hero__inner{padding-top:var(--sh-6);padding-bottom:var(--sh-6)}
  body.sh-2026 .sh-careers-apply{padding:var(--sh-4)}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-careers-card,
  body.sh-2026 .sh-careers-apply,
  body.sh-2026 .sh-careers-card__ico,
  body.sh-2026 .sh-careers-apply__ico{transition:none!important}
  body.sh-2026 .sh-careers-card:hover,
  body.sh-2026 .sh-careers-apply:hover,
  body.sh-2026 .sh-careers-card:hover .sh-careers-card__ico,
  body.sh-2026 .sh-careers-apply:hover .sh-careers-apply__ico{transform:none}
}

/* ---- Careers hero: keep the copy left-aligned ----
   The hero is a flex container, so the shell would otherwise shrink to its
   content and be centred by margin:0 auto. */
body.sh-2026 .sh-careers-hero__inner{
  flex:1 1 100%;width:100%;max-width:var(--sh-shell);
  margin-left:auto;margin-right:auto;text-align:left;
}
body.sh-2026 .sh-careers-hero h1,
body.sh-2026 .sh-careers-hero p,
body.sh-2026 .sh-careers-hero .sh-kicker{text-align:left;margin-left:0}

/* ==========================================================================
   CAREERS — OPENINGS LIST AND JOB DETAIL
   Appended; nothing existing is modified.
   ========================================================================== */
body.sh-2026 .sh-careers-openings{background:#EDF1F5;border-top:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line)}
body.sh-2026 .sh-job-list{display:grid;gap:14px}
body.sh-2026 .sh-job-item{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sh-4);background:#fff;border:1px solid var(--sh-line);
  border-radius:var(--sh-r)!important;padding:var(--sh-4);text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-job-item::before{
  content:"";position:absolute;left:0;top:0;width:4px;height:0;
  background:linear-gradient(to bottom,var(--sh-orange),#FF9B6C);
  transition:height .45s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-job-item:hover{
  transform:translateY(-6px);box-shadow:0 22px 50px rgba(7,29,56,.10);
  border-color:rgba(232,83,14,.25);
}
body.sh-2026 .sh-job-item:hover::before{height:100%}
body.sh-2026 .sh-job-item h3{
  font-family:var(--sh-head);font-size:19px;font-weight:800;color:var(--sh-navy);margin-bottom:6px;
}
body.sh-2026 .sh-job-item p{font-size:14px;line-height:1.75;color:var(--sh-muted);margin-bottom:12px;max-width:70ch}
body.sh-2026 .sh-job-tags{display:flex;flex-wrap:wrap;gap:8px}
body.sh-2026 .sh-job-tags span{
  font-size:12px;color:var(--sh-slate);background:#F2F4F6;
  padding:5px 12px;border-radius:999px;
}
body.sh-2026 .sh-job-item__arrow{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:rgba(232,83,14,.08);color:var(--sh-orange);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s ease,color .3s ease;
}
body.sh-2026 .sh-job-item:hover .sh-job-item__arrow{
  background:var(--sh-orange);color:#fff;transform:translateX(4px);
}

/* Detail layout */
body.sh-2026 .sh-job-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sh-6);align-items:start}
body.sh-2026 .sh-job-lead{font-size:16.5px;line-height:1.9;color:var(--sh-navy);margin-bottom:var(--sh-3)}
body.sh-2026 .sh-job-body{font-size:15px;line-height:1.9;color:var(--sh-muted)}
body.sh-2026 .sh-job-body h2,
body.sh-2026 .sh-job-body h3,
body.sh-2026 .sh-job-body h4{font-family:var(--sh-head);color:var(--sh-navy);margin:var(--sh-4) 0 var(--sh-2)}
body.sh-2026 .sh-job-body ul,body.sh-2026 .sh-job-body ol{margin:var(--sh-2) 0 var(--sh-3) 20px}
body.sh-2026 .sh-job-body li{margin-bottom:8px}
body.sh-2026 .sh-job-body p{margin-bottom:var(--sh-2)}

body.sh-2026 .sh-job-facts,
body.sh-2026 .sh-job-share{
  background:#fff;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-4);margin-bottom:14px;
}
body.sh-2026 .sh-job-facts h3,
body.sh-2026 .sh-job-share h3{
  font-family:var(--sh-head);font-size:16px;font-weight:800;color:var(--sh-navy);margin-bottom:var(--sh-3);
}
body.sh-2026 .sh-job-facts div{
  display:flex;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--sh-line);
}
body.sh-2026 .sh-job-facts div:last-child{border-bottom:0;padding-bottom:0}
body.sh-2026 .sh-job-facts b{
  font-family:var(--sh-head);font-size:11.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--sh-slate);
}
body.sh-2026 .sh-job-facts span{font-size:14px;color:var(--sh-navy);text-align:right}
body.sh-2026 .sh-job-share p{font-size:14px;line-height:1.8;color:var(--sh-muted);margin-bottom:var(--sh-2)}
body.sh-2026 .sh-job-share a{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--sh-head);
  font-size:13px;font-weight:700;color:var(--sh-orange);text-decoration:none;
}

/* Application form */
body.sh-2026 .sh-job-apply{background:var(--sh-off)}
body.sh-2026 .sh-job-apply__intro{margin-bottom:var(--sh-5)}
body.sh-2026 .sh-job-apply__intro .sh-title{margin-top:var(--sh-2)}
body.sh-2026 .sh-job-apply__intro p{font-size:15px;line-height:1.9;color:var(--sh-muted);max-width:720px;margin-top:var(--sh-2)}
body.sh-2026 .sh-job-form-card{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:var(--sh-5);box-shadow:0 18px 46px rgba(13,43,69,.08);
}
body.sh-2026 .sh-job-form-card::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--sh-orange),#FF8A4C);
}
body.sh-2026 .sh-job-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.sh-2026 .sh-job-row--3{grid-template-columns:repeat(3,1fr)}
body.sh-2026 .sh-job-page .sh-field{margin-bottom:16px}
body.sh-2026 .sh-job-page .sh-field label{
  display:block;font-family:var(--sh-head);font-size:12px;font-weight:700;
  color:var(--sh-navy);margin-bottom:8px;
}
body.sh-2026 .sh-field__hint{font-weight:400;color:var(--sh-muted);letter-spacing:0;text-transform:none}
body.sh-2026 .sh-job-page .sh-field input,
body.sh-2026 .sh-job-page .sh-field textarea{
  width:100%;border:1px solid var(--sh-line);border-radius:var(--sh-r)!important;
  padding:13px 15px;font-family:var(--sh-body);font-size:15px;background:#fff;transition:.25s;
}
body.sh-2026 .sh-job-page .sh-field input[type="file"]{padding:11px;background:var(--sh-off);cursor:pointer}
body.sh-2026 .sh-job-page .sh-field input:focus,
body.sh-2026 .sh-job-page .sh-field textarea:focus{
  outline:0;border-color:var(--sh-orange);box-shadow:0 0 0 3px rgba(232,83,14,.11);
}
body.sh-2026 .sh-job-page .sh-field textarea{min-height:130px;resize:vertical}
body.sh-2026 .sh-job-form-card .sh-btn{width:100%;justify-content:center;margin-top:var(--sh-1)}
body.sh-2026 .sh-job-privacy{text-align:center;font-size:12.5px;color:var(--sh-muted);margin-top:12px}
body.sh-2026 .sh-job-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

body.sh-2026 .sh-job-alert{border-radius:var(--sh-r);padding:16px 18px;margin-bottom:var(--sh-3);font-size:14.5px;line-height:1.7}
body.sh-2026 .sh-job-alert b{display:block;margin-bottom:4px;font-family:var(--sh-head)}
body.sh-2026 .sh-job-alert--ok{background:#E6F6EC;border:1px solid #B7E4C7;color:#127A3A}
body.sh-2026 .sh-job-alert--err{background:#FDECEC;border:1px solid #F5C2C0;color:#B42318}
body.sh-2026 .sh-job-alert ul{margin:6px 0 0 18px}

@media (max-width:1000px){
  body.sh-2026 .sh-job-layout{grid-template-columns:1fr;gap:var(--sh-5)}
}
@media (max-width:640px){
  body.sh-2026 .sh-job-row,body.sh-2026 .sh-job-row--3{grid-template-columns:1fr;gap:0}
  body.sh-2026 .sh-job-item{flex-direction:column;align-items:flex-start;gap:var(--sh-3)}
  body.sh-2026 .sh-job-form-card{padding:var(--sh-3)}
}
@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-job-item,body.sh-2026 .sh-job-item__arrow{transition:none!important}
  body.sh-2026 .sh-job-item:hover,body.sh-2026 .sh-job-item:hover .sh-job-item__arrow{transform:none}
}

/* Careers — empty openings state. Appended; nothing existing is modified. */
body.sh-2026 .sh-job-empty{border:1px dashed rgba(11,31,59,.18);border-radius:16px;padding:32px;text-align:center;background:#fff}
body.sh-2026 .sh-job-empty p{margin:0 0 8px;color:#4a5a72}
body.sh-2026 .sh-job-empty p:last-child{margin-bottom:0}
body.sh-2026 .sh-job-empty a{color:#f2652a;font-weight:600}

/* Careers apply card — solid Apply Online button.
   The selector below is written as "a.sh-careers-apply__cta" on purpose.
   The earlier rule "body.sh-2026 .sh-careers-apply a" carries higher
   specificity than a plain class, so it was overriding the white text with
   var(--sh-orange) and painting orange text onto an orange pill. Matching the
   element as well restores the intended colour. */
body.sh-2026 .sh-careers-apply a.sh-careers-apply__cta{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;
  margin-top:6px;padding:14px 30px;border-radius:999px;
  background:var(--sh-orange);color:#fff;
  font-family:var(--sh-head);font-size:14px;font-weight:700;letter-spacing:.2px;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 20px rgba(242,101,42,.24);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background .3s ease;
}
body.sh-2026 .sh-careers-apply a.sh-careers-apply__cta:hover{
  background:#d9541f;color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(242,101,42,.34);
}
body.sh-2026 .sh-careers-apply a.sh-careers-apply__cta:focus-visible{
  outline:3px solid rgba(242,101,42,.45);outline-offset:3px;
}
body.sh-2026 .sh-careers-apply a.sh-careers-apply__cta svg{
  width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;
}
body.sh-2026 .sh-careers-apply a.sh-careers-apply__cta:hover svg{transform:translateX(4px)}

/* Career detail hero — highlight chips under the heading.
   Selectors include the element where they override .sh-careers-hero p/ul
   rules, for the same specificity reason noted on the apply button above. */
body.sh-2026 .sh-careers-hero__chips{
  list-style:none;margin:0 0 var(--sh-5);padding:0;
  display:flex;flex-wrap:wrap;gap:10px;max-width:640px;
}
body.sh-2026 .sh-careers-hero__chips li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--sh-head);font-size:12.5px;font-weight:600;letter-spacing:.2px;
  color:#fff;text-shadow:0 1px 10px rgba(4,16,29,.45);
}
body.sh-2026 .sh-careers-hero__chips li svg{
  width:14px;height:14px;stroke:var(--sh-orange);fill:none;stroke-width:2;flex:none;
}
/* The hero paragraph is longer on the general application page. */
body.sh-2026 .sh-careers-hero p{max-width:620px;line-height:1.8}
@media (max-width:640px){
  body.sh-2026 .sh-careers-hero__chips{gap:8px}
  body.sh-2026 .sh-careers-hero__chips li{padding:8px 13px;font-size:11.5px}
}

/* ==========================================================================
   Homepage card effects — matches the Careers card treatment
   Sweep bar on hover, corner glow, deeper lift, icon response.
   Appended and scoped with body.sh-2026 so it outranks the bare .sh-svc /
   .sh-opp rules earlier in this file rather than fighting them.
   .sh-why .sh-feat is deliberately excluded: it already has its own sweep.
   ========================================================================== */

body.sh-2026 .sh-svc,
body.sh-2026 .sh-opp{
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .35s ease;
}
body.sh-2026 .sh-svc::before,
body.sh-2026 .sh-opp::before{
  content:"";position:absolute;top:0;left:0;z-index:3;width:100%;height:4px;
  background:linear-gradient(90deg,var(--sh-orange),transparent);
  transform:scaleX(0);transform-origin:left;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-svc::after,
body.sh-2026 .sh-opp::after{
  content:"";position:absolute;right:-80px;bottom:-80px;z-index:0;
  width:150px;height:150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,83,14,.09),transparent 70%);
  transition:transform .5s ease;
}
body.sh-2026 .sh-svc:hover,
body.sh-2026 .sh-opp:hover{
  transform:translateY(-10px);
  border-color:rgba(232,83,14,.22);
  box-shadow:0 25px 70px rgba(7,29,56,.10);
}
body.sh-2026 .sh-svc:hover::before,
body.sh-2026 .sh-opp:hover::before{transform:scaleX(1)}
body.sh-2026 .sh-svc:hover::after,
body.sh-2026 .sh-opp:hover::after{transform:scale(1.6)}

/* Card content sits above the corner glow. */
body.sh-2026 .sh-svc__img,
body.sh-2026 .sh-svc__body,
body.sh-2026 .sh-opp > *{position:relative;z-index:2}

/* Icons respond with the card.

   The service icon tile is positioned over the bottom edge of the card
   photo, so its background MUST stay opaque. Tinting it with a translucent
   orange (as this rule first did in theme-79) let the dark image show
   through and the navy icon strokes disappeared against it. The tile stays
   white and only moves; the tint belongs on the icon's own fill layer. */
body.sh-2026 .sh-svc__ico,
body.sh-2026 .sh-opp .sh-ico{
  transition:transform .4s ease,background .4s ease,border-color .35s ease,box-shadow .35s ease;
}
body.sh-2026 .sh-svc:hover .sh-svc__ico,
body.sh-2026 .sh-svc:focus-visible .sh-svc__ico{
  transform:translateY(-3px) scale(1.06);
  background:#fff;
  border-color:rgba(232,83,14,.42);
  box-shadow:0 16px 34px rgba(13,43,69,.22);
}
/* The opportunity icon sits on a white card, so tinting it is safe. */
body.sh-2026 .sh-opp:hover .sh-ico,
body.sh-2026 .sh-opp:focus-visible .sh-ico{
  transform:translateY(-3px) scale(1.06);
  background:rgba(232,83,14,.14);
}

/* Keyboard users get the same affordance as mouse users. */
body.sh-2026 .sh-svc:focus-visible,
body.sh-2026 .sh-opp:focus-visible{
  outline:3px solid rgba(232,83,14,.4);outline-offset:4px;
  transform:translateY(-10px);box-shadow:0 25px 70px rgba(7,29,56,.10);
}
body.sh-2026 .sh-svc:focus-visible::before,
body.sh-2026 .sh-opp:focus-visible::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  body.sh-2026 .sh-svc,body.sh-2026 .sh-opp,
  body.sh-2026 .sh-svc::before,body.sh-2026 .sh-opp::before,
  body.sh-2026 .sh-svc::after,body.sh-2026 .sh-opp::after,
  body.sh-2026 .sh-svc__ico,body.sh-2026 .sh-opp .sh-ico{transition:none!important}
  body.sh-2026 .sh-svc:hover,body.sh-2026 .sh-opp:hover{transform:none}
}

/* ==========================================================================
   THEME-81 — home page, orange-forward light layout
   Approved design: orange top bar, split banner, light sections throughout,
   orange metrics band, deep-orange closing band, light footer.
   Page-specific rules are scoped to body.sh-home so no other page shifts.
   ========================================================================== */

/* --- Orange utility bar. Global: it sits above every page. --- */
body.sh-2026 .sl-topbar{background:var(--sh-orange);color:#fff;border-bottom:0}
body.sh-2026 .sl-topbar a,
body.sh-2026 .sl-topbar__contact a,
body.sh-2026 .sl-topbar__links a{color:#fff}
body.sh-2026 .sl-topbar a:hover{color:#fff;opacity:.82}
body.sh-2026 .sl-topbar svg{stroke:#fff;color:#fff}
body.sh-2026 .sl-topbar .sl-social a{border-color:rgba(255,255,255,.55);color:#fff}
body.sh-2026 .sl-topbar .sl-social a:hover{background:rgba(255,255,255,.2);border-color:#fff}
body.sh-2026 .sl-topbar__merchant{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff}
body.sh-2026 .sl-topbar__merchant:hover{background:rgba(255,255,255,.32)}

/* --- Split banner: copy left, photograph right --- */
body.sh-2026 .sh-hero--split{
  min-height:0;background:linear-gradient(105deg,#fff 54%,var(--sh-orange-soft) 100%);
  border-bottom:1px solid var(--sh-line)
}
body.sh-2026 .sh-hero--split .sh-hero__inner{position:static;padding:0}
body.sh-2026 .sh-hero__grid{
  display:grid;grid-template-columns:1fr 1.02fr;gap:54px;align-items:center;min-height:520px
}
body.sh-2026 .sh-hero__copy{position:relative;padding:58px 0}
body.sh-2026 .sh-hero--split .sh-hero__slide{display:none}
body.sh-2026 .sh-hero--split .sh-hero__slide.is-active{display:block}
body.sh-2026 .sh-hero--split .sh-hero__slide .sh-kicker{color:var(--sh-orange)}
body.sh-2026 .sh-hero--split .sh-hero__slide h1{
  color:var(--sh-navy);font-size:clamp(31px,3.6vw,45px);line-height:1.14;text-shadow:none
}
body.sh-2026 .sh-hero--split .sh-hero__slide p{color:var(--sh-muted);max-width:452px;text-shadow:none}
body.sh-2026 .sh-hero--split .sh-btn-o{color:var(--sh-navy);border-color:var(--sh-line)}
body.sh-2026 .sh-hero--split .sh-btn-o:hover{background:var(--sh-navy);border-color:var(--sh-navy);color:#fff}
body.sh-2026 .sh-hero--split .sh-hero__dots{position:static;margin-top:22px;justify-content:flex-start}
body.sh-2026 .sh-hero--split .sh-hero__dots button{background:#CBD2DA}
body.sh-2026 .sh-hero--split .sh-hero__dots button.is-active{background:var(--sh-orange)}
body.sh-2026 .sh-hero__visual{position:relative;align-self:stretch;display:flex;align-items:center}
body.sh-2026 .sh-hero__shot{display:none;margin:0;width:100%}
body.sh-2026 .sh-hero__shot.is-active{display:block;animation:shHeroShot .55s cubic-bezier(.2,.8,.2,1) both}
body.sh-2026 .sh-hero__shot img{width:100%;height:420px;object-fit:cover;border-radius:18px}
@keyframes shHeroShot{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- Light sections. The dark "Why" panel becomes grey with white cards. --- */
/* The Why Choose panel is markup-identical on Home and About, and this
   lightening was scoped to body.sh-home, so About kept the old dark navy.
   Scoped to body.sh-2026 now, so every page carrying the 2026 styling gets
   the same light treatment. The .sh-dark class stays in the markup: it is
   what these rules override, and removing it would need edits on each page. */
body.sh-2026 .sh-why.sh-dark{background:var(--sh-off)}
body.sh-2026 .sh-why .sh-why__scrim{background:none}
body.sh-2026 .sh-why img{opacity:.06}
body.sh-2026 .sh-why .sh-kicker{color:var(--sh-orange)}
body.sh-2026 .sh-why .sh-title,
body.sh-2026 .sh-why h3{color:var(--sh-navy)}
body.sh-2026 .sh-why p{color:var(--sh-muted)}
body.sh-2026 .sh-why .sh-feat{background:#fff;border-color:var(--sh-line)}
body.sh-2026 .sh-why .sh-feat .sh-ico{background:rgba(232,83,14,.10);border-color:var(--sh-orange-line);color:var(--sh-orange)}
body.sh-2026 .sh-why .sh-feat:hover{box-shadow:0 22px 52px rgba(120,70,40,.13);border-color:var(--sh-orange-line)}

/* --- Metrics strip becomes the mid-page orange band. --- */
body.sh-home .sh-metrics{
  background:linear-gradient(120deg,#C9440A,var(--sh-orange) 52%,#FF7A3D);position:relative;overflow:hidden
}
body.sh-home .sh-metrics::after{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:rgba(255,255,255,.09)
}
body.sh-home .sh-metrics .sh-shell{position:relative;z-index:2}
body.sh-home .sh-metric .sh-ico{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
body.sh-home .sh-metric b,body.sh-home .sh-metric strong{color:#fff}
body.sh-home .sh-metric span,body.sh-home .sh-metric p{color:rgba(255,255,255,.88)}

/* --- Closing band: deeper orange so it reads apart from the metrics band. --- */
/* The closing band appears on About as well, so the deep-orange treatment
   applies to every 2026 page rather than Home alone. */
body.sh-2026 .sh-cta{background:#C9440A}
body.sh-2026 .sh-cta .sh-kicker{color:#FFD9C6}

/* --- Opportunity cards gain a photograph. --- */
body.sh-2026 .sh-opp--photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
body.sh-2026 .sh-opp__media{display:block;height:112px;overflow:hidden}
body.sh-2026 .sh-opp__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
body.sh-2026 .sh-opp--photo:hover .sh-opp__media img{transform:scale(1.08)}
body.sh-2026 .sh-opp--photo > b{margin:18px 18px 0}
body.sh-2026 .sh-opp--photo > .sh-ico{margin:12px 18px 0}
body.sh-2026 .sh-opp--photo > h3{margin:12px 18px 0}
body.sh-2026 .sh-opp--photo > p{margin:8px 18px 0}
body.sh-2026 .sh-opp--photo > em{margin:auto 18px 18px}

/* --- Orange rule under every section title. --- */
body.sh-home .sh-head .sh-title::after,
body.sh-home .sh-why .sh-title::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--sh-orange);margin-top:16px
}

/* --- Light footer with an orange top edge. --- */
body.sh-home .sl-footer{background:var(--sh-off);border-top:4px solid var(--sh-orange);color:var(--sh-muted)}
body.sh-home .sl-footer h4,body.sh-home .sl-footer h3{color:var(--sh-orange)}
body.sh-home .sl-footer a{color:var(--sh-muted)}
body.sh-home .sl-footer a:hover{color:var(--sh-orange)}
body.sh-home .sl-footer p,body.sh-home .sl-footer li{color:var(--sh-muted)}
body.sh-home .sl-footer__bottom{border-top-color:#DDE1E6;color:#8A929B}

/* --- Network band: solid white under the copy, releasing to the photo. --- */
body.sh-home .sh-band > .sh-shell{width:100%;flex:1 1 auto}
body.sh-home .sh-band__scrim{background:linear-gradient(94deg,#fff 0%,#fff 40%,rgba(255,255,255,.94) 52%,rgba(255,255,255,.55) 66%,rgba(255,255,255,.12) 80%,rgba(232,83,14,.22) 100%)}
body.sh-home .sh-band__inner{max-width:540px;margin-right:auto}
body.sh-home .sh-band__inner h2{color:var(--sh-navy)}
body.sh-home .sh-band__inner p{color:#41505f;max-width:470px}
body.sh-home .sh-band .sh-btn{white-space:nowrap}

@media(max-width:1040px){
  body.sh-2026 .sh-hero__grid{grid-template-columns:1fr;gap:32px;min-height:0}
  body.sh-2026 .sh-hero__copy{padding:44px 0 0}
  body.sh-2026 .sh-hero__shot img{height:300px}
  body.sh-home .sh-band__scrim{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.95) 62%,rgba(255,255,255,.72) 100%)}
  body.sh-home .sh-band__inner{max-width:none}
}
@media(max-width:640px){
  body.sh-2026 .sh-hero__shot img{height:230px}
}

/* --- About / intro: photograph left, copy right. --- */
body.sh-2026 .sh-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
body.sh-2026 .sh-intro__img{width:100%;height:394px;object-fit:cover;border-radius:18px}
body.sh-2026 .sh-intro .sh-title::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--sh-orange);margin-top:16px
}
body.sh-2026 .sh-intro p{color:var(--sh-muted);margin-top:18px;max-width:none}
body.sh-2026 .sh-intro__list{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px}
body.sh-2026 .sh-intro__list li{display:flex;align-items:center;gap:11px;font-size:14px;color:#41505f}
body.sh-2026 .sh-intro__list .sh-ico{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange)
}
body.sh-2026 .sh-intro__list .sh-ico svg{width:12px;height:12px;stroke-width:2.6}
@media(max-width:1040px){
  body.sh-2026 .sh-intro__grid{grid-template-columns:1fr;gap:32px}
  body.sh-2026 .sh-intro__img{height:280px}
}

/* --- theme-83 — header sits above the split banner, not over it ---
   body.sh-home previously set position:absolute so the header could float
   over the old full-bleed dark hero. The split banner is light and starts
   with text at the top, so the floating header overlapped it. On the home
   page the header now sits in normal flow like every other page; .is-stuck
   still pins it on scroll. */
body.sh-home .sl-header{
  position:relative;top:auto;
  background:rgba(255,255,255,.97);
  border-bottom-color:rgba(13,43,69,.10);
}

/* --- Banner dots, matching the approved preview --- */
body.sh-2026 .sh-hero--split .sh-hero__dots{gap:8px}
body.sh-2026 .sh-hero--split .sh-hero__dots button{
  width:10px;height:10px;border-radius:99px;background:#CBD2DA;border:0;padding:0;
  transition:width .3s var(--sh-ease),background .3s ease;
}
body.sh-2026 .sh-hero--split .sh-hero__dots button.is-active{width:30px;background:var(--sh-orange)}

/* --- Trust figures under the banner buttons --- */
body.sh-2026 .sh-hero__trust{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:20px;
  border-top:1px solid var(--sh-line);max-width:480px;
}
body.sh-2026 .sh-hero__trust b{display:block;font-family:var(--sh-head);font-size:13.5px;color:var(--sh-navy)}
body.sh-2026 .sh-hero__trust span{font-size:11.5px;color:var(--sh-muted)}

/* --- Floating badge over the banner photograph --- */
body.sh-2026 .sh-hero__badge{
  position:absolute;left:-30px;bottom:36px;z-index:3;display:flex;align-items:center;gap:12px;
  max-width:280px;padding:14px 18px;border-radius:14px;background:#fff;
  border:1px solid var(--sh-orange-line);box-shadow:0 18px 42px rgba(13,43,69,.15);
}
body.sh-2026 .sh-hero__badge .sh-ico{width:40px;height:40px;border-radius:11px;flex:none;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange)}
body.sh-2026 .sh-hero__badge b{display:block;font-family:var(--sh-head);font-size:13px;color:var(--sh-navy);line-height:1.3}
body.sh-2026 .sh-hero__badge span{font-size:11.5px;color:var(--sh-muted)}
@media(max-width:1040px){
  body.sh-2026 .sh-hero__badge{left:16px;bottom:16px}
}
@media(max-width:640px){
  body.sh-2026 .sh-hero__badge{display:none}
}

/* --- theme-84 — metric icons on the orange band ---
   The metric icon is a bare <svg> with no wrapper, and the base rule paints
   it stroke:var(--sh-orange). That was correct on the old navy band; on the
   orange band it was orange on orange and effectively invisible. White
   stroke, plus a translucent tile so it reads as a badge like the preview. */
body.sh-home .sh-metric svg{
  stroke:#fff;width:24px;height:24px;box-sizing:content-box;
  padding:11px;border-radius:12px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.38);
  transition:transform .35s var(--sh-ease),background .3s ease;
}
body.sh-home .sh-metric:hover svg{transform:translateY(-3px) scale(1.05);background:rgba(255,255,255,.26)}
/* The old label tint was tuned for navy and reads too faint on orange. */
body.sh-home .sh-metric small{color:rgba(255,255,255,.9)}
body.sh-home .sh-metric b{margin-top:14px}

/* --- theme-85 — banner breathing room when the columns stack ---
   Below 1040px the photograph drops under the copy and became the last
   thing in the section, so it sat flush against the section edge with no
   gap before the next section. The grid now carries bottom padding, and
   the photo keeps its rounded corners clear of the edge. */
@media(max-width:1040px){
  body.sh-2026 .sh-hero__grid{padding-bottom:48px}
  body.sh-2026 .sh-hero__visual{padding-bottom:4px}
}
@media(max-width:640px){
  body.sh-2026 .sh-hero__grid{padding-bottom:36px;gap:26px}
  body.sh-2026 .sh-hero__copy{padding-top:34px}
}

/* ==========================================================================
   THEME-86 — banner slides all occupy the same height
   Only one slide has a two-line heading ("Bulk SMS & Communication"), which
   made its copy column 51px taller than the rest. With the columns centred,
   that pushed the photograph down about 26px and moved the section's bottom
   edge by the full 51px on every rotation.
   Every slide now sits in the SAME grid cell and inactive slides are hidden
   with visibility rather than display, so they still occupy space. The row is
   therefore always as tall as the tallest slide. No fixed pixel heights, so
   this keeps working if the CMS text gets longer or shorter.
   Appended only — the earlier rules above are left in place and overridden
   by source order, nothing was removed.
   ========================================================================== */

/* Copy column: slides stack in row 1, trust in row 2, dots in row 3. */
body.sh-2026 .sh-hero--split .sh-hero__copy{
  display:grid;grid-template-rows:auto auto auto;align-content:center;
}
body.sh-2026 .sh-hero--split .sh-hero__slide{
  display:block;grid-column:1;grid-row:1;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .45s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-hero--split .sh-hero__slide.is-active{
  visibility:visible;opacity:1;pointer-events:auto;
}
body.sh-2026 .sh-hero--split .sh-hero__trust{grid-column:1;grid-row:2}
body.sh-2026 .sh-hero--split .sh-hero__dots{grid-column:1;grid-row:3}

/* Photo column: same stacking, so the image never re-flows either. */
body.sh-2026 .sh-hero--split .sh-hero__visual{display:grid;align-content:center}
body.sh-2026 .sh-hero--split .sh-hero__shot{
  display:block;grid-column:1;grid-row:1;margin:0;width:100%;
  visibility:hidden;opacity:0;animation:none;
  transition:opacity .45s cubic-bezier(.2,.8,.2,1);
}
body.sh-2026 .sh-hero--split .sh-hero__shot.is-active{visibility:visible;opacity:1}

/* Motion off means switch instantly rather than cross-fade. */
@media(prefers-reduced-motion:reduce){
  body.sh-2026 .sh-hero--split .sh-hero__slide,
  body.sh-2026 .sh-hero--split .sh-hero__shot{transition:none}
}

/* ==========================================================================
   THEME-87 — top bar legibility
   The base rules for the old dark bar are still winning on specificity, so
   the orange bar was inheriting them:

     .sl-topbar a:not(.sl-portal-login__menu a){color:rgba(255,255,255,.62)}
     .sl-topbar svg:not(.sl-social__link svg){color:var(--sh-orange)}

   :not() carries the specificity of its argument, so those selectors score
   higher than the plain ones I wrote in theme-81 and my white never applied.
   Result: text at 62% white and icons in orange-on-orange.

   These rules repeat the same :not() selectors so they match on specificity
   and win on source order. Appended only; nothing earlier was removed.
   ========================================================================== */

/* Text at full white, and a touch larger and heavier for a coloured bar. */
body.sh-2026 .sl-topbar{font-size:13.5px}
body.sh-2026 .sl-topbar a:not(.sl-portal-login__menu a),
body.sh-2026 .sl-topbar button:not(.sl-portal-login__menu button){
  color:#fff;font-weight:600;letter-spacing:.15px;
}
body.sh-2026 .sl-topbar a:not(.sl-portal-login__menu a):hover,
body.sh-2026 .sl-topbar button:not(.sl-portal-login__menu button):hover{
  color:#fff;opacity:.82;
}

/* Icons white, not orange. Slightly thicker so they hold up on orange. */
body.sh-2026 .sl-topbar svg:not(.sl-social__link svg){
  color:#fff;stroke:#fff;stroke-width:2;
}

/* Social buttons: brighter outline and a solid hover, so they read as
   buttons rather than faint outlines. */
body.sh-2026 .sl-topbar .sl-social__link{
  border-color:rgba(255,255,255,.8);color:#fff;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
body.sh-2026 .sl-topbar .sl-social__link:hover{
  background:#fff;border-color:#fff;color:var(--sh-orange);transform:translateY(-1px);
}
body.sh-2026 .sl-topbar .sl-social__link svg{stroke-width:1.9}

/* Portal Logins: solid white pill with orange text. It is the one action in
   this bar, and white-on-orange is the strongest contrast available. */
/* Four classes here on purpose: the white-text rule above scores three
   classes via its :not(), so a lower-scoring selector would lose and the
   label would render white on a white pill, i.e. invisible. */
body.sh-2026 .sl-topbar .sl-topbar__merchant.sl-portal-login__toggle,
body.sh-2026 .sl-topbar .sl-topbar__merchant.sl-portal-login__toggle:not(.sl-portal-login__menu button){
  background:#fff;border:1px solid #fff;color:var(--sh-orange);
  font-weight:700;box-shadow:0 2px 10px rgba(90,35,10,.16);
}
body.sh-2026 .sl-topbar .sl-topbar__merchant.sl-portal-login__toggle:hover{
  background:#FFF1E9;border-color:#FFF1E9;color:var(--sh-orange6,#C9440A);opacity:1;
}
body.sh-2026 .sl-topbar .sl-portal-login__toggle svg,
body.sh-2026 .sl-topbar .sl-portal-login__toggle svg *{
  color:var(--sh-orange)!important;stroke:var(--sh-orange)!important;
}
body.sh-2026 .sl-topbar .sl-portal-login__toggle svg [fill]:not([fill="none"]){fill:var(--sh-orange)!important}

/* Keyboard focus has to be visible against orange too. */
body.sh-2026 .sl-topbar a:focus-visible,
body.sh-2026 .sl-topbar button:focus-visible{
  outline:2px solid #fff;outline-offset:3px;border-radius:6px;
}

/* --- theme-88 — Portal Logins label was invisible ---
   homepage-redesign.css (loaded before this file) carries:

     .sl-topbar__merchant{ background:var(--sl-orange); color:#fff!important }

   The !important on the colour beats any normal rule regardless of
   specificity, so my white pill applied but its label stayed white — white
   on white. The background had no !important, which is why the pill turned
   white while the text vanished.

   Matching !important here wins, because when two declarations are both
   !important the later stylesheet takes it, and shawn-2026.css loads last. */
body.sh-2026 .sl-topbar .sl-topbar__merchant.sl-portal-login__toggle{
  color:var(--sh-orange)!important;
}
body.sh-2026 .sl-topbar .sl-topbar__merchant.sl-portal-login__toggle:hover{
  color:#C9440A!important;
}
/* The chevron is drawn with currentColor borders, so it follows the label. */
body.sh-2026 .sl-topbar .sl-topbar__merchant.sl-portal-login__toggle .sl-portal-login__chevron{
  border-color:currentColor;
}

/* --- theme-89 — animation strip above the footer, all pages --- */
.sl-footer-anim{
  display:block;width:100%;line-height:0;background:#DFF0F2;overflow:hidden;
}
.sl-footer-anim__video{
  display:block;width:100%;height:auto;object-fit:cover;
  /* The source is 1920x450. aspect-ratio holds the space before the file
     loads, so the footer does not jump up when it arrives. */
  aspect-ratio:1920/450;
}
@media(max-width:760px){
  /* On a narrow screen the full strip would be only a few pixels tall, so it
     is cropped to a workable height with the rider kept in view. */
  .sl-footer-anim__video{aspect-ratio:auto;height:120px;object-fit:cover;object-position:left center}
}
@media(max-width:480px){
  .sl-footer-anim__video{height:96px}
}

/* --- theme-90 — footer strip renders at its native size ---
   The first encode was scaled down to 1600x376 and then stretched back up to
   full browser width, which softened it further on top of the compression.
   The file is now native 1920x450, so on screens up to 1920 it is displayed
   at or below 1:1 and never upscaled. Sharpest possible rendering of the
   frames it contains. */
.sl-footer-anim__video{
  aspect-ratio:1920/450;
  image-rendering:auto;
}
/* Above 1920 the strip would begin to upscale, so it is capped and centred
   on very wide monitors rather than stretched. */
@media(min-width:1921px){
  .sl-footer-anim{display:flex;justify-content:center;background:#DFF0F2}
  .sl-footer-anim__video{width:1920px;max-width:100%}
}

/* ==========================================================================
   THEME-90 — partner section over a photograph with an orange wash
   Applies only when the section has an image, i.e. when it carries
   .sl-partners-section--photo. Every other use is untouched.
   NO DARKENING ANYWHERE: no multiply blend, no dark drop shadows. The photo
   is brightened first, then a pure orange wash goes over it.
   ========================================================================== */
.sl-partners-section--photo{position:relative;overflow:hidden}
.sl-partners-bg{position:absolute;inset:0;z-index:0}
.sl-partners-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1.22) saturate(.86) contrast(.94);
}
.sl-partners-bg__wash,.sl-partners-bg__tint{position:absolute;inset:0;display:block}
.sl-partners-bg__wash{background:var(--sh-orange);opacity:.86}
.sl-partners-bg__tint{
  background:linear-gradient(120deg,rgba(232,83,14,.55),rgba(255,122,61,.30) 55%,rgba(255,168,120,.34));
}
.sl-partners-section--photo.is-soft .sl-partners-bg img{filter:brightness(1.3) saturate(.8) contrast(.92)}
.sl-partners-section--photo.is-soft .sl-partners-bg__wash{opacity:.68}
.sl-partners-section--photo.is-soft .sl-partners-bg__tint{
  background:linear-gradient(120deg,rgba(232,83,14,.36),rgba(255,122,61,.20) 55%,rgba(255,168,120,.24));
}
.sl-partners-section--photo.is-strong .sl-partners-bg__wash{opacity:.94}
.sl-partners-section--photo.is-strong .sl-partners-bg__tint{
  background:linear-gradient(120deg,rgba(232,83,14,.72),rgba(255,122,61,.5) 55%,rgba(255,168,120,.5));
}
/* The partner markup uses .sl-shell (1440px). Every other section on the
   2026 home page uses .sh-shell (1280px), which is why this heading sat
   further left than the rest. Match the narrower container. */
body.sh-2026 .sl-partners-section--photo > .sl-shell{
  position:relative;z-index:2;
  width:100%;max-width:var(--sh-shell);margin-inline:auto;padding:0 var(--sh-4);
}

/* Heading turns white over the wash.
   body.sh-2026 is required on these: the base rules at line ~646 are already
   body-scoped, so a plain .sl-partners-section--photo selector loses to them
   and the heading would stay navy over the orange. */
body.sh-2026 .sl-partners-section--photo .sl-section-label{color:#FFDCCB}
body.sh-2026 .sl-partners-section--photo .sl-section-heading h2{color:#fff}
body.sh-2026 .sl-partners-section--photo .sl-section-heading p{color:rgba(255,255,255,.92)}
body.sh-2026 .sl-partners-section--photo .sl-section-heading h2::after{background:#fff;opacity:.9}

/* Logo cards: white ring instead of a drop shadow, so nothing is darkened. */
body.sh-2026 .sl-partners-section--photo .sl-partner-card{
  background:#fff;border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 4px rgba(255,255,255,.18);
  transition:transform .35s var(--sh-ease),box-shadow .35s ease;
}
body.sh-2026 .sl-partners-section--photo .sl-partner-card:hover{
  transform:translateY(-5px);box-shadow:0 0 0 6px rgba(255,255,255,.3);
}

/* Arrows and hint read against orange. */
body.sh-2026 .sl-partners-section--photo .sl-partner-controls button{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);color:#fff;
}
body.sh-2026 .sl-partners-section--photo .sl-partner-controls button:hover{
  background:#fff;color:var(--sh-orange);border-color:#fff;
}
body.sh-2026 .sl-partners-section--photo .sl-partner-controls button svg{stroke:currentColor}
body.sh-2026 .sl-partners-section--photo .sl-partner-scroll-hint small{color:rgba(255,255,255,.85)}
body.sh-2026 .sl-partners-section--photo .sl-partner-scroll-hint span{background:rgba(255,255,255,.5)}

/* No edge fade: the client does not want any blur or soft-edge effect. */
body.sh-2026 .sl-partners-section--photo .sl-partner-track{
  -webkit-mask-image:none;mask-image:none;
}

/* Seamless continuous marquee.

   The list is rendered twice and the strip slides by exactly -50%, which
   lands on an identical frame, so the loop has no jump and never resets
   visibly.

   IMPORTANT: the cards use margin-right, NOT flex gap. With gap, the track
   width is 14 cards plus 13 gaps, so half of it is one card set plus HALF a
   gap — the strip lands slightly off and the seam shows every cycle. With
   margin-right each item is card+gap wide, 14 identical units, and -50% is
   exactly seven of them.

   SPEED: --sl-partner-duration. HIGHER IS SLOWER. The strip is 7 x 206px =
   1442px, so pace is 1442 / duration px per second:

        60s -> 24 px/s   a logo passes every  9s   fast
        90s -> 16 px/s   a logo passes every 13s   CURRENT
       120s -> 12 px/s   a logo passes every 17s   previous setting
       300s ->  5 px/s   a logo passes every 43s   very slow */
body.sh-2026 .sl-partners-section--photo{--sl-partner-duration:90s}
body.sh-2026 .sl-partner-marquee{
  position:relative;z-index:2;width:100%;overflow:hidden;padding:6px 0 12px;
}
body.sh-2026 .sl-partner-marquee__track{
  display:flex;flex-wrap:nowrap;gap:0;width:max-content;
  transition:none;
  animation:slPartnerLoop var(--sl-partner-duration) linear infinite;
  will-change:transform;
}
@keyframes slPartnerLoop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
body.sh-2026 .sl-partner-marquee:hover .sl-partner-marquee__track,
body.sh-2026 .sl-partner-marquee:focus-within .sl-partner-marquee__track{
  animation-play-state:paused;
}
body.sh-2026 .sl-partner-marquee .sl-partner-card{
  flex:0 0 auto;width:190px;height:100px;margin-right:16px;
}
@media(max-width:640px){
  body.sh-2026 .sl-partners-section--photo{--sl-partner-duration:60s}
  body.sh-2026 .sl-partner-marquee .sl-partner-card{width:150px;height:86px;margin-right:14px}
}
@media(prefers-reduced-motion:reduce){
  body.sh-2026 .sl-partner-marquee__track{animation:none}
  body.sh-2026 .sl-partner-marquee{overflow-x:auto}
}

/* ==========================================================================
   THEME-97 — no dark overlay on any home page image
   Audited every rule that paints over a photograph on the home page. Three
   were still laying navy over the image, plus two dark drop shadows.
   All scoped to body.sh-home, so inner pages are untouched until you ask.
   ========================================================================== */

/* 1 · Service card photos carried a navy gradient at 72% up the frame.
      Replaced with a light warm wash: it still separates the card body from
      the photo, without dimming it. */
body.sh-home .sh-svc__img::after{
  background:linear-gradient(to top,rgba(255,255,255,.42),rgba(255,246,241,.10) 55%,transparent);
}
/* The number sat white on the dark gradient. It needs a solid chip now. */
body.sh-home .sh-svc__num{
  color:var(--sh-orange);text-shadow:none;
  background:rgba(255,255,255,.92);border:1px solid var(--sh-orange-line);
  padding:3px 9px;border-radius:8px;line-height:1.4;
}

/* 2 · Mosaic tiles had navy running up from the base behind the caption.
      Now a white gradient, with the caption in navy text on top of it. */
body.sh-home .sh-mosaic figure::after{
  background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,.55) 38%,transparent 68%);
}
body.sh-home .sh-mosaic figcaption{
  color:var(--sh-navy);text-shadow:none;
}
body.sh-home .sh-mosaic img{filter:saturate(.95) brightness(1.04)}
body.sh-home .sh-mosaic figure:hover img{filter:saturate(1.05) brightness(1.06)}

/* 3 · Photo band behind "One network. Every solution." keeps its light wash,
      and the photo itself is lifted rather than left flat. */
body.sh-home .sh-band img{filter:brightness(1.12) saturate(.92)}

/* 4 · Dark drop shadows on imagery and image-bearing cards. Every one of
      these was a navy-tinted shadow; they are warm and much lighter now. */
body.sh-home .sh-svc__ico{box-shadow:0 10px 24px rgba(120,70,40,.14)}
body.sh-home .sh-svc:hover,
body.sh-home .sh-svc:focus-visible{box-shadow:0 22px 52px rgba(120,70,40,.13)}
body.sh-home .sh-opp:hover,
body.sh-home .sh-opp:focus-visible{box-shadow:0 22px 52px rgba(120,70,40,.13)}
body.sh-home .sh-intro__img,
body.sh-home .sh-hero__shot img{box-shadow:0 18px 40px rgba(120,70,40,.12)}
body.sh-home .sh-hero__badge{box-shadow:0 16px 36px rgba(120,70,40,.16)}

/* --- theme-98 — mosaic tiles: no wash over the photograph at all ---
   theme-97 swapped the navy gradient for a white one, which still veiled the
   lower third of each image. The overlay is now removed entirely and the
   caption sits on its own small chip, so the photograph is fully visible. */
body.sh-home .sh-mosaic figure::after{background:none;content:none}
body.sh-home .sh-mosaic figcaption{
  left:18px;bottom:18px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(232,83,14,.22);
  border-radius:10px;padding:8px 14px;
  color:var(--sh-navy);letter-spacing:1.2px;font-size:11.5px;
  box-shadow:0 6px 18px rgba(120,70,40,.14);
  transition:background .3s ease,transform .35s var(--sh-ease);
}
body.sh-home .sh-mosaic figure:hover figcaption{
  background:#fff;transform:translateY(-3px);
}

/* --- theme-99 — About section image ---
   The new artwork is a 4:3 illustration of the delivery network. The slot was
   a fixed 394px tall with object-fit:cover, which at this column width would
   have cropped roughly 12% off the top and bottom — taking Kashmir off the
   top of the map and the southern tip off the bottom.
   Height now derives from the width at 4:3, so the whole map is always shown
   with no cropping at any screen size.
   The illustration sits on white, so it needs a frame of its own or it bleeds
   into the section: a soft warm tint and a light border give it an edge. */
body.sh-2026 .sh-intro__img{
  height:auto;aspect-ratio:4/3;object-fit:contain;
  /* No frame. The warm tint and orange hairline added in theme-99 read as a
     pink border around the artwork, so they are gone. The artwork's own white
     background sits directly on the section. */
  background:transparent;border:0;padding:0;
}
@media(max-width:1040px){
  body.sh-2026 .sh-intro__img{height:auto;aspect-ratio:4/3}
}

/* --- theme-106 — Our Network band --- */
/* Our Network band: full-bleed artwork with the copy over it.

   The overlay is a single wide gradient with closely spaced stops, so there
   is no visible edge where it ends — that hard boundary is what read as a
   "white patch" in an earlier attempt. It holds enough white across the copy
   column for the text to pass contrast checks, then releases gradually so the
   truck, road and route pins stay clearly visible. */
body.sh-home .sh-band{background:#fff}
body.sh-home .sh-band img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;filter:none;
}
body.sh-home .sh-band__scrim{
  background:linear-gradient(96deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.95) 18%,
    rgba(255,255,255,.90) 30%,
    rgba(255,255,255,.80) 40%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.42) 60%,
    rgba(255,255,255,.24) 70%,
    rgba(255,255,255,.10) 80%,
    rgba(255,255,255,.02) 90%,
    rgba(255,255,255,0) 100%);
}
body.sh-home .sh-band__inner{max-width:470px;padding-right:32px}
body.sh-home .sh-band__inner p{max-width:440px}
body.sh-home .sh-band__inner::before{content:none}

@media(max-width:1040px){
  /* Stacked columns: a horizontal fade would leave the text over the truck,
     so the overlay runs top to bottom instead. */
  body.sh-home .sh-band__scrim{
    background:linear-gradient(180deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.90) 45%,
      rgba(255,255,255,.72) 75%,
      rgba(255,255,255,.55) 100%);
  }
  body.sh-home .sh-band__inner{max-width:none;padding-right:0}
}


/* ==========================================================================
   THEME-116 — Own Courier Point page
   The page reuses the established site classes: sh-sec, sh-shell, sh-kicker,
   sh-title, sh-intro__grid, sh-svc, sh-opp, sh-ab-hero and the partner
   section, so spacing and type match Home and About. Only what is genuinely
   new to this page is defined here, scoped to .sh-ocp so nothing else moves.
   ========================================================================== */

/* Banner — the About hero with a breadcrumb line added. */
body.sh-2026 .sh-ocp-crumb{font-size:12.5px;color:rgba(255,255,255,.72);margin:0 0 14px}
body.sh-2026 .sh-ocp-crumb a{color:rgba(255,255,255,.72)}
body.sh-2026 .sh-ocp-crumb a:hover{color:#fff}
body.sh-2026 .sh-ocp-crumb b{color:#FFDCCB;font-weight:700}

/* Centred section heading, where there is no side column.
   .sh-head carries gap:var(--sh-5), 48px, meant to separate a heading block
   from a paragraph sitting BESIDE it. Stacking it turns that into a 96px
   vertical gap once the paragraph's own margin is added, which is why the
   subtext floated far below the heading. The gap is removed here and the
   spacing set deliberately instead. */
body.sh-2026 .sh-ocp .sh-ocp-head{
  flex-direction:column;align-items:center;text-align:center;
  gap:0;margin-bottom:var(--sh-5);
}
body.sh-2026 .sh-ocp .sh-ocp-head .sh-title{max-width:22ch;margin:12px auto 0}
body.sh-2026 .sh-ocp .sh-ocp-head p{max-width:62ch;margin:14px auto 0}

/* Numbered process cards, built on the service card shell. */
body.sh-2026 .sh-ocp-steps{grid-template-columns:repeat(4,1fr)}
body.sh-2026 .sh-ocp-step .sh-svc__body{padding-top:26px}
body.sh-2026 .sh-ocp-step__n{position:absolute;top:16px;right:20px;font-family:var(--sh-head);
  font-weight:800;font-size:26px;color:rgba(232,83,14,.20);line-height:1}
body.sh-2026 .sh-ocp-step__ico{position:static;margin-bottom:16px;background:rgba(232,83,14,.10);
  border:1px solid var(--sh-orange-line);color:var(--sh-orange)}

/* Operations — three cards across, no photograph, as the section was before.
   Deliberately NOT .sh-feat: that class is styled for the dark Why Choose
   section and its white text would be invisible on this light background. */
body.sh-2026 .sh-ocp-op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
body.sh-2026 .sh-ocp-op{background:#fff;border:1px solid var(--sh-line);border-radius:18px;padding:30px 26px;
  transition:transform .4s var(--sh-ease),box-shadow .4s ease,border-color .3s ease}
body.sh-2026 .sh-ocp-op:hover{transform:translateY(-8px);box-shadow:0 22px 52px rgba(120,70,40,.12);
  border-color:var(--sh-orange-line)}
body.sh-2026 .sh-ocp-op:hover .sh-ico{transform:translateY(-3px) scale(1.05);background:rgba(232,83,14,.16)}
body.sh-2026 .sh-ocp-op h3{font-family:var(--sh-head);font-size:18px;color:var(--sh-navy);margin:18px 0 10px}
body.sh-2026 .sh-ocp-op p{font-size:14px;color:var(--sh-muted);margin:0}

/* Bullet lists. The site marker is an orange dot with a soft ring, used by
   the courier, item and opportunity grids elsewhere. Matched here so this
   page reads the same as the rest of the site. */
body.sh-2026 .sh-ocp-ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
body.sh-2026 .sh-ocp-ticks li{position:relative;padding-left:22px;font-size:13.5px;
  line-height:1.6;color:#52647a}
body.sh-2026 .sh-ocp-ticks li::before{content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;border-radius:50%;background:var(--sh-orange);
  box-shadow:0 0 0 4px rgba(232,83,14,.10)}
body.sh-2026 .sh-ocp-list li b{color:var(--sh-navy)}

/* Business opportunity. */
body.sh-2026 .sh-ocp-biz-top{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  align-items:center;margin-bottom:44px}
body.sh-2026 .sh-ocp-biz__img{width:100%;height:420px;object-fit:cover;border-radius:18px;
  box-shadow:0 18px 44px rgba(120,70,40,.10)}
body.sh-2026 .sh-ocp-biz-grid{grid-template-columns:repeat(4,1fr)}
body.sh-2026 .sh-ocp-lede{color:var(--sh-muted);font-size:15px;margin:18px 0 0;max-width:56ch}

/* .sh-ico takes its size from its parent elsewhere on the site, so on this
   page it must be sized explicitly or it stretches to the card width. */
body.sh-2026 .sh-ocp .sh-ico{width:52px;height:52px;border-radius:14px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange);
  transition:transform .35s var(--sh-ease),background .3s ease}
body.sh-2026 .sh-ocp .sh-ico svg{width:23px;height:23px;stroke-width:1.8}
body.sh-2026 .sh-ocp .sh-intro__list .sh-ico{width:22px;height:22px;border-radius:50%}
body.sh-2026 .sh-ocp .sh-intro__list .sh-ico svg{width:12px;height:12px;stroke-width:2.6}

/* This page's icons are stroke-based; some base rules fill icon SVGs, which
   would render them as solid blocks. */
body.sh-2026 .sh-ocp .sh-ico svg,
body.sh-2026 .sh-ocp .sh-svc__ico svg{fill:none;stroke:currentColor}

@media(max-width:1040px){
  body.sh-2026 .sh-ocp-biz-top{grid-template-columns:1fr;gap:32px}
  body.sh-2026 .sh-ocp-steps,body.sh-2026 .sh-ocp-biz-grid,
  body.sh-2026 .sh-ocp-op-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body.sh-2026 .sh-ocp-steps,body.sh-2026 .sh-ocp-biz-grid,
  body.sh-2026 .sh-ocp-op-grid{grid-template-columns:1fr}
  body.sh-2026 .sh-ocp-biz__img{height:240px}
}


/* The partner band is a .sl-content-section, which pads 96/64 rather than the
   96/96 every .sh-sec uses, so the join below it read tighter than the one
   above. Applied to every page that shows the band, not just one, so the
   section is identical wherever it appears. */
body.sh-2026 .sl-partners-section--photo{padding-bottom:var(--sh-7)}


/* --- theme-123 — one grey tone for every light section ---
   The team and reviews panels carried their own grey, a different tone from
   --sh-off, so "light" sections did not all match. Unified here. The
   alternation itself is set explicitly in each page's markup rather than by
   sibling rules, which kept moving the collision rather than removing it. */
/* These two carried a hard-coded grey of their own, so they stayed grey
   whatever class the section had. Their colour now follows .sh-sec--off like
   every other section, which is what makes the alternation controllable. */
body.sh-2026 .sh-team.sh-sec--off,
body.sh-2026 .sh-ab-reviews.sh-sec--off{background:var(--sh-off)}
body.sh-2026 .sh-team:not(.sh-sec--off),
body.sh-2026 .sh-ab-reviews:not(.sh-sec--off){background:#fff}

/* The Why Choose panel is grey on the Home page, where its neighbours are
   white. On About it sits between two grey sections, so it renders white
   there to keep the page alternating. Same panel, same components, only the
   surface colour differs so two sections never merge. */
body.sh-2026 .sh-ab-why-light.sh-why.sh-dark{background:#fff}


/* --- theme-126 — About ecosystem: heading above, columns level ---
   The heading used to sit inside the right-hand column, so the photograph on
   the left began level with the heading while the cards began far below it,
   and the two columns read as unaligned.
   The heading is now a full-width block above the grid, so the image and the
   cards start on exactly the same line by construction rather than by
   alignment rules that can be overridden. */
body.sh-2026 .sh-ab-eco__head{max-width:60ch;margin-bottom:var(--sh-5)}
body.sh-2026 .sh-ab-eco__head .sh-title{margin-top:12px}
body.sh-2026 .sh-ab-eco__head p{color:var(--sh-muted);font-size:15px;margin:16px 0 0;max-width:58ch}
/* Both columns start at the top edge, and the cards fill the height evenly. */
body.sh-2026 .sh-ab-eco{align-items:start}
body.sh-2026 .sh-ab-eco__boxes{margin-top:0}

/* .sh-ico stretches to its container unless sized. Same fix as the courier
   page: set it explicitly wherever a new parent introduces it. */
body.sh-2026 .sh-ab-eco__box .sh-ico{
  width:46px;height:46px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange);
}
body.sh-2026 .sh-ab-eco__box .sh-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}


/* --- theme-127 — About intro: bigger image, no overlay card ---
   The dark card that sat over the photograph is gone. Its content is not:
   the same heading, text and icon now sit in the left column as a row, so
   nothing was removed from the page.
   With the card gone the photograph no longer needs to leave room for it,
   so it takes more of the row and is shown larger. */
/* Even 50/50 columns, and the heading now sits full width above them, so the
   paragraph on the left and the photograph on the right start on the same
   line. Same arrangement as the ecosystem section below. */
body.sh-2026 .sh-ab-intro{grid-template-columns:1fr 1fr;align-items:start}
body.sh-2026 .sh-ab-intro__head{max-width:60ch;margin-bottom:var(--sh-5)}
body.sh-2026 .sh-ab-intro__head .sh-title{margin-top:12px}
body.sh-2026 .sh-ab-intro__text:first-child{margin-top:0}
body.sh-2026 .sh-ab-intro__media{padding-left:0}
body.sh-2026 .sh-ab-intro__media img{aspect-ratio:4/3}

/* The relocated highlight, styled as a row rather than a panel. */
body.sh-2026 .sh-ab-intro__point{
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  margin-top:var(--sh-4);padding:22px;border-radius:var(--sh-r);
  background:var(--sh-off);border:1px solid var(--sh-line);
}
body.sh-2026 .sh-ab-intro__point .sh-ico{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange);
}
body.sh-2026 .sh-ab-intro__point .sh-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
body.sh-2026 .sh-ab-intro__point h4{
  font-family:var(--sh-head);font-size:17px;font-weight:800;color:var(--sh-navy);margin:0 0 6px;
}
body.sh-2026 .sh-ab-intro__point p{font-size:14px;line-height:1.7;color:var(--sh-muted);margin:0}

@media (max-width:960px){
  body.sh-2026 .sh-ab-intro{grid-template-columns:1fr}
  body.sh-2026 .sh-ab-intro__media img{aspect-ratio:16/10}
}


/* --- theme-129 — photographic banner on the service pages ---
   The service pages used slp_page_hero(), an icon band with no image slot,
   so they looked unlike About and the rest of the 2026 layout. They now use
   the same banner, so these rules only need to cover the breadcrumb and a
   sensible minimum height. */
body.sh-2026 .sh-svc-hero{min-height:460px}
body.sh-2026 .sh-svc-crumb{font-size:12.5px;color:rgba(255,255,255,.72);margin:0 0 14px}
body.sh-2026 .sh-svc-crumb a{color:rgba(255,255,255,.72)}
body.sh-2026 .sh-svc-crumb a:hover{color:#fff}
body.sh-2026 .sh-svc-crumb b{color:#FFDCCB;font-weight:700}
/* Without a photograph the scrim alone would be a flat navy panel, so a
   brand gradient sits behind it as the fallback surface. */
body.sh-2026 .sh-svc-hero{background:linear-gradient(120deg,var(--sh-navy-deep),var(--sh-navy) 60%,#1d4468)}
@media(max-width:640px){
  body.sh-2026 .sh-svc-hero{min-height:0}
}


/* --- theme-130 — services listing page brought onto the 2026 layout ---
   The page now carries the sh-2026 body class for its banner, which also
   brings the 2026 type and spacing to the sections below it. These rules
   settle those sections: the old sl-content-section rhythm alternates
   correctly, the cards match the home page service cards, and the section
   headings use the same kicker and title treatment as everywhere else.
   Scoped to .sh-services so no other page using these classes is affected. */
body.sh-2026 .sh-services .sl-content-section{padding:var(--sh-7) 0}
body.sh-2026 .sh-services .sl-content-section--soft{background:var(--sh-off)}
body.sh-2026 .sh-services .sl-shell{max-width:var(--sh-shell);padding:0 var(--sh-4)}

/* Section headings: same kicker, title and rule as the rest of the site. */
body.sh-2026 .sh-services .sl-section-heading{max-width:60ch;margin-bottom:var(--sh-5)}
body.sh-2026 .sh-services .sl-section-label{
  font-family:var(--sh-head);font-size:11.5px;font-weight:700;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--sh-orange);display:block;
}
body.sh-2026 .sh-services .sl-section-heading h2{
  font-family:var(--sh-head);font-weight:800;font-size:clamp(25px,2.9vw,34px);
  line-height:1.24;color:var(--sh-navy);margin:12px 0 0;
}
body.sh-2026 .sh-services .sl-section-heading h2::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:var(--sh-orange);margin-top:16px;
}
body.sh-2026 .sh-services .sl-section-heading p{
  color:var(--sh-muted);font-size:15px;margin:18px 0 0;max-width:62ch;
}

/* Service cards, matching the home page treatment. */
body.sh-2026 .sh-services .sl-home-service-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
body.sh-2026 .sh-services .sl-home-service-card{
  background:#fff;border:1px solid var(--sh-line);border-radius:18px;padding:28px 26px;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s var(--sh-ease),box-shadow .4s ease,border-color .3s ease;
}
body.sh-2026 .sh-services .sl-home-service-card::before{
  content:"";position:absolute;top:0;left:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--sh-orange),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--sh-ease);
}
body.sh-2026 .sh-services .sl-home-service-card:hover{
  transform:translateY(-8px);box-shadow:0 22px 52px rgba(120,70,40,.13);
  border-color:var(--sh-orange-line);
}
body.sh-2026 .sh-services .sl-home-service-card:hover::before{transform:scaleX(1)}
body.sh-2026 .sh-services .sl-home-service-card__top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;
}
body.sh-2026 .sh-services .sl-home-service-card__top b{
  font-family:var(--sh-head);font-weight:800;font-size:24px;color:rgba(232,83,14,.28);
}
body.sh-2026 .sh-services .sl-home-service-card__top span{
  width:48px;height:48px;border-radius:13px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange);
  transition:transform .35s var(--sh-ease),background .3s ease;
}
body.sh-2026 .sh-services .sl-home-service-card__top span svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
}
body.sh-2026 .sh-services .sl-home-service-card:hover .sl-home-service-card__top span{
  transform:translateY(-3px) scale(1.05);background:rgba(232,83,14,.16);
}
body.sh-2026 .sh-services .sl-home-service-card h3{
  font-family:var(--sh-head);font-size:17px;font-weight:800;color:var(--sh-navy);margin:0 0 8px;
}
body.sh-2026 .sh-services .sl-home-service-card p{
  font-size:13.5px;line-height:1.72;color:var(--sh-muted);margin:0 0 16px;
}
body.sh-2026 .sh-services .sl-service-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
body.sh-2026 .sh-services .sl-service-tags span{
  font-size:11.5px;background:var(--sh-orange-soft);border:1px solid var(--sh-orange-line);
  color:#C9440A;padding:5px 11px;border-radius:999px;
}
body.sh-2026 .sh-services .sl-home-service-card > a{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sh-head);font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--sh-orange);
}
body.sh-2026 .sh-services .sl-home-service-card > a svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  transition:transform .3s var(--sh-ease);
}
body.sh-2026 .sh-services .sl-home-service-card:hover > a svg{transform:translateX(4px)}

/* Four-step workflow row. */
body.sh-2026 .sh-services .sl-process-grid--four{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
body.sh-2026 .sh-services .sl-process-grid article{
  background:#fff;border:1px solid var(--sh-line);border-radius:18px;padding:28px 24px;
  transition:transform .4s var(--sh-ease),box-shadow .4s ease,border-color .3s ease;
}
body.sh-2026 .sh-services .sl-process-grid article:hover{
  transform:translateY(-8px);box-shadow:0 22px 52px rgba(120,70,40,.13);
  border-color:var(--sh-orange-line);
}
body.sh-2026 .sh-services .sl-process-grid article b{
  font-family:var(--sh-head);font-weight:800;font-size:24px;color:rgba(232,83,14,.28);display:block;
}
body.sh-2026 .sh-services .sl-process-grid article h3{
  font-family:var(--sh-head);font-size:16.5px;font-weight:800;color:var(--sh-navy);margin:14px 0 8px;
}
body.sh-2026 .sh-services .sl-process-grid article p{font-size:13.5px;color:var(--sh-muted);margin:0}

@media(max-width:1040px){
  body.sh-2026 .sh-services .sl-home-service-grid{grid-template-columns:1fr 1fr}
  body.sh-2026 .sh-services .sl-process-grid--four{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body.sh-2026 .sh-services .sl-home-service-grid,
  body.sh-2026 .sh-services .sl-process-grid--four{grid-template-columns:1fr}
}


/* ==========================================================================
   THEME-131 — service banners as a split layout, copy left and photograph
   right, matching the home banner. The theme-129 dark-banner rules above are
   left in place untouched; they simply no longer match any markup.
   ========================================================================== */
/* --- Split service banner: copy left, photograph right ---
   Same proportions as the home banner: 1fr / 1.02fr, 54px gap, 520px minimum
   height, 420px image. The dark scrim version is replaced entirely, so these
   pages read light like the home page rather than navy. */
body.sh-2026 .sh-svc-hero--split{
  background:linear-gradient(105deg,#fff 54%,var(--sh-orange-soft) 100%);
  border-bottom:1px solid var(--sh-line);
  min-height:0;position:relative;overflow:hidden;
}
body.sh-2026 .sh-svc-hero--split .sh-svc-hero__grid{
  display:grid;grid-template-columns:1fr 1.02fr;gap:54px;align-items:center;min-height:520px;
}
body.sh-2026 .sh-svc-hero--split .sh-svc-hero__copy{padding:58px 0}
body.sh-2026 .sh-svc-hero--split .sh-svc-crumb{color:var(--sh-muted);margin:0 0 14px}
body.sh-2026 .sh-svc-hero--split .sh-svc-crumb a{color:var(--sh-muted)}
body.sh-2026 .sh-svc-hero--split .sh-svc-crumb a:hover{color:var(--sh-orange)}
body.sh-2026 .sh-svc-hero--split .sh-svc-crumb b{color:var(--sh-navy)}
body.sh-2026 .sh-svc-hero--split h1{
  font-family:var(--sh-head);font-weight:800;color:var(--sh-navy);
  font-size:clamp(31px,3.6vw,45px);line-height:1.14;margin:12px 0 16px;text-shadow:none;
}
body.sh-2026 .sh-svc-hero--split .sh-svc-hero__copy > p{
  color:var(--sh-muted);max-width:452px;margin:0 0 26px;font-size:15.5px;
}
body.sh-2026 .sh-svc-hero--split .sh-btn-o{color:var(--sh-navy);border-color:var(--sh-line)}
body.sh-2026 .sh-svc-hero--split .sh-btn-o:hover{background:var(--sh-navy);border-color:var(--sh-navy);color:#fff}

/* Photograph column */
body.sh-2026 .sh-svc-hero__visual{position:relative;align-self:stretch;display:flex;align-items:center}
body.sh-2026 .sh-svc-hero__shot{margin:0;width:100%}
body.sh-2026 .sh-svc-hero__shot img{width:100%;height:420px;object-fit:cover;border-radius:18px}

/* Optional badge, same treatment as the home banner */
body.sh-2026 .sh-svc-hero__badge{
  position:absolute;left:-30px;bottom:36px;z-index:3;display:flex;align-items:center;gap:12px;
  max-width:280px;padding:14px 18px;border-radius:14px;background:#fff;
  border:1px solid var(--sh-orange-line);box-shadow:0 16px 36px rgba(120,70,40,.16);
}
body.sh-2026 .sh-svc-hero__badge .sh-ico{
  width:40px;height:40px;border-radius:11px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange);
}
body.sh-2026 .sh-svc-hero__badge .sh-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
body.sh-2026 .sh-svc-hero__badge b{display:block;font-family:var(--sh-head);font-size:13px;color:var(--sh-navy);line-height:1.3}
body.sh-2026 .sh-svc-hero__badge span{font-size:11.5px;color:var(--sh-muted)}

/* Trust figures under the buttons, from the page's own content */
body.sh-2026 .sh-svc-hero__trust{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:20px;
  border-top:1px solid var(--sh-line);max-width:480px;
}
body.sh-2026 .sh-svc-hero__trust b{display:block;font-family:var(--sh-head);font-size:13.5px;color:var(--sh-navy)}
body.sh-2026 .sh-svc-hero__trust span{font-size:11.5px;color:var(--sh-muted)}

@media(max-width:1040px){
  body.sh-2026 .sh-svc-hero--split .sh-svc-hero__grid{grid-template-columns:1fr;gap:32px;min-height:0;padding-bottom:48px}
  body.sh-2026 .sh-svc-hero--split .sh-svc-hero__copy{padding:44px 0 0}
  body.sh-2026 .sh-svc-hero__shot img{height:300px}
  body.sh-2026 .sh-svc-hero__badge{left:16px;bottom:16px}
}
@media(max-width:640px){
  body.sh-2026 .sh-svc-hero__shot img{height:230px}
  body.sh-2026 .sh-svc-hero__badge{display:none}
}


/* --- theme-133 — Own Courier Point intro image ---
   The shared .sh-intro__img slot is a fixed 394px tall with object-fit:cover,
   which at this column width crops roughly 16% off the top and bottom. On the
   counter artwork that removes the SHAWN signage at the top and the Book /
   Drop / Track / Deliver icons along the counter front, which are the point of
   the picture. Height now follows the artwork's own 1000x780 ratio, so nothing
   is cut. */
body.sh-2026 .sh-ocp .sh-intro__img{
  height:auto;aspect-ratio:1000/780;object-fit:cover;
}
@media(max-width:1040px){
  body.sh-2026 .sh-ocp .sh-intro__img{aspect-ratio:16/11}
}


/* --- Space between the copy and the button in the opportunity block ---
   The button had no top margin, so it sat directly against the paragraph.
   Applied to the intro block too, which has the same arrangement. */
body.sh-2026 .sh-ocp-biz-top .sh-btn,
body.sh-2026 .sh-ocp .sh-intro__grid .sh-btn{margin-top:28px}

/* ==========================================================================
   SERVICE PAGES — shared layout, taken from Own Courier Point
   Used by every page that renders through slp_service_page(): the five core
   services and the thirteen Services Hub pages. Scoped to .sh-svc-page so
   nothing else on the site is affected.
   ========================================================================== */

/* Centred section heading. .sh-head carries gap:var(--sh-5) for a side-by-side
   layout; stacked, that becomes a 96px hole, so it is zeroed and set here. */
body.sh-2026 .sh-svc-page .sh-svc-head{
  flex-direction:column;align-items:center;text-align:center;
  gap:0;margin-bottom:var(--sh-5);
}
body.sh-2026 .sh-svc-page .sh-svc-head .sh-title{max-width:22ch;margin:12px auto 0}
body.sh-2026 .sh-svc-page .sh-svc-head p{max-width:62ch;margin:14px auto 0;color:var(--sh-muted);font-size:15px}

/* Card grid, three across. */
/* Columns come from --cols, set per grid in PHP from the number of cards, so
   a five-item block sits on one row instead of leaving a 4+1 orphan. Falls
   back to 3 if the variable is ever absent. */
body.sh-2026 .sh-svc-card-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:22px}
body.sh-2026 .sh-svc-card{
  position:relative;background:#fff;border:1px solid var(--sh-line);border-radius:18px;
  padding:30px 26px;overflow:hidden;
  transition:transform .4s var(--sh-ease),box-shadow .4s ease,border-color .3s ease;
}
body.sh-2026 .sh-svc-card::before{
  content:"";position:absolute;top:0;left:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--sh-orange),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--sh-ease);
}
body.sh-2026 .sh-svc-card:hover{
  transform:translateY(-8px);box-shadow:0 22px 52px rgba(120,70,40,.13);
  border-color:var(--sh-orange-line);
}
body.sh-2026 .sh-svc-card:hover::before{transform:scaleX(1)}
body.sh-2026 .sh-svc-card:hover .sh-ico{transform:translateY(-3px) scale(1.05);background:rgba(232,83,14,.16)}
body.sh-2026 .sh-svc-card h3{font-family:var(--sh-head);font-size:17.5px;font-weight:800;color:var(--sh-navy);margin:18px 0 10px}
body.sh-2026 .sh-svc-card p{font-size:14px;line-height:1.72;color:var(--sh-muted);margin:0}
body.sh-2026 .sh-svc-card__n{
  position:absolute;top:20px;right:22px;font-family:var(--sh-head);
  font-weight:800;font-size:22px;color:rgba(232,83,14,.22);line-height:1;
}
body.sh-2026 .sh-svc-card--type{padding-top:34px}

/* Numbered process cards. */
body.sh-2026 .sh-svc-step-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:20px}
body.sh-2026 .sh-svc-step{
  position:relative;background:#fff;border:1px solid var(--sh-line);border-radius:18px;
  padding:28px 24px;transition:transform .4s var(--sh-ease),box-shadow .4s ease,border-color .3s ease;
}
body.sh-2026 .sh-svc-step:hover{
  transform:translateY(-8px);box-shadow:0 22px 52px rgba(120,70,40,.13);border-color:var(--sh-orange-line);
}
body.sh-2026 .sh-svc-step:hover .sh-ico{transform:translateY(-3px) scale(1.05);background:rgba(232,83,14,.16)}
body.sh-2026 .sh-svc-step__n{
  position:absolute;top:16px;right:20px;font-family:var(--sh-head);
  font-weight:800;font-size:26px;color:rgba(232,83,14,.20);line-height:1;
}
body.sh-2026 .sh-svc-step h3{font-family:var(--sh-head);font-size:16.5px;font-weight:800;color:var(--sh-navy);margin:16px 0 8px}
body.sh-2026 .sh-svc-step p{font-size:13.5px;color:var(--sh-muted);margin:0}

/* Split section: copy one side, photograph the other. */
body.sh-2026 .sh-svc-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
body.sh-2026 .sh-svc-split__img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;
  border:1px solid var(--sh-line);box-shadow:0 18px 44px rgba(120,70,40,.12);
}
body.sh-2026 .sh-svc-lede{color:var(--sh-muted);font-size:15px;margin:18px 0 0;max-width:56ch}

/* Bullet lists: the orange dot used across the site. */
body.sh-2026 .sh-svc-ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
body.sh-2026 .sh-svc-ticks li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.6;color:#52647a}
body.sh-2026 .sh-svc-ticks li::before{
  content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--sh-orange);box-shadow:0 0 0 4px rgba(232,83,14,.10);
}
body.sh-2026 .sh-svc-ticks--lg li{font-size:14.5px}

/* FAQ, two columns. */
body.sh-2026 .sh-svc-faq{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:20px}
body.sh-2026 .sh-svc-faq .sh-svc-card h3{margin-top:0;font-size:16px}

/* Icon tiles need an explicit size: .sh-ico takes its dimensions from its
   parent elsewhere, and these are new parents. */
body.sh-2026 .sh-svc-page .sh-ico{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,83,14,.10);border:1px solid var(--sh-orange-line);color:var(--sh-orange);
  transition:transform .35s var(--sh-ease),background .3s ease;
}
body.sh-2026 .sh-svc-page .sh-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
body.sh-2026 .sh-svc-page .sh-intro__list .sh-ico{width:22px;height:22px;border-radius:50%}
body.sh-2026 .sh-svc-page .sh-intro__list .sh-ico svg{width:12px;height:12px;stroke-width:2.6}

body.sh-2026 .sh-svc-cta{margin:34px 0 0;text-align:center}

@media(max-width:1040px){
  body.sh-2026 .sh-svc-card-grid{grid-template-columns:1fr 1fr}
  body.sh-2026 .sh-svc-step-grid{grid-template-columns:1fr 1fr}
  body.sh-2026 .sh-svc-split{grid-template-columns:1fr;gap:32px}
  body.sh-2026 .sh-svc-split__img{order:-1}
}
@media(max-width:640px){
  body.sh-2026 .sh-svc-card-grid,
  body.sh-2026 .sh-svc-step-grid,
  body.sh-2026 .sh-svc-faq{grid-template-columns:1fr}
}

/* Catalogue cards on the B2B page are links, so they need the anchor reset
   plus a visible affordance. */
body.sh-2026 .sh-svc-card--link{display:block;text-decoration:none}
body.sh-2026 .sh-svc-card__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-style:normal;
  font-family:var(--sh-head);font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--sh-orange);
}
body.sh-2026 .sh-svc-card__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--sh-ease)}
body.sh-2026 .sh-svc-card--link:hover .sh-svc-card__go svg{transform:translateX(4px)}

/* The .sh-svc-closing band was removed in theme-140; its rules are gone with
   it rather than left behind as dead CSS. */


/* At five across the cards are narrower, so the type steps down a little to
   keep the headings on one or two lines rather than four. */
body.sh-2026 .sh-svc-step-grid[style*="--cols:5"] .sh-svc-step{padding:24px 20px}
body.sh-2026 .sh-svc-step-grid[style*="--cols:5"] .sh-svc-step h3{font-size:15px}
body.sh-2026 .sh-svc-step-grid[style*="--cols:5"] .sh-svc-step p{font-size:12.5px}
body.sh-2026 .sh-svc-step-grid[style*="--cols:5"] .sh-svc-step__n{font-size:22px;top:14px;right:16px}

/* The per-grid column count is a desktop decision; below these widths the
   layout must collapse regardless of what PHP asked for. */
@media(max-width:1040px){
  body.sh-2026 .sh-svc-card-grid,
  body.sh-2026 .sh-svc-step-grid,
  body.sh-2026 .sh-svc-faq{grid-template-columns:1fr 1fr!important}
}
@media(max-width:640px){
  body.sh-2026 .sh-svc-card-grid,
  body.sh-2026 .sh-svc-step-grid,
  body.sh-2026 .sh-svc-faq{grid-template-columns:1fr!important}
}


/* The Last Mile photograph is 3:2, while the shared split slot is 4:3. Cover
   would crop about 11% off the top and bottom, taking the top of the van and
   the pallet edge with it, so this one follows its own ratio. */
body.sh-2026 .sh-lm-img{aspect-ratio:3/2}


/* --- theme-141 — service-page overview photograph: cover, not contain ---
   theme-104 set `object-fit:contain` on every .sh-intro__img so the home page
   network-map ARTWORK would show in full with no cropping. That slot is shared,
   so the rule also caught the overview photograph on all 13 service pages.

   With `contain`, the photo is letterboxed inside a 4:3 box it does not match
   (the page images are 1200x860, i.e. 1.395). The element keeps its 18px
   radius, but the radius is on the BOX, not on the letterboxed photo, so the
   corners that are actually visible are the photo's own square ones.

   Scoped to .sh-svc-page, which is the service-page <main> only. The home page
   keeps `contain` for the map, and Own Courier Point (.sh-ocp, a different
   wrapper) keeps its theme-133 ratio. */
body.sh-2026 .sh-svc-page .sh-intro__img{
  height:auto;
  aspect-ratio:1200/860;
  object-fit:cover;
  border-radius:18px;
  /* Safari ignores a radius on a replaced element mid-transform unless the
     paint is clipped explicitly. */
  overflow:hidden;
}
@media(max-width:1040px){
  body.sh-2026 .sh-svc-page .sh-intro__img{
    height:auto;
    aspect-ratio:1200/860;
    border-radius:14px;
  }
}

/* --- theme-143 — Services mega menu: spacing only, position untouched ---
   theme-142 changed the panel's anchoring from centred to right-aligned and
   forced `white-space:nowrap` on the service names. Together those pushed the
   panel off the LEFT edge of the window: nowrap grew max-content to roughly
   1000px, and right-aligning to a trigger that sits ~900px from the left edge
   left no room for it. Both of those changes are reverted — the panel is
   centred on its trigger again, exactly as before, and names wrap normally.

   What remains here changes no width and no position. It only fixes the three
   things that were actually wrong in the panel:

   1. The two columns were stretched to equal height by the grid default, which
      left the Hub list floating above a tall empty gap.
   2. The core column's lower bound (230px) was just under what "Bulk SMS &
      Business Communication" needs, so it wrapped and knocked the column out
      of rhythm with the Hub list beside it. Raised to 250px, still inside the
      existing 880px ceiling.
   The third item in this block styled the "View All Services" bar; that bar
   has since been removed from the markup, so the styling went with it. */
body.sh-2026 .sl-dropdown--services{
  grid-template-columns:minmax(250px,auto) minmax(0,1.5fr);
}
body.sh-2026 .sl-dropdown--services .sl-dropdown__column{align-self:start}

/* --- theme-146 — home hero: remove the peach wash behind the photograph ---
   Two separate things were making the pink, and both sat under the image:

   1. The section background is a diagonal gradient that ramps from white to
      --sh-orange-soft (rgba(232,83,14,.10)) at 100%. The ramp ends on the
      right, which is exactly where the photograph sits, so the tint pooled
      around its edges.
   2. theme-9x gave the image and its badge a WARM drop shadow,
      rgba(120,70,40,.12). A brown-orange shadow on a peach background reads
      as a pink halo bleeding over the picture rather than as depth.

   The gradient is now flat white and the two shadows are neutral navy-grey,
   so the photograph sits on a clean background and keeps its lift. The
   bottom hairline is untouched, so the hero still separates from the section
   below it.

   Scoped to .sh-hero--split, which is the homepage hero only. The service and
   inner-page banners (.sh-svc-hero--split) share the same gradient recipe but
   are deliberately left alone - say the word and they can follow. */
body.sh-2026 .sh-hero--split{
  background:#fff;
}
body.sh-home .sh-hero__shot img{
  box-shadow:0 18px 40px rgba(13,43,69,.11);
}
body.sh-home .sh-hero__badge{
  box-shadow:0 16px 36px rgba(13,43,69,.15);
}

/* --- theme-147 — same peach removal on the inner-page banners ---
   theme-146 cleaned the homepage hero (.sh-hero--split) only. Every inner-page
   banner uses .sh-svc-hero--split, which carries the identical recipe:

     background:linear-gradient(105deg,#fff 54%,var(--sh-orange-soft) 100%)

   The ramp ends on the right, directly behind the photograph, so the same
   peach pooling appeared on the service pages, About, Careers, Contact,
   Gallery, Opportunities and the five partner pages. Flattened to white to
   match the homepage.

   The badge chip on these banners also had the warm rgba(120,70,40,.16)
   shadow, which is the halo that looked like it was bleeding over the image.
   Neutralised, same as theme-146 did for the homepage badge. The bottom
   hairline stays, so the banner still separates from the section below. */
body.sh-2026 .sh-svc-hero--split{
  background:#fff;
}
body.sh-2026 .sh-svc-hero__shot img{
  box-shadow:0 18px 40px rgba(13,43,69,.11);
}
body.sh-2026 .sh-svc-hero__badge{
  box-shadow:0 16px 36px rgba(13,43,69,.15);
}

/* --- theme-148 — gallery cards: images were collapsed to a 44px circle ---
   The grid rendered as thin empty lines with no photographs, whether the items
   came from the CMS or from the placeholder fallback. The data was never the
   problem; these rules were.

   body.sh-2026 .sh-gallery .sl-gallery-open was written for an EARLIER gallery
   markup, where .sl-gallery-open was a small round "open" button tucked in the
   corner of the card:

     position:absolute; right:18px; bottom:18px; width:44px; height:44px;
     border-radius:50%;

   In the current gallery.php, .sl-gallery-open is the <button> that WRAPS the
   whole card - the image and the caption both live inside it. So those rules
   squeezed the entire card contents into a 44x44 circle pinned to the bottom
   right, and because that button is absolutely positioned it no longer
   contributed height, leaving .sl-gallery-card collapsed to a hairline. Hence
   the rows of thin lines.

   Restored to a normal full-width block. The scrim overlay is also dropped:
   it existed to make white caption text readable over the photo, but the
   caption now sits below the image on white, so the scrim would only veil the
   bottom half of every picture. */
body.sh-2026 .sh-gallery .sl-gallery-open{
  position:static;
  width:100%;height:auto;
  display:block;padding:0;border:0;border-radius:0;
  background:#fff;color:inherit;text-align:left;cursor:pointer;
}
body.sh-2026 .sh-gallery .sl-gallery-card{
  background:#fff;
}
/* 4:3 to match the source images; the old 3:4 portrait crop belonged to the
   overlay-caption design. */
body.sh-2026 .sh-gallery .sl-gallery-image-wrap{
  aspect-ratio:4/3;
}
body.sh-2026 .sh-gallery .sl-gallery-image-wrap::after{
  content:none;
}
/* The old hover turned the little circle orange and nudged it sideways. On a
   full-width button that would flood the whole card. */
body.sh-2026 .sh-gallery .sl-gallery-card:hover .sl-gallery-open{
  background:#fff;border-color:transparent;transform:none;
}