/* ------------------------------------------------------------------
   Ar. Parijat Misra — site-specific overrides
   Loaded after style.css. Keep theme files untouched; put deltas here.
   ------------------------------------------------------------------ */

/* --- Pre-loader ---------------------------------------------------- */
/* Replaces the theme's animated "ARCHIZ" lettering with the site mark.
   The loader sits on black and logo.svg is a black wordmark, so invert it
   to white. GSAP still drives the exit — it animates .load-text as a whole. */
/* The theme's loader backdrop is the #B79F4F gold that shows as the black
   curtain retracts. White instead. */
.loader-wrap {
  background: #ffffff;
}

.loader-wrap .loader-wrap-heading .load-text {
  line-height: 1;
  letter-spacing: 0;
}

.loader-wrap .loader-wrap-heading .load-text img {
  width: 420px;
  max-width: 70vw;
  filter: brightness(0) invert(1);
  animation: loaderLogoPulse 1.1s infinite alternate ease-in-out;
}

.overlayProjects {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #171717;
  opacity: 0.5;
  top: 0;
  left: 0;
  z-index: -1;
}

@media (max-width: 767px) {
  .loader-wrap .loader-wrap-heading .load-text img {
    width: 260px;
  }
}

@keyframes loaderLogoPulse {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.35;
  }
}

/* --- Header logo ------------------------------------------------- */
/* logo.svg is a 318x54 wordmark; the theme sizes logos for square
   marks (110px), which renders it too small to read. */
.header-area .header-inner-box .logo img {
  width: 265px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-area .header-inner-box .logo img {
    width: 225px;
  }
}

@media (max-width: 767px) {

  /* .mobile-nav-bar carries Bootstrap's col-6, so half the header row is
     reserved for a ~30px icon and the logo gets flex-shrunk to fit the rest.
     Let the icon take only the width it needs. */
  .header-area .mobile-nav-bar {
    flex: 0 0 auto;
    width: auto;
  }

  .header-area .header-inner-box .logo img {
    width: 230px;
  }
}

/* --- Mobile nav ---------------------------------------------------- */
/* Dedicated backdrop, sitting just under .mobile-nav (z-index 9999). */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  z-index: 9998;
  /* visibility is discrete, so it is switched with a delay rather than
     tweened: instant on open, held until the fade finishes on close. */
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.mobile-nav-overlay.active {
  opacity: 0.5;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* The slide-out panel is #000 and .theme-btn is #000 with a #000 border,
   so the CTA reads as bare text. Outline it against the dark panel. */
.mobile-nav .action-bar .theme-btn {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.mobile-nav .action-bar .theme-btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.search-popup .logo img {
  width: 200px;
}

/* --- Process cards -------------------------------------------------- */
/* The number in the tile is replaced by an SVG icon. Drop the theme's
   3px bordered square and let the icon stand on its own at full size. */
.process-img span {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}

.process-img span img {
  width: 70px;
  height: 70px;
}

/* The card title is a <span>, so it inherits Jost from body while the
   section headline — and every other heading — uses Afacad Flux. Opt it
   into the heading face, as the theme itself does for display spans. */
.single-process-item span.title {
  font-family: "Afacad Flux", sans-serif;
  letter-spacing: -1px;
}

/* .process-num held the 01–04 step numbers; with those gone the element
   just carries the rule under each card, so style the div directly (the
   theme's border lives on the now-removed inner span). */
.process-num {
  margin: 30px 0;
  border-bottom: 1px solid #ddd;
}

/* .process-inner uses padding 40px 45px 0 20px so its border-right divider
   clears the text across the four desktop columns. Below 768px the theme
   drops the divider but keeps the lopsided padding, leaving the card
   contents 25px off-centre. Even it up once the divider is gone. */
@media (max-width: 767px) {
  .single-process-item .process-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- Project slider ------------------------------------------------ */
/* .project-heading is flex 0 0 34% but owl positions its stage with a
   fractional translate3d, so the panel and the first slide land ~0.7px
   apart and the white page shows through the seam. Paint the strip behind
   them black so the sliver reads as part of the panel. Sub-pixel seams
   shift with zoom and DPI, so this is safer than nudging the widths. */
.project-content-wrap {
  background: #000000;
}

/* .project-heading is align-items:end so the title and link hug the right
   edge — intended for the narrow desktop panel beside the slides. Stacked
   full-width on a phone that reads as misaligned, so centre it. */
@media (max-width: 767px) {
  .project-heading {
    align-items: center;
    text-align: center;
    padding: 50px 25px;
  }

  .project-heading .section-title.text-md-end {
    text-align: center;
  }
}

/* The theme hides the caption below 768px, leaving only the image. Bring
   it back and scale the display type down to fit a phone column.
   .single-project-item is also pinned to 400px there — the height of the
   image alone — so with the caption stacked beneath it the slide overflows
   and owl's overflow:hidden stage clips it away. Size the slide to content. */
@media (max-width: 767px) {
  .single-project-item {
    height: auto;
  }

  .project-desc {
    display: flex;
    padding: 40px 25px;
  }

  .project-desc h3 a {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px;
  }

  .project-desc p {
    margin-top: 20px;
  }
}

/* --- Transparent header --------------------------------------------- */
/* position:absolute, z-index and the white nav links come from the theme's
   own .absolute-header (style.css:2849), applied in includes/header.php.
   Keeping the structural part in style.css means the overlay still works
   even if custom.css is served from a stale cache. Only deltas live here.

   The theme paints the sticky bar BLACK for absolute headers; we want white. */
.header-area.absolute-header .header-sticky {
  background: #ffffff;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}

/* logo.svg is a black wordmark, so invert it to read over the banner photos
   rather than shipping a second white file. No transition on these: a
   half-finished colour/filter tween leaves a white logo on the white sticky
   bar — an invisible header — so the swap is deliberately instant. */
.header-area.absolute-header .logo img {
  filter: brightness(0) invert(1);
  transition: none;
}

.header-area.absolute-header .main-menu ul>li>a,
.header-area.absolute-header #hamburger i {
  transition: none;
}

/* Once the sticky bar turns white, flip everything back to dark. */
.header-area.absolute-header .header-sticky .logo img {
  filter: brightness(1) invert(0);
}

.header-area.absolute-header .header-sticky .main-menu ul>li>a,
.header-area.absolute-header .header-sticky #hamburger i {
  color: #000000;
}

.header-area.absolute-header .header-sticky .main-menu ul li a:before {
  background: #000000;
}

/* --- Latest Projects grid ------------------------------------------- */
/* Lightest grey, to separate the section from the white above and below
   without competing with the .gray-bg (#ECECEC) used elsewhere. */
#service-4 {
  background: #f8f8f8;
}

/* The theme sizes #service-4's heading at 120px for a one-line title. */
#service-4 .section-title h2 {
  font-size: 56px;
  line-height: 1;
}

