/* ============================================================================
 * Homepage CSS — extracted from design tool standalone export.
 * Scoped under .dlp-home wrapper (added by the template) where possible.
 * Original total: ~31 KB inline.
 * ============================================================================ */

/* ---------- Font face declarations (Archivo + Archivo Black) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/a3b7be94-2f4d-414a-b127-6d2a6fb063ae.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/87891689-c99f-4b98-b9a8-e711bf3a88fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a8d7cc5-3ee7-4cea-930d-f23b9f3394d7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/a3b7be94-2f4d-414a-b127-6d2a6fb063ae.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/87891689-c99f-4b98-b9a8-e711bf3a88fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a8d7cc5-3ee7-4cea-930d-f23b9f3394d7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/a3b7be94-2f4d-414a-b127-6d2a6fb063ae.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/87891689-c99f-4b98-b9a8-e711bf3a88fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a8d7cc5-3ee7-4cea-930d-f23b9f3394d7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/a3b7be94-2f4d-414a-b127-6d2a6fb063ae.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/87891689-c99f-4b98-b9a8-e711bf3a88fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a8d7cc5-3ee7-4cea-930d-f23b9f3394d7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/a3b7be94-2f4d-414a-b127-6d2a6fb063ae.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/87891689-c99f-4b98-b9a8-e711bf3a88fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a8d7cc5-3ee7-4cea-930d-f23b9f3394d7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/a3b7be94-2f4d-414a-b127-6d2a6fb063ae.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/87891689-c99f-4b98-b9a8-e711bf3a88fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a8d7cc5-3ee7-4cea-930d-f23b9f3394d7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/e7654689-84b4-4ec0-b0f4-0a7bae57ee11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/e249bd90-1545-4c03-a887-bb99186da22c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Layout + components ---------- */
  /* ====== Tokens ====== */
  :root{
    --navy:        #1E4D9B;     /* logo primary */
    --navy-deep:   #143368;     /* darker for overlays */
    --navy-ink:    #0B1F3F;     /* deepest, near-black blue */
    --blue:        #4A8DD0;     /* mid blue */
    --blue-light:  #9CC3E8;     /* light triangle */
    --cream:       #F4EFE7;     /* warm paper */
    --cream-2:     #ECE5D8;
    --paper:       #FFFFFF;
    --ink:         #0E1A2C;
    --muted:       #5F6B7C;
    --line:        #E1DACE;
    --max:         1280px;
  }
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Archivo', system-ui, sans-serif;
    font-weight:500;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    font-size:17px;
  }
  /* Tablet + mobile: drop body text to 16px. The clamp()-based heading sizes
     keep their own scale; this also caps prose-sized elements that set their
     own explicit font-size (lede, hero sub, heritage/careers/final-cta copy)
     so the whole site reads at 16px below the desktop breakpoint.
     `!important` overrides the clamp()-min on .lede / .hero .sub which would
     otherwise lock the floor at 17px. */
  @media (max-width: 1024px){
    body{ font-size:16px }
    .lede,
    .hero .sub,
    .hero p,
    .heritage-content p,
    .careers p,
    .final-cta p{ font-size:16px !important }
    /* Buttons match the body scale on tablet/mobile. */
    .btn{ font-size:16px; padding:14px 22px; }
  }
  img{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

  /* ====== Type ====== */
  .display{
    font-family:'Archivo', sans-serif;
    font-weight:900;
    letter-spacing:-0.02em;
    line-height:0.95;
    text-wrap:balance;
  }
  .eyebrow{
    font-family:'Archivo', sans-serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--navy);
  }
  h2.section-title{
    font-family:'Archivo', sans-serif;
    font-weight:900;
    font-size:clamp(36px, 4.5vw, 64px);
    letter-spacing:-0.02em;
    line-height:1.02;
    margin:0 0 18px;
    text-wrap:balance;
  }
  .lede{
    font-size:clamp(17px, 1.3vw, 20px);
    color:var(--muted);
    max-width:62ch;
    line-height:1.55;
    text-wrap:pretty;
  }

  /* ====== Layout helpers ====== */
  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
  /* Tablet: tighter gutters so sector cards / portfolio grid breathe. */
  @media (max-width: 1024px){ .wrap{padding:0 20px} }
  /* Mobile: 20px gutter — readable breathing room without wasted edges. */
  @media (max-width: 767px){ .wrap{padding:0 20px} }
  .section{padding:clamp(72px, 9vw, 128px) 0}
  .section-tight{padding:clamp(48px, 6vw, 80px) 0}
  .section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;max-width:880px}
  /* Tighter vertical rhythm on tablet/mobile so sections don't feel airy. */
  @media (max-width: 1024px){
    .section{ padding:64px 0 }
    .section-tight{ padding:44px 0 }
    /* Section-head: 20px gap between eyebrow / heading / lede on
       tablet + mobile (was 18px desktop). */
    .section-head{ margin-bottom:36px; gap:20px }
    .section-head h2,
    .section-head .section-title{ margin:0 }
    .section-head .lede{ margin:0 }
  }
  @media (max-width: 767px){
    .section{ padding:40px 0 }
    .section-tight{ padding:28px 0 }
    .section-head{ margin-bottom:24px; gap:20px }
  }
  .section-head.center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}

  /* ====== Buttons ====== */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 24px;
    font-weight:700;
    font-size:15px;
    letter-spacing:0.02em;
    border-radius:2px;
    transition:transform .15s ease, background .2s ease, color .2s ease;
  }
  .btn .arrow{display:inline-block;transition:transform .2s ease}
  .btn:hover .arrow{transform:translateX(4px)}
  .btn-primary{ background:var(--navy); color:#fff; }
  .btn-primary:hover{ background:var(--navy-ink); }
  .btn-ghost{ background:transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
  .btn-ghost:hover{ background:#fff; color:var(--navy); box-shadow: inset 0 0 0 1.5px #fff; }
  .btn-dark{ background:var(--ink); color:#fff; }
  .btn-dark:hover{ background:#000; }
  .btn-outline{ box-shadow: inset 0 0 0 1.5px var(--navy); color:var(--navy); background:transparent;}
  .btn-outline:hover{ background:var(--navy); color:#fff; }

  /* ====== Nav (always white) ====== */
  .nav-wrap{
    position:sticky;top:0;z-index:50;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:14px 0;
    transition:padding .2s ease, box-shadow .25s ease;
  }
  .nav-wrap.scrolled{
    padding:10px 0;
    box-shadow:0 2px 10px rgba(11,31,63,0.06);
  }
  /* position:relative + z-index lifts the inner nav row above the .nav-mobile
     panel (z:49) within the nav-wrap stacking context, so when the menu opens
     the X-toggle button stays visible and clickable. Must be > 49. */
  .nav{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    position:relative;
    z-index:60;
  }
  .brand{display:flex;align-items:center;gap:12px}
  .brand img,
  .brand .custom-logo{height:40px;width:auto}
  /* WP wraps the custom logo in <a class="custom-logo-link"> when has_custom_logo() is true */
  .brand .custom-logo-link{display:inline-flex;align-items:center}
  /* Footer brand logo — taller than nav, matches the existing img height */
  .foot-brand img,
  .foot-brand .custom-logo{height:54px;width:auto;margin-bottom:20px}

  /* Primary nav — wp_nav_menu emits <nav><ul><li><a>; flex lives on the <ul>. */
  .nav-links{display:flex;align-items:center}
  .nav-links > ul,
  .nav-links .menu{
    display:flex;align-items:center;gap:28px;
    list-style:none;margin:0;padding:0;
  }
  .nav-links li{margin:0}
  .nav-links a{
    font-weight:700;font-size:13px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--ink);
    position:relative;padding:6px 0;display:inline-block;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--navy);
    transition:right .2s ease;
  }
  .nav-links a:hover::after,
  .nav-links .current-menu-item > a::after,
  .nav-links .is-active > a::after{ right:0; }
  /* Scroll-spy active state — site.js toggles .is-active on the <li> whose
     anchor matches the section currently in view. Bumps color + underline. */
  .nav-links .is-active > a{ color:var(--navy); }
  /* Mobile menu spy state — bolder color shift so it's visible inside the
     full-screen panel without an underline. */
  .nav-mobile .is-active > a{ color:var(--navy); }

  /* The "Get a Quote" CTA — applied via the `header-button` class on its <li>. */
  .nav-links .header-button > a{
    padding:13px 36px;background:var(--navy);color:#fff !important;
    border:2px solid var(--navy);
    border-radius:2px;text-transform:uppercase;font-size:12px;letter-spacing:0.14em;font-weight:800;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .nav-links .header-button > a:hover{ background:#fff; color:var(--navy) !important; border-color:var(--navy); }
  .nav-links .header-button > a::after{ display:none !important; }

  .nav-toggle{
    display:none;color:var(--ink);
    align-items:center;justify-content:center;
    width:44px;height:44px;
  }
  .nav-toggle .nav-toggle-icon{display:block}
  .nav-toggle .nav-toggle-close{display:none}
  .nav-wrap.nav-open .nav-toggle .nav-toggle-open{display:none}
  .nav-wrap.nav-open .nav-toggle .nav-toggle-close{display:block}

  /* Mobile CTA — same visual as the desktop .header-button pill, but rendered
     as a standalone <a> outside the menu so it's still visible after the
     primary nav collapses to a hamburger. */
  .nav-cta-mobile{
    display:none;
    align-items:center;
    padding:11px 22px;
    background:var(--navy);
    color:#fff !important;
    border:2px solid var(--navy);
    border-radius:2px;
    text-transform:uppercase;
    font-size:12px;letter-spacing:0.14em;font-weight:800;
    white-space:nowrap;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
    margin-left:auto;
  }
  .nav-cta-mobile:hover{ background:#fff; color:var(--navy) !important; }

  /* Mobile menu panel — hidden by default; the @media block below makes it
     a full-viewport overlay on tablet/mobile, sliding in from the right. */
  .nav-mobile{ display:none }

  @media (max-width: 1024px){
    /* Hide the desktop horizontal nav, show the hamburger + CTA */
    .nav-links{ display:none }
    .nav-toggle{ display:inline-flex; }
    .nav-cta-mobile{ display:inline-flex; }

    /* Smaller breathing room between brand and CTA on tighter screens */
    .nav{ gap:12px; }

    /* The actual panel */
    .nav-mobile{
      display:block;
      position:fixed;
      top:0;left:0;right:0;bottom:0;
      background:#fff;
      /* Top padding clears the fixed nav row; 20px gutters match the
         rest of the site's mobile container width. */
      padding:70px 20px 32px;
      z-index:49;            /* sits below .nav-wrap (z:50) so the close button stays clickable */
      transform:translateX(100%);
      opacity:0;
      /* Animate both directions: visibility flips on a delay equal to the
         slide-out duration so the panel actually animates out instead of
         vanishing. On open, the delay collapses to 0 so it shows immediately. */
      transition:transform .35s cubic-bezier(.22,.61,.36,1),
                 opacity .25s ease,
                 visibility 0s linear .35s;
      overflow-y:auto;
      visibility:hidden;
    }
    .nav-wrap.nav-open .nav-mobile{
      transform:translateX(0);
      opacity:1;
      visibility:visible;
      transition:transform .35s cubic-bezier(.22,.61,.36,1),
                 opacity .25s ease,
                 visibility 0s linear 0s;
    }
    /* No in-panel close button — the .nav-toggle hamburger swaps to an X
       when .nav-open is active and lives on the .nav-wrap above the panel. */
    .nav-mobile .nav-mobile-menu,
    .nav-mobile > ul{
      list-style:none;margin:0;padding:0;
      display:flex;flex-direction:column;
    }
    .nav-mobile li{ margin:0 }
    .nav-mobile a{
      display:block;
      padding:18px 0;
      font-weight:700;font-size:18px;letter-spacing:0.08em;
      text-transform:uppercase;color:var(--ink);
      border-bottom:1px solid var(--line);
    }
    .nav-mobile a:hover{ color:var(--navy) }
    /* Hide the "Get a Quote" item inside the mobile panel — the standalone
       .nav-cta-mobile button covers that role visually. */
    .nav-mobile .header-button{ display:none }

    /* Lock body scroll while the panel is open */
    body.nav-open{ overflow:hidden }
  }
  @media (max-width: 767px){
    /* On phones, hide the CTA text label and just keep the hamburger? — no,
       per design keep the CTA visible. Just trim padding so it fits. */
    .nav-cta-mobile{ padding:10px 16px;font-size:11px;letter-spacing:0.1em; }
  }

  /* ====== Hero ====== */
  .hero{
    position:relative;
    min-height:min(82vh, 720px);
    color:#fff;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-bg{
    position:absolute;
    /* Slight overflow top + bottom so the JS parallax has room to translate
       the background without revealing the hero's edge color. ~15% top + 15%
       bottom gives ~30% of slack, more than enough for the 0.35 parallax
       factor used in site.js. */
    inset:-15% 0;
    z-index:-2;
    background-position:center;
    background-size:cover;
    background-image:var(--hero-img);
    transform:scale(1.02);
    will-change:transform;
  }
  .hero-overlay{
    position:absolute;inset:0;z-index:-1;
    background:
      linear-gradient(180deg, rgba(11,31,63,0.55) 0%, rgba(11,31,63,0.35) 35%, rgba(11,31,63,0.85) 100%),
      linear-gradient(90deg, rgba(11,31,63,0.55) 0%, rgba(11,31,63,0.05) 70%);
  }
  .hero-inner{
    /* Match .wrap's horizontal padding explicitly so the hero content aligns
       with every other section's left edge. */
    padding:100px 32px 90px;
    width:100%;
  }
  @media (max-width: 1024px){
    .hero{ min-height:min(70vh, 600px); }
    .hero-inner{ padding:80px 20px 64px; }
  }
  @media (max-width: 767px){
    .hero{ min-height:min(64vh, 520px); }
    .hero-inner{ padding:64px 20px 48px; }
  }
  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-weight:700;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;
    margin-bottom:28px;
    color:#fff;
  }
  .hero-eyebrow .pip{width:8px;height:8px;background:var(--blue-light);display:inline-block;transform:rotate(45deg)}
  .hero h1{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:clamp(38px, 5.2vw, 76px);
    line-height:1.02;
    letter-spacing:-0.02em;
    margin:0 0 24px;
    max-width:22ch;
    text-wrap:balance;
  }
  .hero h1 .em{ color:var(--blue-light); }
  .hero .sub{
    font-size:clamp(17px, 1.4vw, 22px);
    max-width:62ch;
    color:rgba(255,255,255,0.92);
    margin:0 0 36px;
    text-wrap:pretty;
    line-height:1.5;
  }
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

  /* Trust strip */
  .trust-strip{
    background:#fff;
    border-top:6px solid var(--navy);
    position:relative;z-index:2;
  }
  .trust-strip-inner{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
  }
  .trust-item{
    padding:36px 32px;
    border-right:1px solid var(--line);
    display:flex;flex-direction:column;gap:6px;
  }
  .trust-item:last-child{border-right:none}
  .trust-num{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(36px, 4vw, 56px);
    letter-spacing:-0.025em;
    line-height:1;
    color:var(--navy);
  }
  .trust-lbl{
    font-size:13px;font-weight:600;
    color:var(--muted);
    text-wrap:balance;
  }
  @media (max-width: 1024px){
    /* Keep 4 columns at tablet — just tighten the per-item padding so the
       numbers stay legible without bumping the strip's height. */
    .trust-strip-inner{ grid-template-columns:repeat(4, 1fr) }
    .trust-item{ padding:24px 16px; gap:4px; }
    .trust-num{ font-size:clamp(26px, 3.6vw, 42px); }
    .trust-lbl{ font-size:12px; }
  }
  @media (max-width: 767px){
    /* Phones: drop to 2 columns so labels have room to wrap. */
    .trust-strip-inner{ grid-template-columns:repeat(2, 1fr) }
    .trust-item{ padding:20px 14px; border-bottom:1px solid var(--line); }
    .trust-item:nth-child(2n){ border-right:none }
    .trust-item:nth-last-child(-n+2){ border-bottom:none }
  }

  /* ====== Why DLP — three columns ====== */
  .why{
    background:var(--cream);
  }
  .why-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:48px;
  }
  .why-card{
    display:flex;flex-direction:column;gap:14px;
    padding-top:32px;
    border-top:3px solid var(--navy);
  }
  .why-card h3{
    font-family:'Archivo',sans-serif;
    font-weight:900;font-size:26px;letter-spacing:-0.01em;
    margin:0;
    text-wrap:balance;
  }
  .why-card p{margin:0;color:#3b4554;line-height:1.55}
  .why-num{
    font-family:'Archivo Black',sans-serif;
    font-size:14px;color:var(--navy);
    letter-spacing:0.16em;
  }
  @media (max-width: 1024px){ .why-grid{grid-template-columns:repeat(2,1fr);gap:32px} }
  @media (max-width: 767px){ .why-grid{grid-template-columns:1fr;gap:28px} }

  /* ====== Sectors ====== */
  .sectors{ background:#fff }
  .sector-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
  }
  .sector{
    position:relative;
    aspect-ratio: 5/4;
    overflow:hidden;
    color:#fff;
    background:var(--navy-ink);
    isolation:isolate;
  }
  .sector .sec-img{
    position:absolute;inset:0;z-index:-2;
    background-size:cover;background-position:center;
    transition:transform .6s ease;
  }
  .sector:hover .sec-img{ transform:scale(1.06) }
  .sector::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg, rgba(11,31,63,0.15) 0%, rgba(11,31,63,0.85) 75%);
    transition:background .3s ease;
  }
  .sector:hover::after{
    background:linear-gradient(180deg, rgba(30,77,155,0.30) 0%, rgba(11,31,63,0.92) 75%);
  }
  .sector-content{
    position:absolute;inset:0;
    padding:28px;
    display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  }
  .sector h3{
    font-family:'Archivo',sans-serif;
    font-weight:900;font-size:28px;letter-spacing:-0.01em;
    margin:0;
    line-height:1.05;
  }
  .sector p{
    margin:0;
    font-size:14px;
    color:rgba(255,255,255,0.88);
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
  }
  .sector .link{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
    margin-top:4px;
  }
  .sector:hover p{ max-height:120px;opacity:1;margin-top:6px }
  @media (max-width: 1024px){
    .sector-grid{ grid-template-columns:repeat(2, 1fr) }
    /* Touch devices can't hover — surface the description + link permanently
       so every sector tile shows title / blurb / CTA in one pass. */
    .sector p{ max-height:none; opacity:1; overflow:visible; margin-top:6px; }
    .sector .link{ opacity:1; }
  }
  @media (max-width: 767px){
    .sector-grid{grid-template-columns:1fr}
    .sector-content{ padding:20px; }
  }

  /* ====== Services ====== */
  .services{background:var(--navy-ink);color:#fff;position:relative;overflow:hidden}
  .services::before{
    content:"";position:absolute;right:-10%;top:-10%;width:55%;height:120%;
    background:radial-gradient(ellipse at top right, rgba(74,141,208,0.18), transparent 60%);
    pointer-events:none;
  }
  .services h2.section-title{color:#fff}
  .services .lede{color:rgba(255,255,255,0.78)}
  .services .eyebrow{color:var(--blue-light)}
  .services-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);
    gap:1px;background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.10);
  }
  .service{
    background:var(--navy-ink);
    padding:32px 28px;
    display:flex;flex-direction:column;gap:8px;min-height:200px;
    transition:background .25s ease;
    cursor:default;
    position:relative;
  }
  .service:hover{ background:#0a1830; }
  .service .num{
    position:absolute;top:24px;right:24px;
    font-family:'Archivo Black',sans-serif;
    font-size:11px;color:rgba(255,255,255,0.35);letter-spacing:0.18em;
  }
  .service-icon{
    width:44px;height:44px;
    color:var(--blue-light);
    margin-bottom:14px;
  }
  .service-icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .service h3{
    font-family:'Archivo',sans-serif;font-weight:900;font-size:22px;margin:0;letter-spacing:-0.005em;
  }
  .service p{
    margin:0;color:rgba(255,255,255,0.7);font-size:14px;line-height:1.5;
  }
  @media (max-width: 1024px){
    /* Keep 3 columns at tablet — tighten the per-tile padding so they fit. */
    .services-grid{ grid-template-columns:repeat(3,1fr) }
    .service{ padding:24px 18px; min-height:170px; gap:6px; }
    .service h3{ font-size:18px; }
    .service p{ font-size:13px; }
    .service .num{ top:16px; right:16px; }
    .service-icon{ width:36px;height:36px;margin-bottom:10px; }
  }
  @media (max-width: 767px){
    /* Phones: 2 columns with tight padding so two tiles fit comfortably. */
    .services-grid{ grid-template-columns:repeat(2,1fr) }
    .service{ padding:18px 14px; min-height:160px; gap:4px; }
    .service h3{ font-size:16px; line-height:1.15; }
    .service p{ font-size:12px; line-height:1.4; }
    .service .num{ top:12px; right:12px; font-size:10px; }
    .service-icon{ width:30px;height:30px;margin-bottom:8px; }
    /* If the service count is odd, stretch the last tile across both columns
       so the grid bottom row isn't half-empty. */
    .service:last-child:nth-child(odd){ grid-column:1 / -1; }
  }
  .services-cta{margin-top:48px;display:flex;justify-content:flex-end}
  @media (max-width: 767px){
    .services-cta{ margin-top:20px; justify-content:center; }
  }

  /* ====== Heritage feature ====== */
  .heritage{
    background:var(--cream);
    position:relative;
    overflow:hidden;
  }
  .heritage-grid{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    gap:0;
    align-items:stretch;
  }
  .heritage-media{
    position:relative;
    min-height:560px;
    background-size:cover;background-position:center;
    background-image:var(--heritage-img);
  }
  .heritage-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(11,31,63,0.15), rgba(11,31,63,0.55));
  }
  .heritage-badge{
    position:absolute;left:24px;bottom:24px;z-index:2;
    background:#fff;color:var(--navy-ink);
    padding:18px 22px;max-width:300px;
    border-left:4px solid var(--navy);
  }
  .heritage-badge .quote-mark{
    font-family:'Archivo Black',sans-serif;
    font-size:48px;color:var(--blue);
    line-height:0.6;display:block;margin-bottom:4px;
  }
  .heritage-badge p{margin:0;font-size:14px;font-weight:600;text-wrap:balance}
  .heritage-content{
    padding:clamp(40px, 5vw, 80px);
    background:var(--cream);
    display:flex;flex-direction:column;justify-content:center;gap:20px;
  }
  .heritage-content h2{
    font-family:'Archivo',sans-serif;font-weight:900;
    font-size:clamp(32px, 3.8vw, 52px);
    letter-spacing:-0.02em;line-height:1.02;margin:0;
    text-wrap:balance;
  }
  .heritage-content p{margin:0;font-size:17px;color:#3b4554;line-height:1.6;text-wrap:pretty}
  .heritage-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .pill{
    border:1.5px solid var(--navy);color:var(--navy);
    padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    border-radius:2px;
  }
  @media (max-width: 1024px){
    .heritage-grid{grid-template-columns:1fr}
    .heritage-media{min-height:420px}
    /* Beat the clamp(40px, 5vw, 80px) floor so the copy column has the same
       20px gutter as the rest of the site on tablet + mobile. */
    .heritage-content{ padding:32px 20px; }
  }
  @media (max-width: 767px){
    .heritage-content{ padding:28px 20px; }
  }

  /* ====== Portfolio ====== */
  .portfolio{background:#fff}
  /* On tablet/mobile, force the portfolio's heading+button row to stack so
     the "Browse all" button sits full-width under the heading instead of
     squeezing alongside it. Beats the inline flex-direction:row on the
     template's .section-head. */
  @media (max-width: 1024px){
    .portfolio .section-head{
      flex-direction:column !important;
      align-items:stretch !important;
      gap:16px;
    }
    .portfolio .section-head > .btn{
      align-self:flex-start;
      width:100%;
      text-align:center;
      justify-content:center;
    }
  }
  @media (max-width: 767px){
    .portfolio .section-head{ gap:12px; }
  }
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:18px;
  }
  .pf{
    position:relative;
    overflow:hidden;
    background:#ccc;
    isolation:isolate;
    color:#fff;
    cursor:pointer;
  }
  .pf .img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .6s ease}
  .pf:hover .img{transform:scale(1.05)}
  .pf::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg, transparent 30%, rgba(11,31,63,0.85) 100%);}
  .pf-content{
    position:absolute;inset:0;
    padding:24px;
    display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  }
  .pf .tag{
    font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--blue-light);
  }
  .pf h3{
    font-family:'Archivo',sans-serif;font-weight:900;font-size:24px;margin:0;letter-spacing:-0.01em;
    line-height:1.1;
  }
  .pf .loc{font-size:13px;color:rgba(255,255,255,0.85);font-weight:600}
  .portfolio-grid{ grid-auto-rows: 380px; }
  .pf-a{ grid-column: span 7 }
  .pf-b{ grid-column: span 5 }
  .pf-c{ grid-column: span 4; grid-row: span 1 }
  .pf-d{ grid-column: span 4; grid-row: span 1 }
  .pf-e{ grid-column: span 4; grid-row: span 1 }
  @media (max-width: 1024px){
    /* Tablet: 2-column grid. The 12-col layout collapses to 6/6 spans. */
    .portfolio-grid{ grid-auto-rows: 260px; gap:14px; }
    .pf-a, .pf-b, .pf-c, .pf-d, .pf-e{ grid-column: span 6 }
  }
  @media (max-width: 767px){
    .portfolio-grid{ grid-auto-rows: 240px; }
    .pf-a, .pf-b, .pf-c, .pf-d, .pf-e{ grid-column: span 12 }
  }

  /* ====== Testimonials (3 columns, no carousel) ====== */
  .testimonials{ background:var(--navy-ink); color:#fff; overflow:hidden;position:relative }
  .testimonials .eyebrow{color:var(--blue-light)}
  .testimonials h2{color:#fff}
  .testimonials .lede{color:rgba(255,255,255,0.75)}
  .testi-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:32px;
    margin-top:24px;
  }
  .testi-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.10);
    padding:36px 32px;
    display:flex;flex-direction:column;gap:18px;
    transition:background .25s ease, border-color .25s ease;
  }
  .testi-card:hover{ background:rgba(255,255,255,0.06); border-color:rgba(156,195,232,0.35); }
  .testi-card .logo{
    width:100%;
    height:64px;
    border:1.5px dashed rgba(156,195,232,0.35);
    background:rgba(255,255,255,0.03);
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,0.9);
    margin-bottom:6px;
  }
  /* Constrain both <svg> (legacy inline) and <img> (Media Library logo)
     to the same size budget so the placeholder + uploaded files share a look. */
  .testi-card .logo svg,
  .testi-card .logo img{
    max-width:64%;
    max-height:60%;
    width:auto;height:auto;
    object-fit:contain;
    display:block;
  }
  .testi-card .qmark{
    font-family:'Archivo Black',sans-serif;font-size:56px;color:var(--blue);
    line-height:0.5;margin:0 0 4px;
  }
  .testi-card blockquote{
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:18px;line-height:1.45;letter-spacing:-0.005em;
    margin:0;text-wrap:pretty;color:#fff;
    flex:1;
  }
  .testi-card .meta{
    border-top:1px solid rgba(255,255,255,0.12);
    padding-top:18px;display:flex;flex-direction:column;gap:4px;
  }
  .testi-card .name{font-weight:800;font-size:15px}
  .testi-card .role{font-size:13px;color:rgba(255,255,255,0.65)}
  .testi-card .sector{ display:none }
  @media (max-width: 1024px){
    .testi-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
    .testi-card{ padding:24px 20px; gap:14px; }
    .testi-card .logo{ height:52px; }
    .testi-card blockquote{ font-size:16px; }
  }
  @media (max-width: 767px){
    .testi-grid{ grid-template-columns:1fr; gap:20px; }
    .testi-card{ padding:22px 20px; }
  }

  /* ====== Logo slider (marquee) ====== */
  .marquee{
    background:#fff;
    overflow:hidden;
    position:relative;
    padding:24px 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  }
  .marquee-track{
    display:flex;align-items:center;gap:64px;
    width:max-content;
    animation: marquee 60s linear infinite;
  }
  .marquee:hover .marquee-track{ animation-play-state: paused; }
  .marquee-item{
    flex:0 0 auto;
    height:88px;
    display:flex;align-items:center;justify-content:center;
    padding:0 20px;
  }
  .marquee-item img{
    max-height:80px;width:auto;object-fit:contain;
    filter:grayscale(0%);
    opacity:0.95;
    transition:opacity .2s ease, filter .2s ease;
  }
  .marquee-item:hover img{ opacity:1; filter:grayscale(0%); }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-slow .marquee-track{ animation-duration: 80s; }
  .marquee-reverse .marquee-track{ animation-direction: reverse; }
  /* Smaller items + tighter gap on tablet/mobile so more logos sit in view
     at once. Track speed unchanged so density actually goes up. */
  @media (max-width: 1024px){
    .marquee{ padding:18px 0; }
    .marquee-track{ gap:36px; }
    .marquee-item{ height:64px; padding:0 12px; }
    .marquee-item img{ max-height:56px; }
    .accred .marquee-item{ height:88px; }
    .accred .marquee-item img{ max-height:72px; }
    .clients .marquee-item{ height:60px; }
    .clients .marquee-item img{ max-height:48px; }
  }
  @media (max-width: 767px){
    .marquee-track{ gap:24px; }
    .marquee-item{ height:56px; padding:0 8px; }
    .marquee-item img{ max-height:44px; }
    .accred .marquee-item{ height:72px; }
    .accred .marquee-item img{ max-height:60px; }
    .clients .marquee-item{ height:48px; }
    .clients .marquee-item img{ max-height:40px; }
  }

  /* ====== Accreditations (PURE WHITE, slider) ====== */
  .accred{ background:#FFFFFF }
  .accred .section-head{text-align:center;align-items:center;margin-left:auto;margin-right:auto}
  .accred .marquee-item{ height:120px }
  .accred .marquee-item img{ max-height:104px }

  /* ====== Clients (PURE WHITE, slider, no lines) ====== */
  .clients{ background:#FFFFFF; padding-top:0 }
  .clients .marquee-item{ height:80px }
  .clients .marquee-item img{ max-height:64px }

  /* ====== Areas ====== */
  .areas{background:var(--cream);position:relative;overflow:hidden}
  .areas-grid{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap:80px;align-items:start;
  }
  .areas-list{
    display:grid;grid-template-columns:repeat(3, 1fr);
    gap:0 24px;
  }
  .area-item{
    padding:18px 0;
    border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;
    font-weight:700;font-size:16px;
  }
  .area-item:last-child{border-bottom:1px solid var(--line)}
  .area-item .plus{
    color:var(--navy);font-size:18px;font-weight:900;
    transition:transform .2s ease;
  }
  .area-item:hover .plus{transform:translateX(3px)}
  @media (max-width: 1024px){
    .areas-grid{ grid-template-columns:1fr; gap:32px; }
    .areas-list{ grid-template-columns:repeat(3,1fr); gap:0 18px; }
  }
  @media (max-width: 767px){
    .areas-list{ grid-template-columns:repeat(2,1fr); gap:0 14px; }
  }

  /* ====== Careers ====== */
  /* Background-attachment: fixed makes the image hold still in the viewport
     while the careers content scrolls over it — classic parallax-without-JS.
     Moved off the .bg child onto the section itself because attachment:fixed
     only works on element backgrounds, not on positioned children. */
  .careers{
    position:relative;color:#fff;isolation:isolate;overflow:hidden;
    background-image:var(--careers-img);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
  }
  /* The legacy .bg div is now invisible scaffold — keeping it in markup so
     existing PHP templates don't need updating. */
  .careers .bg{display:none}
  /* iOS / older Android handle background-attachment:fixed badly (it either
     scrolls anyway or scales the image to viewport height, looking blurry).
     Fall back to a normal scrolling background on tablet + mobile. */
  @media (max-width: 1024px), (hover: none){
    .careers{ background-attachment:scroll; }
  }
  .careers::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg, rgba(11,31,63,0.92) 0%, rgba(11,31,63,0.70) 60%, rgba(11,31,63,0.40) 100%);
  }
  .careers-inner{
    display:grid;grid-template-columns: 1.2fr 1fr;gap:64px;align-items:center;
  }
  .careers h2{ color:#fff }
  .careers p{ color:rgba(255,255,255,0.85);font-size:18px;max-width:54ch;line-height:1.55;text-wrap:pretty }
  .careers-stats{
    display:flex;flex-direction:column;gap:24px;
  }
  .careers-stat{
    border-left:3px solid var(--blue-light);
    padding:8px 0 8px 24px;
  }
  .careers-stat .n{
    font-family:'Archivo Black',sans-serif;
    font-size:44px;line-height:1;color:#fff;
  }
  .careers-stat .l{font-size:14px;color:rgba(255,255,255,0.8);margin-top:4px}
  @media (max-width: 1024px){
    .careers-inner{ grid-template-columns:1fr; gap:36px; }
    /* Tablet: counters lay out as 3 columns instead of stacked. */
    .careers-stats{ flex-direction:row; flex-wrap:wrap; gap:20px; }
    .careers-stat{ flex:1 1 0; min-width:0; padding:6px 0 6px 18px; }
    .careers-stat .n{ font-size:36px; }
  }
  @media (max-width: 767px){
    .careers-stats{ flex-direction:row; flex-wrap:wrap; gap:14px; }
    .careers-stat{ flex:1 1 0; min-width:0; padding:4px 0 4px 14px; }
    .careers-stat .n{ font-size:28px; }
    .careers-stat .l{ font-size:12px; }
  }

  /* ====== Final CTA ====== */
  .final-cta{
    background:var(--cream);
    text-align:center;
  }
  .final-cta h2{
    font-size:clamp(40px, 6vw, 80px);
    font-weight:900;
    letter-spacing:-0.025em;
    line-height:0.98;
    margin:0 0 24px;
    max-width:20ch;
    margin-left:auto;margin-right:auto;
  }
  .final-cta p{font-size:18px;color:#3b4554;max-width:62ch;margin:0 auto 36px;line-height:1.55;text-wrap:pretty}
  .final-actions{display:inline-flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .contact-row{
    margin-top:64px;
    display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    max-width:880px;margin-left:auto;margin-right:auto;
  }
  .contact-cell{
    background:var(--cream);
    padding:24px 20px;text-align:left;
    display:flex;flex-direction:column;gap:4px;
  }
  .contact-cell .lbl{font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--navy)}
  .contact-cell .val{font-weight:700;font-size:16px;color:var(--ink);transition:color .2s ease}
  /* When the value is a link (tel:/mailto:), no underline by default — just
     a colour shift on hover so the row reads as a clean grid until you
     hover an interactive cell. */
  a.val{ text-decoration:none; }
  a.val:hover{ color:var(--navy); }
  @media (max-width: 767px){
    .contact-row{ grid-template-columns:1fr }
    .contact-cell{ text-align:center; align-items:center; }
  }

  /* ====== Footer (white) ====== */
  footer{
    background:#fff;
    color:var(--ink);
    padding:80px 0 32px;
    border-top:1px solid var(--line);
  }
  @media (max-width: 1024px){ footer{ padding:50px 0; } }
  .foot-grid{
    display:grid;grid-template-columns: 1.4fr 1fr 1fr 1fr;gap:30px;
    padding-bottom:56px;border-bottom:1px solid var(--line);
  }
  .foot-brand p{font-size:14px;line-height:1.6;color:var(--muted);max-width:36ch}
  footer h4{
    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--navy);margin:0 0 10px;font-weight:800;
  }
  .foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .foot-list li{margin:0}
  .foot-list a{font-size:14px;color:#3b4554;transition:color .15s}
  .foot-list a:hover{color:var(--navy)}
  .foot-bottom{
    padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
    font-size:12px;color:var(--muted);
  }
  .foot-bottom a{color:var(--muted)}
  .foot-bottom a:hover{color:var(--navy)}
  /* Legal menu (Privacy/Terms/Cookies/Modern Slavery) — inline row of links */
  .foot-legal{
    display:flex;gap:18px;flex-wrap:wrap;
    list-style:none;margin:0;padding:0;
  }
  .foot-legal li{margin:0}
  @media (max-width: 1024px){ .foot-grid{grid-template-columns: 1fr 1fr;} }
  @media (max-width: 767px){
    .foot-grid{ grid-template-columns:1fr; gap:20px; padding-bottom:30px; text-align:center; }
    .foot-legal{ gap:14px; }
    /* Center the brand blurb, logo, column headings, link lists, and the
       bottom legal row so the whole footer reads as one centered column. */
    .foot-brand{ display:flex; flex-direction:column; align-items:center; }
    .foot-brand-link{ display:inline-block; margin:0 auto; }
    .foot-brand img,
    .foot-logo{ margin-left:auto; margin-right:auto; }
    .foot-brand p{ margin-left:auto; margin-right:auto; }
    .foot-list{ align-items:center; }
    .foot-bottom{ justify-content:center; text-align:center; }
    .foot-legal{ justify-content:center; }
  }
  /* Footer typography on tablet + mobile: body copy 16px, headings 18px. */
  @media (max-width: 1024px){
    footer h4{ font-size:18px; letter-spacing:0.08em; }
    .foot-brand p,
    .foot-list a,
    .foot-bottom,
    .foot-legal li,
    .foot-legal a{ font-size:16px; }
  }

  /* ====== Back to top ======
   * Fixed circular button in the bottom-right. Hidden by default (opacity:0
   * + transform), fades + slides into view when site.js adds .visible after
   * the user scrolls past ~600px. Pointer events are disabled until visible
   * so the invisible button can't be tabbed/clicked accidentally. */
  .back-to-top{
    position:fixed;
    right:24px;bottom:24px;
    width:48px;height:48px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--navy);color:#fff;
    border:0;border-radius:999px;
    cursor:pointer;
    opacity:0;
    transform:translateY(20px);
    pointer-events:none;
    transition:opacity .3s ease,
               transform .3s ease,
               background .3s ease,
               color .3s ease,
               box-shadow .3s ease;
    z-index:48; /* below the nav header */
    box-shadow:0 6px 18px rgba(11,31,63,0.18);
  }
  .back-to-top.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .back-to-top:hover{ background:var(--navy-ink); }
  .back-to-top svg{ display:block; }
  /* Adaptive theme: when site.js detects the button is sitting over a dark
     section (.hero, .services, .testimonials, .careers) it adds .on-dark —
     flip to a white pill with the navy arrow so the icon stays legible. */
  .back-to-top.on-dark{
    background:#fff;
    color:var(--navy);
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
  }
  .back-to-top.on-dark:hover{ background:var(--cream); }
  @media (max-width: 767px){
    .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; }
  }

  /* Triangle accent (logo motif) */
  .triangle-accent{
    display:inline-flex;align-items:flex-end;gap:3px;
  }
  .triangle-accent svg{height:14px;width:auto}

  /* utility */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* Final CTA — slower 1s reveal with the matching ease-out curve used by
     the rest of the page, so the section's mood feels consistent with the
     section-head sequence and the data-anim/data-stagger transitions. */
  .final-cta .reveal{
    transition:opacity 1s cubic-bezier(.22,.61,.36,1),
               transform 1s cubic-bezier(.22,.61,.36,1);
  }

  /* ----------------------------------------------------------------------
   * Section-head sequence:
   *   .eyebrow fades in (no Y)  →  delay  →  heading fades up  →  delay  →  lede fades up
   * The wrapper (.section-head.reveal) itself no longer moves — its children do.
   * Specificity (.20 vs .reveal's .10) means we override the base .reveal rule
   * without !important. Other .reveal elements (cards, content blocks) are
   * unaffected and continue to fade-up as one unit.
   * -------------------------------------------------------------------- */
  .section-head.reveal{
    opacity:1;
    transform:none;
  }
  .section-head.reveal > .eyebrow,
  .section-head.reveal > .section-title,
  .section-head.reveal > h2,
  .section-head.reveal > .lede,
  .section-head.reveal > p{
    opacity:0;
    transition:opacity 1s cubic-bezier(.22,.61,.36,1),
               transform 1s cubic-bezier(.22,.61,.36,1);
  }
  .section-head.reveal > .eyebrow{
    transform:none;       /* fade-only — no Y on the small eyebrow label */
    transition-delay:0ms;
  }
  .section-head.reveal > .section-title,
  .section-head.reveal > h2{
    transform:translateY(22px);
    transition-delay:500ms;
  }
  .section-head.reveal > .lede,
  .section-head.reveal > p{
    transform:translateY(22px);
    transition-delay:900ms;
  }
  .section-head.reveal.in > .eyebrow,
  .section-head.reveal.in > .section-title,
  .section-head.reveal.in > h2,
  .section-head.reveal.in > .lede,
  .section-head.reveal.in > p{
    opacity:1;
    transform:none;
  }

  /* ==========================================================
   * Section-entrance animations (data-anim) + stagger children
   * ========================================================== */

  /* Contain horizontal slide transforms so they don't create
     a body-wide scrollbar during the animation. */
  .dlp-home { overflow-x: clip; }

  [data-anim]{
    opacity:0;
    transition:opacity 1s cubic-bezier(.22,.61,.36,1),
               transform 1s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  [data-anim="up"]    { transform:translateY(80px); }
  [data-anim="left"]  { transform:translateX(-120px); }
  [data-anim="right"] { transform:translateX(120px); }
  [data-anim="scale"] { transform:scale(.92); }
  [data-anim="fade"]  { transform:none; }
  [data-anim].in {
    opacity:1;
    transform:none;
  }
  /* On phones, demote left/right slide-ins to plain fades — the horizontal
     translate looks janky on narrow viewports and pushes the section off-axis
     during the entrance. */
  @media (max-width: 767px){
    [data-anim="left"],
    [data-anim="right"]{ transform:none; }
  }

  /* Stagger children — each direct child fades + rises with a per-index delay
     applied by homepage.js (delay = index × value-of-data-stagger). */
  [data-stagger] > *{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 1s cubic-bezier(.22,.61,.36,1),
               transform 1s cubic-bezier(.22,.61,.36,1);
  }
  [data-stagger].in > *{
    opacity:1;
    transform:none;
  }

  /* Opacity-only stagger variant — no Y translate on the children.
     Add `class="stagger-fade"` alongside `data-stagger="..."`. */
  [data-stagger].stagger-fade > *{
    transform:none;
  }

  /* ----------------------------------------------------------------------
   * Mobile: collapse the per-child stagger into a single grid fade-in.
   *
   * On phones the one-by-one tile reveal feels slow and flickery on long
   * scrolls — there are 9 service tiles, 5 portfolio cards, 6 sector cards.
   * Instead, each [data-stagger] grid fades in as one block, and the
   * children are immediately visible. The JS-applied per-child
   * transition-delay still gets written, but it acts on `transition:none`
   * elements, so it's effectively a no-op.
   * -------------------------------------------------------------------- */
  @media (max-width: 767px){
    [data-stagger]{
      opacity:0;
      transition:opacity .6s cubic-bezier(.22,.61,.36,1);
    }
    [data-stagger].in{ opacity:1; }
    [data-stagger] > *,
    [data-stagger].in > *{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }

  @media (prefers-reduced-motion: reduce){
    [data-anim],
    [data-stagger] > *{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }