/* Red Camel customizations layered on top of the theme's main.css.
   Loaded after main.css in index.html, so these rules win on equal specificity. */

/* --- Off-canvas navigation panel: open from the LEFT instead of the right --- */
/* Pin the panel to the left edge. */
.at-offcanvas-2-area.menu-open,
.at-offcanvas-2-area.menu-open-temp {
  right: auto;
  left: 0;
}

/* Park the closed panel off-screen on the left (theme default is left: 100%, i.e. off-right). */
.at-offcanvas-2-area {
  left: auto;
  right: 100%;
}

/* The white blurred panel background is its own fixed element pinned to the
   right (right: 0) — re-pin it to the LEFT so it sits under the menu. */
.at-offcanvas-2-area .offcanvas-bg {
  right: auto;
  left: 0;
}

/* The circular reveal originates from the top-LEFT corner (45px in from the left). */
.at-offcanvas-2-area .offcanvas-bg,
.at-offcanvas-2-area:not(.menu-open) .offcanvas-bg {
  clip-path: circle(0% at 45px 45px);
}
.at-offcanvas-2-area.menu-open .offcanvas-bg {
  clip-path: circle(150% at 45px 45px);
}

/* --- Header: logo now lives on the RIGHT, so move things off the right edge --- */
/* The floating "MENU" sticky button defaults to right:20px and goes position:fixed
   on scroll, which collides with the right-side logo. Move it to the left. */
.hamburger-sticky-menu {
  right: auto;
  left: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .hamburger-sticky-menu {
    right: auto;
    left: 20px;
  }
}

/* Header logo sizing lives in the "v2 refinements" block at the end of this file. */

/* Responsive width helper (Bootstrap ships w-75 but no responsive variant).
   Used on the 404 page so the intro is full-width on phones, 75% on desktop. */
@media (min-width: 992px) {
  .w-lg-75 {
    width: 75% !important;
  }
}

/* ============================================================
   Featured Projects (home Section 4)
   ============================================================ */