/* The theme top-aligns card content, so the link floats mid-card with
   100–123px of dead space under it — and since that gap varies with the
   paragraph length, the six links never line up. Make the card a column and
   push the link to the bottom so they sit on a shared baseline.
   (.overlay is position:absolute, so it stays out of the flex flow.) */
#service-4 .service-item {
  display: flex;
  flex-direction: column;
  /* Card takes the 4:3 shape of its cover (assets/images/projects/sectors/)
     instead of the theme's fixed 350px, so the photo is never cropped. */
  height: auto;
  aspect-ratio: 4 / 3;
}

#service-4 .service-item p {
  margin-bottom: 0;
}

#service-4 a.service-link {
  margin: auto 0 0;
  align-self: flex-start;
  padding-top: 24px;
}

/* Underline the label on hover. It does not reach the arrow: the theme sets
   spans to inline-block, and text-decoration does not propagate into an
   atomic inline-level box. */
#service-4 a.service-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Arrow on "See Details", matching the .section-link treatment elsewhere —
   it nudges right on hover so the link reads as going somewhere. */
#service-4 a.service-link span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

#service-4 a.service-link i {
  font-size: 20px;
  position: relative;
  top: 4px;
}

#service-4 a.service-link:hover span {
  transform: translateX(6px);
}

#service-4 .section-title .sub-title {
  display: block;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 767px) {
  #service-4 .section-title h2 {
    font-size: 34px;
    line-height: 38px;
  }
}

/* --- Hero images ---------------------------------------------------- */
/* Each slide's photo is a real <img> (index.php), filling the slide behind
   the tint and copy: covering, centred. The slide is its own stacking
   context (z-index: 1 in style.css), so -1 keeps the image inside it.
   Selector beats owl's `.owl-carousel .owl-item img`. */
#home-2 .single-slide-item .pm-slide-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

}

/* Slide 1 carries the heading: the theme's 15% tint is not enough to read
   white text over a lit-up facade, so this slide gets a darker wash,
   heaviest on the left where the copy sits. */
#home-2 .single-slide-item .overlay.pm-overlay-text {
  opacity: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%);
}

/* --- Hero on phones ------------------------------------------------- */
/* The banner photos are 2.4:1, so a tall phone banner blows them up; 450px
   (down from the theme's 700px) keeps more of each photo in view. Slide 1's
   heading and button stay over the photo, below the 80px header. */
@media (max-width: 767px) {
  #home-2 .single-slide-item {
    height: 450px;
  }

  #home-2 .hero-area-content {
    width: 100%;
    padding-top: 80px;
  }

  /* The copy spans the full width here, so darken evenly. */
  #home-2 .single-slide-item .overlay.pm-overlay-text {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* --- Hero heading --------------------------------------------------- */
/* The banner heading is an h2, not the theme's h1. Mirror every
   #home-2 .single-slide-item h1 rule from style.css:3163 so the display
   sizing survives the tag change; the ID selector also keeps this ahead of
   the .section-title h2 sizes set below. */
/* Sized down from the theme's 100px: these headings are full sentences, not
   the two- and three-word lines the display size was drawn for. Tracking
   eased off with it — -5px is far too tight below ~80px. */
#home-2 .single-slide-item h2 {
  font-size: 68px;
  font-weight: 400;
  line-height: 90%;
  letter-spacing: -2px;
  margin-top: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #home-2 .single-slide-item h2 {
    font-size: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #home-2 .single-slide-item h2 {
    font-size: 54px;
  }
}

@media (max-width: 767px) {
  #home-2 .single-slide-item h2 {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1px;
  }
}

#home-2 .single-slide-item h2 span {
  color: #b79f4f;
}

/* --- Type scale ----------------------------------------------------- */
/* The theme's display sizes are tuned for one-word headings. "About Our
   Journey" / "From Draft to Destiny" at 70px and the project names at 55px
   both overpower the 28px statement headline, so bring the steps closer:
   section titles 56 > project names 42 > statement 28. */
.section-title h2 {
  font-size: 56px;
  line-height: 1;
}

.project-desc h3 a {
  font-size: 42px;
  line-height: 46px;
  letter-spacing: -2px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title h2 {
    font-size: 48px;
    line-height: 50px;
  }

  .project-desc h3 a {
    font-size: 36px;
    line-height: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title h2 {
    font-size: 42px;
    line-height: 44px;
  }

  .project-desc h3 a {
    font-size: 32px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .section-title h2 {
    font-size: 34px;
    line-height: 38px;
  }

  /* Repeated here because the unmediated rule above sits later in this file
     than the mobile one in the project-slider block and would otherwise win. */
  .project-desc h3 a {
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -1px;
  }
}

/* --- About tabs ------------------------------------------------------ */
/* Bootstrap hides the inactive pane with display:none, so the container
   collapses to whichever pane is showing — History is 252px, Vision 226px,
   and the section jumps 26px on every switch. Stack both panes in one grid
   cell instead: the container is then always as tall as the taller pane, and
   the inactive one is hidden with visibility (so it keeps its height but
   takes no clicks and stays out of the accessibility tree). Copy can change
   length freely without needing a hard-coded min-height. */
#about-3 .about-tab .tab-content {
  display: grid;
}

#about-3 .about-tab .tab-content>.tab-pane {
  display: block;
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}

#about-3 .about-tab .tab-content>.tab-pane.active {
  visibility: visible;
  opacity: 1;
}

/* --- About counters -------------------------------------------------- */
/* style.css:4392 splits each counter row into fixed percentages — number
   20%, operator 15%, label 0 0 50% — which only accounts for 85% of the
   row and caps the label at ~167px however much space is free. The result
   is a wide dead gap on the right and labels wrapping to three lines.
   Size each part to its content and let the label take what's left. */
#about-3 .single-counter-item {
  margin-top: 20px;
}

/* Fixed columns for the figure and its operator so every label starts at
   the same x — rows 2 and 3 carry an empty operator span as the spacer,
   since only "30" takes a "+". */
