/* ===== SOURCE MODULE: tokens.css ===== */
/* =========================================================
   DESIGN TOKENS
   Solutions Project Nigeria Limited
========================================================= */

:root {

  /* -------------------------------------------------------
     Brand Colours
  ------------------------------------------------------- */

  --red: #C72A09;
  --red2: #ED4B28;

  --black: #050608;
  --charcoal: #0D1014;
  --charcoal2: #15191E;

  --white: #FFFFFF;
  --silver: #E4E2DD;
  --yellow: #EABD57;


  /* -------------------------------------------------------
     Interface Colours
  ------------------------------------------------------- */

  --muted: #68707B;
  --line: #DFE3E8;


  /* -------------------------------------------------------
     Layout
  ------------------------------------------------------- */

  --max: 1240px;

  --header: 78px;


  /* -------------------------------------------------------
     Border Radius
  ------------------------------------------------------- */

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;


  /* -------------------------------------------------------
     Spacing Scale
  ------------------------------------------------------- */

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;


  /* -------------------------------------------------------
     Depth
  ------------------------------------------------------- */

  --shadow:
    0 24px 70px
    rgba(5, 6, 8, 0.14);


  /* -------------------------------------------------------
     Motion
  ------------------------------------------------------- */

  --ease:
    cubic-bezier(
      0.2,
      0.75,
      0.2,
      1
    );
}


/* ===== SOURCE MODULE: reset.css ===== */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}img,video{max-width:100%;display:block}a{color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}


/* ===== SOURCE MODULE: typography.css ===== */
/* =========================================================
   TYPOGRAPHY SYSTEM
   Solutions Project Nigeria Limited
========================================================= */


/* =========================================================
   1. BASE TYPOGRAPHY
========================================================= */

body {
  font-family:
    "Public Sans",
    Arial,
    sans-serif;

  color: #111820;
  background: #f7f8fa;

  font-size: 1rem;
  line-height: 1.62;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---------------------------------------------------------
   Standard margin reset
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}


/* =========================================================
   2. GLOBAL HEADINGS
========================================================= */

h1 {
  font-size:
    clamp(
      2.9rem,
      5.4vw,
      5rem
    );

  line-height: 0.99;

  letter-spacing: -0.05em;

  font-weight: 800;
}

h2 {
  font-size:
    clamp(
      2.1rem,
      3.8vw,
      3.35rem
    );

  line-height: 1.04;

  letter-spacing: -0.042em;

  font-weight: 800;
}

h3 {
  font-size:
    clamp(
      1.18rem,
      1.8vw,
      1.65rem
    );

  line-height: 1.16;

  letter-spacing: -0.024em;

  font-weight: 750;
}

h4 {
  line-height: 1.25;

  font-weight: 750;
}


/* =========================================================
   3. HOMEPAGE HERO
   Final geometry is controlled in pages.css.
========================================================= */

.home-hero h1 {
  font-weight: 800;
}

.home-hero h1 em {
 color: #C72A09;

  font-style: normal;
}


/* =========================================================
   4. INTERIOR PAGE HERO
========================================================= */

.page-hero h1 {
  max-width: 850px;

  margin-bottom: 20px;

  font-size:
    clamp(
      2.75rem,
      4.8vw,
      4.6rem
    );

  line-height: 1;

  letter-spacing: -0.048em;
}


/* =========================================================
   5. LEAD TEXT
========================================================= */

.lead {
  max-width: 700px;

  font-size:
    clamp(
      1rem,
      1.35vw,
      1.18rem
    );

  line-height: 1.65;
}


/* =========================================================
   6. EYEBROW
========================================================= */

.eyebrow {
  margin-bottom: 10px;

  color: var(--red);

  font-size: 0.75rem;
  font-weight: 800;

  line-height: 1.4;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


/* =========================================================
   7. KICKER
========================================================= */

.kicker {
  font-size: 0.78rem;
  font-weight: 800;

  line-height: 1.4;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================================
   8. PARAGRAPHS
========================================================= */

p {
  line-height: 1.65;
}


/* =========================================================
   9. TABLET TYPOGRAPHY
========================================================= */

@media (max-width: 980px) {

  h1 {
    font-size:
      clamp(
        2.7rem,
        7vw,
        4.4rem
      );
  }

  h2 {
    font-size:
      clamp(
        2rem,
        5vw,
        3rem
      );
  }

  .page-hero h1 {
    font-size:
      clamp(
        2.55rem,
        6.5vw,
        4rem
      );
  }
}


/* =========================================================
   10. MOBILE TYPOGRAPHY
========================================================= */

@media (max-width: 680px) {

  body {
    font-size: 0.97rem;

    line-height: 1.58;
  }

  h1 {
    font-size:
      clamp(
        2.3rem,
        10vw,
        3.35rem
      );

    line-height: 1;

    letter-spacing: -0.04em;
  }

  h2 {
    font-size:
      clamp(
        1.85rem,
        8vw,
        2.65rem
      );

    line-height: 1.06;

    letter-spacing: -0.038em;
  }

  h3 {
    font-size:
      clamp(
        1.12rem,
        5.5vw,
        1.45rem
      );
  }

  .page-hero h1 {
    max-width: 95%;

    margin-bottom: 16px;

    font-size:
      clamp(
        2.25rem,
        10vw,
        3.2rem
      );

    line-height: 1.01;
  }

  .lead {
    max-width: 95%;

    font-size: 0.96rem;

    line-height: 1.58;
  }

  .eyebrow {
    font-size: 0.7rem;

    letter-spacing: 0.14em;
  }
}


/* ===== SOURCE MODULE: layout.css ===== */
/* =========================================================
   GLOBAL LAYOUT SYSTEM
========================================================= */


/* ---------------------------------------------------------
   Main Content Container
--------------------------------------------------------- */

.wrap {
  width: min(
    calc(100% - 48px),
    var(--max)
  );

  margin-inline: auto;
}


/* ---------------------------------------------------------
   Standard Section Spacing
--------------------------------------------------------- */

.section {
  padding: 80px 0;
}


/* ---------------------------------------------------------
   Section Backgrounds
--------------------------------------------------------- */

.section-white {
  background: #fff;
}

.section-dark {
  background: var(--charcoal);
  color: #fff;
}


/* ---------------------------------------------------------
   Standard Section Heading Layout
--------------------------------------------------------- */

.section-head {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(280px, 0.9fr);

  gap: 48px;

  align-items: end;

  margin-bottom: 36px;
}

.section-head > p {
  max-width: 620px;

  margin: 0;

  color: var(--muted);
}


/* ---------------------------------------------------------
   Dark Section Heading Support
--------------------------------------------------------- */

.section-dark .section-head > p {
  color: #c6ccd2;
}


/* ---------------------------------------------------------
   Standard 12-Column Grid
--------------------------------------------------------- */

.grid-12 {
  display: grid;

  grid-template-columns: repeat(
    12,
    minmax(0, 1fr)
  );

  gap: 18px;
}


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 980px) {

  .wrap {
    width: min(
      calc(100% - 40px),
      var(--max)
    );
  }

  .section {
    padding: 72px 0;
  }

  .section-head {
    grid-template-columns: 1fr;

    gap: 14px;

    margin-bottom: 30px;
  }

  .section-head > p {
    max-width: 720px;
  }
}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 680px) {

  .wrap {
    width: min(
      calc(100% - 32px),
      var(--max)
    );
  }

  .section {
    padding: 58px 0;
  }

  .section-head {
    margin-bottom: 24px;
  }
}