/* Working filter tabs (React-driven; theme's isotope JS isn't wired in). */
.sec-4-home-9__filters .filter-btn {
  cursor: pointer;
  padding: 9px 22px;
  border-radius: 32px;
  border: 1px solid var(--at-neutral-200, #c9c9c9);
  background: transparent;
  color: var(--at-neutral-800, #2b2b2b);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.sec-4-home-9__filters .filter-btn:hover {
  border-color: var(--at-theme-primary, #f0460e);
  color: var(--at-theme-primary, #f0460e);
}
.sec-4-home-9__filters .filter-btn.active {
  background: var(--at-theme-primary, #f0460e);
  border-color: var(--at-theme-primary, #f0460e);
  color: #fff;
}

/* Readable gradient by default; on hover the gradient + text fade away so the
   photo shows uncovered. Photos are bright, so this keeps overlay text legible. */
.sec-4-home-9__overlay {
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.35) 42%, rgba(18, 18, 18, 0.88) 100%) !important;
  opacity: 1;
  transition: opacity .45s ease;
}
.sec-4-home-9__visual:hover .sec-4-home-9__overlay {
  opacity: 0;
}
.sec-4-home-9__badge {
  transition: opacity .45s ease;
}
.sec-4-home-9__visual:hover .sec-4-home-9__badge {
  opacity: 0;
}

/* ============================================================
   Section 5 marquee — solid text, not the see-through blend
   ============================================================ */
/* Theme sets mix-blend-mode: difference on BOTH the container and the marquee,
   which inverts them against the photo (odd colours / see-through look). Kill
   the blend on both so all overlay text renders solid over the image. */
.sec-5-home-9__container,
.sec-5-home-9__marquee {
  mix-blend-mode: normal !important;
}
.sec-5-home-9__marquee,
.sec-5-home-9__marquee-text {
  color: #ffffff !important;
}
.sec-5-home-9__marquee-text {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
/* Darken the background image a touch so bright signs never fight the text. */
.sec-5-home-9__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  pointer-events: none;
}

/* ============================================================
   Section 6 "Sectors we serve" — headline spacing
   ============================================================ */
/* Huge headline at line-height:1 crowds its own second line and the cards
   below. Loosen the leading and add breathing room after the header. */
.sec-6-home-9__title {
  line-height: 1.12 !important;
}
.sec-6-home-9__header {
  margin-bottom: clamp(56px, 6vw, 104px) !important;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */

/* Hero (Section 1): on phones the display words "SIGNAGE" and "AGENCY" get
   split by the intro paragraph and read as two stray words. Flatten the two
   rows and reorder so they sit together as one "SIGNAGE / AGENCY" headline. */
@media (max-width: 991.98px) {
  .sec-1-home-9__container {
    display: flex;
    flex-direction: column;
  }
  .sec-1-home-9__row--top,
  .sec-1-home-9__row--middle {
    display: contents;
  }
  .sec-1-home-9__title--modern { order: 1; margin-bottom: 0 !important; }
  .sec-1-home-9__title--agency { order: 2; margin-bottom: 18px !important; }
  .sec-1-home-9__intro         { order: 3; margin-bottom: 22px !important; }
  .sec-1-home-9__left          { order: 4; }
  .sec-1-home-9__thumbs        { order: 5; }
  .sec-1-home-9__divider       { order: 6; }
  .sec-1-home-9__row--bottom   { order: 7; }
  .sec-1-home-9__clients       { order: 8; }
}

/* ============================================================
   RED CAMEL — v2 refinements
   Width unification · logo · headline sizing · responsive
   padding · dark-mode inner hero · image lightbox
   ============================================================ */

/* --- 1. One content width for the whole site ------------------------------
   Header, home sections, footer and inner pages all share the same max-width
   and side gutter, so every left/right edge lines up on every device. */
.container,
.container-2200,
.sec-1-home-9__container,
.sec-2-home-9__container,
.sec-3-home-9__container,
.sec-4-home-9__container,
.sec-5-home-9__container,
.sec-6-home-9__container,
.sec-7-home-9__container,
.footer-9__container {
  width: 100%;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}

/* --- 2. Header logo: bigger, but never crowds the controls on small phones */
.header-9 .at-header-logo img { height: 62px !important; }
@media (max-width: 991.98px) { .header-9 .at-header-logo img { height: 54px !important; } }
@media (max-width: 575.98px) { .header-9 .at-header-logo img { height: 46px !important; } }
@media (max-width: 380px)    { .header-9 .at-header-logo img { height: 40px !important; } }

/* --- 3. Featured Projects: smaller, neater headline ----------------------- */
.sec-4-home-9__title {
  font-size: clamp(30px, 5vw, 62px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
  margin: 0 auto clamp(20px, 2.4vw, 34px) !important;
}

/* --- 4. Tame the other oversized display headlines ------------------------ */
.sec-6-home-9__title { font-size: clamp(30px, 5.2vw, 72px) !important; }
.sec-3-home-9__headline { font-size: clamp(28px, 3vw, 52px) !important; }

/* --- 5. Inner-page hero (PageBanner): dark in BOTH themes, responsive -----
   In dark mode the theme flips bg-neutral-900 to a light colour, leaving white
   text on a white banner. `.changeless` (added in the component) re-pins it, and
   these rules guarantee a dark banner with legible white text either way. */
.rc-page-banner {
  background-color: #141414 !important;
  padding-top: clamp(116px, 15vw, 150px) !important;
  padding-bottom: clamp(48px, 7vw, 80px) !important;
}
.rc-page-banner .container { padding-top: clamp(28px, 5vw, 60px) !important; }
.rc-page-banner .section-title { font-size: clamp(30px, 5.2vw, 64px) !important; line-height: 1.08 !important; }
.rc-page-banner h1,
.rc-page-banner h6,
.rc-page-banner a,
.rc-page-banner span,
.rc-page-banner .section-title { color: #ffffff !important; }

/* --- 6. Responsive vertical spacing --------------------------------------
   The theme's pt-150 / pb-150 etc. are fixed pixels (no breakpoints), far too
   tall on phones. py-100 / py-80 aren't defined at all — define + scale them. */
.py-100 { padding-top: 100px; padding-bottom: 100px; }
.py-80  { padding-top: 80px;  padding-bottom: 80px; }
@media (max-width: 991.98px) {
  .pt-150 { padding-top: 96px !important; }
  .pb-150 { padding-bottom: 96px !important; }
  .pt-120 { padding-top: 80px !important; }
  .pb-120 { padding-bottom: 80px !important; }
  .pt-100 { padding-top: 68px !important; }
  .pb-100 { padding-bottom: 68px !important; }
  .py-100 { padding-top: 68px !important; padding-bottom: 68px !important; }
  .pt-80  { padding-top: 56px !important; }
  .pb-80  { padding-bottom: 56px !important; }
  .py-80  { padding-top: 56px !important; padding-bottom: 56px !important; }
}
@media (max-width: 575.98px) {
  .pt-150 { padding-top: 64px !important; }
  .pb-150 { padding-bottom: 64px !important; }
  .pt-120 { padding-top: 52px !important; }
  .pb-120 { padding-bottom: 52px !important; }
  .pt-100 { padding-top: 48px !important; }
  .pb-100 { padding-bottom: 48px !important; }
  .py-100 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .py-80  { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* --- 7. Image lightbox ---------------------------------------------------- */
/* Content photos read as clickable. */
main img[src^="/images/"]:not([src*="logo-redcamel"]) { cursor: zoom-in; }
[aria-hidden="true"] img[src^="/images/"] { cursor: default; }

.rc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(4px);
  animation: rc-lightbox-in 0.22s ease;
}
@keyframes rc-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.rc-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  cursor: default;
}
.rc-lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.rc-lightbox__close:hover { background: var(--at-theme-primary, #f0460e); transform: rotate(90deg); }

/* ============================================================
   RED CAMEL — v3 hero wordmark
   Stack "RED" over "CAMEL" flush-left as one premium wordmark,
   with even, intentional spacing on every device.
   ============================================================ */

/* Both title words share one size + tight, even tracking so they read as a unit.
   Big original wordmark: sized so the longest word ("MANUFACTURER") reaches the
   header's right edge on desktop without ever overflowing the content width. */
.sec-1-home-9__title {
  letter-spacing: -0.045em !important;
  line-height: 0.9 !important;
  font-size: clamp(40px, 6.4vw, 92px) !important;
}

/* Desktop (>=992px): original diagonal layout — SIGNAGE top-left, MANUFACTURER
   offset below on the middle row with the photo rail sitting beside it. */
@media (min-width: 992px) {
  .sec-1-home-9__row--middle {
    justify-content: flex-start;
    gap: clamp(24px, 2.6vw, 56px);
  }
  .sec-1-home-9__left {
    width: clamp(190px, 15vw, 250px);
    padding-bottom: 0;
  }
  .sec-1-home-9__thumbs { margin-left: auto; }
}

/* Mobile + tablet (<=991px): RED directly over CAMEL, even rhythm. */
@media (max-width: 991.98px) {
  .sec-1-home-9__title { line-height: 0.95 !important; }
  .sec-1-home-9__title--modern { margin-bottom: 0 !important; }
  .sec-1-home-9__title--agency { margin-bottom: 20px !important; }
}

/* New "What we do" label (replaces the removed client-logo wall). */
.sec-1-home-9__services-lead {
  font-family: var(--at-ff-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--at-common-white);
  opacity: 0.6;
  margin: 0;
  align-self: flex-start;
}
.sec-1-home-9__services-wrap { width: min(560px, 100%); }
@media (max-width: 991.98px) {
  .sec-1-home-9__services-wrap { width: 100%; }
}

/* ============================================================
   HOME SECTION 2 (stats) — mobile layout
   Keep the theme's minimal, big-number editorial style but lay the
   counters out 2-up with a hairline rule above each (echoing the
   section's line motif) so it reads as a structured stat block
   rather than a plain vertical list. Desktop (>=768px) is untouched.
   ============================================================ */
@media (max-width: 767.98px) {
  .sec-2-home-9__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    -moz-column-gap: clamp(20px, 6vw, 40px) !important;
         column-gap: clamp(20px, 6vw, 40px) !important;
    row-gap: 0 !important;
  }
  .sec-2-home-9__stat {
    max-width: 100% !important;
    padding: 20px 0 18px !important;
    border-top: 1px solid var(--at-neutral-200, rgba(128, 128, 128, 0.28));
  }
  .sec-2-home-9__value {
    font-size: clamp(42px, 13vw, 62px) !important;
  }
  .sec-2-home-9__label {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
  }
  /* 5 stats → last one spans the full width so the grid stays balanced */
  .sec-2-home-9__stat:nth-child(5) { grid-column: 1 / -1; }
}

/* ============================================================
   HERO — client / partner logo marquee
   An infinite horizontal strip of client logos anchored to the
   base of the hero (Section1). Driven by the shared
   .carouselTicker effect. Each logo sits in a white card so the
   mixed logo backgrounds read consistently on the dark hero.
   ============================================================ */
.sec-1-home-9__clients {
  display: block;
  width: 100%;
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sec-1-home-9__clients-lead {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.sec-1-home-9__clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.sec-1-home-9__clients-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sec-1-home-9__client {
  float: left;
  margin: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 84px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.sec-1-home-9__client img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
@media (max-width: 767.98px) {
  .sec-1-home-9__client {
    width: 132px;
    height: 68px;
    margin: 0 10px;
    padding: 10px 14px;
  }
}

/*----------------------------------------*/
/*  Home 9 - highlight marquee: uniform tiles
/*----------------------------------------*/
/* The theme deliberately staggers the moving gallery: every .moving-gallery li
   gets its own width via :nth-child (20/25/30vw), and anything past the 14th
   falls back to the 40vw base rule. CarouselTickerEffect clones the 13 items
   into the same <ul>, so clones land on nth-child(14)+ and blow up to 40vw.
   For the Red Camel highlights the client wants one consistent tile, so pin
   width, spacing and aspect ratio for every item, clones included.
   :nth-child(n) is there only to match the theme's specificity. */
.moving-gallery--uniform li,
.moving-gallery--uniform li:nth-child(n) {
  width: 25vw;
  margin: 0 12px;
  padding-left: 0;
  padding-right: 0;
}
/* Source highlights are 900x680; cover keeps future drop-ins the same shape. */
.moving-gallery--uniform li img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (max-width: 1199.98px) {
  .moving-gallery--uniform li,
  .moving-gallery--uniform li:nth-child(n) {
    width: 32vw;
    margin: 0 8px;
  }
}
@media only screen and (max-width: 767.98px) {
  .moving-gallery--uniform li,
  .moving-gallery--uniform li:nth-child(n) {
    width: 52vw;
    margin: 0 6px;
  }
}

/*----------------------------------------*/
/*  Home 9 hero - keep vw sizing inside the capped container
/*----------------------------------------*/
/* Section 1 above is what pins every container to max-width:1440px so the header
   logo, hero copy and footer all share one content edge. The theme, though, sizes
   the whole hero in vw against a 2200px container: above a 1440px viewport the
   title, the left block and the thumbnails keep growing while their box stops, and
   because .sec-1-home-9__row is space-between with non-shrinking children the row
   overflows - the thumbnails visibly push past the content edge on wide screens.
   Re-base every vw metric that drives horizontal size on the container width
   instead of the viewport, so at >=1440px the hero holds the same proportions it
   already has at exactly 1440px (a layout that fits) and the thumbs stay flush.
   Below 1440px min() returns 100vw, so nothing changes from the theme. */
.sec-1-home-9 {
  --rc-hero-w: min(100vw, 1440px);
}
.sec-1-home-9 .sec-1-home-9__row {
  gap: clamp(16px, calc(var(--rc-hero-w) * 0.0156), 30px);
}
.sec-1-home-9 .sec-1-home-9__title {
  font-size: clamp(52px, calc(var(--rc-hero-w) * 0.103), 198px);
}
.sec-1-home-9 .sec-1-home-9__left {
  width: clamp(210px, calc(var(--rc-hero-w) * 0.163), 313px);
}
.sec-1-home-9 .sec-1-home-9__intro {
  max-width: clamp(300px, calc(var(--rc-hero-w) * 0.35), 678px);
}
.sec-1-home-9 .sec-1-home-9__thumbs {
  gap: clamp(10px, calc(var(--rc-hero-w) * 0.0094), 18px);
}
.sec-1-home-9 .sec-1-home-9__thumb {
  width: clamp(86px, calc(var(--rc-hero-w) * 0.0755), 145px);
  height: clamp(60px, calc(var(--rc-hero-w) * 0.052), 100px);
}
/* Between 992px and roughly 1090px the row still could not fit on one line: the left
   block and the thumbnails have both bottomed out on their clamp minimums (210px and
   3x86px) while the title carries on scaling at 10.3vw, so it overflowed by up to 48px.
   The theme already answers a tight row by wrapping it below 992px; allow the same here
   instead of inventing a breakpoint, and keep the thumbs pinned right so they stay on
   the content edge whether they sit beside the title or under it. */
@media only screen and (min-width: 992px) {
  .sec-1-home-9 .sec-1-home-9__row--middle {
    flex-wrap: wrap;
  }
  .sec-1-home-9 .sec-1-home-9__row--middle .sec-1-home-9__thumbs {
    margin-left: auto;
  }
}