#about-3 .about-counter span.num {
  flex: 0 0 48px;
}

#about-3 .about-counter span.operator {
  flex: 0 0 32px;
}

#about-3 .about-counter p.title {
  flex: 1 1 auto;
  margin-top: 0;
  padding-left: 22px;
  line-height: 1.35;
}

/* --- Banner nav arrows ---------------------------------------------- */
/* The theme's gold (#B79F4F) appears twice on these: as `color` at rest —
   which the `border: 2px solid` inherits — and as the hover fill. Black in
   both states. */
.homepage-slides .owl-nav button.owl-prev,
.homepage-slides .owl-nav button.owl-next {
  color: #000000;
}

.homepage-slides .owl-nav button.owl-prev:hover,
.homepage-slides .owl-nav button.owl-next:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* --- Carousels ------------------------------------------------------ */
/* Several sliders switch dots on at their mobile breakpoint (the clients
   carousel sets dots:true below 575px). Hide them everywhere. */
.owl-carousel .owl-dots {
  display: none;
}

/* --- Clients carousel ---------------------------------------------- */
/* The theme fills .single-client with #ddd and borders it #ddd, so each cell
   reads as a solid grey tile with no visible edge. Restore the bordered-cell
   row: transparent cells, one shared divider line between them. */
.clients-section .clients-inner {
  border: 1px solid #ddd;
  border-right: 0;
}

.clients-section .single-client {
  width: 100%;
  background: transparent;
  border: 0;
  border-right: 1px solid #ddd;
}

.clients-section .single-client:hover {
  background: #fff;
}

/* The theme caps logos at 100px, sized for its square placeholders. These
   are 320x200 wordmarks — "Four Points by Sheraton" is unreadable that
   small — so give them more room. */
