:root {
    --cv-navy: #0f1c33;
    --cv-blue: #285cb1;
    --cv-orange: #f99218;
}

.home-hero,
.page-title-section,
.section-dark {
    background-color: var(--cv-navy);
    background-image: linear-gradient(135deg, var(--cv-navy) 0%, var(--cv-blue) 100%);
}

/* The original footer is img/bg/footer-bg.jpg under data-overlay-dark="8"
   (80% black) — much darker than the ~35-55% overlays used elsewhere in
   the template, close to solid black with only a hint of the photo left.
   We have no approved photo to put there, so match that near-black result
   with a flat, almost-black navy instead of the lighter hero/section
   gradient, so the footer reads as the darkest block on the page like the
   original does. */
.footer1 {
    background-color: #0a0f1a;
    background-image: none;
}

/* styles.css gives .services-block a near-invisible rgba(225,225,225,.2)
   tint, tuned for the template's own dim hero photo. Our hero photos are
   much brighter/busier, so that tint reads as fully transparent and the
   highlight labels collide with whatever is behind them in the image.
   Darken it enough to read as a clear translucent band while still
   letting the hero image show through. */
.services-block {
    background-color: rgba(15, 28, 51, 0.55);
}

/* The template's own blog/insight cover photos (img/blog/blog-01.jpg etc.)
   are all pre-cropped to the same 696x418 size, so .card-style4 grid cards
   line up with no CSS needed. Our post covers come from the client's own
   uploads (or, for now, placeholder photos of varying sizes), so without a
   fixed box every card in the grid renders at a different height. Force
   the same 696:418 box the template's source images use. */
.card-style4 img {
    width: 100%;
    aspect-ratio: 696 / 418;
    object-fit: cover;
}

/* Same problem, same fix, for the Studio page's photo gallery: uploaded
   studio photos vary in size, so the 3-column grid needs a fixed box
   (4:3, matching the aspect-ratio already used for every other image
   card on the site -- services, equipment, team) instead of rendering
   each image at its own native height. */
.studio-gallery-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Same fix again for the homepage's Featured Work cards: project cover
   photos vary in size, so without a fixed box the 4-up row doesn't line
   up. The template's own card-style3 source images (img/service/services-*)
   are close to square, so match that instead of the 4:3 used elsewhere. */
.featured-work-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* The vertical tabs on the About page (Vision/Mission/Values) only ever
   held a short, pre-written sentence in the original, where the plugin's
   default 10px .resp-tab-content padding barely registers. Our panels
   carry a full photo plus a paragraph, so that same 10px reads as no
   padding at all. Give it real breathing room. */
.resp-vtabs .resp-tab-content {
    padding: 30px;
}

/* The template only makes .video_btn float over its image under
   .card-style8; scope the same absolute positioning to our portfolio
   grid cards. */
.portfolio-box .video_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}