/* ===== SOURCE MODULE: components.css ===== */
/* =========================================================
   SHARED COMPONENTS
   Solutions Project Nigeria Limited
========================================================= */


/* =========================================================
   1. HEADER
========================================================= */

.site-header {
  position: fixed;
  z-index: 100;

  top: 0;
  left: 0;
  right: 0;

  height: var(--header);

  display: flex;
  align-items: center;

  gap: 28px;

  padding:
    0
    max(
      24px,
      calc((100vw - var(--max)) / 2)
    );

  color: #fff;

  background:
    rgba(7, 9, 12, 0.76);

  backdrop-filter: blur(18px);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);
}


/* ---------------------------------------------------------
   Brand
--------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 220px;

  text-decoration: none;

  font-weight: 800;
  line-height: 1.05;
}

.brand img {
  width: 42px;
  height: 42px;

  object-fit: contain;

  padding: 4px;

  border-radius: 8px;

  background: #fff;
}

.brand small {
  color: #c9ced4;

  font-size: 0.72rem;
  font-weight: 600;
}


/* =========================================================
   2. DESKTOP NAVIGATION
========================================================= */

.desktop-nav {
  display: flex;
  align-items: center;

  gap: 24px;

  margin-left: auto;
}

.desktop-nav a {
  position: relative;

  color: #d7dce2;

  font-size: 0.9rem;
  font-weight: 600;

  text-decoration: none;

  transition:
    color 0.22s ease;
}

.desktop-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;

  bottom: -8px;

  height: 2px;

  background: var(--red);

  transition:
    right
    0.25s
    var(--ease);
}

.desktop-nav a:hover,
.desktop-nav a.active {
  color: #fff;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  right: 0;
}


/* =========================================================
   3. BUTTONS
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 13px 18px;

  border:
    1px solid
    transparent;

  border-radius: 9px;

  text-decoration: none;

  font-weight: 750;

  transition:
    transform 0.22s var(--ease),
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.btn-red {
  color: #fff;

  background: var(--red);
}

.btn-red:hover {
  background: #a92308;

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 28px
    rgba(199, 42, 9, 0.18);
}

.btn-ghost {
  color: #fff;

  border-color:
    rgba(255, 255, 255, 0.28);

  background:
    rgba(255, 255, 255, 0.05);

  backdrop-filter:
    blur(10px);
}

.btn-ghost:hover {
  border-color:
    rgba(255, 255, 255, 0.48);

  background:
    rgba(255, 255, 255, 0.09);

  transform:
    translateY(-2px);
}


/* ---------------------------------------------------------
   Shared action layout
--------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;
}


/* =========================================================
   4. MOBILE NAVIGATION
========================================================= */

.menu-btn {
  display: none;

  margin-left: auto;

  padding: 8px;

  border: 0;

  background: transparent;
}

.menu-btn img {
  width: 26px;
  height: 26px;

  filter: invert(1);
}

.mobile-nav {
  position: fixed;

  display: none;

  inset:
    var(--header)
    0
    auto
    0;

  padding:
    22px
    24px
    28px;

  background:
    #0b0e12;

  border-bottom:
    1px solid
    #272c32;

  box-shadow:
    0 20px 40px
    rgba(0, 0, 0, 0.22);
}

.mobile-nav.open {
  display: grid;

  gap: 8px;
}

.mobile-nav a {
  padding:
    10px
    0;

  color: #fff;

  text-decoration: none;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.06);
}

.mobile-nav a:last-child {
  margin-top: 8px;

  color: #fff;

  font-weight: 700;

  border-bottom: 0;
}


/* =========================================================
   5. GENERIC PAGE HERO
   Used by interior pages only.
   Homepage hero lives in pages.css.
========================================================= */

.page-hero {
  position: relative;

  min-height: 600px;

  display: flex;
  align-items: flex-end;

  padding:
    150px
    0
    70px;

  overflow: hidden;

  color: #fff;

  background-image:
    linear-gradient(
      90deg,
      rgba(3, 5, 7, 0.96),
      rgba(3, 5, 7, 0.76) 42%,
      rgba(3, 5, 7, 0.18)
    ),
    var(--hero);

  background-size: cover;
  background-position: center;
}

.page-hero .lead {
  color: #d4d8dd;
}


/* =========================================================
   6. GENERIC CARDS
========================================================= */

.card {
  border:
    1px solid
    var(--line);

  border-radius:
    var(--r-md);

  background:
    #fff;

  box-shadow:
    0 12px 38px
    rgba(8, 12, 18, 0.055);
}


/* =========================================================
   7. FOOTER
========================================================= */

.site-footer {
  padding:
    70px
    0
    22px;

  color:
    #d7dbe0;

  background:
    #07090c;
}

.footgrid {
  display: grid;

  grid-template-columns:
    1.25fr
    0.75fr
    1fr
    1fr;

  gap:
    44px;
}

.site-footer h4 {
  margin-bottom:
    14px;

  color:
    #fff;
}

.site-footer a {
  display:
    block;

  margin:
    8px
    0;

  color:
    #c8cdd3;

  text-decoration:
    none;

  transition:
    color
    0.2s
    ease;
}

.site-footer a:hover {
  color:
    #fff;
}

.site-footer p {
  color:
    #aeb5bd;
}

.site-footer .brand {
  margin-bottom:
    18px;
}

.site-footer .brand img {
  width:
    46px;

  height:
    46px;
}


/* ---------------------------------------------------------
   Legal row
--------------------------------------------------------- */

.legal {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    42px;

  padding-top:
    20px;

  border-top:
    1px solid
    #262b31;

  font-size:
    0.82rem;
}

.legal span {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    14px;
}

.legal a {
  display:
    inline;

  margin:
    0;
}


/* =========================================================
   8. FORMS
========================================================= */

.form-grid {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    18px;
}

.field {
  display:
    grid;

  gap:
    7px;
}

.field.full {
  grid-column:
    1 / -1;
}

.field label {
  font-size:
    0.82rem;

  font-weight:
    750;
}

.field input,
.field select,
.field textarea {
  width:
    100%;

  padding:
    13px
    14px;

  border:
    1px solid
    #d7dce2;

  border-radius:
    9px;

  background:
    #fff;

  color:
    #15191e;

  transition:
    border-color
    0.2s
    ease,
    box-shadow
    0.2s
    ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:
    var(--red);

  box-shadow:
    0 0 0 3px
    rgba(199, 42, 9, 0.08);

  outline:
    none;
}