.clients-section .single-client img {
  width: 250px !important;
  height: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Full colour on hover — the cell is the hover target, not the image. */
.clients-section .single-client:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Touch devices have no hover, so the greyscale would never lift. Show the
   brands in full colour there instead. */
@media (hover: none),
(max-width: 767px) {
  .clients-section .single-client img {
    filter: grayscale(0);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .clients-section .single-client img {
    width: 110px !important;
  }
}

/* --- Gallery: masonry image slider ---------------------------------- */
/* Owl slides fixed-height columns; inside each, frames split the height
   60/40 (or hold it whole) so the row reads as masonry while still
   sliding. Same light grey as #service-4 to break the two white
   neighbours apart. */
.gallery-section {
  background: #f8f8f8;
}

/* Mirror the Latest Projects heading treatment (its rules are scoped to
   #service-4 in style.css, so they do not reach this section). */
.gallery-section .section-title .sub-title {
  display: block;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.masonry-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 560px;
}

.masonry-item {
  display: block;
  overflow: hidden;
  position: relative;
}

.masonry-item.tall {
  flex: 1 1 auto;
}

.masonry-item.h-60 {
  flex: 0 0 calc(60% - 10px);
}

.masonry-item.h-40 {
  flex: 0 0 calc(40% - 10px);
}

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

/* Zoom + expand hint on hover, in the vein of the project-card scrims. */
.masonry-item:after {
  content: "\f31e";
  /* la-expand-arrows-alt */
  font-family: "Line Awesome Free";
  font-weight: 400;
  /* both LA faces register at 400; solid wins the cascade */
  font-size: 22px;
  color: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.masonry-item:hover:after {
  opacity: 1;
}

.masonry-item:hover img {
  transform: scale(1.06);
}

/* Arrows: the banner treatment (50px circle, appear on hover) in the
   site's black rather than the theme gold. */
.masonry-slider .owl-nav button.owl-prev,
.masonry-slider .owl-nav button.owl-next {
  width: 50px;
  height: 50px;
  border: 2px solid;
  font-size: 20px;
  line-height: 16px;
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -25px;
  color: #000000;
  border-radius: 50%;
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.masonry-slider .owl-nav button.owl-next {
  left: auto;
  right: 15px;
}

.masonry-slider:hover .owl-nav button.owl-prev,
.masonry-slider:hover .owl-nav button.owl-next {
  visibility: visible;
  opacity: 0.5;
}

.masonry-slider .owl-nav button.owl-prev:hover,
.masonry-slider .owl-nav button.owl-next:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
  opacity: 1;
}

/* Touch devices have no hover to reveal the arrows (or lift the scrim),
   so keep the arrows visible and leave the image un-scrimmed there. */
@media (hover: none) {

  .masonry-slider .owl-nav button.owl-prev,
  .masonry-slider .owl-nav button.owl-next {
    visibility: visible;
    opacity: 0.5;
  }

  .masonry-item:after {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .masonry-col {
    height: 480px;
  }
}

@media (max-width: 767px) {
  .masonry-col {
    height: 420px;
    gap: 15px;
  }

  .masonry-item.h-60 {
    flex-basis: calc(60% - 7.5px);
  }

  .masonry-item.h-40 {
    flex-basis: calc(40% - 7.5px);
  }
}

/* --- Footer: dark variant ---------------------------------------- */
/* The theme's Home 1 footer is light and leads with a 150px display
   heading. Ours is dark and leads with the tagline instead. */
.footer-section.dark-bg .footer-title span.subtitle {
  display: block;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
}

@media (max-width: 767px) {
  .footer-section.dark-bg .footer-title span.subtitle {
    font-size: 24px;
  }
}

/* Address runs to three lines. The theme centres the row, which drops the
   one-line columns below it — top-align so all three titles share a baseline. */
.footer-section.dark-bg .footer-info {
  align-items: flex-start;
}

/* Below 768px the theme turns that row into a column, where flex-start pins
   every block to the left edge instead. Centre them once stacked. */
@media (max-width: 767px) {
  .footer-section.dark-bg .footer-info {
    align-items: center;
  }
}

.footer-section.dark-bg .single-info span {
  color: rgba(255, 255, 255, 0.7);
}

.footer-section.dark-bg .single-info span.title {
  color: #ffffff;
}

.footer-section.dark-bg .single-info span.title:before {
  background: #ffffff;
}

/* style.css sets a global `a { font-size: 12px }`, so inline links render
   smaller than the text around them. Footer links inherit their context. */
.footer-section.dark-bg .single-info a,
.footer-bottom.dark-bg .copyright-wrap a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.footer-section.dark-bg .single-info a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-section.dark-bg .single-info a:hover {
  color: #ffffff;
}

/* .white-btn:hover resolves to background AND border-color #000 (style.css
   :488 and :499), which on the black footer turns the whole button
   black-on-black — the outline reads as "disappearing". Invert instead. */
.footer-section.dark-bg .white-btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.footer-bottom.dark-bg {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* No social icons in the bottom bar — centre the copyright line. */
.footer-bottom.dark-bg .footer-bottom-content {
  justify-content: center;
  text-align: center;
}

.footer-bottom.dark-bg .copyright-wrap {
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom.dark-bg .copyright-wrap a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom.dark-bg .copyright-wrap a:hover {
  color: #ffffff;
}

/* --- Projects page: filter bar + masonry grid + lightbox ------------- */
/* projects.php. The grid is Isotope in masonry mode (isotope is already in
   the footer bundle); card heights come from three fixed aspect ratios that
   cycle, so the columns stagger without waiting on image loads. */

/* Page head. Deliberately black: .absolute-header renders its nav and logo
   white until the sticky bar kicks in, so a light band here would hide the
   menu behind it.

   The breadcrumb artwork is an SVG, not the PNG shipped alongside it — at
   260KB it is actually the smaller of the two (the PNG is 336KB), and being
   vector it stays crisp at any pixel density with no separate retina asset
   to manage. Its many small paths would be a real cost for something
   redrawn every frame, but a CSS background-image is decoded once and
   composited as a static layer — ScrollSmoother translates the whole page,
   it does not resize this box — so that cost is paid once, not per frame.

   background-position is left/bottom rather than center: the drawing's own
   content sits mostly in the left ~85% of the frame and the lower two-thirds
   of its height (checked against the source file's alpha channel), so on a
   narrow viewport — where cover crops horizontally to fill the shorter,
   narrower box — anchoring there keeps the building in frame instead of
   cropping into the empty right/top of the artwork. */
.pm-page-head {
  background-color: #000000;
  background-image: url("../images/breadcrumb.svg");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
  color: #ffffff;
  padding: 140px 0 70px;
  text-align: center;
}

.pm-page-head h1 {
  color: #ffffff;
  font-size: 60px;
  line-height: 1.1;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Home / Current — reuses the old subtitle's type (uppercase, 2px tracking)
   so swapping it for a real breadcrumb didn't change the head's rhythm.
   Home sits at reduced opacity (a link, secondary); the current page is full
   white and underlined so it reads as "you are here" rather than as another
   link — an aria-current page has no href, so a hover state alone would give
   no affordance at all. */
.pm-breadcrumb {
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.pm-breadcrumb a {
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease;
}

.pm-breadcrumb a:hover,
.pm-breadcrumb a:focus-visible {
  color: rgba(255, 255, 255, 0.85);
}

.pm-breadcrumb-sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.3);
}

.pm-breadcrumb-current {
  color: #ffffff;
  padding-bottom: 3px;
  border-bottom: 1px solid #ffffff;
}

/* --- Filter bar ----------------------------------------------------- */
/* Not position:sticky — ScrollSmoother transforms #smooth-content, and a
   sticky child of a transformed ancestor sticks to that element, not the
   viewport. It would jam mid-page instead of following the scroll.

   Two tiers with different affordances on purpose: sector is one-of-many and
   reads as tabs, status is a set of independent toggles and reads as chips.
   When both were flat text rows they looked like one long list of the same
   thing, and the row read as decoration rather than as controls. */
/* Full-bleed shell. The grid runs edge to edge, so the bar has to as well or
   the first card would not line up under the "All" tab.
   --pm-edge is the visual inset of both. The grid's shell is pulled in by one
   gutter because .pm-item carries 12px of its own padding, so the card edge —
   not the grid box — lands on --pm-edge. */
.pm-shell {
  --pm-edge: 40px;
  width: 100%;
  padding: 0 var(--pm-edge);
}

.pm-shell-grid {
  padding: 0 calc(var(--pm-edge) - 12px);
}

.pm-filterbar {
  background: #f7f7f7;
  border-bottom: 1px solid #e6e6e6;
  padding: 0;
}

.pm-refinebar {
  background: #f7f7f7;
  border-top: 1px solid #e6e6e6;
}

/* Stuck: custom.js has moved this onto <body>, so it needs the full-width
   framing the bar used to give it. Under the header, above the grid.

   No z-index number here actually settles that ordering against the mobile
   nav, however high — worth spelling out, since it looks like a normal
   z-index bug and isn't one. The header and the nav both live inside
   #smooth-wrapper, which is position:fixed and — unconditionally, simply by
   being fixed — is its OWN stacking context. Whatever z-index the nav uses
   internally (.mobile-nav is 9999, its backdrop 9998, the header 99999) is
   scored only against siblings *inside* that context; #smooth-wrapper itself
   then competes against this bar's stacking context as a single unit, at
   z-index:auto. Any explicit z-index at all on a body-level sibling — 500,
   50, even 1, all tested — outranks an auto-indexed stacking context
   regardless of what enormous numbers are nested inside it. So this bar,
   parked on <body> while stuck, was ALWAYS going to paint over the entire
   header/nav subtree; 99900 vs 9999 was never the actual mechanism.
   Fixed instead by coordinating visibility, not stacking order: custom.js
   adds .pm-hide-for-nav to this element for as long as the mobile nav is
   open (see the #hamburger / .close-nav handlers). */
.pm-refinebar.pm-hide-for-nav {
  visibility: hidden;
}

/* Same idea for the desktop Projects dropdown (custom.js). */
.pm-refinebar.is-stuck.pm-hide-for-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.pm-refinebar.is-stuck {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 500;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: pm-drop-in 0.28s ease;
}

/* Deliberately a short offset rather than a full -100% slide: if the
   animation is ever paused mid-flight (a backgrounded tab pauses them), the
   bar is still on screen and usable instead of parked out of view. */
@keyframes pm-drop-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Holds the strip's space in the flow while it is stuck, so nothing jumps. */
.pm-refine-placeholder {
  height: 0;
}

/* --- Tier 1: sector tabs --- */
.pm-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Spread across the full width rather than bunching left and leaving a third
   of the bar empty. The gap is the floor, so they close up rather than
   colliding once the labels no longer fit. */
.pm-tabs {
  justify-content: space-between;
  gap: 0 24px;
  padding: 4px 0 0;
}

.pm-filter {
  background: none;
  border: 0;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.pm-tab {
  position: relative;
  padding: 20px 0 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #7d7d7d;
  white-space: nowrap;
}

/* Underline grows from the centre so it reads as a tab indicator rather than
   an accidental text-decoration. */
.pm-tab:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #000000;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-tab:hover {
  color: #000000;
}

.pm-tab.is-active {
  color: #000000;
  font-weight: 600;
}

.pm-tab.is-active:after {
  transform: scaleX(1);
}

/* Live count. Sits raised and small — informative, never competing with the
   label it belongs to. */
.pm-tab-n {
  display: inline-block;
  margin-left: 3px;
  vertical-align: super;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: #b3b3b3;
}

.pm-tab.is-active .pm-tab-n {
  color: #b79f4f;
}

/* Nothing behind this control given the other filters. Dimmed, not removed
   and not disabled: the row keeps its shape, and the click still works and
   lands on the empty state with Clear right there. */
.pm-filter.is-empty {
  opacity: 0.35;
}

/* --- Tier 2: refine strip --- */
/* Every control in this strip is exactly --pm-ctl-h tall and centres its own
   text, so the label, both dropdowns, the count and Clear all share one
   baseline. Previously each sized itself from its own padding and they came
   out at 44 / 29 / 26px. */
.pm-refine {
  --pm-ctl-h: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 13px 0;
}

.pm-refine-left,
.pm-refine-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-refine-label,
.pm-count,
.pm-filter-reset {
  display: inline-flex;
  align-items: center;
  height: var(--pm-ctl-h);
}

.pm-refine-label {
  margin-right: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a8a8a8;
}

.pm-filter:focus-visible {
  outline: 2px solid #b79f4f;
  outline-offset: 2px;
}

/* Native select, styled to match the chips for the moment before Nice Select
   replaces it (and if that script ever fails to run). */
.pm-filter-select select {
  -webkit-appearance: none;
  appearance: none;
  height: var(--pm-ctl-h);
  padding: 0 34px 0 15px;
  border: 1px solid #dcdcdc;
  background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23000' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 14px center/8px 5px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #6f6f6f;
  cursor: pointer;
}

/* main.js runs jQuery Nice Select over every <select> on the page, so the
   native element is hidden and this .nice-select replica is what renders.
   Match it to the chips beside it. */
.pm-filter-select .nice-select {
  height: var(--pm-ctl-h);
  /* Nice Select centres its label with line-height, not flexbox — take the
     two 1px borders off so the text lands on the same baseline as the rest. */
  line-height: calc(var(--pm-ctl-h) - 2px);
  padding: 0 34px 0 15px;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  background: #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #6f6f6f;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.pm-filter-select .nice-select:hover {
  border-color: #000000;
  color: #000000;
}

/* A location is set — mirror the active chip so both axes read the same. */
.pm-filter-select .nice-select.is-set {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.pm-filter-select .nice-select:after {
  right: 14px;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-color: currentColor;
}

.pm-filter-select .nice-select.open:after {
  margin-top: -1px;
}

/* The list is absolutely positioned inside the bar; keep it above the grid. */
.pm-filter-select .nice-select .list {
  z-index: 20;
  min-width: 200px;
  border-radius: 0;
  margin-top: 6px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
}

.pm-filter-select .nice-select .option {
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 38px;
  min-height: 38px;
  color: #4a4a4a;
}

.pm-filter-select .nice-select .option.selected {
  font-weight: 600;
  color: #000000;
}

.pm-count {
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8a8a8a;
  white-space: nowrap;
}

/* Hidden until something is actually set — nothing to clear, nothing to
   show. custom.js toggles the attribute. */
.pm-filter-reset {
  gap: 6px;
  background: none;
  border: 0;
  padding: 0 0 0 16px;
  margin-left: 6px;
  border-left: 1px solid #dcdcdc;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #8a8a8a;
  transition: color 0.25s ease;
}

.pm-filter-reset[hidden] {
  display: none;
}

.pm-filter-reset i {
  font-size: 14px;
}

.pm-filter-reset:hover {
  color: #000000;
}

/* --- Grid ------------------------------------------------------------ */
.pm-grid-section {
  padding: 45px 0 100px;
}

.pm-grid {
  margin: 0;
}

.pm-grid-sizer,
.pm-item {
  width: 25%;
}

/* Double-width card ('span' => 2 in projects-data.php) for very wide
   photos — a panoramic site shown big without cropping the building.
   Two columns at every breakpoint; full width once the grid is 2-up. */
.pm-item.pm-item-x2 {
  width: 50%;
}

@media (max-width: 1199px) {
  .pm-item.pm-item-x2 {
    width: 66.6667%;
  }
}

@media (max-width: 991px) {
  .pm-item.pm-item-x2 {
    width: 100%;
  }
}

.pm-item {
  float: left;
  padding: 0 12px 24px;
}

/* Aspect ratios drive the masonry stagger. Fixed here rather than derived
   from the images so Isotope can lay out before anything has loaded. */
.pm-ar-tall .pm-card {
  padding-top: 128%;
}

.pm-ar-std .pm-card {
  padding-top: 100%;
}

.pm-ar-wide .pm-card {
  padding-top: 74%;
}

/* The card is a <button>: the whole tile is the control that opens the
   lightbox, so it needs no nested link and stays keyboard-reachable. */
.pm-card {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #ececec;
  text-align: left;
  cursor: pointer;
}

.pm-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Permanent scrim, not a hover reveal — the title has to stay readable at
   rest, and on touch there is no hover to reveal it with. */
.pm-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.62) 26%,
      rgba(0, 0, 0, 0.22) 52%,
      rgba(0, 0, 0, 0) 78%);
  transition: opacity 0.4s ease;
}

.pm-card-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-card-badge {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #000000;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.pm-card-badge-changed {
  background: #b79f4f;
  color: #ffffff;
}

.pm-card-body {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  display: block;
  color: #ffffff;
}

.pm-card-type {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #d8c78a;
  margin-bottom: 6px;
}

.pm-card-title {
  display: block;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 6px;
}

.pm-card-loc {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.pm-card-loc i {
  margin-right: 6px;
}

.pm-card:hover .pm-card-img {
  transform: scale(1.06);
}

.pm-card:hover .pm-card-scrim {
  opacity: 0.85;
}

.pm-card:focus-visible {
  outline: 2px solid #b79f4f;
  outline-offset: 3px;
}

.pm-empty {
  padding: 60px 0;
  text-align: center;
  color: #8a8a8a;
}

.pm-empty-reset {
  background: none;
  border: 0;
  padding: 0;
  color: #000000;
  text-decoration: underline;
}

/* --- Lightbox -------------------------------------------------------- */
/* custom.js moves this node to <body> on init: #smooth-content is transformed
   by ScrollSmoother, and position:fixed inside a transformed ancestor is
   resolved against that ancestor instead of the viewport. */
.pm-lightbox {
  position: fixed;
  inset: 0;
  /* Above .header-sticky (99999) and the stuck refine bar. #smooth-wrapper is
     position:fixed with z-index:auto, so it is not a stacking context and the
     header's 99999 competes in the root one — at 10000 the header painted
     over the lightbox once the page was scrolled. */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pm-lightbox.is-open {
  opacity: 1;
}

.pm-lightbox[hidden] {
  display: none;
}

.pm-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
}

.pm-lb-dialog {
  position: relative;
  display: flex;
  width: min(1280px, 94vw);
  height: min(760px, 90vh);
  background: #111111;
  overflow: hidden;
}

.pm-lb-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  transition: background 0.3s ease;
}

.pm-lb-close:hover {
  background: #b79f4f;
}

.pm-lb-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: #000000;
}

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

.pm-lb-dialog.is-contain .pm-lb-img {
  object-fit: contain;
}

.pm-lb-nav {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.pm-lb-prev {
  left: 18px;
}

.pm-lb-next {
  right: 18px;
}

.pm-lb-stage:hover .pm-lb-nav {
  opacity: 0.85;
}

.pm-lb-nav:hover {
  opacity: 1;
  background: #000000;
  color: #ffffff;
}

/* Single-image projects get no arrows — custom.js sets this. */
.pm-lb-dialog.is-single .pm-lb-nav,
.pm-lb-dialog.is-single .pm-lb-thumbs,
.pm-lb-dialog.is-single .pm-lb-thumbs-title {
  display: none;
}

.pm-lb-stagebar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 24px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  color: #ffffff;
}

.pm-lb-caption {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.pm-lb-counter {
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}

.pm-lb-info {
  flex: 0 0 380px;
  padding: 60px 38px 38px;
  overflow-y: auto;
  color: #ffffff;
}

.pm-lb-sector {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #b79f4f;
  margin-bottom: 12px;
}

.pm-lb-title {
  color: #ffffff;
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 26px;
}

.pm-lb-meta {
  margin: 0 0 30px;
  padding: 0 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pm-lb-meta>div {
  display: flex;
  gap: 16px;
  padding: 9px 0;
}

.pm-lb-meta dt {
  flex: 0 0 96px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding-top: 2px;
}

.pm-lb-meta dd {
  margin: 0;
  font-size: 15px;
  color: #ffffff;
}

.pm-lb-thumbs-title {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}

.pm-lb-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 32px;
}

.pm-lb-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding: 0 0 72%;
  border: 0;
  overflow: hidden;
  background: #222222;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.pm-lb-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-lb-thumb:hover {
  opacity: 0.85;
}

.pm-lb-thumb.is-active {
  opacity: 1;
  outline: 2px solid #b79f4f;
  outline-offset: -2px;
}

/* .theme-btn is black-on-black against the #111 panel — invert it, the way
   .white-btn is inverted in the dark footer. Also cut back its 25px/40px
   padding and 15px type: at full width that wrapped onto two lines and read
   as the loudest thing in the panel. Two-class selector so the theme's own
   responsive padding rules do not win it back at other breakpoints. */
.pm-lb-cta.theme-btn {
  width: auto;
  padding: 12px 26px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1.2px;
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

.pm-lb-cta.theme-btn:hover {
  background: #b79f4f;
  border-color: #b79f4f;
  color: #ffffff;
}

/* Scroll is locked on <html> while the lightbox is open (see custom.js). */
html.pm-lb-lock,
html.pm-lb-lock body {
  overflow: hidden;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1399px) {
  .pm-shell {
    --pm-edge: 28px;
  }
}

@media (max-width: 1199px) {

  .pm-grid-sizer,
  .pm-item {
    width: 33.3333%;
  }

  .pm-lb-info {
    flex-basis: 320px;
    padding: 56px 26px 26px;
  }

  .pm-lb-title {
    font-size: 25px;
  }
}

@media (max-width: 991px) {
  .pm-shell {
    --pm-edge: 24px;
  }

  .pm-page-head {
    padding: 160px 0 55px;
  }

  .pm-page-head h1 {
    font-size: 42px;
  }

  .pm-grid-sizer,
  .pm-item {
    width: 50%;
  }

  /* Stacked: the image takes the top half, details scroll beneath. */
  .pm-lb-dialog {
    flex-direction: column;
    height: 92vh;
  }

  .pm-lb-stage {
    flex: 0 0 46%;
  }

  .pm-lb-info {
    flex: 1 1 auto;
    padding: 28px 24px;
  }

  .pm-lb-nav {
    opacity: 0.85;
  }
}

@media (max-width: 767px) {
  .pm-page-head {
    padding: 140px 0 45px;
  }

  .pm-page-head h1 {
    font-size: 32px;
  }

  .pm-breadcrumb {
    font-size: 12px;
    letter-spacing: 1px;
  }

  /* The sector row genuinely overflows on a phone — seven tabs never fit —
     so it scrolls sideways, the gutter negative-margined out so it can run
     edge to edge. The refine strip does NOT get this treatment: with the
     "Refine" label and project count gone (below), Status and Location fit
     on one line on their own, and giving them a scroll container is what
     was breaking the dropdown (next comment). */
  .pm-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .pm-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Fade the right edge so a clipped tab reads as "keep swiping" rather than
     as a broken layout. A mask rather than an overlay: this row is the
     scroll container itself, so an absolutely-positioned gradient inside it
     would scroll away with the content. */
  .pm-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }

  /* space-between does nothing once the row overflows, and it would strand
     the first tab away from the edge at intermediate widths. */
  .pm-tabs {
    justify-content: flex-start;
    gap: 0 22px;
  }

  .pm-tab {
    padding: 16px 0 14px;
    font-size: 13px;
  }

  /* "Refine" labelled a control group the visitor couldn't otherwise place,
     and the running total duplicated what the tab counts above already say
     — both just cost the strip a second line on a phone. Status and
     Location now stand on their own and fit next to Clear on one row (base
     .pm-refine is already the flex row that does this — nothing to override
     here now that these two are out of it). */
  .pm-refine-label,
  .pm-count {
    display: none;
  }

  /* Was the actual cause of the dropdown "not working": overflow-x:auto with
     no explicit overflow-y computes overflow-y:auto too (a CSS quirk), so
     this box clipped Nice Select's option list to its own ~38px height —
     every option below the fold looked present but hit-tested to whatever
     sat behind it. Fixed above by dropping .pm-refine-left from the
     scrolling treatment entirely; this rule is just a backstop against the
     same trap coming back if a future change reintroduces overflow here. */
  .pm-refine-left {
    overflow: visible;
  }

  /* Stuck, this sits under an 80px header on a ~844px screen, so give the
     grid back the vertical space the in-flow version can afford. */
  .is-stuck .pm-refine {
    --pm-ctl-h: 34px;
    padding: 8px 0;
  }

  .pm-filter-reset {
    margin-left: 0;
  }

  .pm-shell {
    --pm-edge: 15px;
  }

  .pm-grid-sizer,
  .pm-item {
    width: 100%;
  }

  .pm-item {
    padding: 0 12px 14px;
  }

  .pm-card-title {
    font-size: 19px;
  }

  .pm-lb-dialog {
    width: 100vw;
    height: 100vh;
  }

  .pm-lb-thumbs {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* =====================================================================
   about.php / contact.php / careers.php
   Shared conventions with projects.php: pm- prefix, #b79f4f gold accent,
   uppercase-tracked sub-titles, the same .pm-page-head/.pm-breadcrumb the
   Projects page introduced.
   ===================================================================== */

/* --- about.php: intro + counters --------------------------------------- */
.pm-about-copy p {
  margin-bottom: 20px;
  line-height: 1.8;
}

.pm-about-copy p:last-child {
  margin-bottom: 0;
}

/* --- about.php: fact tiles ------------------------------------------------
   .about-fact-wrap / .gray-bg / .dark-bg are the theme's own classes
   (style.css:4808, 646, 638) — untouched. This wrapper only overrides the
   flex-basis: the theme's own rule is flex:0 0 48%, sized for that
   component's original 2-up pairing next to an image, not a 4-up row. */
.pm-fact-grid {
  display: flex;
  flex-wrap: wrap;
}

.pm-fact-grid .about-fact-wrap {
  flex: 1 1 25%;
  width: 25%;
}

@media (max-width: 991px) {
  .pm-fact-grid .about-fact-wrap {
    flex: 1 1 50%;
    width: 50%;
  }
}

@media (max-width: 575px) {
  .pm-fact-grid .about-fact-wrap {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    min-height: 220px;
  }
}

/* --- about.php: differentiators ----------------------------------------- */
.pm-differentiators {
  background: #f8f8f8;
}

.pm-diff-item {
  text-align: center;
  padding: 10px;
}

.pm-diff-item img {
  margin-bottom: 22px;
}

.pm-diff-title {
  display: block;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
}

.pm-diff-item p {
  color: #6f6f6f;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* --- about.php: expertise list ------------------------------------------ */
.pm-expertise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
}

.pm-expertise-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 16px;
  border-bottom: 1px solid #ececec;
}

.pm-expertise-list i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #b79f4f;
  font-size: 18px;
}

/* --- about.php: sector bridge cards -------------------------------------- */
.pm-sector-bridge {
  background: #fbfbfb;
}

.pm-sector-card {
  display: block;
  position: relative;
  /* 4:3, the shape of the sector covers — shows each photo uncropped. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111111 no-repeat center/cover;
}

.pm-sector-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.35) 45%,
      rgba(0, 0, 0, 0.05) 75%);
  transition: opacity 0.4s ease;
}

.pm-sector-card:hover .pm-sector-card-scrim {
  opacity: 0.92;
}

.pm-sector-card-body {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  color: #ffffff;
}

.pm-sector-card-title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}

.pm-sector-card-count {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
}

.pm-sector-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pm-sector-card:hover .pm-sector-card-link {
  opacity: 1;
  transform: translateY(0);
}

.pm-sector-card-link i {
  transition: transform 0.3s ease;
}

.pm-sector-card:hover .pm-sector-card-link i {
  transform: translateX(4px);
}

/* Touch devices have no hover to reveal "View Projects" with, so it would
   never appear at all — show it by default there instead, same treatment
   as the masonry gallery's arrows above. */
@media (hover: none) {
  .pm-sector-card-link {
    opacity: 1;
    transform: none;
  }
}

/* --- about.php: closing CTA band ----------------------------------------- */
.pm-about-cta {
  background: #000000 url("../images/breadcrumb.svg") no-repeat left bottom / cover;
  color: #ffffff;
  padding: 110px 0;
}

.pm-about-cta-sub {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b79f4f;
  margin-bottom: 16px;
}

.pm-about-cta h2 {
  color: #ffffff;
  font-size: 42px;
  line-height: 1.3;
  margin: 0 0 36px;
}

.pm-about-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .pm-about-cta {
    padding: 70px 0;
  }

  .pm-about-cta h2 {
    font-size: 28px;
  }
}

/* --- contact.php: info column -------------------------------------------- */
.pm-contact-info {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

.pm-contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #ececec;
}

.pm-contact-info li:first-child {
  padding-top: 0;
}

.pm-contact-info i {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f2ea;
  color: #b79f4f;
  font-size: 18px;
}

.pm-contact-info-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #a8a8a8;
  margin-bottom: 5px;
}

.pm-contact-info a {
  color: inherit;
  transition: color 0.25s ease;
}

.pm-contact-info a:hover {
  color: #b79f4f;
}

/* --- contact.php: map ----------------------------------------------------- */
.pm-map {
  height: 420px;
}

.pm-map iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- careers.php: accordion polish (base look comes from style.css's
   .cp-custom-accordion — this just ties the active state to the site's
   gold accent instead of leaving it plain black/white). ------------------ */
.cp-custom-accordion .accordion-buttons:not(.collapsed) {
  color: #000000;
}

.cp-custom-accordion .accordion-buttons:not(.collapsed) span {
  color: #b79f4f;
}

.cp-custom-accordion .accordion-buttons:not(.collapsed)::after {
  color: #b79f4f;
}

.pm-accordion-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.pm-accordion-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

.pm-accordion-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #b79f4f;
}

/* --- careers.php: email CTA (replaces the application form) ------------- */
.pm-careers-cta {
  margin-top: 70px;
  padding-top: 60px;
  border-top: 1px solid #ececec;
}

.pm-careers-cta .sub-title {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #b79f4f;
}

.pm-careers-cta h3 {
  margin: 0 0 14px;
  font-size: 30px;
}

.pm-careers-cta p {
  margin: 0 0 28px;
  color: #6f6f6f;
}

.pm-careers-cta .theme-btn i {
  margin-right: 8px;
  font-size: 15px;
  position: relative;
  top: 1px;
}

/* --- shared: forms (contact.php + careers.php) --------------------------- */
.pm-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #4a4a4a;
  margin-bottom: 8px;
}

