/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* =============================================
       CSS CUSTOM PROPERTIES
    ============================================= */
    :root {
      --color-primary:   #1a1a1a;
      --color-primary-hover: #000000;
      --color-dark:    #515659;
      --color-white:   #ffffff;
      --color-black:   #000000;
      --color-text:    #313436;
      --color-muted:   #707070;
      --nav-height:    88px;
      --transition:    0.3s ease;
      --z-header:      100;
      --z-dropdown:    200;
      --z-overlay:     90;
    }

    /* =============================================
       RESET / BASE
    ============================================= */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Ezra', sans-serif;
      font-weight: 600;
    }

    h2 {
      font-size: clamp(32px, 3.5vw, 50px);
      font-weight: 700;
      color: #515659;
      line-height: 1.1;
      margin: 0 0 24px;
    }

    p {
      font-size: 16px;
      font-weight: 300;
      color: #313436;
      line-height: 1.7;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Lexend', sans-serif; background: #515659; }
    a { text-decoration: none; transition: color var(--transition), background var(--transition), border-color var(--transition); }
    ul { list-style: none; }
    img { display: block; max-width: 100%; }

    /* =============================================
       HEADER BLOCK
    ============================================= */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: var(--z-header);
      padding: 22px 0;
      transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
      /* mega menu anchors to header, not nav item */
      /* (fixed elements are their own containing block for absolute children) */
    }

    /* scrolled modifier */
    .header--scrolled {
      background: #fff;
      padding: 12px 0;
      box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    }

    .header--scrolled .nav__link {
      color: #313436;
    }

    .header--scrolled .nav__link:hover {
      color: #313436;
    }

    .header--scrolled .header__actions-phone {
      border-color: #313436;
      color: #313436;
    }

    .header--scrolled .header__actions-phone:hover {
      border-color: var(--color-primary);

      background: var(--color-primary);
      color: #fff;
    }

    .header__inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      align-items: center;
      gap: 16px;
      /* stretch children to full height so nav items fill header bar */
      align-items: stretch;
    }

    /* re-center logo and actions vertically since inner is now stretch */
    .header__logo,
    .header__actions,
    .header__burger {
      align-self: center;
    }

    /* =============================================
       LOGO ELEMENT
    ============================================= */
    .header__logo {
      flex-shrink: 0;
      width: 185px;
    }

    .header__logo-img {
      width: 100%;
      height: auto;
    }

    /* default = white logo (for dark/image bg) */
    .header__logo-img--light { display: block; }
    .header__logo-img--dark  { display: none; }

    /* scrolled = dark logo (white bg) */
    .header--scrolled .header__logo-img--light { display: none; }
    .header--scrolled .header__logo-img--dark  { display: block; }

    /* =============================================
       ACTIONS GROUP (phone + contact — always visible)
    ============================================= */
    .header__actions {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-left: auto;
      flex-shrink: 0;
    }

    .header__actions-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 39px;
      border: 2px solid var(--color-white);
      color: var(--color-white);
      transition: background var(--transition), border-color var(--transition), color var(--transition);
      flex-shrink: 0;
      border-radius: 25px;
    }

    .header__actions-phone:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);

      color: var(--color-white);
    }

    .header__actions-contact {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--color-white);
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      white-space: nowrap;
      border-radius: 25px;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
    }

    .header__actions-contact:hover {
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
      color: var(--color-white);
    }

    /* =============================================
       NAV BLOCK
    ============================================= */
    .nav {
      flex: 1;
      display: flex;
      align-items: stretch; /* fill header height */
      justify-content: flex-end;
    }

    .nav__list {
      display: flex;
      align-items: stretch; /* items fill full nav height */
      gap: 0;
      justify-content: flex-end;
    }

    /* ---- nav item ---- */
    .nav__item {
      position: static;
      display: flex;
      align-items: center;
      padding-bottom: 50px; /* extends hover zone down to meet the dropdown */
      margin-bottom: -50px; /* pulls layout back up so it doesn't affect header height */
    }

    /* non-mega items still need relative for their own dropdowns */
    .nav__item--has-dropdown:not(.nav__item--mega) {
      position: relative;
    }

    .nav__link {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 14px;
      font-size: 16px;
      font-weight: 300;
      color: #fff;
      position: relative;
      text-transform: uppercase;
      transition: 0.3s ease all;
      text-align: left;
      font-family: 'Lexend', sans-serif;
      white-space: nowrap;
      height: 100%;
    }

    .nav__link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: currentColor;
      transition: 0.3s ease all;
      transform: translateX(-50%);
    }

    .nav__link:hover::after {
      width: calc(100% - 28px);
    }

    .nav__link:hover {
      color: #fff;
    }

    .nav__link--active {
      font-weight: 600;
    }

    .nav__link--active::after {
      width: calc(100% - 28px);
    }

    /* + / - indicator for items with dropdowns */
    .nav__chevron {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 300;
      line-height: 1;
      color: currentColor;
      flex-shrink: 0;
      transition: none;
      width: 14px;
    }

    .nav__chevron::before {
      content: '+';
      display: block;
      transition: none;
    }

    .nav__item--has-dropdown:hover .nav__chevron::before {
      content: '−';
    }

    /* ---- dropdown ---- */
    .nav__dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      min-width: 200px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, visibility 0s linear 0.2s;
      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
      z-index: var(--z-dropdown);
    }

    .nav__item--has-dropdown:hover .nav__dropdown,
    .nav__item--has-dropdown:focus-within .nav__dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.2s ease, visibility 0s linear 0s;
    }

    /* no more ::after bridge needed — gap is gone */
    .nav__item--has-dropdown::after { display: none; }

    /* ---- mega dropdown — full viewport width, anchored to header ---- */
    .nav__dropdown--mega {
      left: 0;
      right: 0;
      width: 100%;
      top: 100%; /* flush — no gap */
      transform: none;
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      box-sizing: border-box;
      padding: 0 calc((100% - 1360px) / 2);
    }

    .nav__item--has-dropdown:hover .nav__dropdown--mega,
    .nav__item--has-dropdown:focus-within .nav__dropdown--mega {
      transform: none;
    }

    /* mega column */
    .nav__mega-col {
      padding: 28px 24px;
      border-right: 1px solid #efefef;
    }

    .nav__mega-col:last-child { border-right: none; }

    .nav__mega-title {
      font-size: 16px;
      color: #515659;
      font-weight: 700;
      line-height: 1;
      padding-bottom: 20px;
      text-align: left;
      text-transform: uppercase;
      border-bottom: 2px solid #dedfdf;
      margin-bottom: 14px;
      display: block;
    }

    .nav__mega-title:hover { color: var(--color-primary); }

    .nav__mega-list li + li { margin-top: 0; }

    .nav__mega-list a {
      padding: 10px 0;
      display: inline-block;
      font-size: 15px;
      color: #707070;
      transition: color 0.3s ease;
    }

    .nav__mega-list a:hover {
      color: #515659;
    }

    /* single-column dropdown */
    .nav__dropdown--single {
      min-width: 180px;
      padding: 8px 0;
      top: calc(100% - 30px); /* fine-tuned to align with mega menu */
    }

    .nav__dropdown--single li a {
      display: inline-block;
      padding: 10px 22px;
      font-size: 15px;
      font-weight: 400;
      color: #707070;
      transition: color 0.3s ease;
    }

    .nav__dropdown--single li a:hover {
      color: #515659;
    }

    /* =============================================
       MOBILE BURGER (hamburger icon in header bar)
    ============================================= */
    .header__burger {
      display: none; /* shown via media query below */
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      cursor: pointer;
      flex-shrink: 0;
      background: none;
      border: none;
      padding: 4px;
    }

    .header__burger-line {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--color-white);
      transition: transform var(--transition), opacity var(--transition), background var(--transition);
      transform-origin: center;
    }

    .header--scrolled .header__burger-line {
      background: #000;
    }

    /* =============================================
       MOBILE OVERLAY (dim background)
    ============================================= */
    .nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 10;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .nav-overlay--visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* =============================================
       MOBILE DRAWER — two-panel system
       Panel 1: main list  (slides in from left)
       Panel 2: sub menu   (slides over panel 1)
    ============================================= */
    @media (max-width: 1024px) {

      /* ── header bar tweaks ── */
      .header__inner { padding: 0 16px; gap: 12px; }
      .header__burger { display: flex; }
      .header__logo { width: 140px; }
      .nav-overlay { display: block; pointer-events: none; }

      /* ── DRAWER SHELL ──
         Fixed, full-width, slides in from the left.
         Acts as a clipping container for both panels. */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: var(--z-header);
        /* panels sit side-by-side inside; we slide the shell */
        overflow: hidden;
        display: flex;
        flex-direction: row;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
      }

      .nav--open {
        transform: translateX(0);
        pointer-events: auto;
      }

      /* ── PANEL BASE ──
         Both panels are full-width inside the shell. */
      .nav__panel {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        background: var(--color-white);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Panel 2 starts off-screen to the right */
      .nav__panel--sub {
        background: #efefef;
        transform: translateX(0); /* controlled by JS class */
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .nav__panel--sub.is-visible {
        transform: translateX(0);
      }

      /* ── PANEL HEADER ROW ──
         Three-zone bar: [back] [title] [close]  */
      .nav__panel-head {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid #dedfdf;
        flex-shrink: 0;
        min-height: 60px;
      }

      .nav__panel-back,
      .nav__panel-close {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        width: 60px;
        border-right: 1px solid #dedfdf;
        color: var(--color-text);
        font-size: 20px;
        transition: background var(--transition);
      }

      .nav__panel-back:hover,
      .nav__panel-close:hover { background: #efefef; }

      /* back arrow chevron */
      .nav__panel-back::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-left: 2.5px solid var(--color-primary);
        border-bottom: 2.5px solid var(--color-primary);
        transform: rotate(45deg) translateX(2px);
      }

      /* close = ×  (panel 1 — no back button) */
      .nav__panel-close {
        border-right: none;
        border-left: 1px solid #dedfdf;
        font-size: 22px;
        font-weight: 300;
        color: #515659;
      }

      .nav__panel-title {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 600;
        color: var(--color-black);
        letter-spacing: 0.2px;
      }

      /* Panel 1 has no back button so title is left-aligned */
      .nav__panel--main .nav__panel-head {
        justify-content: flex-end;
      }
      .nav__panel--main .nav__panel-title {
        justify-content: flex-start;
        padding-left: 24px;
      }

      /* ── PANEL 1 — main nav list ── */
      .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
      }

      .nav__item {
        border-bottom: 1px solid #dedfdf;
        padding-bottom: 0;  /* reset desktop padding-bottom */
        margin-bottom: 0;   /* reset desktop margin-bottom */
      }

      .nav__link {
        padding: 18px 24px;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-black);
        justify-content: space-between;
        align-items: center;
        text-transform: none;
        letter-spacing: 0;
        height: auto;
        position: static;
        display: block;
        width: 100%;
      }

      .nav__link:hover { color: var(--color-black); background: #efefef; }

      /* replace desktop chevron with green › for items with sub-menus */
      .nav__chevron { display: none; }

      .nav__panel-logo {
        display: flex;
        align-items: center;
        padding: 0 20px;
        flex: 1;
      }

      .nav__panel-logo img {
        height: 28px;
        width: auto;
        display: block;
      }

      /* Split row: link takes all space, icon button is a separate tap target */
      .nav__item--has-dropdown .nav__link {
        flex: 1;
      }

      .nav__item--has-dropdown {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid #dedfdf; /* same divider as all other rows */
      }

      /* prevent double border — parent li now owns it */
      .nav__item--has-dropdown.nav__item { border-bottom: 1px solid #dedfdf; }

      .nav__sub-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        flex-shrink: 0;
        background: none;
        border: none;
        border-left: 1px solid #dedfdf;
        cursor: pointer;
        color: var(--color-primary);
        font-size: 22px;
        font-weight: 300;
        line-height: 1;
        transition: background var(--transition);
        padding: 0;
      }

      .nav__sub-trigger:hover { background: #efefef; }

      /* ── PANEL 2 — sub-menu content ── */
      /* Hide ALL dropdown content by default on mobile */
      .nav__dropdown,
      .nav__dropdown--mega,
      .nav__dropdown--single {
        display: none !important;
      }

      /* desktop-only dropdowns always hidden on mobile */
      .nav__dropdown--desktop-only {
        display: none !important;
      }

      /* Only show dropdown content when its parent panel is visible */
      .nav__panel--sub.is-visible .nav__dropdown,
      .nav__panel--sub.is-visible .nav__dropdown--mega,
      .nav__panel--sub.is-visible .nav__dropdown--single {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
        min-width: 0;
        width: 100%;
        padding: 0 !important;
      }

      .nav__mega-col {
        border-right: none;
        border-bottom: none;
        padding: 20px 24px 8px;
      }

      .nav__mega-title {
        font-size: 16px;
        color: #515659;
        font-weight: 700;
        line-height: 1;
        padding-bottom: 20px;
        text-align: left;
        text-transform: uppercase;
        border-bottom: 2px solid #dedfdf;
        margin-bottom: 4px;
        display: block;
      }

      .nav__mega-list li + li { margin-top: 0; }

      .nav__mega-list a {
        padding: 18px 0;
        display: block;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-black);
        border-bottom: 1px solid #dedfdf;
        transition: color 0.3s ease;
      }

      .nav__mega-list a:hover { color: #515659; }

      /* Single col dropdown */
      .nav__dropdown--single { padding: 0 !important; }

      .nav__dropdown--single li a {
        padding: 18px 24px;
        display: block;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-black);
        border-bottom: 1px solid #dedfdf;
        transition: color 0.3s ease;
      }

      .nav__dropdown--single li a:hover { color: #515659; background: transparent; }

    } /* end @media mobile */

    @media (min-width: 1025px) {
      .nav__drawer-head { display: none; }
      .nav__panel-head  { display: none; }
      .nav__panel--sub  { display: none !important; }
      .nav__sub-trigger { display: none; }
      /* show + / - on desktop */
      .nav__chevron { display: inline-flex; }

      .nav__panel--main {
        display: contents;
      }
    }

    /* =============================================
       HERO SECTION
    ============================================= */
    .hero {
      position: relative;
      width: 100%;
    }

    .hero__inner {
      position: relative;
      width: 100%;
      height: 90vh;
      min-height: 600px;
      overflow: hidden;
    }

    .hero__video {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      display: none;
    }

    .hero__video--active {
      display: block;
    }

    .hero__img-fallback {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      z-index: 0;
    }

    .hero__img-fallback--hidden {
      display: none;
    }

    @media (max-width: 768px) {
      .hero__video { display: none !important; }
      .hero__img-fallback { display: block !important; }
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.62), rgba(0,0,0,0.45));
      z-index: 1;
      pointer-events: none;
    }

    .hero__content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 100%;
      max-width: 860px;
      padding: 0 24px;
      text-align: center;
    }

    .hero__heading {
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 19px;
      color: #fff;
      margin: 0px;
      opacity: 0.7;
      padding-bottom: 22px;
      text-transform: uppercase;
    }

    .hero__icon {
      width: 185px;
      height: auto;
      margin: 0 auto 24px;
      display: block;
    }

    .hero__subheading {
      font-size: clamp(36px, 5vw, 60px);
      line-height: 1.2em;
      font-weight: 600;
      color: #fff;
      margin: 0;
      padding-bottom: 22px;
      text-transform: uppercase;
    }

    .hero__subtext {
      font-size: 18px;
      color: rgba(255,255,255,0.85);
      margin: 0 0 32px;
    }

    .hero__btn {
      font-weight: 600;
      font-size: 14px;
      line-height: 19px;
      
      text-decoration: none;
      padding: 15px 30px;
      background: var(--color-primary);
      color: #fff;
      margin-top: 26px;
      display: inline-block;
      border: 2px solid var(--color-primary);
      border-radius: 25px;
    }

    .hero__btn:hover {
      background-color: var(--color-primary-hover);
      color: #fff;
      transition: .5s;
      border: 2px solid var(--color-primary-hover);
    }

    /* scroll indicator */
    .hero__scroll {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: scrollBounce 1.8s ease-in-out infinite;
    }

    .hero__scroll-line {
      display: block;
      width: 16px;
      height: 16px;
      border-right: 2px solid rgba(255,255,255,0.8);
      border-bottom: 2px solid rgba(255,255,255,0.8);
      transform: rotate(45deg);
    }

    @keyframes scrollBounce {
      0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.6; }
      50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
    }

    @media (max-width: 768px) {
      .hero__content { max-width: 100%; }
      .hero__subtext  { font-size: 16px; }
    }

    /* =============================================
       WHAT WE DO SECTION
    ============================================= */
    .what-we-do {
      padding: 100px 0;
      background: #fff;
    }

    .what-we-do__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .what-we-do__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    /* eyebrow */
    .what-we-do__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .what-we-do__heading {
      font-size: clamp(32px, 3.5vw, 50px);
      font-weight: 700;
      color: #515659;
      line-height: 1.1;
      margin: 0 0 24px;
    }

    .what-we-do__intro {
      margin: 0 0 40px;
    }

    .what-we-do__icon {
      width: 200px;
      height: auto;
      display: block;
      margin-top: 32px;
    }

    .what-we-do--alt {
      background: #efefef;
    }

    /* ---- services accordion list ---- */
    .services-list__item {
    }

    .services-list__divider {
      height: 1px;
      background: #dedfdf;
    }

    .services-list__trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: none;
      border: none;
      padding: 25px 0;
      cursor: pointer;
      text-align: left;
    }

    .services-list__title {
      font-size: 26px;
      font-weight: 600;
      color: #515659;
      margin: 0;
      transition: color 0.3s ease;
    }

    .services-list__trigger:hover .services-list__title {
      color: var(--color-primary);
    }

    /* + / - icon */
    .services-list__icon {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      position: relative;
    }

    .services-list__icon::before,
    .services-list__icon::after {
      content: '';
      position: absolute;
      background: var(--color-primary);
      border-radius: 1px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* horizontal bar */
    .services-list__icon::before {
      width: 100%; height: 2px;
      top: 50%; left: 0;
      transform: translateY(-50%);
    }

    /* vertical bar */
    .services-list__icon::after {
      width: 2px; height: 100%;
      top: 0; left: 50%;
      transform: translateX(-50%);
    }

    /* open state: vertical bar disappears → becomes − */
    .services-list__item.is-open .services-list__icon::after {
      transform: translateX(-50%) rotate(90deg);
      opacity: 0;
    }

    /* collapsible body */
    .services-list__body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
      padding: 0;
    }

    .services-list__item.is-open .services-list__body {
      max-height: 400px;
      padding-bottom: 20px;
    }

    .services-list__body p {
      margin: 0 0 16px;
    }

    .services-list__link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--color-primary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: gap 0.3s ease;
    }

    .services-list__link:hover { gap: 12px; }

    /* ---- image grid ---- */
    .what-we-do__img-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      height: 580px;
    }

    /* 2x2 grid variant */
    .what-we-do__img-grid--2x2 {
      height: auto;
    }

    .what-we-do__img-grid--2x2 .what-we-do__img-item {
      aspect-ratio: 4/3;
      overflow: hidden;
    }

    /* mosaic grid: wide — square+square — wide */
    .what-we-do__img-grid--mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      height: auto;
    }

    .what-we-do__img-item--wide {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }

    .what-we-do__img-item--square {
      aspect-ratio: 1 / 1;
      overflow: hidden;
    }

    /* zigzag grid: tall+short left, short+tall right */
    .what-we-do__img-grid--zigzag {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      height: clamp(400px, 50vw, 700px);
    }

    .what-we-do__img-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
    }

    .what-we-do__img-item--tall {
      overflow: hidden;
    }

    .what-we-do__img-item--short {
      overflow: hidden;
    }

    .what-we-do__img-item--tall img,
    .what-we-do__img-item--short img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .what-we-do__img-item--tall:hover img,
    .what-we-do__img-item--short:hover img {
      transform: scale(1.04);
    }

    .what-we-do__img-tall {
      height: 100%;
      overflow: hidden;
    }

    .what-we-do__img-tall img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .what-we-do__img-tall:hover img { transform: scale(1.04); }

    .what-we-do__img-stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
    }

    .what-we-do__img-item {
      flex: 1;
      overflow: hidden;
    }

    .what-we-do__img-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .what-we-do__img-item:hover img { transform: scale(1.04); }

    /* zigzag flex overrides — must come after base .what-we-do__img-item */
    .what-we-do__img-grid--zigzag .what-we-do__img-item--tall {
      flex: 1.75;
    }

    .what-we-do__img-grid--zigzag .what-we-do__img-item--short {
      flex: 1;
    }

    /* hide nav items (services kept in code but hidden) */
    .nav__item--hidden {
      display: none !important;
    }

    /* ---- responsive ---- */
    @media (max-width: 1024px) {
      .what-we-do__grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .what-we-do__images {
        order: 2;
      }

      .what-we-do__content {
        order: 1;
      }

      .what-we-do__img-grid {
        height: auto;
      }

      .what-we-do__img-grid--zigzag {
        height: clamp(300px, 55vw, 450px);
      }

      .what-we-do__container { padding: 0 24px; }

      .services-list__title { font-size: 24px; }
    }

    @media (max-width: 600px) {
      .what-we-do { padding: 60px 0; }

      .what-we-do__img-grid {
        height: auto;
        gap: 10px;
      }

      /* mobile: flatten zigzag into 2x2 grid */
      .what-we-do__img-grid--zigzag {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: auto;
        gap: 10px;
      }

      .what-we-do__img-grid--zigzag .what-we-do__img-col {
        display: contents;
      }

      .what-we-do__img-grid--zigzag .what-we-do__img-item--tall,
      .what-we-do__img-grid--zigzag .what-we-do__img-item--short {
        flex: none;
        aspect-ratio: 1 / 1;
      }
    }
    /* =============================================
       CALLOUT SECTION (image + content)
    ============================================= */
    .callout {
      padding: 100px 0;
      background: #fff;
    }



    .callout__inner {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .callout--img-right .callout__inner {
      direction: rtl;
    }

    .callout--img-right .callout__inner > * {
      direction: ltr;
    }

    .callout__image {
      width: 100%;
      overflow: hidden;
      order: 1;
    }

    .callout__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .callout__image:hover img {
      transform: scale(1.03);
    }

    .callout__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 14px;
    }

    .callout__title {
      font-size: clamp(32px, 3.5vw, 50px);
      font-weight: 700;
      color: #515659;
      line-height: 1.1;
      margin: 0 0 24px;
    }

    .callout__content p {
      line-height: 1.5em;
      margin: 0 0 16px;
    }

    .callout__content p:last-of-type {
      margin: 0 0 40px;
    }

    .callout__subtitle {
      font-size: 18px;
      font-weight: 400;
      color: #313436;
      line-height: 1.6;
      margin: 0 0 24px;
    }

    .callout__image-wrap {
      display: flex;
      flex-direction: column;
      gap: 24px;
      order: 1;
    }

    .callout__testimonial {
      background: #efefef;
      padding: 32px;
      border-left: 4px solid var(--color-primary);
    }

    .callout__quote {
      margin: 0;
    }

    .callout__quote p {
      font-size: 17px;
      font-weight: 400;
      font-style: italic;
      color: #313436;
      line-height: 1.7;
      margin: 0 0 16px;
    }

    .callout__quote-author {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .callout__quote-author strong {
      font-size: 15px;
      font-weight: 700;
      color: #313436;
      font-style: normal;
    }

    .callout__quote-author span {
      font-size: 13px;
      font-weight: 400;
      color: #707070;
      font-style: normal;
    }

    .callout__content--text-only {
      order: 2;
    }

    .callout__btn {
      font-size: 14px;
      border: 1px solid var(--color-primary);
      line-height: 52px;
      text-align: center;
      color: #fff;
      background: var(--color-primary);
      padding: 0px 15px;
      display: inline-block;
      border-radius: 25px;
      text-decoration: none;
      width: 100%;
      max-width: 180px;
      height: 52px;
    }

    .callout__btn:hover {
      background: none;
      color: var(--color-primary);
      border: 1px solid var(--color-primary);
    }

    @media (max-width: 1024px) {
      .callout { padding: 60px 0; }

      .callout__inner {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        gap: 40px;
        padding: 0 24px;
        direction: ltr !important;
      }

      .callout--img-right .callout__inner > * {
        direction: ltr;
      }

      .callout__image {
        width: 100%;
        overflow: hidden;
      }

      .callout__image-wrap {
        width: 100%;
      }

      .callout--img-left .callout__image,
      .callout--img-left .callout__image-wrap {
        order: 1;
      }

      .callout--img-left .callout__content {
        order: 2;
      }

      .callout__image img {
        height: 300px;
        min-height: 300px;
      }
    }

    /* =============================================
       PROCESS TIMELINE
    ============================================= */
    .process {
      padding: 100px 0;
      background: #fff;
    }

    .process__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .process__header {
      text-align: center;
      margin-bottom: 64px;
    }

    .process__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .process__heading {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 700;
      color: #515659;
      margin: 0 0 16px;
      line-height: 1.1;
    }

    .process__subtext {
      font-size: 16px;
      font-weight: 300;
      color: #707070;
      line-height: 1.7;
      margin: 0 auto;
      max-width: 560px;
    }

    .process__timeline {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
    }

    .process__line {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: #dedfdf;
      transform: translateX(-50%);
    }

    .process__step {
      position: relative;
      display: flex;
      align-items: center;
      padding: 16px 0;
      cursor: pointer;
    }

    .process__step:hover .process__dot {
      background: #000;
      border-color: #000;
    }

    .process__dot {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      min-width:11px;
      width: 11px;
      height: 11px;
      min-height:11px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--color-primary);
      z-index: 2;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .process__step--left {
      justify-content: flex-start;
    }

    .process__step--left .process__content {
      width: calc(50% - 40px);
      text-align: right;
      padding-right: 0;
    }

    .process__step--right {
      justify-content: flex-end;
    }

    .process__step--right .process__content {
      width: calc(50% - 40px);
      text-align: left;
      padding-left: 0;
    }

    .process__number {
      font-size: 12px;
      font-weight: 700;
      font-family: 'Lexend', monospace;
      color: var(--color-primary);
      opacity: 0.5;
      letter-spacing: 0.5px;
    }

    .process__title {
      font-size: 16px;
      font-weight: 600;
      color: #313436;
      margin: 2px 0 4px;
    }

    .process__text {
      font-size: 14px;
      font-weight: 300;
      color: #707070;
      margin: 0;
      line-height: 1.5;
    }

    @media (max-width: 768px) {
      .process { padding: 60px 0; }
      .process__container { padding: 0 24px; }

      .process__line {
        left: 23px;
        transform: none;
      }

      .process__dot {
        left: 23px;
        transform: translateX(-50%);
      }

      .process__step--left,
      .process__step--right {
        justify-content: flex-start;
      }

      .process__step--left .process__content,
      .process__step--right .process__content {
        width: auto;
        text-align: left;
        margin-left: 48px;
        padding: 0;
      }
    }

    /* =============================================
       OUR PROJECTS — STATIC GRID WITH HOVER OVERLAY
    ============================================= */
    .our-work {
      padding: 100px 0;
      background: #efefef;
    }

    .our-work__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .our-work__header {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      margin-bottom: 48px;
      justify-content: space-between;
    }

    .our-work__header-text {
      flex: 1;
    }

    .our-work__heading {
      font-size: clamp(32px, 3.5vw, 50px);
      font-weight: 700;
      color: #515659;
      margin: 0 0 12px;
    }

    .our-work__subtext {
      font-size: 16px;
      font-weight: 300;
      color: #313436;
      line-height: 1.7;
      margin: 0;
      max-width: 600px;
    }

    .our-work__view-all {
      font-weight: 600;
      font-size: 14px;
      line-height: 19px;
      color: #fff;
      text-align: center;
      position: relative;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      padding: 14.5px 15px;
      transition: 0.5s;
      width: 100%;
      max-width: 125px;
      border-radius: 25px;
      flex-shrink: 0;
      align-self: center;
    }

    .our-work__view-all:hover {
      color: var(--color-primary);
      background: none;
      transition: 0.5s;
    }

    /* 3-column static grid */
    .our-work__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    /* individual project card with hover overlay */
    .our-work__card {
      position: relative;
      overflow: hidden;
    }

    .our-work__card-link {
      display: block;
      position: relative;
      color: inherit;
    }

    .our-work__card-img {
      aspect-ratio: 4/3;
      overflow: hidden;
    }

    .our-work__card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .our-work__card-link:hover .our-work__card-img img {
      transform: scale(1.05);
    }

    /* overlay — sits over image, visible on hover */
    .our-work__card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 24px;
      background: rgba(255, 255, 255, 0.92);
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .our-work__card-link:hover .our-work__card-overlay {
      transform: translateY(0);
    }

    .our-work__card-location {
      display: block;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 6px;
    }

    .our-work__card-title {
      font-size: 18px;
      font-weight: 700;
      color: #515659;
      margin: 0 0 8px;
      line-height: 1.3;
    }

    .our-work__card-excerpt {
      font-size: 14px;
      font-weight: 300;
      color: #313436;
      line-height: 1.6;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    @media (max-width: 1024px) {
      .our-work { padding: 60px 0; }
      .our-work__container { padding: 0 24px; }
      .our-work__grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 600px) {
      .our-work__grid { grid-template-columns: 1fr; }
      .our-work__header { flex-direction: column; gap: 16px; }
      .our-work__view-all { align-self: flex-start; }
    }

    /* =============================================
       CLIENTS
    ============================================= */
    .clients {
      padding: 80px 0;
      background: #fff;
    }

    .clients__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .clients__header {
      text-align: center;
      margin-bottom: 56px;
    }

    .clients__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .clients__heading {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 700;
      color: #515659;
      margin: 0;
    }

    .clients__grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
      align-items: center;
    }

    .clients__item {
      display: flex;
      align-items: center;
      justify-content: center;
      filter: grayscale(100%);
      opacity: 0.6;
      transition: filter 0.3s ease, opacity 0.3s ease;
    }

    .clients__item a {
      background: #fff;
    }

    .clients__item:hover {
      filter: grayscale(0%);
      opacity: 1;
    }

    .clients__item img {
      max-width: 100%;
      object-fit: contain;
      display: block;
    }

    @media (max-width: 1024px) {
      .clients { padding: 60px 0; }
      .clients__container { padding: 0 24px; }
      .clients__grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 600px) {
      .clients__grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* =============================================
       FOUNDATION — STATS BANNER
    ============================================= */
    .foundation {
      background: var(--color-primary);
      padding: 100px 0;
    }

    .foundation__inner {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 64px;
      align-items: center;
    }

    .foundation__eyebrow {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
      margin-bottom: 24px;
    }

    .foundation__line {
      display: inline-block;
      width: 40px;
      height: 1px;
      background: rgba(255,255,255,0.4);
    }

    .foundation__heading {
      font-size: clamp(36px, 4vw, 54px);
      font-weight: 400;
      color: #fff;
      line-height: 1.15;
      margin: 0;
      font-family: 'Ezra', Georgia, serif;
    }

    .foundation__heading em {
      font-style: italic;
      color: rgba(255,255,255,0.7);
    }

    .foundation__stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }

    .foundation__stat {
      padding: 0 28px;
      border-left: 1px solid rgba(255,255,255,0.15);
    }

    .foundation__stat:first-child {
      border-left: none;
      padding-left: 0;
    }

    .foundation__number {
      display: block;
      font-size: clamp(36px, 4vw, 52px);
      font-weight: 400;
      color: #fff;
      line-height: 1;
      margin-bottom: 16px;
      font-family: 'Ezra', Georgia, serif;
    }

    .foundation__label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
      margin: 0;
    }

    @media (max-width: 1024px) {
      .foundation { padding: 60px 0; }
      .foundation__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
      }
    }

    @media (max-width: 600px) {
      .foundation__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
      }
      .foundation__stat {
        padding: 0;
        border-left: none;
      }
    }

    /* =============================================
       CTA BANNER (green)
    ============================================= */
    .cta-banner {
      background: var(--color-primary);
      padding: 100px 0;
    }

    .cta-banner__inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 40px;
      text-align: center;
    }

    .cta-banner__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      margin-bottom: 14px;
    }

    .cta-banner__heading {
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 700;
      color: #fff;
      margin: 0 0 20px;
    }

    .cta-banner__text {
      color: rgba(255,255,255,0.85);
      margin: 0 0 36px;
    }

    .cta-banner__btn {
      display: inline-block;
      padding: 14px 36px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #515659;
      background: #fff;
      border: 2px solid #fff;
      border-radius: 25px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .cta-banner__btn:hover {
      background: transparent;
      color: #fff;
      border-color: #fff;
    }

    .cta-banner__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .cta-banner__btn--outline {
      background: transparent;
      color: #fff;
      border: 2px solid #fff;
    }

    .cta-banner__btn--outline:hover {
      background: #fff;
      color: var(--color-primary);
      border-color: #fff;
    }

    @media (max-width: 768px) {
      .cta-banner { padding: 60px 0; }
      .cta-banner__inner { padding: 0 24px; }
    }

    /* =============================================
       FOOTER
    ============================================= */
    .footer {
      background-color: #313436;
      padding-top: 119px;
    }

    .footer__inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 40px 60px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    /* override global h2/h3/p defaults inside footer */
    .footer h2, .footer h3, .footer h4 {
      color: #fff;
      margin: 0;
    }

    .footer p {
      font-weight: 300;
      line-height: 24px;
      color: #FFFFFF;
      opacity: 0.85;
      margin-top: 30px;
    }

    /* brand col */
    .footer__logo {
      display: flex;
	  gap: 2rem;
	  margin-top: 32px;
      margin-bottom: 20px;
      margin-left: 0;
    }

    .footer__logo a.logo img {
      width: 260px;
      height: auto;
    }
    .footer__logo a.castle img {
      max-height: 55px;
    }

    .footer__tagline {
      line-height: 1.7;
      margin: 0 0 24px;
    }

    .footer__social {
      display: flex;
      align-items: center;
      gap: 12px;
      list-style: none;
      margin: 0 0 28px;
      padding: 0;
    }

    .footer__social li a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255,255,255,0.2);
      transition: border-color 0.3s ease, background 0.3s ease;
    }

    .footer__social li a:hover {
      border-color: var(--color-primary);

      background: var(--color-primary);
    }

    .footer__social li a img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }

    /* newsletter */
    .footer__newsletter {
      display: flex;
      height: 48px;
      max-width: 320px;
    }

    .footer__newsletter-input {
      flex: 1;
      padding: 0 14px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 1.5px;
      color: #fff;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.15);
      border-right: none;
      outline: none;
      font-family: 'Lexend', sans-serif;
      transition: border-color 0.3s ease;
    }

    .footer__newsletter-input::placeholder { color: rgba(255,255,255,0.35); }
    .footer__newsletter-input:focus { border-color: var(--color-primary); }

    .footer__newsletter-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      flex-shrink: 0;
      background: var(--color-primary);
      border: none;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .footer__newsletter-btn:hover { background: var(--color-primary-hover); }

    .footer__newsletter-btn img {
      width: 18px;
      filter: brightness(0) invert(1);
    }

    /* nav col headings */
    .footer__col-heading {
      font-weight: 400;
      font-size: 15px;
      line-height: 19px;
      color: #FFFFFF;
      position: relative;
      opacity: 0.75;
      text-transform: uppercase;
      margin: 0 0 22px;
    }

    .footer__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer__list li, .footer__list p {
      margin: 0;
      font-size: 14px;
    }

    .footer__list a {
      font-size: 15px;
      font-weight: 300;
      color: rgba(255,255,255,0.6);
      line-height: 1.6;
      transition: color 0.3s ease;
    }

    .footer__list a:hover { color: rgba(255,255,255,0.9); }

    /* bottom bar */
    .footer__bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding: 22px 40px;
      max-width: 1360px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .footer__bottom p {
      font-size: 12px;
      color: rgba(255,255,255,0.35) !important;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .footer__bottom a {
      color: rgba(255,255,255,0.5);
      transition: color 0.3s ease;
    }

    .footer__bottom a:hover { color: var(--color-primary); }

    .footer__bottom img {
      height: 16px;
      width: auto;
      vertical-align: middle;
      margin-left: 4px;
      opacity: 0.5;
      transition: opacity 0.3s ease;
    }

    .footer__bottom img:hover { opacity: 1; }

    @media (max-width: 1024px) {
      .footer__inner {
        grid-template-columns: 1fr 1fr;
        padding: 0 24px 48px;
        gap: 36px;
      }
      .footer__brand { grid-column: 1 / -1; }
      .footer__bottom {
        padding: 20px 24px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
      }
    }

    @media (max-width: 600px) {
      .footer__inner { grid-template-columns: 1fr; }
      .footer { padding-top: 60px; }
    }


    /* =============================================
       SERVICE PAGE — BANNER
    ============================================= */
    .service-banner {
      position: relative;
      width: 100%;
      height: 50vh;
      min-height: 340px;
      max-height: 500px;
      overflow: hidden;
    }

    .service-banner__bg {
      position: absolute;
      inset: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .service-banner__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
      z-index: 1;
      pointer-events: none;
    }

    .service-banner__content {
      position: relative;
      z-index: 2;
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .service-banner__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--color-white);
      margin-bottom: 14px;
    }

    .service-banner__heading {
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 700;
      color: #fff;
      margin: 0;
      line-height: 1.1;
    }

    @media (max-width: 768px) {
      .service-banner { min-height: 280px; }
      .service-banner__content { padding: 0 24px; }
    }

    /* =============================================
       SERVICE PAGE — CONTENT BLOCKS (alternating image + text)
    ============================================= */
    .service-blocks {
      background: #fff;
    }

    .service-block {
      padding: 100px 0;
    }

    .service-block:nth-child(even) {
      background: #efefef;
    }

    .service-block__inner {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    /* flip image to the right on even blocks */
    .service-block:nth-child(even) .service-block__inner {
      direction: rtl;
    }

    .service-block:nth-child(even) .service-block__inner > * {
      direction: ltr;
    }

    .service-block__image {
      overflow: hidden;
    }

    .service-block__image img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .service-block__image:hover img {
      transform: scale(1.03);
    }

    .service-block__content {
    }

    .service-block__title {
      font-size: clamp(26px, 3vw, 42px);
      font-weight: 700;
      color: #515659;
      line-height: 1.15;
      margin: 0 0 24px;
    }

    .service-block__text p {
      font-size: 16px;
      font-weight: 300;
      color: #313436;
      line-height: 1.75;
      margin: 0 0 18px;
    }

    .service-block__text p:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 1024px) {
      .service-block { padding: 60px 0; }

      .service-block__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 24px;
        direction: ltr !important;
      }

      .service-block:nth-child(even) .service-block__inner {
        direction: ltr !important;
      }

      .service-block:nth-child(even) .service-block__inner > * {
        direction: ltr;
      }

      .service-block__image {
        order: -1;
      }

      .service-block__image img {
        height: 300px;
        min-height: 300px;
      }
    }

    /* =============================================
       NEWS LISTING PAGE — GRID
    ============================================= */
    .news-grid-section {
      padding: 100px 0;
      background: #fff;
    }

    .news-grid-section__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .news-grid-section__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    /* individual news card */
    .news-card {
      background: #efefef;
    }

    .news-card__image {
      overflow: hidden;
      aspect-ratio: 16/10;
    }

    .news-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .news-card:hover .news-card__image img {
      transform: scale(1.05);
    }

    .news-card__body {
      padding: 28px 24px 32px;
    }

    .news-card__title {
      font-size: 20px;
      font-weight: 700;
      color: #515659;
      line-height: 1.3;
      margin: 0 0 14px;
    }

    .news-card__excerpt {
      font-size: 15px;
      font-weight: 300;
      color: #313436;
      line-height: 1.7;
      margin: 0 0 20px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .news-card__excerpt a {
      color: var(--color-primary);
      font-weight: 500;
    }

    .news-card__link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #515659;
      transition: gap 0.3s ease, color 0.3s ease;
    }

    .news-card__link:hover {
      gap: 14px;
      color: var(--color-primary);
    }

    .news-card__link svg {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
    }

    .news-card__link:hover svg {
      transform: translateX(2px);
    }

    @media (max-width: 1024px) {
      .news-grid-section { padding: 60px 0; }
      .news-grid-section__container { padding: 0 24px; }
      .news-grid-section__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    }

    @media (max-width: 600px) {
      .news-grid-section__grid { grid-template-columns: 1fr; gap: 40px; }
    }

    .news-card--hidden {
      display: none;
    }

    .news-grid-section__load-more {
      text-align: center;
      margin-top: 48px;
    }

    .news-grid-section__btn {
      display: inline-block;
      padding: 14px 36px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Lexend', sans-serif;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #fff;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      border-radius: 25px;
      cursor: pointer;
      transition: 0.3s ease all;
    }

    .news-grid-section__btn:hover {
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
    }

    /* =============================================
       NEWS DETAIL PAGE — BANNER
    ============================================= */
    .detail-banner {
      position: relative;
      width: 100%;
      height: 55vh;
      min-height: 380px;
      max-height: 560px;
      overflow: hidden;
    }

    .detail-banner__bg {
      position: absolute;
      inset: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .detail-banner__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.35));
      z-index: 1;
      pointer-events: none;
    }

    .detail-banner__content {
      position: relative;
      z-index: 2;
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 60px;
    }

    .detail-banner__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--color-white);
      margin-bottom: 14px;
    }

    .detail-banner__heading {
      font-size: clamp(28px, 4vw, 50px);
      font-weight: 700;
      color: #fff;
      margin: 0;
      line-height: 1.15;
      max-width: 800px;
    }

    @media (max-width: 768px) {
      .detail-banner { min-height: 300px; }
      .detail-banner__content { padding: 0 24px; padding-bottom: 40px; }
    }

    /* =============================================
       NEWS DETAIL PAGE — ARTICLE CONTENT
    ============================================= */
    .article {
      padding: 80px 0;
      background: #fff;
    }

    .article__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .article__body h3 {
      font-size: 22px;
      font-weight: 700;
      color: #515659;
      margin: 48px 0 16px;
      line-height: 1.3;
    }

    .article__body h3:first-child {
      margin-top: 0;
    }

    .article__body p {
      font-size: 16px;
      font-weight: 300;
      color: #313436;
      line-height: 1.8;
      margin: 0 0 18px;
    }

    .article__body a {
      color: var(--color-primary);
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .article__body a:hover {
      color: var(--color-primary-hover);
    }

    .article__body ul,
    .article__body ol {
      margin: 0 0 24px;
      padding-left: 24px;
    }

    .article__body ul {
      list-style: disc;
    }

    .article__body ol {
      list-style: decimal;
    }

    .article__body li {
      font-size: 16px;
      font-weight: 300;
      color: #313436;
      line-height: 1.8;
      margin-bottom: 8px;
    }

    .article__body li p {
      margin: 0;
    }

    .article__body strong {
      font-weight: 600;
      color: #515659;
    }

    @media (max-width: 768px) {
      .article { padding: 48px 0; }
      .article__container { padding: 0 24px; }
    }

    /* =============================================
       NEWS DETAIL PAGE — RELATED NEWS SLIDER
    ============================================= */
    .related-news {
      padding: 100px 0;
      background: #efefef;
    }

    .related-news__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .related-news__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 48px;
    }

    .related-news__heading {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 700;
      color: #515659;
      margin: 0;
    }

    .related-news__view-all {
      font-weight: 600;
      font-size: 14px;
      line-height: 19px;
      color: #fff;
      text-align: center;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      padding: 14.5px 15px;
      transition: 0.5s;
      width: 100%;
      max-width: 125px;
      white-space: nowrap;
      border-radius: 25px;
    }

    .related-news__view-all:hover {
      color: var(--color-primary);
      background: none;
    }

    .related-news__slider-wrap {
      position: relative;
      overflow: hidden;
    }

    .related-news__slider {
      display: flex;
      gap: 24px;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
    }

    .related-news__slide {
      flex: 0 0 calc(33.333% - 16px);
      min-width: 0;
    }

    .related-news__slide-link {
      display: block;
      color: inherit;
    }

    .related-news__slide-img {
      overflow: hidden;
      aspect-ratio: 16/10;
      margin-bottom: 20px;
    }

    .related-news__slide-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .related-news__slide-link:hover .related-news__slide-img img {
      transform: scale(1.04);
    }

    .related-news__slide-title {
      font-size: 20px;
      font-weight: 700;
      color: #515659;
      margin: 0 0 12px;
      line-height: 1.3;
    }

    .related-news__slide-excerpt {
      font-size: 14px;
      font-weight: 300;
      color: #313436;
      line-height: 1.7;
      margin: 0 0 16px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .related-news__slide-read {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #515659;
      transition: gap 0.3s ease, color 0.3s ease;
    }

    .related-news__slide-read:hover {
      gap: 14px;
      color: var(--color-primary);
    }

    .related-news__slide-read svg {
      width: 18px;
      height: 18px;
    }

    /* bottom bar: controls */
    .related-news__bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 32px;
    }

    .related-news__controls {
      display: flex;
      gap: 8px;
    }

    .related-news__btn {
      background: #fff;
      border: 1px solid #dedfdf;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 28px;
      color: #515659;
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease;
      flex-shrink: 0;
      padding: 0;
      padding-bottom: 5px;
    }

    .related-news__btn:hover {
      background: var(--color-primary);
      color: #fff;
      border-color: var(--color-primary);

    }

    .related-news__btn:disabled {
      opacity: 0.3;
      cursor: default;
    }

    @media (max-width: 1024px) {
      .related-news { padding: 60px 0; }
      .related-news__container { padding: 0 24px; }
      .related-news__slide { flex: 0 0 calc(50% - 12px); }
    }

    @media (max-width: 600px) {
      .related-news__slide { flex: 0 0 100%; }
      .related-news__header { flex-direction: column; gap: 16px; align-items: flex-start; }
    }

    /* =============================================
       ABOUT PAGE — INTRO SECTION
    ============================================= */
    .about-intro {
      padding: 100px 0;
      background: #fff;
    }

    .about-intro__inner {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-intro__content {}

    .about-intro__title {
      font-size: clamp(28px, 3.5vw, 46px);
      font-weight: 700;
      color: #515659;
      line-height: 1.15;
      margin: 0 0 24px;
    }

    .about-intro__text p {
      font-size: 16px;
      font-weight: 300;
      color: #515659;
      line-height: 1.75;
      margin: 0 0 18px;
    }

    .about-intro__image {
      overflow: hidden;
    }

    .about-intro__image img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .about-intro__image:hover img {
      transform: scale(1.03);
    }

    @media (max-width: 1024px) {
      .about-intro { padding: 60px 0; }
      .about-intro__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
      .about-intro__image { order: -1; }
    }

    /* =============================================
       TEAM GRID
    ============================================= */
    .team-section {
      padding: 100px 0;
      background: #efefef;
    }

    .team-section__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .team-section__header {
      text-align: center;
      margin-bottom: 56px;
    }

    .team-section__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .team-section__heading {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 700;
      color: #515659;
      margin: 0 0 16px;
    }

    .team-section__subtext {
      max-width: 700px;
      margin: 0 auto 28px;
      font-size: 16px;
      font-weight: 300;
      color: #515659;
      line-height: 1.7;
    }

    .team-section__view-all {
      display: inline-block;
      font-weight: 600;
      font-size: 14px;
      color: #fff;
      text-align: center;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      padding: 14px 24px;
      transition: 0.3s;
      border-radius: 25px;
    }

    .team-section__view-all:hover {
      color: var(--color-primary);
      background: none;
    }

    .team-section__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }

	/* When there are only 2 children, center them in the middle columns */
	.team-section__grid:has(:nth-child(2):last-child) {
	  grid-template-columns: 1fr repeat(2, 1fr) 1fr;
	}

	.team-section__grid:has(:nth-child(2):last-child) > :first-child {
	  grid-column: 2;
	}

    .team-card {
      text-align: center;
    }

    .team-card__image {
      overflow: hidden;
      aspect-ratio: 1/1;
      margin-bottom: 20px;
    }

    .team-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
      background: #fff;
    }

    .team-card:hover .team-card__image img {
      transform: scale(1.04);
    }

    .team-card__name {
      font-size: 18px;
      font-weight: 700;
      color: #515659;
      margin: 0 0 6px;
    }

    .team-card__role {
      font-size: 14px;
      font-weight: 300;
      color: #707070;
      margin: 0;
    }

    @media (max-width: 1024px) {
      .team-section { padding: 60px 0; }
      .team-section__container { padding: 0 24px; }
      .team-section__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    }

    @media (max-width: 600px) {
      .team-section__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .team-card__name { font-size: 16px; }
    }

    /* =============================================
       CULTURE SLIDER
    ============================================= */
    .culture {
      padding: 100px 0;
      background: #fff;
    }

    .culture__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .culture__heading {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 700;
      color: #515659;
      margin: 0 0 56px;
      text-align: center;
    }

    .culture__slider-wrap {
      position: relative;
      overflow: hidden;
    }

    .culture__slider {
      display: flex;
      gap: 24px;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
    }

    .culture__slide {
      flex: 0 0 calc(50% - 12px);
      min-width: 0;
    }

    .culture__card {
      background: #efefef;
      padding: 48px 40px;
      min-height: 360px;
      display: flex;
      flex-direction: column;
    }

    .culture__card-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 28px;
    }

    .culture__card-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .culture__card-title {
      font-size: 22px;
      font-weight: 700;
      color: #515659;
      margin: 0 0 16px;
    }

    .culture__card-text {
      font-size: 15px;
      font-weight: 300;
      color: #515659;
      line-height: 1.75;
      margin: 0;
    }

    .culture__bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 32px;
    }

    .culture__controls {
      display: flex;
      gap: 8px;
    }

    .culture__btn {
      background: #fff;
      border: 1px solid #dedfdf;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 28px;
      color: #515659;
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease;
      flex-shrink: 0;
      padding: 0;
      padding-bottom: 5px;
    }

    .culture__btn:hover {
      background: var(--color-primary);
      color: #fff;
      border-color: var(--color-primary);

    }

    @media (max-width: 1024px) {
      .culture { padding: 60px 0; }
      .culture__container { padding: 0 24px; }
    }

    @media (max-width: 600px) {
      .culture__slide { flex: 0 0 100%; }
      .culture__card { padding: 32px 24px; min-height: auto; }
    }

    /* =============================================
       PROJECTS PAGE — FEATURED PROJECT
    ============================================= */
    .featured-project {
      padding: 100px 0;
      background: #fff;
    }

    .featured-project__inner {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .featured-project__content {}

    .featured-project__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .featured-project__title {
      font-size: clamp(28px, 3.5vw, 46px);
      font-weight: 700;
      color: #515659;
      line-height: 1.15;
      margin: 0 0 24px;
    }

    .featured-project__text p {
      font-size: 16px;
      font-weight: 300;
      color: #515659;
      line-height: 1.75;
      margin: 0 0 28px;
    }

    .featured-project__btn {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      padding: 14px 28px;
      transition: 0.3s;
      border-radius: 25px;
    }

    .featured-project__btn:hover {
      color: var(--color-primary);
      background: none;
    }

    .featured-project__image {
      overflow: hidden;
    }

    .featured-project__image img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .featured-project__image:hover img {
      transform: scale(1.03);
    }

    @media (max-width: 1024px) {
      .featured-project { padding: 60px 0; }
      .featured-project__inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
      .featured-project__image { order: -1; }
    }

    /* =============================================
       PROJECTS PAGE — PROJECT CARD GRID
    ============================================= */
    .project-grid {
      padding: 0 0 100px;
      background: #fff;
    }

    .project-grid__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .project-grid__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .project-card {
      display: block;
      color: inherit;
    }

    .project-card:hover {
    }

    .project-card__image {
      overflow: hidden;
      aspect-ratio: 16/10;
      margin-bottom: 20px;
    }

    .project-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .project-card:hover .project-card__image img {
      transform: scale(1.05);
    }

    .project-card__body {
      padding: 0;
    }

    .project-card__location {
      display: block;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 8px;
    }

    .project-card__title {
      font-size: 20px;
      font-weight: 700;
      color: #515659;
      line-height: 1.3;
      margin: 0 0 12px;
    }

    .project-card__excerpt {
      font-size: 15px;
      font-weight: 300;
      color: #515659;
      line-height: 1.7;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    @media (max-width: 1024px) {
      .project-grid { padding: 0 0 60px; }
      .project-grid__container { padding: 0 24px; }
      .project-grid__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    }

    @media (max-width: 600px) {
      .project-grid__grid { grid-template-columns: 1fr; gap: 40px; }
    }

    /* =============================================
       CAREERS PAGE — PERKS GRID
    ============================================= */
    .perks-grid {
      padding: 0 0 100px;
      background: #fff;
    }

    .perks-grid__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .perks-grid__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
    }

    .perk-card {
      display: block;
      color: inherit;
    }

    .perk-card__image {
      overflow: hidden;
      aspect-ratio: 16/10;
      margin-bottom: 20px;
    }

    .perk-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .perk-card:hover .perk-card__image img {
      transform: scale(1.04);
    }

    .perk-card__title {
      font-size: 22px;
      font-weight: 700;
      color: #515659;
      margin: 0 0 12px;
    }

    .perk-card__text {
      font-size: 15px;
      font-weight: 300;
      color: #515659;
      line-height: 1.7;
      margin: 0;
    }

    @media (max-width: 600px) {
      .perks-grid__grid { grid-template-columns: 1fr; }
      .perks-grid__container { padding: 0 24px; }
    }

    /* =============================================
       CONTACT PAGE
    ============================================= */
    .contact {
      padding: 100px 0;
      background: #fff;
    }

    .contact__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .contact__grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 80px;
      align-items: start;
    }

    .contact__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .contact__heading {
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 700;
      color: #515659;
      margin: 0 0 16px;
      line-height: 1.15;
    }

    .contact__intro {
      font-size: 16px;
      font-weight: 300;
      color: #707070;
      line-height: 1.7;
      margin: 0 0 40px;
    }

    .contact__form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .contact__field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .contact__field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .contact__label {
      font-size: 14px;
      font-weight: 500;
      color: #515659;
      letter-spacing: 0.3px;
    }

    .contact__input,
    .contact__textarea {
      width: 100%;
      padding: 14px 18px;
      font-size: 16px;
      font-family: 'Lexend', sans-serif;
      font-weight: 300;
      color: #515659;
      background: #efefef;
      border: 1px solid #dedfdf;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.3s ease;
    }

    .contact__input:focus,
    .contact__textarea:focus {
      border-color: var(--color-primary);
    }

    .contact__input::placeholder,
    .contact__textarea::placeholder {
      color: #aaa;
    }

    .contact__textarea {
      resize: vertical;
      min-height: 140px;
    }

    .contact__submit {
      display: inline-block;
      padding: 16px 36px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Lexend', sans-serif;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #fff;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      border-radius: 25px;
      cursor: pointer;
      transition: 0.3s ease all;
      align-self: flex-start;
    }

    .contact__submit:hover {
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
    }

    /* right column: details cards */
    .contact__details {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .contact__detail-card {
      display: flex;
      gap: 20px;
      padding: 28px;
      background: #efefef;
      border-radius: 8px;
      align-items: flex-start;
    }

    .contact__detail-card--accent {
      background: var(--color-primary);
      flex-direction: column;
      gap: 12px;
      padding: 32px;
    }

    .contact__detail-icon {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 50%;
      color: var(--color-primary);
    }

    .contact__detail-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .contact__detail-title {
      font-size: 16px;
      font-weight: 600;
      color: #515659;
      margin: 0;
    }

    .contact__detail-title--white {
      color: #fff;
      font-size: 18px;
    }

    .contact__detail-link {
      font-size: 16px;
      font-weight: 500;
      color: var(--color-primary);
      transition: 0.3s ease all;
    }

    .contact__detail-link:hover {
      color: var(--color-primary-hover);
    }

    .contact__detail-text {
      font-size: 14px;
      font-weight: 300;
      color: #707070;
      margin: 0;
      line-height: 1.5;
    }

    .contact__detail-text--white {
      color: rgba(255,255,255,0.75);
    }

    .contact__detail-btn {
      display: inline-block;
      padding: 12px 28px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Lexend', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--color-primary);
      background: #fff;
      border: 2px solid #fff;
      border-radius: 25px;
      transition: 0.3s ease all;
      align-self: flex-start;
      margin-top: 8px;
    }

    .contact__detail-btn:hover {
      background: transparent;
      color: #fff;
      border-color: #fff;
    }

    .contact-map {
      background: #efefef;
    }

    .contact-map iframe {
      width: 100%;
      height: 450px;
      border: 0;
      display: block;
    }

    @media (max-width: 1024px) {
      .contact { padding: 60px 0; }
      .contact__container { padding: 0 24px; }
      .contact__grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
    }

    @media (max-width: 600px) {
      .contact__field-row {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .contact__submit {
        width: 100%;
        text-align: center;
      }
      .contact-map iframe {
        height: 300px;
      }
    }

    /* =============================================
       PROJECT GALLERY
    ============================================= */
    .project-gallery {
      padding: 80px 0;
      background: #efefef;
    }

    .project-gallery__container {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .project-gallery__header {
      text-align: center;
      margin-bottom: 16px;
    }

    .project-gallery__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .project-gallery__heading {
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 700;
      color: #515659;
      margin: 0;
    }

    /* filter pills */
    .project-gallery__filters {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 40px;
    }

    .project-gallery__filter {
      padding: 10px 24px;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 500;
      font-family: 'Lexend', sans-serif;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #dedfdf;
      color: #707070;
    }

    .project-gallery__filter:hover {
      background: #d0d1d2;
    }

    .project-gallery__filter--active {
      background: #515659;
      color: #fff;
    }

    .project-gallery__filter--active:hover {
      background: #515659;
    }

    /* 4-column grid */
    .project-gallery__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .project-gallery__item {
      position: relative;
      aspect-ratio: 4/3;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
    }

    .project-gallery__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s ease;
    }

    .project-gallery__item:hover img {
      transform: scale(1.05);
    }

    .project-gallery__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%, transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .project-gallery__item:hover .project-gallery__overlay {
      opacity: 1;
    }

    .project-gallery__caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 16px;
      transform: translateY(8px);
      opacity: 0;
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .project-gallery__item:hover .project-gallery__caption {
      transform: translateY(0);
      opacity: 1;
    }

    .project-gallery__caption p {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      margin: 0;
    }

    .project-inner__meta {
      font-size: 15px;
      line-height: 1.8;
      color: #707070;
      margin: 0 0 32px;
      padding: 24px;
      background: #efefef;
      border-left: 4px solid var(--color-primary);
    }

    .project-inner__meta strong {
      color: #515659;
    }

    .contact-section--project {
      background: #efefef;
    }

    @media (max-width: 1024px) {
      .project-gallery__grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 768px) {
      .project-gallery { padding: 48px 0; }
      .project-gallery__container { padding: 0 24px; }
      .project-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .project-gallery__item { border-radius: 8px; }
    }

    @media (max-width: 480px) {
      .project-gallery__filters { flex-wrap: wrap; }
    }

    /* =============================================
       LIGHTBOX
    ============================================= */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .lightbox--active {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease, visibility 0s linear 0s;
    }

    .lightbox__img {
      max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
      border-radius: 8px;
      user-select: none;
    }

    .lightbox__close {
      position: absolute;
      top: 24px;
      right: 32px;
      background: none;
      border: none;
      color: #fff;
      font-size: 36px;
      font-weight: 300;
      cursor: pointer;
      z-index: 2;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease;
    }

    .lightbox__close:hover {
      opacity: 0.7;
    }

    .lightbox__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: #fff;
      font-size: 40px;
      font-weight: 300;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease;
      z-index: 2;
    }

    .lightbox__nav:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .lightbox__nav--prev { left: 24px; }
    .lightbox__nav--next { right: 24px; }

    .lightbox__counter {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 1px;
    }

    @media (max-width: 768px) {
      .lightbox__nav { width: 44px; height: 44px; font-size: 32px; }
      .lightbox__nav--prev { left: 12px; }
      .lightbox__nav--next { right: 12px; }
      .lightbox__close { top: 12px; right: 16px; }
    }

    /* =============================================
       SITEWIDE PHOTO BORDER RADIUS
    ============================================= */
    .what-we-do__img-item,
    .callout__image,
    .our-work__card,
    .our-work__card-img,
    .team-card__image,
    .culture__card-icon,
    .news-card__image,
    .featured-project__image,
    .contact-image,
    .project-card__image,
    .project-gallery__item {
      border-radius: 12px;
      overflow: hidden;
    }

    /* =============================================
       CONTACT PAGE
    ============================================= */
    .contact-section {
      padding: 100px 0;
      background: #fff;
    }

    .contact-section__inner {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 80px;
      align-items: start;
    }

    .contact-section__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .contact-section__heading {
      font-size: clamp(28px, 3.5vw, 46px);
      font-weight: 700;
      color: #515659;
      line-height: 1.15;
      margin: 0 0 20px;
    }

    .contact-section__intro {
      font-size: 16px;
      font-weight: 300;
      color: #313436;
      line-height: 1.7;
      margin: 0 0 40px;
    }

    .contact-section__details {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin-bottom: 48px;
    }

    .contact-section__detail {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .contact-section__icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #efefef;
      border-radius: 10px;
      color: var(--color-primary);
    }

    .contact-section__label {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #707070;
      margin: 0 0 4px;
    }

    .contact-section__value {
      font-size: 16px;
      font-weight: 400;
      color: #313436;
      margin: 0;
      transition: color 0.3s ease;
    }

    a.contact-section__value:hover {
      color: var(--color-primary);
    }

    .contact-section__cta {
      padding-top: 8px;
    }

    .contact-section__cta-text {
      font-size: 14px;
      font-weight: 300;
      color: #707070;
      margin: 0 0 16px;
    }

    .contact-section__form-wrap {
      position: relative;
    }

    .contact-section__form-card {
      background: #efefef;
      padding: 48px 40px;
      border-radius: 0;
    }

    .contact-section__form-title {
      font-size: 24px;
      font-weight: 700;
      color: #313436;
      margin: 0 0 8px;
    }

    .contact-section__form-sub {
      font-size: 15px;
      font-weight: 300;
      color: #707070;
      margin: 0 0 32px;
    }

    .contact-section__form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .contact-section__field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .contact-section__field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .contact-section__field-label {
      font-size: 14px;
      font-weight: 500;
      color: #313436;
      letter-spacing: 0.2px;
    }

    .contact-section__optional {
      font-weight: 300;
      color: #707070;
    }

    .contact-section__input,
    .contact-section__textarea,
    .contact-section__select {
      width: 100%;
      padding: 14px 18px;
      font-size: 16px;
      font-family: 'Lexend', sans-serif;
      font-weight: 300;
      color: #313436;
      background: #fff;
      border: 1px solid #dedfdf;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.3s ease;
      -webkit-appearance: none;
    }

    .contact-section__select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 40px;
    }

    .contact-section__input:focus,
    .contact-section__textarea:focus,
    .contact-section__select:focus {
      border-color: var(--color-primary);
    }

    .contact-section__input::placeholder,
    .contact-section__textarea::placeholder {
      color: #aaa;
    }

    .contact-section__textarea {
      resize: vertical;
      min-height: 120px;
    }

    .contact-section__submit {
      display: inline-block;
      padding: 16px 36px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Lexend', sans-serif;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #fff;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      border-radius: 25px;
      cursor: pointer;
      transition: 0.3s ease all;
      align-self: flex-start;
      width: 100%;
      text-align: center;
    }

    .contact-section__submit:hover {
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
    }

    .contact-section__disclaimer {
      font-size: 12px;
      font-weight: 300;
      color: #aaa;
      margin: 0;
      text-align: center;
    }

    /* full-width image strip */
    .contact-image {
      width: 100%;
      overflow: hidden;
      max-height: 400px;
    }

    .contact-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @media (max-width: 1024px) {
      .contact-section { padding: 60px 0; }
      .contact-section__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
      }
      .contact-section__form-card {
        padding: 36px 24px;
      }
    }

    @media (max-width: 600px) {
      .contact-section__field-row {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    /* =============================================
       CONTACT MODAL
    ============================================= */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.65);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    }

    .modal--active {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.35s ease, visibility 0s linear 0s;
    }

    .modal__inner {
      position: relative;
      width: 100%;
      height: 100%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
    }

    .modal__close {
      position: absolute;
      top: 32px;
      right: 40px;
      background: none;
      border: none;
      font-size: 32px;
      font-weight: 300;
      color: #515659;
      cursor: pointer;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.3s ease;
      z-index: 2;
    }

    .modal__close:hover {
      color: var(--color-primary);
    }

    .modal__content {
      width: 100%;
      max-width: 520px;
      padding: 60px 40px;
    }

    .modal__eyebrow {
      display: block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .modal__heading {
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 700;
      color: #313436;
      margin: 0 0 40px;
      line-height: 1.15;
    }

    .modal__form {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .modal__field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .modal__label {
      font-size: 14px;
      font-weight: 500;
      color: #313436;
      letter-spacing: 0.3px;
    }

    .modal__optional {
      font-weight: 300;
      color: #707070;
    }

    .modal__input,
    .modal__textarea {
      width: 100%;
      padding: 14px 18px;
      font-size: 16px;
      font-family: 'Lexend', sans-serif;
      font-weight: 300;
      color: #313436;
      background: #efefef;
      border: 1px solid #dedfdf;
      border-radius: 8px;
      outline: none;
      transition: border-color 0.3s ease;
    }

    .modal__input:focus,
    .modal__textarea:focus {
      border-color: var(--color-primary);
    }

    .modal__input::placeholder,
    .modal__textarea::placeholder {
      color: #aaa;
    }

    .modal__textarea {
      resize: vertical;
      min-height: 100px;
    }

    .modal__submit {
      display: inline-block;
      padding: 16px 36px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Lexend', sans-serif;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #fff;
      background: var(--color-primary);
      border: 2px solid var(--color-primary);
      border-radius: 25px;
      cursor: pointer;
      transition: 0.3s ease all;
      align-self: flex-start;
    }

    .modal__submit:hover {
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
    }

    @media (max-width: 768px) {
      .modal {
        align-items: flex-end;
      }

      .modal__inner {
        height: auto;
        max-height: 100%;
        border-radius: 0;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .modal--active .modal__inner {
        transform: translateY(0);
      }

      .modal__close {
        top: 16px;
        right: 16px;
      }

      .modal__content {
        padding: 60px 24px 40px;
      }

      .modal__submit {
        width: 100%;
        text-align: center;
      }
    }

    /* =============================================
       GLOBAL MOBILE HEADING REDUCTIONS (~10%)
    ============================================= */
    @media (max-width: 768px) {
      h2 {
        font-size: clamp(29px, 3.5vw, 45px);
      }

      .hero__subheading {
        font-size: 36px;
        line-height: 38px;
      }

      .what-we-do__heading,
      .our-work__heading,
      .callout__title,
      .clients__heading,
      .cta-banner__heading,
      .related-news__heading,
      .about-intro__title,
      .team-section__heading,
      .culture__heading,
      .featured-project__title {
        font-size: clamp(25px, 3.5vw, 42px);
      }

      .service-banner__heading,
      .detail-banner__heading {
        font-size: clamp(26px, 4vw, 46px);
      }

      .service-block__title {
        font-size: clamp(23px, 3vw, 38px);
      }

      .services-list__title {
        font-size: 22px;
      }

      .news-card__title,
      .project-card__title,
      .our-work__slide-title,
      .related-news__slide-title,
      .perk-card__title,
      .culture__card-title {
        font-size: 18px;
      }

      .team-card__name {
        font-size: 14px;
      }

      .callout__subtitle {
        font-size: 16px;
      }

      .article__body h3 {
        font-size: 20px;
      }

      .foundation__heading {
        font-size: clamp(32px, 4vw, 48px);
      }

      .foundation__number {
        font-size: clamp(32px, 4vw, 46px);
      }
    }

    /* accent text highlight */
    .text-accent {
      color: var(--color-primary);
    }

    /* client SVG sizing */
    .clients__svg {
      width: 140px;
      height: auto;
    }

    /* desktop: show max 6 projects */
    .our-work__card:nth-child(n+7) {
      display: none;
    }

    /* mobile: show max 3 projects */
    @media (max-width: 600px) {
      .our-work__card:nth-child(n+4) {
        display: none;
      }
    }