.field textarea {
  min-height:
    150px;

  resize:
    vertical;
}

.form-note {
  color:
    var(--muted);

  font-size:
    0.84rem;
}


/* =========================================================
   9. ACCESSIBILITY
========================================================= */

:focus-visible {
  outline:
    3px solid
    rgba(199, 42, 9, 0.35);

  outline-offset:
    3px;
}


/* =========================================================
   10. MOBILE NAVIGATION SUPPORT
========================================================= */

@media (max-width: 980px) {

  .desktop-nav,
  .site-header > .btn,
  .header-quote {
    display:
      none;
  }

  .menu-btn {
    display:
      block;
  }
}


@media (max-width: 680px) {

  .site-header {
    padding:
      0
      16px;

    gap:
      14px;
  }

  .brand {
    min-width:
      0;
  }

  .brand span {
    display:
      none;
  }

  .mobile-nav {
    padding:
      18px
      18px
      24px;
  }

  .site-footer {
    padding-top:
      58px;
  }

  .legal {
    flex-direction:
      column;
  }
}


/* ===== SOURCE MODULE: pages.css ===== */
/* =========================================================
   HOME
========================================================= */


/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */

.home-hero {
  position: relative;
  min-height: 680px;
  height: min(82vh, 820px);
  overflow: hidden;
  background: #080b0e;
}

.home-hero .hero-media,
.home-hero .hero-slideshow,
.home-hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero .hero-media {
  z-index: 0;
  overflow: hidden;
}

.home-hero .hero-slideshow,
.home-hero .hero-video {
  overflow: hidden;
}

/*
  All slideshow images occupy the same physical space.
  This prevents images from stacking vertically on mobile.
*/
.home-hero .hero-slideshow > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero .hero-slideshow img,
.home-hero .hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero .hero-slideshow img {
  object-position: center;
}

.home-hero .hero-video video {
  position: absolute;
  inset: 0;
}

/* Hero readability overlay */
.home-hero .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(4, 7, 10, 0.88) 0%,
      rgba(4, 7, 10, 0.66) 34%,
      rgba(4, 7, 10, 0.24) 66%,
      rgba(4, 7, 10, 0.10) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 7, 10, 0.16) 0%,
      rgba(4, 7, 10, 0.06) 55%,
      rgba(4, 7, 10, 0.48) 100%
    );
}

/* Hero copy */
.home-hero .hero-copy {
  position: relative;
  z-index: 5;

  min-height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

   color: #FFFFFF;
   
  transform: translateY(-5%);
}

.home-hero .hero-copy .eyebrow {
  margin-bottom: 14px;
  color: #C72A09;
}

.home-hero .hero-copy h1 {
  max-width: 830px;
  margin: 0;

  font-size: clamp(3rem, 5.1vw, 5.2rem);
  line-height: 0.99;
  letter-spacing: -0.045em;
}

.home-hero .hero-copy .lead {
  max-width: 650px;
  margin: 22px 0 0;

  color: #D4D8DD;

  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.home-hero .hero-copy .actions {
  margin-top: 28px;
}


/* ---------------------------------------------------------
   Capability Marquee
--------------------------------------------------------- */

.home-marquee {
  position: relative;
  overflow: hidden;

  background: #eceeef;

  border-top: 1px solid rgba(15, 20, 25, 0.08);
  border-bottom: 1px solid rgba(15, 20, 25, 0.08);
}

.home-marquee .marquee-track {
  padding: 15px 0;
}

.home-marquee .marquee-cycle {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  white-space: nowrap;
}

.home-marquee .marquee-cycle span {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;

  color: #20262c;
}

.home-marquee .marquee-cycle b {
  margin: 0 24px;

  color: var(--red);
  font-weight: 800;
}

/*
  Deliberate breathing space between the end of one
  marquee cycle and the beginning of the next.
*/
.home-marquee .marquee-gap {
  display: block;

  flex: 0 0 120px;
  width: 120px;
}


/* ---------------------------------------------------------
   Homepage Section Intro
--------------------------------------------------------- */

.section-intro {
  max-width: 760px;
  margin-bottom: 34px;
}

.section-intro .eyebrow {
  margin-bottom: 10px;
}

.section-intro h2 {
  max-width: 720px;
  margin: 0;
}

.section-intro > p:last-child {
  max-width: 680px;
  margin: 15px 0 0;

  color: var(--muted);

  line-height: 1.7;
}

.section-intro-light > p:last-child {
  color: #c9cfd5;
}


/* ---------------------------------------------------------
   Homepage Services Bento
--------------------------------------------------------- */

.home-services-bento {
  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 225px;

  gap: 16px;
}

/*
  Six services:
  - Engineering = feature
  - Inspection
  - Supply
  - Equipment
  - Manpower
  - General Contract = wide
*/

.service-bento-card {
  position: relative;

  grid-column: span 4;

  overflow: hidden;

  border-radius: var(--r-md);

  color: #fff;
  text-decoration: none;

  background: #11161b;

  box-shadow: var(--shadow);

  transform-style: preserve-3d;
}

.service-bento-large {
  grid-column: span 8;
}

.service-bento-wide {
  grid-column: span 8;
}

.service-bento-card > img:first-child {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.65s var(--ease);
}

.service-bento-card::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(4, 7, 10, 0.06) 5%,
      rgba(4, 7, 10, 0.22) 42%,
      rgba(4, 7, 10, 0.93) 100%
    );
}

.service-bento-card:hover > img:first-child {
  transform: scale(1.035);
}

.service-bento-content {
  position: absolute;

  z-index: 3;

  left: 22px;
  right: 22px;
  bottom: 20px;

  text-align: center;
}

.service-bento-content .service-icon {
  display: block;

  width: 34px;
  height: 34px;

  margin: 0 auto 10px;

  object-fit: contain;
}

.service-bento-content h3 {
  margin: 0;

  font-size: clamp(1.08rem, 1.45vw, 1.35rem);
}

.service-bento-content p {
  max-width: 520px;

  margin: 8px auto 0;

  color: #d9dde2;

  font-size: 0.9rem;
  line-height: 1.5;
}

.service-bento-content .card-arrow {
  display: inline-block;

  margin-top: 9px;

  color: #fff;

  font-size: 1.15rem;

  transition: transform 0.25s ease;
}

.service-bento-card:hover .card-arrow {
  transform: translateX(5px);
}

.home-services .section-link {
  display: flex;
  justify-content: center;

  margin-top: 26px;
}

.home-services .section-link a {
  color: var(--red);

  font-weight: 700;

  text-decoration: none;
}


/* ---------------------------------------------------------
   How We Work / Technical Folio
--------------------------------------------------------- */

.home-process .section-intro {
  margin-bottom: 26px;
}

.folio-shell {
  max-width: 1020px;

  margin: 0 auto;

  perspective: 1600px;
}