.pm-required {
  color: #b79f4f;
  margin-left: 3px;
}

.pm-optional {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: #a8a8a8;
}

/* Every single-line control — text/email/tel/file/select — is exactly
   40px, border included (Bootstrap's reboot sets box-sizing:border-box
   globally, so height already accounts for the 1px border below rather
   than adding to it). textarea is deliberately left out of this rule: it's
   a multi-line control sized by its `rows` attribute, and 40px would only
   fit part of one line. */
.pm-form input[type="text"],
.pm-form input[type="email"],
.pm-form input[type="tel"],
.pm-form input[type="file"],
.pm-form select {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  font-size: 15px;
  color: #000000;
  transition: border-color 0.25s ease;
}

.pm-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  font-size: 15px;
  color: #000000;
  transition: border-color 0.25s ease;
  resize: vertical;
}

/* type=file's own "Choose file" control has no text baseline to centre
   against the way text/email/tel do natively, so give it one. */
.pm-form input[type="file"] {
  line-height: 38px;
}

.pm-form input:focus,
.pm-form select:focus,
.pm-form textarea:focus {
  outline: none;
  border-color: #b79f4f;
}

.pm-form .theme-btn {
  border: 0;
  cursor: pointer;
}

/* main.js runs Nice Select over EVERY <select> on the page (not just
   projects.php's filter bar), and the library sizes its replica to its
   content — not to the parent it replaces — so "Area of Interest" rendered
   narrower than the Name/Email inputs next to it, with the opened dropdown
   list wider than the closed box above it. Force it to fill the field the
   same way the plain inputs already do — height included, so the closed
   select sits at the same 40px as its siblings (the library's own default
   is 42px). */
.pm-form select,
.pm-form .nice-select {
  width: 100%;
  height: 40px;
  line-height: 38px;
}

.pm-form .nice-select .current {
  line-height: 38px;
}

/* The opened dropdown list sizes itself independently of the box (auto
   width off its longest option text — "Draughtsmen / CAD & BIM
   Specialists" here), so fixing the box above didn't fix the list; it just
   moved the mismatch from "box narrower than the field" to "list wider
   than the box". Tie it to the box explicitly. */
.pm-form .nice-select .list {
  width: 100%;
  left: 0;
}

/* --- Compact CTAs: form submit buttons + about.php's closing buttons ----
   .theme-btn/.white-btn ship at 25px/40px padding and 15px type — sized for
   a lone hero button, not a form action or a paired CTA. white-space:nowrap
   is the actual fix for "Submit Application" wrapping onto two lines;
   the smaller padding/type just keeps that from looking oversized once it
   can't wrap. Left as an add-on class rather than changed on .theme-btn
   itself, so the header/hero/footer buttons elsewhere are untouched.

   display/width are declared explicitly because style.css also ships
   `input[type="submit"], button[type="submit"] { display: inline-block;
   width: 35% }` — written for the theme's own bare <input type="submit">,
   but button[type="submit"] (an element+attribute selector) matches our
   <button class="theme-btn"> too, and beats .theme-btn's plain class
   selector on specificity. It only wins on the properties THIS rule
   doesn't touch, which is why padding/font-size above were already correct
   while the button was silently clamped to 35% of the form width — narrow
   enough that "Submit Application" overflowed past its own edge instead of
   wrapping. Restating both here reclaims them. */