.folio {
  position: relative;

  min-height: 300px;

  overflow: hidden;

  border-radius: 16px;

  color: #fff;
  background: #0c1014;

  box-shadow: 0 26px 68px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.75s var(--ease),
    box-shadow 0.75s var(--ease);
}

.folio-cover {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  padding: 32px;

  text-align: center;

  background:
    linear-gradient(
      rgba(4, 7, 10, 0.50),
      rgba(4, 7, 10, 0.86)
    ),
    url("../images/home/how-we-work/folio-cover.webp")
    center / cover
    no-repeat;

  transition:
    opacity 0.55s var(--ease),
    transform 0.75s var(--ease);
}

.folio-cover > div {
  max-width: 620px;
}

.folio-cover h3 {
  margin: 8px 0 12px;

  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.folio-cover p:last-child {
  max-width: 520px;

  margin: 0 auto;

  color: #d6dbe0;
}

.folio-pages {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 1px;

  background: #2b3036;

  opacity: 0;

  transform: scaleX(0.72);
  transform-origin: center;

  pointer-events: none;

  transition:
    opacity 0.55s var(--ease),
    transform 0.75s var(--ease);
}

.folio.open .folio-cover {
  opacity: 0;

  transform: scaleX(0.88);

  pointer-events: none;
}

.folio.open .folio-pages {
  opacity: 1;

  transform: scaleX(1);

  pointer-events: auto;
}

.folio-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 21px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #11161c,
      #0a0d11
    );
}

.folio-page span {
  color: var(--red);

  font-weight: 800;
}

.folio-page h3 {
  margin: 6px 0;
}

.folio-page p {
  margin: 0;

  color: #cfd4da;

  font-size: 0.9rem;
  line-height: 1.5;
}

.folio-controls {
  display: flex;
  justify-content: center;

  gap: 12px;

  margin-top: 16px;
}

.folio-controls button {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid #ccd1d6;
  border-radius: 50%;

  background: #fff;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.folio-controls button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.folio-controls button:disabled {
  opacity: 0.3;

  cursor: not-allowed;
}

.folio-controls img {
  width: 18px;
}


/* ---------------------------------------------------------
   Operating Environments
--------------------------------------------------------- */

.home-sectors .section-intro {
  margin-bottom: 28px;
}

.sector-rail {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;
}

.sector {
  position: relative;

  min-height: 210px;

  overflow: hidden;

  border-radius: 12px;

  color: #fff;

  box-shadow: 0 14px 35px rgba(8, 12, 18, 0.08);
}

.sector img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.6s var(--ease);
}

.sector::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.82)
    );
}

.sector b {
  position: absolute;

  z-index: 2;

  left: 18px;
  bottom: 16px;
}

.sector:hover img {
  transform: scale(1.035);
}


/* ---------------------------------------------------------
   Homepage CTA
--------------------------------------------------------- */

.home-cta .cta-layout {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 50px;

  align-items: center;
}

.home-cta .cta-layout > div:last-child p {
  max-width: 620px;

  margin-top: 0;
}

.home-cta .actions {
  margin-top: 22px;
}


/* ---------------------------------------------------------
   Homepage Responsive Rules
--------------------------------------------------------- */

@media (max-width: 980px) {

  .home-hero {
    min-height: 620px;

    height: 78vh;
  }

  .home-hero .hero-copy {
    transform: translateY(-3%);
  }

  .home-hero .hero-copy h1 {
    font-size: clamp(2.8rem, 7vw, 4.5rem);
  }

  .home-services-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    grid-auto-rows: 240px;
  }

  .service-bento-card,
  .service-bento-large,
  .service-bento-wide {
    grid-column: span 1;
  }

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

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

  .home-cta .cta-layout {
    grid-template-columns: 1fr;

    gap: 22px;
  }
}


@media (max-width: 640px) {

  .home-hero {
    min-height: 600px;

    height: 76svh;

    max-height: 720px;
  }

  .home-hero .hero-copy {
    justify-content: center;

    transform: translateY(-4%);
  }

  .home-hero .hero-copy .eyebrow {
    max-width: 310px;

    margin-bottom: 11px;

    font-size: 0.72rem;
    line-height: 1.45;
  }

  .home-hero .hero-copy h1 {
    max-width: 94%;

    font-size: clamp(2.3rem, 10.5vw, 3.35rem);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .home-hero .hero-copy .lead {
    max-width: 94%;

    margin-top: 16px;

    font-size: 0.95rem;
    line-height: 1.55;
  }

  .home-hero .hero-copy .actions {
    margin-top: 22px;
  }

  /*
    Mobile crop keeps the approved subject visible
    while preserving the dark left-side text area.
  */
  .home-hero .hero-slideshow img,
  .home-hero .hero-video video {
    object-position: 58% center;
  }

  .home-marquee .marquee-track {
    padding: 13px 0;
  }

  .home-marquee .marquee-cycle span {
    font-size: 0.88rem;
  }

  .home-marquee .marquee-cycle b {
    margin: 0 18px;
  }

  .home-marquee .marquee-gap {
    flex-basis: 85px;

    width: 85px;
  }

  .section-intro {
    margin-bottom: 24px;
  }

  .section-intro h2 {
    max-width: 100%;
  }

  .section-intro > p:last-child {
    margin-top: 12px;

    line-height: 1.6;
  }

  .home-services-bento {
    grid-template-columns: 1fr;

    grid-auto-rows: 225px;

    gap: 14px;
  }

  .service-bento-card,
  .service-bento-large,
  .service-bento-wide {
    grid-column: 1;
  }

  .service-bento-content {
    left: 18px;
    right: 18px;
    bottom: 17px;
  }

  .service-bento-content p {
    font-size: 0.86rem;
  }

  .folio {
    min-height: 285px;
  }

  .folio-cover {
    padding: 24px 20px;
  }

  .folio-pages {
    grid-template-columns: repeat(2, 1fr);

    overflow-y: auto;
  }

  .folio-page {
    min-height: 142px;

    padding: 15px 12px;
  }

  .folio-page p {
    font-size: 0.81rem;
  }

  .sector-rail {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .sector {
    min-height: 200px;
  }

  .home-cta .cta-layout {
    gap: 18px;
  }
}


/* ---------------------------------------------------------
   Reduced Motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .home-hero .hero-slideshow *,
  .home-hero .hero-video *,
  .service-bento-card,
  .service-bento-card img,
  .sector,
  .sector img,
  .folio,
  .folio-cover,
  .folio-pages {
    animation: none !important;
    transition: none !important;
  }
}



/* =========================================================
   STORY
========================================================= */

.story-chapters {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;
}

.story-card {
  position: relative;

  min-height: 360px;

  overflow: hidden;

  border-radius: 14px;

  color: #fff;
}

.story-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.story-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 0.88)
    );
}

.story-card .copy {
  position: absolute;

  z-index: 2;

  left: 24px;
  right: 24px;
  bottom: 22px;
}

.pmv {
  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

  gap: 18px;
}

.pmv article {
  position: relative;

  min-height: 320px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  overflow: hidden;

  padding: 26px;

  color: #fff;

  background-size: cover;
  background-position: center;
}

.pmv article::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 0.9)
    );
}

.pmv article > * {
  position: relative;

  z-index: 2;
}



/* =========================================================
   SERVICES
========================================================= */

.service-directory {
  display: grid;

  gap: 16px;
}

.service-strip {
  display: grid;

  grid-template-columns:
    220px
    54px
    54px
    1fr
    40px;

  gap: 20px;

  align-items: center;

  min-height: 170px;

  padding:
    14px
    22px
    14px
    14px;

  text-decoration: none;

  color: #10161c;

  border: 1px solid var(--line);
  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(12px);

  box-shadow:
    0 15px 45px rgba(8, 12, 18, 0.06);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.service-strip:hover {
  border-color: var(--red);

  box-shadow:
    0 24px 60px rgba(8, 12, 18, 0.11);
}

.service-strip .media {
  height: 140px;

  overflow: hidden;

  border-radius: 9px;
}

.service-strip .media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.55s ease;
}

.service-strip:hover .media img {
  transform: scale(1.04);
}

.service-strip .num {
  align-self: start;

  margin-top: 15px;

  color: var(--red);

  font-weight: 850;
}

.iconbox {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: #f8f9fb;

  color: var(--red);
}

.iconbox img {
  width: 24px;
  height: 24px;
}

.service-strip h3 {
  margin-bottom: 7px;
}

.service-strip p {
  margin: 0;

  color: var(--muted);
}

.service-strip .arr {
  color: var(--red);

  font-size: 1.7rem;
}

.engagement {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}

.engagement article {
  padding: 28px;

  text-align: center;
}

.engagement .iconbox {
  margin: 0 auto 18px;
}



/* =========================================================
   CAPABILITIES
========================================================= */

.cap-bento {
  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 18px;
}

.cap-card {
  grid-column: span 4;

  min-height: 240px;

  padding: 28px;

  text-align: center;
}

.cap-card.feature {
  position: relative;

  grid-column: span 8;

  min-height: 420px;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  color: #fff;

  background-size: cover;
  background-position: center;
}

.cap-card.feature::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 0.9)
    );
}

.cap-card.feature > * {
  position: relative;

  z-index: 2;
}

.cap-card .iconbox {
  margin: 0 auto 18px;
}



/* =========================================================
   SERVICE DETAIL
========================================================= */

.detail-intro {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;
}

.detail-intro img {
  border-radius: 14px;

  box-shadow: var(--shadow);
}

.process-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;
}

.process-grid article {
  padding: 24px;

  text-align: center;
}

.process-grid span {
  width: 38px;
  height: 38px;

  display: inline-grid;
  place-items: center;

  margin-bottom: 14px;

  border-radius: 50%;

  background: var(--red);

  color: #fff;

  font-weight: 800;
}



/* =========================================================
   CONTACT / RFQ
========================================================= */

.contact-grid {
  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  gap: 54px;
}

.contact-list {
  display: grid;

  gap: 14px;
}

.contact-item {
  display: grid;

  grid-template-columns:
    48px
    1fr;

  gap: 14px;

  align-items: start;

  padding: 18px;
}

.contact-item .iconbox {
  width: 42px;
  height: 42px;
}

.quote-layout {
  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap: 46px;
}

.quote-form {
  padding: 32px;
}

.steps {
  display: grid;

  gap: 12px;
}

.steps article {
  padding: 20px;
}

.steps span {
  color: var(--red);

  font-weight: 850;
}


/* ===== SOURCE MODULE: glass.css ===== */
.glass{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);box-shadow:inset 0 1px rgba(255,255,255,.14),0 24px 70px rgba(0,0,0,.22)}
.gloss{position:relative;overflow:hidden}.gloss:before{content:"";position:absolute;z-index:3;top:-60%;left:-50%;width:45%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(18deg);transition:left .8s var(--ease)}.gloss:hover:before{left:130%}


/* ===== SOURCE MODULE: motion.css ===== */
/* =========================================================
   MOTION SYSTEM
   Solutions Project Nigeria Limited
========================================================= */


/* =========================================================
   1. MARQUEE
========================================================= */

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.marquee-track {
  display: flex;
  width: max-content;

  animation:
    marquee-scroll
    34s
    linear
    infinite;

  will-change: transform;
}

/*
  Pause scrolling when the user intentionally
  interacts with the marquee.
*/
.marquee:hover .marquee-track {
  animation-play-state: paused;
}


/* =========================================================
   2. STANDARD SCROLL REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translate3d(
    0,
    34px,
    0
  );

  transition:
    opacity 0.65s ease,
    transform 0.78s var(--ease);

  will-change:
    opacity,
    transform;
}


/* ---------------------------------------------------------
   Directional Reveal
--------------------------------------------------------- */

.reveal.from-left {
  transform: translate3d(
    -56px,
    0,
    0
  );
}

.reveal.from-right {
  transform: translate3d(
    56px,
    0,
    0
  );
}

.reveal.from-top {
  transform: translate3d(
    0,
    -38px,
    0
  );
}

.reveal.from-bottom {
  transform: translate3d(
    0,
    46px,
    0
  );
}


/* ---------------------------------------------------------
   Revealed State
--------------------------------------------------------- */

.reveal.visible {
  opacity: 1;

  transform:
    translate3d(
      0,
      0,
      0
    );
}


/* =========================================================
   3. HOMEPAGE SERVICES BENTO STAGGER
========================================================= */

/*
  The service cards enter sequentially rather than
  appearing simultaneously.
*/

.home-services-bento
.service-bento-card:nth-child(1) {
  transition-delay: 0ms;
}

.home-services-bento
.service-bento-card:nth-child(2) {
  transition-delay: 80ms;
}

.home-services-bento
.service-bento-card:nth-child(3) {
  transition-delay: 160ms;
}

.home-services-bento
.service-bento-card:nth-child(4) {
  transition-delay: 80ms;
}

.home-services-bento
.service-bento-card:nth-child(5) {
  transition-delay: 160ms;
}

.home-services-bento
.service-bento-card:nth-child(6) {
  transition-delay: 240ms;
}


/* =========================================================
   4. OPERATING ENVIRONMENT STAGGER
========================================================= */

.sector-rail
.sector:nth-child(1) {
  transition-delay: 0ms;
}

.sector-rail
.sector:nth-child(2) {
  transition-delay: 70ms;
}

.sector-rail
.sector:nth-child(3) {
  transition-delay: 140ms;
}

.sector-rail
.sector:nth-child(4) {
  transition-delay: 70ms;
}

.sector-rail
.sector:nth-child(5) {
  transition-delay: 140ms;
}

.sector-rail
.sector:nth-child(6) {
  transition-delay: 210ms;
}