.pm-btn-sm.theme-btn,
.pm-btn-sm.white-btn {
  display: inline-flex;
  width: auto;
  padding: 15px 32px;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.pm-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #c0392b;
}

/* Off-screen, not display:none — some bots skip obviously-hidden fields
   but still fill plain off-screen ones (see the PHP comment on the field). */
.pm-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pm-form-banner {
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 14px;
  border-left: 3px solid;
}

.pm-form-banner-success {
  background: #f2f7f0;
  border-color: #4a8f3c;
  color: #2f5c26;
}

.pm-form-banner-error {
  background: #fbf0ef;
  border-color: #c0392b;
  color: #8a2a20;
}

@media (max-width: 767px) {
  .pm-expertise-list {
    grid-template-columns: 1fr;
  }

  .pm-map {
    height: 300px;
  }
}

/* Switched-off sectors ($PM_INACTIVE_SECTORS): still listed in the filter
   tabs and the Projects menu, but greyed and not clickable. */
.pm-tab.is-inactive,
.pm-tab.is-inactive:hover {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.main-menu ul>li>ul li .pm-nav-inactive,
.mobile-nav .pm-nav-inactive {
  display: block;
  cursor: default;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.main-menu ul>li>ul li .pm-nav-inactive {
  padding: 12px 25px;
  font-size: 13px;
  font-weight: 500;
  color: #a3a7ad;
}

/* =====================================================================
   404.php — big brand-coloured "404", heading, one line, one button.
   ===================================================================== */
.pm-404 .pm-404-code {
  display: block;
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -6px;
  color: #b79f4f;
  margin-bottom: 30px;
}

.pm-404 .pm-404-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 14px;
}

.pm-404 .pm-404-text {
  margin-bottom: 36px;
}

.pm-404 .theme-btn.pm-404-btn {
  background: #b79f4f;
  color: #ffffff;
}

.pm-404 .theme-btn.pm-404-btn:hover {
  background: #000000;
  color: #ffffff;
}

.pm-404 .pm-404-btn i {
  margin-left: 8px;
  font-size: 18px;
  vertical-align: -2px;
}

@media (max-width: 991px) {
  .pm-404 .pm-404-code {
    font-size: 170px;
    letter-spacing: -4px;
  }
}

@media (max-width: 767px) {
  .pm-404 .pm-404-code {
    font-size: 120px;
    letter-spacing: -3px;
  }

  .pm-404 .pm-404-title {
    font-size: 26px;
  }
}