/* =========================================================
   5. STORY / CAPABILITY / CONTENT CARDS
========================================================= */

.story-card.reveal,
.cap-card.reveal,
.process-grid article.reveal,
.engagement article.reveal {
  transition:
    opacity 0.65s ease,
    transform 0.8s var(--ease);
}


/* =========================================================
   6. SERVICE DIRECTORY ENTRANCE
========================================================= */

.service-strip.reveal.from-left {
  transform:
    translate3d(
      -72px,
      0,
      0
    );
}

.service-strip.reveal.from-right {
  transform:
    translate3d(
      72px,
      0,
      0
    );
}

.service-strip.reveal.visible {
  opacity: 1;

  transform:
    translate3d(
      0,
      0,
      0
    );
}


/*
  Sequential appearance of service rows.
*/

.service-directory
.service-strip:nth-child(1) {
  transition-delay: 0ms;
}

.service-directory
.service-strip:nth-child(2) {
  transition-delay: 80ms;
}

.service-directory
.service-strip:nth-child(3) {
  transition-delay: 160ms;
}

.service-directory
.service-strip:nth-child(4) {
  transition-delay: 240ms;
}

.service-directory
.service-strip:nth-child(5) {
  transition-delay: 320ms;
}

.service-directory
.service-strip:nth-child(6) {
  transition-delay: 400ms;
}


/* =========================================================
   7. HOVER LIFT
========================================================= */

.service-bento-card,
.story-card,
.cap-card,
.sector,
.engagement article,
.process-grid article {
  transition:
    opacity 0.65s ease,
    transform 0.78s var(--ease),
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.service-bento-card.visible:hover,
.story-card.visible:hover,
.cap-card.visible:hover,
.sector.visible:hover,
.engagement article.visible:hover,
.process-grid article.visible:hover {
  transform:
    translate3d(
      0,
      -5px,
      0
    );
}


/* =========================================================
   8. IMAGE MOTION
========================================================= */

.service-bento-card > img,
.story-card > img,
.sector > img,
.service-strip .media img {
  transition:
    transform
    0.65s
    var(--ease);
}

.service-bento-card:hover > img,
.story-card:hover > img,
.sector:hover > img,
.service-strip:hover .media img {
  transform:
    scale(1.035);
}


/* =========================================================
   9. FOLIO MOTION
========================================================= */

.folio {
  transform-origin: center;
}

.folio.open {
  transform:
    perspective(1400px)
    rotateX(0deg)
    scale(1);
}

.folio-cover {
  transform-origin: center;
}

.folio-pages {
  transform-origin: center;
}


/* =========================================================
   10. MOBILE MOTION REDUCTION
========================================================= */

@media (max-width: 680px) {

  /*
    Reduce entrance distance on mobile so cards do not
    appear to fly across the small viewport.
  */

  .reveal {
    transform:
      translate3d(
        0,
        26px,
        0
      );
  }

  .reveal.from-left {
    transform:
      translate3d(
        -30px,
        0,
        0
      );
  }

  .reveal.from-right {
    transform:
      translate3d(
        30px,
        0,
        0
      );
  }

  .service-strip.reveal.from-left {
    transform:
      translate3d(
        -32px,
        0,
        0
      );
  }

  .service-strip.reveal.from-right {
    transform:
      translate3d(
        32px,
        0,
        0
      );
  }


  /*
    Keep mobile animation quick and controlled.
  */

  .reveal,
  .service-strip {
    transition-duration:
      0.58s;
  }
}


/* =========================================================
   11. REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  .marquee-track {
    animation: none !important;

    transform: none !important;
  }

  .reveal,
  .reveal.from-left,
  .reveal.from-right,
  .reveal.from-top,
  .reveal.from-bottom,
  .service-strip.reveal.from-left,
  .service-strip.reveal.from-right {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }

  .service-bento-card,
  .story-card,
  .cap-card,
  .sector,
  .service-strip,
  .engagement article,
  .process-grid article,
  .folio,
  .folio-cover,
  .folio-pages {
    transition: none !important;
  }

  .gloss::before {
    display: none !important;
  }
}


/* =========================================================
   PRODUCTION RESPONSIVE & MAINTAINABILITY LAYER
   Single authoritative breakpoint system
   Desktop: >1024 | Tablet: 769–1024 | Mobile: <=768 | Small: <=480
========================================================= */

/* ---------- Visual surfaces: no plain white/black grid cards ---------- */
.service-bento-card,
.story-card,
.pmv article,
.engagement article,
.cap-card,
.card {
  border: 1px solid rgba(199,42,9,.14);
  background: linear-gradient(145deg, #fff8f4 0%, #f3f0eb 56%, #f7e9df 100%);
  box-shadow: 0 16px 44px rgba(13,16,20,.09);
}
.cap-card:nth-child(3n+2), .engagement article:nth-child(2), .pmv article:nth-child(2) {
  background: linear-gradient(145deg, #f5f2ed 0%, #ebe7df 100%);
}
.cap-card:nth-child(3n), .engagement article:nth-child(3), .pmv article:nth-child(3) {
  background: linear-gradient(145deg, #fff5ef 0%, #f1e4da 100%);
}

/* ---------- Generic page hero: image-first cinematic treatment ---------- */
.page-hero {
  min-height: clamp(430px, 62vh, 680px);
  background-image:
    linear-gradient(90deg, rgba(5,6,8,.82) 0%, rgba(5,6,8,.55) 44%, rgba(5,6,8,.14) 78%),
    var(--hero);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-hero .wrap { position: relative; z-index: 2; }

/* ---------- Stable Bento geometry ---------- */
.home-services-bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.service-bento-card { min-width:0; overflow:hidden; }
.service-bento-card > img:first-child { width:100%; height:100%; object-fit:cover; }

/* ---------- Prevent horizontal overflow ---------- */
html, body { max-width:100%; overflow-x:hidden; }
img, video, svg { max-width:100%; }

@media (max-width: 1024px) {
  .desktop-nav, .site-header > .btn, .header-quote { display:none; }
  .menu-btn { display:block; }
  .section-head, .detail-intro, .contact-grid, .quote-layout { grid-template-columns:1fr; }
  .footgrid { grid-template-columns:1fr 1fr; }
  .home-services-bento { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .service-bento-card, .service-bento-card.service-bento-large, .service-bento-card.service-bento-wide { grid-column:auto !important; min-height:360px; }
  .cap-card { grid-column:span 6; }
  .cap-card.feature { grid-column:span 12; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .engagement { grid-template-columns:1fr; }
  .service-strip { grid-template-columns:160px 40px 44px minmax(0,1fr) 30px; gap:14px; }
}

@media (max-width: 768px) {
  :root { --header:68px; --s7:70px; }
  .wrap { width:min(calc(100% - 32px),var(--max)); }
  .section { padding:64px 0; }
  .brand { min-width:0; }
  .brand span { display:none; }
  .page-hero { min-height:500px; padding-bottom:42px; background-position:62% center; }
  .home-services-bento, .cap-bento, .story-chapters, .pmv, .process-grid, .form-grid { grid-template-columns:1fr !important; }
  .service-bento-card, .service-bento-card.service-bento-large, .service-bento-card.service-bento-wide { grid-column:1 !important; min-height:330px; width:100%; }
  .service-bento-card:nth-child(n) { grid-row:auto !important; }
  .cap-card, .cap-card.feature, .pmv article:first-child, .field.full { grid-column:1 !important; }
  .service-strip { grid-template-columns:96px 38px minmax(0,1fr) 24px; min-height:132px; padding:10px; gap:10px; }
  .service-strip .media { height:108px; }
  .service-strip .num { display:none; }
  .service-strip h3 { font-size:1rem; }
  .service-strip p { font-size:.84rem; }
  .footgrid { grid-template-columns:1fr; }
  .legal { flex-direction:column; gap:10px; }
  .reveal, .reveal.from-left, .reveal.from-right { transform:translateY(18px); }
  .service-bento-card:hover, .cap-card:hover, .story-card:hover { transform:none; }
}

@media (max-width: 480px) {
  .wrap { width:min(calc(100% - 24px),var(--max)); }
  .section { padding:54px 0; }
  .page-hero { min-height:460px; background-position:68% center; }
  .home-services-bento { gap:14px; }
  .service-bento-card, .service-bento-card.service-bento-large, .service-bento-card.service-bento-wide { min-height:300px; }
  .service-strip { grid-template-columns:84px minmax(0,1fr) 22px; }
  .service-strip .iconbox { display:none; }
  .service-strip .media { height:96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* =========================================================
   11. MOBILE STABILITY & CORPORATE IDENTITY — 2026-09-28
   Authoritative overrides. Keep this section LAST.
========================================================= */

/* Make the developer attribution visibly interactive. */
.developer-credit {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-decoration-color: rgba(199,42,9,.8) !important;
  text-underline-offset: 4px;
}
.developer-credit:hover,
.developer-credit:focus-visible { color: #eabd57 !important; }
.company-rc { color:#c9ced4; white-space:nowrap; }

/* Service directory cards use a restrained tinted surface, never plain white. */
.service-strip {
  background: linear-gradient(135deg, rgba(247,244,239,.98), rgba(239,233,225,.96));
  border-color: rgba(199,42,9,.13);
}
.service-strip:nth-child(even) {
  background: linear-gradient(135deg, rgba(242,246,247,.98), rgba(231,238,240,.96));
}

@media (max-width: 768px) {
  /* Keep the full corporate name visible on phones. */
  .site-header { padding-left:12px; padding-right:12px; gap:10px; }
  .brand { min-width:0; flex:1 1 auto; gap:8px; }
  .brand img { width:40px; height:40px; flex:0 0 40px; }
  .brand span {
    display:block !important;
    min-width:0;
    color:#fff;
    font-size:.78rem;
    line-height:1.05;
    white-space:normal;
  }
  .brand small { font-size:.61rem; }
  .menu-btn { flex:0 0 auto; }

  /* HOME BENTO: one independent card per row. No desktop row geometry survives. */
  .home-services-bento {
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    grid-auto-rows:unset !important;
  }
  .home-services-bento > .service-bento-card,
  .home-services-bento > .service-bento-card.service-bento-large,
  .home-services-bento > .service-bento-card.service-bento-wide {
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:300px !important;
    min-height:300px !important;
    grid-column:auto !important;
    grid-row:auto !important;
    margin:0 !important;
    transform:none !important;
  }
  .home-services-bento .service-bento-card > img:first-child {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .home-services-bento .service-bento-content {
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:auto !important;
    max-width:none !important;
    padding:22px !important;
  }

  /* SERVICE DIRECTORY: predictable media + copy row, no animation offsets. */
  .service-directory { display:flex !important; flex-direction:column !important; gap:14px !important; }
  .service-directory > .service-strip {
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) 22px !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    width:100% !important;
    min-height:126px !important;
    height:auto !important;
    padding:10px !important;
    gap:12px !important;
    margin:0 !important;
    transform:none !important;
    overflow:hidden !important;
  }
  .service-strip .media {
    grid-column:1 !important;
    width:92px !important;
    height:104px !important;
    border-radius:9px !important;
  }
  .service-strip .num,
  .service-strip .iconbox { display:none !important; }
  .service-strip .copy { grid-column:2 !important; min-width:0 !important; }
  .service-strip .copy h3 { margin:0 0 6px !important; font-size:.98rem !important; line-height:1.12 !important; }
  .service-strip .copy p { margin:0 !important; font-size:.78rem !important; line-height:1.45 !important; overflow-wrap:anywhere; }
  .service-strip .arr { grid-column:3 !important; justify-self:end !important; }
}

@media (max-width: 420px) {
  .brand span { font-size:.72rem; }
  .brand small { font-size:.57rem; }
  .home-services-bento > .service-bento-card,
  .home-services-bento > .service-bento-card.service-bento-large,
  .home-services-bento > .service-bento-card.service-bento-wide { height:285px !important; min-height:285px !important; }
  .service-directory > .service-strip { grid-template-columns:82px minmax(0,1fr) 20px !important; gap:10px !important; }
  .service-strip .media { width:82px !important; height:96px !important; }
}


/* =========================================================
   V3 AUTHORITATIVE VISUAL CORRECTIONS
   Purpose: legibility, consistent Bento styling, clean mobile layout.
========================================================= */

/* Hero URLs are now declared inline in each HTML file so relative paths
   resolve from the HTML document rather than from /assets/css/. */
.page-hero { background-image: none; }

/* Light Bento/card surfaces always use dark typography. */
.card:not(.service-bento-card),
.cap-card,
.pmv article,
.engagement article,
.process-grid article {
  color: #111820 !important;
}
.card:not(.service-bento-card) h2,
.card:not(.service-bento-card) h3,
.cap-card h3,
.pmv h3,
.engagement h3,
.process-grid h3 { color:#111820 !important; font-weight:800; }
.card:not(.service-bento-card) p,
.cap-card p,
.pmv p,
.engagement p,
.process-grid p { color:#46505a !important; }

/* Purpose / Mission / Vision: deliberately image-free, centered and bright. */
.pmv { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pmv article {
  min-height:300px;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:42px 30px;
  background-image:none !important;
  background:linear-gradient(145deg,#fffaf7 0%,#f3eee8 100%) !important;
}
.pmv article:nth-child(2){ background:linear-gradient(145deg,#f4f6f7 0%,#e9edef 100%) !important; }
.pmv article:nth-child(3){ background:linear-gradient(145deg,#fff4ed 0%,#f3e5dc 100%) !important; }
.pmv article::after { display:none !important; }
.pmv article > * { position:relative; z-index:1; }
.pmv h3 { font-size:clamp(1.5rem,2.2vw,2rem); margin-bottom:14px; }
.pmv p { max-width:34ch; margin-inline:auto; }

/* Capabilities Bento: image-free and icon-free by design. */
.cap-bento { grid-template-columns:repeat(12,minmax(0,1fr)); }
.cap-card,
.cap-card.feature {
  grid-column:span 4;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:34px 28px;
  color:#111820 !important;
  background-image:none !important;
}
.cap-card:nth-child(1),.cap-card:nth-child(4){ background:linear-gradient(145deg,#fff8f4,#f2e8e1) !important; }
.cap-card:nth-child(2),.cap-card:nth-child(5){ background:linear-gradient(145deg,#f4f6f7,#e8edef) !important; }
.cap-card:nth-child(3),.cap-card:nth-child(6){ background:linear-gradient(145deg,#f8f4ed,#eee7dd) !important; }
.cap-card::after,.cap-card.feature::after { display:none !important; }
.cap-card .iconbox { display:none !important; }
.cap-card h3 { font-size:clamp(1.25rem,1.8vw,1.65rem); margin-bottom:14px; }
.cap-card p { max-width:34ch; margin-inline:auto; }

/* Engagement cards: readable typography and centered content. */
.engagement article { text-align:center; }
.engagement article img { width:100%; aspect-ratio:16/9; object-fit:cover; }

/* Service-detail process cards. */
.process-grid article {
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(145deg,#fff9f5,#f1e8e1) !important;
}
.process-grid article:nth-child(even){ background:linear-gradient(145deg,#f4f6f7,#e9edef) !important; }
.process-grid article span { margin:0 auto 16px; }

/* Mobile company name remains visible. */
@media (max-width:768px){
  .brand span { display:block !important; min-width:0; }
  .brand strong { font-size:.72rem; line-height:1.05; }
  .brand small { font-size:.55rem; line-height:1.05; }
  .pmv,.cap-bento { grid-template-columns:1fr !important; }
  .pmv article,.cap-card,.cap-card.feature { grid-column:1 !important; min-height:230px; }
  .process-grid article { min-height:200px; }
}


/* =========================================================
   VERSION 4 — PRODUCTION UI CORRECTIONS
========================================================= */
/* Mobile brand must retain the company name. */
@media (max-width:768px){
  .site-header .brand span{display:block!important;font-size:.72rem;line-height:1.05;white-space:nowrap}
  .site-header .brand small{font-size:.58rem}
  .site-header .brand img{width:38px;height:38px}
}

/* Hero treatment: readability gradient only; photographs remain visible. */
.page-hero{background-size:cover;background-position:center center}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,12,.70) 0%,rgba(5,8,12,.42) 38%,rgba(5,8,12,.08) 70%,rgba(5,8,12,0) 100%);pointer-events:none}
.page-hero{position:relative}
.page-hero .wrap{position:relative;z-index:1}
@media(max-width:768px){
  .page-hero{min-height:480px;background-size:cover;background-position:center center}
  .page-hero::before{background:linear-gradient(90deg,rgba(5,8,12,.72) 0%,rgba(5,8,12,.46) 50%,rgba(5,8,12,.10) 100%)}
  body:has(.page-hero[style*="contact-reception"]) .page-hero{background-size:auto 100%;background-position:center center;background-color:#151515}
}

/* Services directory: intentionally typography-led; no thumbnails or icons. */
.service-strip{grid-template-columns:64px minmax(0,1fr) 40px;min-height:128px;padding:24px 28px;gap:20px;background:linear-gradient(135deg,#fff8f4 0%,#f3f0eb 100%)}
.service-strip:nth-child(even){background:linear-gradient(135deg,#f0f4f5 0%,#e9eef0 100%)}
.service-strip .num{display:block!important;align-self:center;margin:0;font-size:1.05rem}
.service-strip h3{font-weight:800;color:#10161c}
.service-strip p{color:#56616d}
@media(max-width:768px){.service-strip{grid-template-columns:42px minmax(0,1fr) 24px;min-height:118px;padding:20px 16px;gap:12px}.service-strip .num{display:block!important}.service-strip h3{font-size:1.02rem}.service-strip p{font-size:.86rem}}

/* Engagement models: no decorative photography. */
.engagement article{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;text-align:center;color:#10161c}
.engagement article h3{font-weight:850;color:#10161c}
.engagement article p{color:#4e5964}
.engagement-num{display:block;margin-bottom:20px;color:var(--red);font-size:1.05rem;font-weight:900;letter-spacing:.12em}

/* PMV and capability cards: dark readable type, centred, no decorative imagery/icons. */
.pmv article,.cap-card{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#10161c}
.pmv article h3,.cap-card h3{color:#10161c;font-weight:850}
.pmv article p,.cap-card p{color:#4f5a65}

/* Contact and legal usability. */
.contact-list a,.legal-copy a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.consent-field label{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.5;color:#4f5a65}
.consent-field input{width:auto;margin-top:.25rem}
.legal-copy{max-width:900px}.legal-copy h2{margin-top:2.2rem;margin-bottom:.7rem}.legal-copy p{line-height:1.75}

/* =========================================================
   LEGAL PAGES — HEADER FIX
========================================================= */

.legal-hero {
  background: #f4f5f6;
  color: #111820;
  padding: 170px 0 64px;
  min-height: auto;
}

.legal-hero .eyebrow {
  color: #c72a09;
  margin-bottom: 14px;
}

.legal-hero h1 {
  color: #111820;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.95;
  margin: 0 0 28px;
}

.legal-hero .lead {
  color: #111820;
  font-size: 1.1rem;
  margin: 0;
}

@media (max-width: 768px) {
  .legal-hero {
    padding: 125px 0 48px;
  }

  .legal-hero h1 {
    font-size: clamp(2.5rem, 13vw, 4rem);
    line-height: 1;
    margin-bottom: 22px;
  }
}

/* =========================================================
   HERO IMAGE CORRECTION — NO DARK OVERLAY
========================================================= */

.page-hero::before {
  display: none !important;
}

.page-hero {
  background-size: cover;
  background-position: center center;
}

.page-hero h1,
.page-hero .lead,
.page-hero .eyebrow {
  position: relative;
  z-index: 2;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 4px 14px rgba(0, 0, 0, 0.65);
}

.page-hero h1 {
  font-weight: 800;
}

@media (max-width: 768px) {
  .page-hero::before {
    display: none !important;
  }
}

/* =========================================================
   CONTACT — PHONE & EMAIL
========================================================= */

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.contact-details a {
  display: block;
  color: #c72a09;
  text-decoration: none;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.contact-details a:hover {
  text-decoration: underline;
}

.contact-details a span {
  color: #56616d;
  font-size: 0.95em;
}

@media (max-width: 768px) {
  .contact-details {
    gap: 12px;
  }

  .contact-details a {
    font-size: 0.95rem;
  }

  .contact-details a span {
    display: block;
    margin-top: 2px;
  }
}