/*!
Theme Name: Design House
Theme URI: http://underscores.me/
Author: Design House
Author URI: http://underscores.me/
Description: Description
Version: 1.3.9
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: design-house-underscores-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Design House is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1. Imports & Fonts
2. Variables & Colors
3. Global Styles & Normalize
4. Typography
5. Layout & Structure
   - Standard Page Layouts (2025+)
6. Header & Navigation
7. Content Areas
8. Forms & Buttons
9. Components
   - Isotope
   - Draggable Images
   - Horizontal Scroll
   - ACF Homepage
   - Visual Composer
   - Flexible Posts Widget
   - Accordion
10. Footer
11. Media Queries
12. Utilities & Helper Classes
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1. Imports & Fonts
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;900&display=swap');

@font-face {
    font-family: 'Helvetica Black';
    src: url('fonts/Helvetica Black.woff2') format('woff2'),
         url('fonts/Helvetica Black.woff') format('woff'),
         url('fonts/Helvetica Black.ttf') format('truetype'),
         url('fonts/Helvetica Black.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*--------------------------------------------------------------
2. Variables & Colors
--------------------------------------------------------------*/
/* Colors:
- Red: #ce0000
- Light Grey: #B5B3B3
- Dark Grey: #696868
- Not quite black: #0b1b25
- Design House Colors:
  - Light Blue: #5f5ea9
  - Grey: #b0b1b1
  - Light Grey: #e5e5e5
  - Dark Blue: #0b1b25 (hsl(205, 44%, 10%))
*/

/*--------------------------------------------------------------
3. Global Styles & Normalize
--------------------------------------------------------------*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    word-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background: #fff;
}

#page {
    width: 100vw;
    overflow-x: hidden;
}

.content-area {
    float: left;
    width: 100%;
}

#content {
    margin-top: 15px;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

@media screen and (max-width: 768px) {
    .wrap {
        padding: 0px 20px;
    }
}

img {
    height: auto;
    max-width: 100%;
    border-style: none;
}

a {
    background-color: transparent;
    color: #000;
    text-decoration: none;
    transition: all linear 0.3s;
}

a:hover {
    color: #000;
}

hr {
    box-sizing: content-box;
    height: 1px;
    overflow: visible;
    background-color: #ccc;
    border: 0;
    margin-bottom: 1.5em;
}

/* Lists */
ul, ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

#content ul, #content ol {
    margin: 0 0 1.5em 0em !important;
    padding: 0 0 0 18px;
}

/* Tables */
table {
    margin: 0 0 1.5em;
    width: 100%;
}

/* Misc Elements */
dfn, cite, em, i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code, kbd, tt, var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 15px;
}

abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark, ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/*--------------------------------------------------------------
4. Typography
--------------------------------------------------------------*/
body, button, input, select, optgroup, textarea {
    color: #333;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif;
    font-weight: normal !important;
    letter-spacing: -0.06em;
    color: #0b1b25;
    line-height: 1.0em;
    clear: both;
}

h1, .h1 {
    font-size: 60px;
    margin: 0 0 10px;
}

h2, .h2 {
    font-size: 32px;
}

h3, .h3 {
    font-size: 22px;
}

h4, .h4, h4 a {
    font-size: 22px;
}

h6, .h6 {
    font-size: 20px;
}

p {
    margin-bottom: 1.5em;
}

p img {
    margin-top: 30px !important;
}

p, li, a, .fp-excerpt {
    font-size: 18px;
    color: #333;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    line-height: 30px;
}

/* Slightly increase spacing between list items for readability */
li {
    margin-bottom: 10px;
}

/*--------------------------------------------------------------
5. Layout & Structure
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Clearings */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

/*--------------------------------------------------------------
6. Header & Navigation
--------------------------------------------------------------*/
#masthead {
    background-color: transparent;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
}

#masthead .wrap {
    padding-top: 35px !important; /* CHANGED from 15px */
    padding-bottom: 15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-branding {
    position: relative;
    width: auto;
    margin: 0;
    max-width: 750px;
}

.site-branding .desktop-logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.site-branding .mobile-logo {
    display: none;
    max-width: 100%;
    height: 30px;
    width: auto;
}

/* Force Mobile Nav */ 
#desktop-navigation {
    display: none !important;
}

#mobile-navigation {
    display: block !important;
}

/* Navigation System */
#navigation-system {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
}

#navigation-system.menu-open {
    position: fixed;
}

/* Mobile Menu Icon */
#mobile-icon, #mobile-icon.open {
    position: relative;
    z-index: 200 !important;
    width: 200px;
    margin: 0;
    height: 60px;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transition: all 0.3s ease;
    opacity: 1;
    cursor: pointer;
}

#mobile-icon {
    background: url('https://designhousestudio.co.uk/wp-content/themes/design-house/icons/DH_Menu-Button.png');
}

#mobile-icon.open {
    background: url('https://designhousestudio.co.uk/wp-content/themes/design-house/icons/DH_Close-Button.png');
}

#mobile-icon:hover {
    opacity: 0.7;
    transform: scale(1.05);
}

/* Menu Container */
.menuWrap {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 100;
    overflow: hidden !important;
    width: 0;
    transition: width 0.4s ease;
    max-width: 80vw;
}

.menuContainer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

/* Menu Items */
.menuButt {
    display: block;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.4s ease;
    background: #ffffff;
    padding: 7px 31px 11px 28px;
    box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.25);
    margin-bottom: 9px;
    cursor: pointer;
}

.menuButt:last-child {
    margin-bottom: 0;
}

.menuButt h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: right;
    transition: all 0.3s ease;
    font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif;
}

.menuButt:hover {
    background: #ffffff;
    transform: translateX(-10px);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.menuButt:hover h2 {
    color: #0B1B25;
}

/* Blur effect for background when menu is open */
.site-header,
.site-content {
    transition: all 0.4s ease;
}

body.overflowFixed .site-header,
body.overflowFixed .site-content {
    filter: blur(3px);
    opacity: 0.7;
}

/* Menu open states */
.menuWrap.open {
    width: 100vw;
}

.menuWrap.open .menuContainer {
    opacity: 1;
}

.menuWrap.open .menuButt {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation delays for menu items */
.menuWrap.open .menuButt:nth-child(1) { transition-delay: 0.1s; }
.menuWrap.open .menuButt:nth-child(2) { transition-delay: 0.2s; }
.menuWrap.open .menuButt:nth-child(3) { transition-delay: 0.3s; }
.menuWrap.open .menuButt:nth-child(4) { transition-delay: 0.4s; }
.menuWrap.open .menuButt:nth-child(5) { transition-delay: 0.5s; }
.menuWrap.open .menuButt:nth-child(6) { transition-delay: 0.6s; }

/* Mobile menu button styles */
@media (max-width: 768px) {
    .menuWrap {
        max-width: 90vw;
    }
    
    .menuButt {
        padding: 7px 31px 11px 28px;
        font-size: 1.4rem;
        width: auto;
        text-align: right;
    }

    .menuButt:hover {
        opacity: 0.7;
        transform: translateX(-5px);
    }

    .menuButt h2 {
        margin: 0;
        font-size: 2.1rem;
        font-weight: inherit;
        line-height: 1.2;
        transition: transform 0.3s ease;
        font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif;
    }

    .menuButt:hover h2 {
        transform: translateX(-5px);
    }

    #mobile-icon, #mobile-icon.open {
        position: relative;
        right: auto;
        z-index: 200 !important;
        width: 100px;
        margin: 0;
        height: 60px;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        transition: all 0.3s ease; 
        opacity: 1;
        cursor: pointer;
    }

    .site-branding .desktop-logo {
        display: none;
    }

    .site-branding .mobile-logo {
        display: block;
        height: 40px;
    }

    .wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .content-wrapper {
        margin-top: 0px;
    }
    .flexiblePostSquaresContainer {
        padding: 0 10px;
    }
    .fun-stuff-container {
        padding: 0 10px;
    }
    .fun-stuff-bubbles-playpen {
        width: 100%;
        margin: 0 auto;
        min-height: 850px;
        height: auto;
    }
    
    .bubble {
        transform: scale(0.7);
    }
    
    .bubble:hover {
        transform: scale(0.7);
    }
    
    .bubble-title {
        opacity: 1;
        transform: translateY(0);
    }
    
    .bubble-title h3 {
        font-size: 1.2rem;
    }

    .latestProjectContainer {
        padding: 0 15px;
    }
    
    .latestProjectContent.latest-project-layout {
        flex-direction: column;
        min-height: 350px; /* ADDED: Ensure minimum height on mobile */
    }

    .latest-project-column-media {
        display: none; 
    }
    
    .latest-project-column-content {
        flex-basis: 100%; 
        width: 100%;
        padding: 20px; 
    }

    .latest-project-column-content .latestProjectTitle h2 {
        font-size: 28px;
    }

    .latest-project-column-content .latestProjectExcerpt {
        font-size: 15px;
    }

    .latest-project-column-content .more-button {
        align-self: flex-end; 
        margin-top: 20px; 
    }

    .draggable-container {
        width: 300px;
    }
    
    .draggable-container:hover {
        width: 350px;
    }

    .triangle-grid {
        transform: scale(0.6);
    }
    
    .triangle-title {
        font-size: 16px;
    }

    .locations-grid {
        flex-direction: column;
        gap: 20px;
    }

    .location-item {
        width: 100%;
    }
    
    .locations-title {
        font-size: 50px;
    }

    .content-layout {
        flex-direction: column;
        gap: 20px;
    }

    .left-column,
    .right-column {
        width: 100%;
    }

    .right-column .column-content {
        padding-right: 0;
    }

    .FPWproject .titleBlock {
        opacity: 1;
        background: rgba(255, 255, 255, 0.7);
    }
    
    .FPWproject:hover .titleBlock {
        opacity: 1;
    }
    
    .titleBlock h3 {
        font-size: 24px !important;
    }

    .page-template-page-home-featured-project .main-content.fade-in {
        width: 100%;
        margin: 0;
        padding: 15px;
    }
}

/* Body class for when menu is open */
body.overflowFixed {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Navigation Structure */
.main-navigation {
    display: block;
    float: right;
    width: calc(100% - 400px);
    margin-top: 35px;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
    background-color: #ccc;
    padding: 10px 0px;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation li {
    float: left;
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

/* Mobile Menu Specific */
.sub-menu {
    display: none;
    margin: 0px;
    padding: 0px;
}

.sub-menu li a {
    font-size: 20px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#mobile-menu li a {
    color: #000;
    text-decoration: none;
    font-weight: 300;
    font-size: 25px;
}

#mobile-menu .menu-item {
    display: block;
    width: 100%;
    text-align: center;
}

.overflowFixed {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
}

/*--------------------------------------------------------------
7. Content Areas
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.post,
.page {
    margin: 0 0;
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/* Comments */
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}
/*--------------------------------------------------------------
8. Forms & Buttons
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    line-height: 1;
    padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}

/* Ninja Forms */
.nf-form-cont {
    margin-top: 30px;
}

.nf-form-title, .nf-before-form-content, .nf-field-label {
    display: none;
}

.nf-field input[type="submit"] {
    background: transparent !important;
    color: rgba(255, 255, 255, 1) !important;
    font-size: 50px !important;
    padding: 0 !important;
    font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif !important;
    text-decoration: none !important;
    letter-spacing: -0.05em !important;
    border: 0px !important;
    transition: all linear 0.3s;
    margin-top: 10px;
    cursor: pointer;
	font-weight: bold;
}

.nf-field input[type="submit"]:hover {
    color: rgba(255, 255, 255, 0.5) !important;
    border: 0px !important;
}

.nf-element {
    border-top: 0px !important;
    border-right: 0px !important;
    border-bottom: 1px solid #fff !important;
    border-left: 0px !important;
    font-size: 16px;
    font-weight: 300;
    font-family: 'Be Vietnam Pro', sans-serif;
    border-radius: 0px !important;
    padding: 10px 0px !important;
    background: transparent;
}

.nf-field input, .nf-field input::placeholder, .nf-field-element textarea {
    color: white !important;
}

.nf-field-container {
    margin-bottom: 15px !important;
}

.nf-error-msg {
    font-size: 12px;
    font-weight: 300;
    font-family: 'Be Vietnam Pro', sans-serif;
    color: pink !important;
}

.nf-field-element textarea {
    height: 360px !important;
    border: 1px solid #fff !important;
    padding: 10px 10px !important;
}

.ninjaFormContainer {
    float: left;
    margin: 10px 0 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.ninjaFormContainer h1 {
    color: white;
    font-size: 50px;
}

nf-fields-wrap div {
    clear: both;
}

.nfLeft {
    float: left;
    width: 48%;
    margin-right: 4%;
    clear: none !important;
}

.nfRight {
    float: right;
    width: 48%;
    clear: none !important;
}

.nf-field-element input:focus, .nf-field-element textarea:focus {
    outline: none !important;
    border-bottom: 4px solid #fff !important;
    border-radius: 0px !important;
}

.nf-field-element textarea:focus {
    border: 4px solid #fff !important;
}

.nf-field input[type="submit"]:focus {
    border: 0px !important;
}

.nf-response-msg {
    border: 0px !important;
}

/*--------------------------------------------------------------
9. Components
--------------------------------------------------------------*/
/* Isotope */
#filters {
    text-align: center;
}

#filters .uncategorised {
    display: none;
}

.filterButts {
    display: inline;
    margin: 0 10px;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.filterButts h5 {
    display: inline;
}

#iso-loop li {
    margin: 0 10px 20px !important;
    width: calc(25% - 40px) !important;
}

.iso-title {
    margin: 0 !important;
    padding: 0 5px !important;
    position: absolute !important;
    top: 48%;
    transform: translateY(-50%);
    font-size: 25px;
    width: 100%;
    color: #fff !important;
    transition: linear 0.3s;
    opacity: 0;
    letter-spacing: -0.02em !important;
    border: 0px !important;
    font-weight: 900;
}

.iso-thumb:hover .iso-title {
    opacity: 1;
}

.iso-thumb {
    text-align: center !important;
    background: #0e1b24 !important;
}

.isoIMG img {
    transition: linear 0.3s;
    -webkit-transition: linear 0.3s;
}

.iso-thumb:hover > .isoIMG img {
    opacity: 0.05 !important;
}

/* Draggable Images */
#draggableImages {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

.draggable-container {
    padding: 20px;
    width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s linear;
    cursor: move;
    background: white;
    position: absolute;
    display: inline-block;
    margin: 0px;
}

.draggable-image {
    width: 100%;
    height: auto;
}

/* Individual image positioning and rotation */
#imgDraggable1Container {
    top: 15%;
    left: 2vw;
    transform: rotate(-5deg);
    z-index: 3;
}

#imgDraggable2Container {
    top: 45%;
    left: 20vw;
    transform: rotate(3deg);
    z-index: 1;
}

#imgDraggable3Container {
    top: 65%;
    left: 50vw;
    transform: rotate(-2deg);
    z-index: 2;
}

#imgDraggable4Container {
    top: 25%;
    left: 35vw;
    transform: rotate(7deg);
    z-index: 2;
}

#imgDraggable5Container {
    top: 55%;
    left: 65vw;
    transform: rotate(-4deg);
    z-index: 1;
}

#imgDraggable6Container {
    top: 35%;
    left: 80vw;
    transform: rotate(6deg);
    z-index: 3;
}

#imgDraggable7Container {
    top: 75%;
    left: 30vw;
    transform: rotate(-8deg);
    z-index: 2;
}

#imgDraggable8Container {
    top: 20%;
    left: 60vw;
    transform: rotate(4deg);
    z-index: 1;
}

#imgDraggable9Container {
    top: 85%;
    left: 75vw;
    transform: rotate(-3deg);
    z-index: 2;
}

/* Hover effects */
.draggable-container:hover {
    transform: rotate(0deg) scale(1.1);
    width: 500px;
    margin-left: -60px;
    margin-top: -60px;
    z-index: 5;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.4);
}

/* Active dragging state */
.dragging .draggable-container {
    z-index: 1000;
}

/* Horizontal Scroll */
.background-layer {
    position: fixed;
    top: 45vh;
    left: 90vw;
    width: 2000px;
    height: 300px;
    background: url('/wp-content/uploads/2021/11/Design-House-Studio-Logo-1600.png') no-repeat top right;
    background-size: 100% auto;
    z-index: -1;
    background-color: transparent;
}

.mainContent {
    width: 70%;
    padding: 0 10px;
    margin: 0 auto;
    text-align: center;
}

.page-title {
    font-size: 36px;
    margin-bottom: 20px;
}

.page-content {
    font-size: 18px;
    margin-bottom: 40px;
}

.projects-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.project-row {
    margin-bottom: 50px;
    position: relative;
    width: 100%;
    float: left;
    height: 570px;
}

.title-wrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    top: 50px;
}

.project-title {
    font-size: 32px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.project-title::after {
    content: ".";
}

.project-image {
    width: 520px;
    height: 450px;
    background-size: cover;
    background-position: center;
    margin: 20px 0;
    position: absolute;
    top: 100px;
    opacity: 0.075;
}

.project-excerpt {
    padding: 30px 35px;
    position: absolute;
    top: 200px;
    width: 60%;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.95);
}

/* Positioning for odd and even rows */
.project-row.odd .project-image {
    left: 0;
}

.project-row.odd .project-excerpt {
    right: 0;
    left: auto;
}

.project-row.even .project-image {
    right: 0;
}

.project-row.even .project-excerpt {
    left: 0;
    right: auto;
}

/* ACF Homepage */
.featuredImageBanner {
    width: 100%;
    height: 520px;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}

.content-wrapper {
    position: relative;
    margin-top: -155px;
    background-color: transparent;
    z-index: 10;
}

@media screen and (max-width: 768px) {
    .page-template-page-homepage .wrap {
        padding: 0px 10px;
    }
}

.custom-headline {
    margin-bottom: 20px;
    margin-top: 25px; /* ADDED margin-top */
}

.custom-headline h2 {
    margin: 0;
    padding: 0;
}

.custom-headline h2 span {
    background: #0b1b25;
    color: white;
    display: inline-block;
    padding: 7px 16px;
    font-size: 30px;
    margin-bottom: 5px;
}

.main-content {
    margin: 80px 0 50px;
    padding-right: 20px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.contentColumns {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding-right: 20px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.contentColumn {
    flex: 1;
    min-width: 300px;
}

/* Visual Composer */
.wpb_single_image {
    margin-bottom: 0 !important;
}

.vc_row {
    margin-bottom: 10px;
}

.vc_column_container > .vc_column-inner {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Added for WPBakery layout adjustments (Temporary) */
.wpb-content-wrapper {
    padding: 0 10px !important;
}

.img250 {
    max-width: 250px;
    margin: 0 auto;
}

.img400 {
    max-width: 400px;
}

.titleSize1 {
    max-width: 200px;
}

.titleSize2 {
    max-width: 250px;
}

.titleSize3 {
    max-width: 300px;
}

/* Flexible Posts Widget */
.flexiblePostSquaresContainer {
    width: 100% !important;
    height: 100% !important;
    max-width: 1200px;
    margin: 50px auto 25px;
    padding: 0 15px;
}

.flexiblePostSquaresContainer .img400 {
    opacity: 0.25;
    transition: all linear 0.3s;
}

.flexiblePostSquaresContainer:hover > .img400 {
    opacity: 1;
}

.flexiblePostSquares {
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flexiblePostSquares .FPWproject,
.flexiblePostSquares .FPWservice {
    position: relative;
    flex: 0 0 calc(20% - 8px);
    margin: 0;
}

.FPWproject .FPWthumb {
    opacity: 1;
    transition: all linear 0.3s;
}

.FPWproject:hover .FPWthumb {
    opacity: 0.25;
}

.FPWproject .titleBlock {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.0);
    transition: all linear 0.3s;
}

.FPWproject:hover .titleBlock {
    opacity: 1;
    background: rgba(255, 255, 255, 0.7);
}

/* Titles for FPW */
.titleBlock h3 {
    font-size: 28px !important;
    text-align: center;
}

.titleBlock h3::after {
    content: ".";
}

/* Latest Project Styles */
.latestProjectContainer {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 15px;
}

/* NEW: Styles for two-column layout */
.latestProjectContent.latest-project-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsive */
    /* background-color: #f9f9f9; */ /* REMOVED: Optional: Light background for the section */
    /* Remove old fixed height and overflow */
    /* position: relative; /* Retained for potential absolute children if any, but review */
}

/* Remove old gradient overlay */
/* .latestProjectContent::after { display: none; } */ /* Commented out, will be removed by find/replace below */

.latestProject { /* Added margin-top */
    margin-top: 25px;
}

.latest-project-column {
    /* padding: 20px; */ /* REMOVED: Default padding for columns */
    box-sizing: border-box;
}

.latest-project-column-media {
    flex: 0 0 40%; /* Video/image column takes 40% */
    background-color: transparent; /* CHANGED: Black background for video, similar to single project */
    display: flex; /* To center content like video/image if smaller than container */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensure media stays within bounds */
}

.latest-project-column-media .project-video-container,
.latest-project-column-media .project-video {
    width: 100%; /* CHANGED from calc */
    height: 100%; /* CHANGED from calc */
    object-fit: cover;
}

/* Added to counteract internal white space in videos within this specific layout */
.latest-project-column-media .project-video-container {
    margin-left: -35px; /* Kept negative left margin */
    margin-top: -10px; /* Kept negative top margin */
    width: 100%; /* CHANGED from calc(100% + 35px) */
    height: 100%; /* CHANGED from calc(100% + 10px) */
}

.latest-project-column-media .latest-project-media-image-link,
.latest-project-column-media .latest-project-media-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make image cover the media column area */
}

.latest-project-column-content {
    flex: 0 0 60%; /* Content column takes 60% */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */ /* Or remove for top-alignment */
    color: #333; /* Default text color for content */
    position: relative; /* For absolute positioning of the more button if needed */
}

/* Styles for elements within the right column */
.latest-project-column-content .latestProjectTitle h2 {
    font-size: 32px;
    margin-bottom: 15px;
    color: #0b1b25;
}

.latest-project-column-content .latestProjectTitle h2::after {
    content: ".";
}

.latest-project-column-content .latestProjectExcerpt {
    font-size: 16px; /* Adjusted from 18px */
    line-height: 1.6;
    color: #555; /* Slightly lighter than title */
    margin-bottom: 20px;
    max-width: 100%; /* Remove previous max-width */
}

.latest-project-content-image-wrapper {
    margin-bottom: 20px;
    line-height: 0; /* Remove extra space below image */
}

.latest-project-content-image-wrapper .latest-project-content-image {
    width: 100%;
    height: auto;
    display: block;
}


/* Adjust .more-button positioning */
.latest-project-column-content .more-button {
    /* position: absolute; */ /* If making it absolute again */
    /* right: 20px; */
    /* bottom: 20px; */
    align-self: flex-start; /* Align to the start of the cross axis (left) */
    margin-top: auto; /* Push to the bottom if column has extra space */
    /* Keep existing size & icon styles, but adjust color if needed */
    color: #0b1b25; /* Button color for light background */
    background-color: #e0e0e0; /* Example background */
    border-radius: 50%;
    width: 50px; /* Adjust size as needed */
    height: 50px;
    display: inline-flex; /* keep this */
    align-items: center; /* keep this */
    justify-content: center; /* keep this */
}

.latest-project-column-content .more-button .more-icon {
    width: 30px; /* Adjust icon size */
    height: 30px;
    color: #0b1b25; /* Icon color */
}

.latest-project-column-content .more-button:hover {
    background-color: #ccc;
}


/* Responsive adjustments for latest project two-column layout */
@media screen and (max-width: 768px) {
    .latestProjectContent.latest-project-layout {
        flex-direction: column;
        /* min-height: 350px; */ /* REMOVED: Ensure minimum height on mobile */
        height: auto; /* ADDED: Allow height to adjust to content */
    }

    .latest-project-column-media {
        display: none; /* HIDE media column on smaller screens */
        /* flex-basis: auto; */ /* Reset flex-basis - not needed if display: none */
        /* width: 100%; */ /* Not needed if display: none */
    }
    
    .latest-project-column-content {
        flex-basis: 100%; /* Ensure content column takes full width */
        width: 100%;
        /* padding: 20px; */ /* REMOVED: Padding for content column on mobile */
    }

    .latest-project-column-content .latestProjectTitle h2 {
        font-size: 28px;
    }

    .latest-project-column-content .latestProjectExcerpt {
        font-size: 15px;
    }

    .latest-project-column-content .more-button {
        align-self: flex-end; /* Button to the right on mobile stacked view */
        margin-top: 20px; /* Add some space above button */
    }
}

/* Specific old styles to remove/override */
.latestProjectContent {
    /* Removed: height: 500px; */
    /* Removed: overflow: hidden; (now on media column) */
    /* Removed: position: relative; (moved to latest-project-layout if needed for ::after) */
}

.latestProjectImage { /* This class is no longer used as a primary link wrapper for media */
    /* display: none; */ /* Effectively removed */
}

.latestProjectThumb { /* This class was for the main image, replaced by .latest-project-media-image */
    /* display: none; */ /* Effectively removed */
}

.latestProjectImage:hover .latestProjectThumb {
    /* transform: scale(1.05); */ /* Remove this hover effect, new one can be added if needed */
}

/* Gradient overlay - ENSURE REMOVAL */
/* .latestProjectContent::after { display: none !important; } */ /* Will be handled by specific removal below */

.latestProjectInfo { /* This class is removed from PHP structure */
    /* display: none !important; */ /* Effectively removed from structure */
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* padding: 30px; */
    /* z-index: 2; */
    /* color: white; */ /* Text color will be handled by new column styles */
    /* display: flex; */
    /* flex-direction: column; */
    /* min-height: 200px; */
}

/* Remove old .more-button absolute positioning relative to .latestProjectInfo */
/* The new .more-button styles within .latest-project-column-content will take precedence */

/* Styles that were previously added for video and might need adjustment or removal */
/* .latestProjectMedia .project-video-container, */ /* Updated to .latest-project-column-media */
/* .latestProjectMedia .project-video { */ /* Updated to .latest-project-column-media */
    /* height: 100%; */ /* Retained */
    /* object-fit: cover; */ /* Retained */
/* } */

.latestProjectLink { /* This class from previous intermediate step is likely no longer used */
    /* display: none !important; */ /* Effectively removed */
}

/* .latestProjectMedia { */ /* This class from previous intermediate step is replaced by .latest-project-column-media */
    /* display: none !important; */ /* Effectively removed */
/* } */

/* MORE BUTTON - A STANDARDISED COMPONENT FOR THE ENTIRE SITE */
.more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 64px; /* Increased size */
    height: 64px; /* Increased size */
    border-radius: 50%; /* Circular button */
}

.more-icon {
    width: 48px; /* Increased icon size */
    height: 48px; /* Increased icon size */
    transition: all 0.3s ease;
    color: white; /* Ensure icon stays white */
}

.more-button:hover .more-icon {
    transform: rotate(90deg); /* Only rotation, no horizontal movement */
}

/* SVG icon states */
.more-icon .plus-icon {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.more-icon .arrow-icon {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.more-button:hover .plus-icon {
    opacity: 0;
}

.more-button:hover .arrow-icon {
    opacity: 1;
}

/* Responsive adjustments for latest project */
@media screen and (max-width: 768px) {
    .latestProjectContainer {
        padding: 0 15px;
    }
    
    .latestProjectContent {
        height: 400px;
    }
    
    .latestProjectTitle h2 {
        font-size: 28px;
    }
    
    .latestProjectExcerpt {
        font-size: 16px;
        max-width: 100%;
        margin-bottom: 40px; /* Increased margin to create space for the button */
    }
    
    .more-button {
        bottom: 20px; /* Adjusted position for mobile */
    }
}

/* Services Boxes */

.servicesPosts {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

/* Default 4-column layout for the services page */
.servicesGrid .servicesPosts {
    grid-template-columns: repeat(4, 1fr);
}

/* 3-column layout for the single service post related items */
.flexiblePostSquaresContainer .servicesPosts {
    grid-template-columns: repeat(3, 1fr);
}

.servicePost {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.servicePost a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    background-size: cover;
    background-position: center;
}

.servicePost h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 1;
    width: 90%;
    margin: 0;
    padding: 1rem;
}

/* Add an overlay to make text more readable */
.servicePost a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
}

/* Hover effect */
.servicePost a:hover::after {
    background: rgba(0, 0, 0, 0.6);
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .servicesGrid .servicesPosts,
    .flexiblePostSquaresContainer .servicesPosts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .servicesGrid .servicesPosts,
    .flexiblePostSquaresContainer .servicesPosts {
        grid-template-columns: 1fr;
        gap: 1rem;
        width: 100%;
    }
    
    .servicePost {
        width: 100%;
        margin: 0;
    }
}






/* Accordion */
.vc_tta-panel-title > a {
    color: #000 !important;
    font-weight: 600;
    letter-spacing: -0.05em !important;
}

.vc_tta-panel-title > a:hover {
    color: #000 !important;
}

.vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-heading {
    background-color: white !important;
}

.vc_tta.vc_general .vc_tta-panel-title > a,
.vc_tta.vc_general .vc_tta-panel-body {
    padding: 5px 0px !important;
}

.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-body {
    margin-bottom: 20px !important;
}

.vc_tta.vc_tta-style-modern .vc_tta-panel-body,
.vc_tta.vc_tta-style-modern .vc_tta-panel-heading {
    border-width: 0px !important;
}

/*--------------------------------------------------------------
10. Footer
--------------------------------------------------------------*/
#colophon {
    background: #0b1b25;
    margin-top: 50px !important;
    padding-top: 35px;
}

.footer-menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.footer-content {
    border-top: 0px solid #ccc;
    padding: 20px 0;
    float: left;
    width: 100%;
}

.copyright {
    float: left;
    text-align: left;
}

.middleLink {
    float: none;
    text-align: center;
}

.website-by {
    float: right;
    text-align: right;
}

.site-info {
    padding-top: 20px;
    border-top: 1px solid #ccc;
    margin: 30px 0px 20px;
	width: 100%;
	display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.site-info a {
    color: #ccc !important;
    font-size: 12px !important;
}

.footer-content h2 {
    display: none;
}

.footer-content ul {
    list-style: none;
    margin: 0 0 0em 0em !important;
    padding: 0;
}

.footer-content .menu-item a {
    padding: 0px 0px;
}

.footer-content,
.footer-content a,
.footer-content li {
    font-size: 15px !important;
    color: white;
}

.footer-content a:hover {
    color: pink;
}

.fiveCol {
    width: 20%;
}

.fiveCol2 {
    width: 40%;
}

.fiveCol,
.fiveCol2 {
    float: left;
    padding-right: 40px;
}

/*--------------------------------------------------------------
11. Media Queries
--------------------------------------------------------------*/
@media screen and (max-width: 1190px) {
    .fiveCol,
    .fiveCol2 {
        margin-bottom: 30px;
    }
    .fiveCol {
        width: 33.33%;
    }
    .fiveCol2 {
        width: 100%;
    }
}

@media screen and (max-width: 1050px) {
    .site-branding {
        width: 375px;
    }
    #mobile-icon,
    #mobile-icon.open {
        width: 100px !important;
        height: 30px;
    }
}

@media screen and (max-width: 999px) {
    .content-wrapper {
        margin-top: -50px;
    }
    .main-content {
        margin: 50px 0 30px;
        padding-right: 0px;
    }
    .featuredImageBanner {
        height: 90vw;
    }
    .contentColumns {
        gap: 0px;
        padding-right: 0px;
    }
    .contentColumn {
        flex-basis: 100%;
    }
    .custom-headline {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    .projects-container {
        padding: 10px;
    }
    .project-row {
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
        height: 200px;
    }
    .title-wrapper {
        top: 60px;
    }
    .project-title,
    .project-excerpt {
        padding: 10px 20px;
    }
    .project-title {
        font-size: 32px;
        margin-bottom: -50px;
    }
    .project-image {
        width: 50%;
        height: 200px;
    }
    .project-excerpt {
        display: none;
    }
}

@media screen and (max-width: 950px) {
    .copyright,
    .website-by,
    .middleLink {
        width: 100%;
        float: none;
        text-align: center;
    }
    .copyright {
        margin-bottom: 10px;
    }
    .site-info {
        margin-top: 0px;
    }
}

@media screen and (max-width: 797px) {
    #mobile-navigation {
        display: block;
    }
    #desktop-navigation {
        display: none;
    }
    .threeCol {
        width: 100%;
        margin: 0px 0px 30px;
    }
}

@media screen and (max-width: 768px) {
    .content-wrapper {
        margin-top: 0px;
    }
    .flexiblePostSquaresContainer {
        padding: 0 10px;
    }
    .fun-stuff-container {
        padding: 0 10px;
    }
    .fun-stuff-bubbles-playpen {
        width: 100%;
        margin: 0 auto;
        min-height: 850px;
        height: auto;
    }
    
    .bubble {
        transform: scale(0.7);
    }
    
    .bubble:hover {
        transform: scale(0.7);
    }
    
    .bubble-title {
        opacity: 1;
        transform: translateY(0);
    }
    
    .bubble-title h3 {
        font-size: 1.2rem;
    }

    .latestProjectContainer {
        padding: 0 15px;
    }
    
    .latestProjectContent {
        height: 400px;
    }
    
    .latestProjectTitle h2 {
        font-size: 28px;
    }
    
    .latestProjectExcerpt {
        font-size: 16px;
        max-width: 100%;
        margin-bottom: 40px;
    }
    
    .more-button {
        bottom: 20px;
    }

    .latestProjectContent.latest-project-layout {
        flex-direction: column;
        min-height: 350px; /* ADDED: Ensure minimum height on mobile */
    }

    .latest-project-column-media {
        display: none;
    }
    
    .latest-project-column-content {
        flex-basis: 100%;
        width: 100%;
        padding: 0px;
    }

    .latest-project-column-content .latestProjectTitle h2 {
        font-size: 28px;
    }

    .latest-project-column-content .latestProjectExcerpt {
        font-size: 15px;
    }

    .latest-project-column-content .more-button {
        align-self: flex-end;
        margin-top: 20px;
    }

    .draggable-container {
        width: 300px;
    }
    
    .draggable-container:hover {
        width: 350px;
    }

    .triangle-grid {
        transform: scale(0.6);
    }
    
    .triangle-title {
        font-size: 16px;
    }

    .locations-grid {
        flex-direction: column;
        gap: 20px;
    }

    .location-item {
        width: 100%;
    }
    
    .locations-title {
        font-size: 50px;
    }

    .content-layout {
        flex-direction: column;
        gap: 20px;
    }

    .left-column,
    .right-column {
        width: 100%;
    }

    .right-column .column-content {
        padding-right: 0;
    }

    .FPWproject .titleBlock {
        opacity: 1;
        background: rgba(255, 255, 255, 0.7);
    }
    
    .FPWproject:hover .titleBlock {
        opacity: 1;
    }
    
    .titleBlock h3 {
        font-size: 24px !important;
    }

    .page-template-page-home-featured-project .main-content.fade-in {
        width: 100%;
        margin: 0;
        padding: 15px;
    }
}

@media screen and (max-width: 750px) {
    .flexiblePostSquares .FPWproject,
    .flexiblePostSquares .FPWservice {
        flex: 0 0 calc(50% - 5px);
        margin-bottom: 5px;
    }
    .nfLeft,
    .nfRight {
        width: 100%;
        margin-right: 0%;
    }
    .ninjaFormContainer h1 {
        font-size: 33px;
    }
}

@media screen and (max-width: 700px) {
    .wpb_single_image {
        margin-bottom: 10px !important;
    }
}

@media screen and (max-width: 650px) {
    .fiveCol,
    .fiveCol2 {
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    .site-branding {
        margin: 0;
        max-width: calc(100% - 70px);
    }
    #mobile-icon,
    #mobile-icon.open {
        margin: 0;
        width: 50px;
        height: 50px;
    }
}

@media screen and (max-width: 500px) {
    .img400 {
        width: 200px;
    }
}




/* Triangle Grid Layout */
.triangle-grid-container {
    max-width: 1400px;
    margin: 50px auto;
    padding: 0 30px;
    overflow: hidden;
}

.triangle-grid {
    width: 100%;
    height: auto;
    display: block;
}

.triangle-link {
    cursor: pointer;
}

.triangle {
    transition: all 0.3s ease;
    filter: brightness(1);
}

.triangle-link:hover .triangle {
    filter: brightness(0.7);
    transform: scale(1.02);
    transform-origin: center;
}

.title-group {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.title-background {
    fill: rgba(11, 27, 37, 0.9);
}

.triangle-title {
    fill: white;
    font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif;
    font-size: 18px;
    dominant-baseline: middle;
}

.triangle-link:hover .title-group {
    opacity: 1;
}

/* Media Queries for Triangle Grid */
@media screen and (max-width: 1024px) {
    .triangle-grid {
        transform: scale(0.8);
        transform-origin: center top;
    }
    
    .triangle-grid-container {
        padding: 0 15px;
    }
}

@media screen and (max-width: 768px) {
    .triangle-grid {
        transform: scale(0.6);
    }
    
    .triangle-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .triangle-grid {
        transform: scale(0.4);
    }
    
    .triangle-title {
        font-size: 14px;
    }
}

/* Animation Classes */




/* Animation Classes */
.hidden {
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 1;
}

/* Square Grid Layout System */
.square-grid-layout {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    gap: 30px;
    margin: 30px 0;
}

.square-grid-item {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.square-grid-item::before {
    content: "";
    display: block;
    padding-top: 100%; /* This creates the square ratio */
}

.square-half {
    width: calc(50% - 15px); /* Account for the gap */
    min-height: unset; /* Remove fixed height to allow for square ratio */
}

/* Specific to locations template but using square grid system */
.locations-header {
    margin-bottom: 50px;
}

.locations-header .featured-image,
.locations-header .acf-image {
    transition: all 0.3s ease;
}

.locations-header .featured-image:hover,
.locations-header .acf-image:hover {
    opacity: 0.9;
}

/* Locations Template Specific Overrides */
.page-template-page-locations .wrap {
    padding: 0px 30px;
}

.page-template-page-locations #content {
    margin-top: 0px;
}

/* Locations Footer */
.locations-footer {
    margin: 50px 0;
}

.locations-footer img {
    opacity: 0.25;
    transition: all linear 0.3s;
    margin-bottom: 30px;
}

.locations-footer:hover img {
    opacity: 1;
}

.locations-title {
    font-size: 70px;
    margin: 0 0 30px;
    font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif;
    color: #0b1b25;
}

.locations-grid {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.location-item {
    width: calc(50% - 15px);
    position: relative;
}

.location-item a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.location-image {
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio */
    background-size: cover;
    background-position: center;
    position: relative;
    transition: all 0.3s ease;
}

.location-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.location-overlay h3 {
    color: #0b1b25;
    margin: 0;
    font-size: 28px;
    text-align: center;
    padding: 0 20px;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.location-item:hover .location-overlay {
    opacity: 1;
}

.location-item:hover .location-overlay h3 {
    transform: translateY(0);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .locations-grid {
        flex-direction: column;
        gap: 20px;
    }

    .location-item {
        width: 100%;
    }
    
    .locations-title {
        font-size: 50px;
    }
}

.page-template-page-locations .flexiblePostSquaresContainer {
    padding: 0px 0px;
}


/* Content Layout System */
.content-layout {
    display: flex;
    gap: 30px;
    margin: 30px 0;
}

.left-column,
.right-column {
    width: calc(50% - 15px);
}

.right-column .column-content {
    margin-top: 30px;
    padding-right: 30px;
}

/* Maintain square ratio for images */
.left-column .square-grid-item,
.right-column .square-grid-item {
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.left-column .square-grid-item::before,
.right-column .square-grid-item::before {
    content: "";
    display: block;
    padding-top: 100%;
}

/* Responsive Layout */
@media screen and (max-width: 768px) {
    .content-layout {
        flex-direction: column;
        gap: 20px;
    }

    .left-column,
    .right-column {
        width: 100%;
    }

    .right-column .column-content {
        padding-right: 0;
    }
}

/* Footer Content */
.footer-content h2 {
    display: none;
}

.footer-content ul {
    list-style: none;
    margin: 0 0 0em 0em !important;
    padding: 0;
}

.footer-content .menu-item a {
    padding: 0px 0px;
}

.footer-content,
.footer-content a,
.footer-content li {
    font-size: 15px !important;
    color: white;
}

.footer-content a:hover {
    color: pink;
}

/* Footer Addresses */
.footer-address {
    color: white;
    font-size: 15px !important;
    line-height: 1.6;
}

.footer-address p {
    margin: 0 0 1em;
    color: white;
    font-size: 15px !important;
}

/* Footer Location Buttons */
.footer-location-btn {
    display: inline-block;
    color: white !important;
    font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif;
    font-size: 18px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 10px;
    padding: 8px 20px;
    border: 1px solid white;
    border-radius: 50px;
    opacity: 0.7;
    background-color: transparent;
}

.footer-location-btn:hover {
    opacity: 1;
    color: #0b1b25 !important;
    border-color: white;
    background-color: white;
}

/* Location Address Box */
.location-address-box {
    margin-top: 30px;
}

.location-address-box p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Responsive Layout */

/* Responsive adjustments for draggable images */
@media screen and (max-width: 768px) {
    .draggable-container {
        width: 300px;
    }
    
    .draggable-container:hover {
        width: 350px;
    }
}

@media screen and (max-width: 480px) {
    .draggable-container {
        width: 250px;
    }
    
    .draggable-container:hover {
        width: 300px;
    }
}

/* ==========================================================================
   Fun Stuff Bubbles Section
   ========================================================================== */
.fun-stuff-bubbles-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fun-stuff-bubbles-playpen {
    position: relative;
    width: 100%;
    min-height: 850px;
    height: 80vh;
    border: 5px dashed #0b1b25;
    border-radius: 0px;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
}

.fun-stuff-excerpt {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 0;
    width: auto;
    height: 100%;
  }

.fun-stuff-excerpt h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

#bubblesCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bubble-content {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: translateX(-50%);
    width: auto;
    min-width: 150px;
}

.bubble-content.active {
    opacity: 1;
}

.bubble-content h3 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

/* Fun Stuff Section on Homepage */
.fun-stuff-section {
    padding: 60px 0;
    background-color: transparent;
    margin-top: 40px;
}

/* Container for Fun Stuff section */
.fun-stuff-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Homepage - Web Development Platforms row (Shopify & WordPress) */
.homepage-services-row {
    margin: 80px 0 70px;
}

.homepage-services-heading {
    margin-bottom: 20px;
}

.homepage-services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.homepage-service-card {
    flex: 1 1 260px;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 50px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.homepage-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
}

.homepage-service-logo {
    margin-bottom: 16px;
}

.homepage-service-logo .shopify-intro-logo {
    max-width: 220px;
    opacity: 0.95;
}

.homepage-service-title {
    margin: 0 0 8px;
}

.homepage-service-excerpt {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

.homepage-service-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid #0b1b25;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 8px;
    background-color: #0b1b25;
    color: #fff;
    gap: 8px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.homepage-service-card:hover .homepage-service-cta {
    background-color: #fff;
    color: #0b1b25;
    border-color: #0b1b25;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.homepage-service-cta .more-icon {
    width: 20px;
    height: 20px;
    color: currentColor; /* keep icon visible as text colour changes */
    transition: color 0.25s ease, transform 0.3s ease;
}

/* Animate plus → arrow on card hover, matching Featured Project behaviour */
.homepage-service-card:hover .homepage-service-cta .more-icon {
    transform: rotate(90deg);
}

.homepage-service-card:hover .homepage-service-cta .plus-icon {
    opacity: 0;
}

.homepage-service-card:hover .homepage-service-cta .arrow-icon {
    opacity: 1;
}

@media (max-width: 768px) {
    .homepage-services-row {
        margin: 60px 0 50px;
    }
    .homepage-services-heading {
        font-size: 40px;
    }
    .homepage-services-grid {
        flex-direction: column;
    }
}

/* Mobile adjustments for fun stuff bubbles */
@media (max-width: 768px) {
    .fun-stuff-bubbles-playpen {
        width: 100%;
        margin: 0 auto;
        min-height: 850px;
        height: auto;
    }
    
    .fun-stuff-container {
        padding: 0 10px;
    }
    
    /* Adjust bubble size and behavior on mobile */
    .bubble {
        transform: scale(0.7);
    }
    
    .bubble:hover {
        transform: scale(0.7);
    }
    
    /* Make bubble titles always visible on mobile */
    .bubble-title {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Reduce title size on mobile */
    .bubble-title h3 {
        font-size: 1.2rem;
    }
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .FPWproject .titleBlock {
        opacity: 1;
        background: rgba(255, 255, 255, 0.7);
    }
    
    .FPWproject:hover .titleBlock {
        opacity: 1;
    }
    
    .titleBlock h3 {
        font-size: 24px !important;
    }
}

/* Home Featured Project Template Styles */
.page-template-page-home-featured-project .content-wrapper {
    margin-top: 0;
}

.page-template-page-home-featured-project .main-content.fade-in {
    background: rgba(11, 27, 37, 0.7);
    width: 69%;
    margin: -200px 30px 600px;
    position: relative;
    padding: 25px;
    z-index: 2;
    color: white;
}

/* Make all text elements within main-content.fade-in white */
.page-template-page-home-featured-project .main-content.fade-in h1,
.page-template-page-home-featured-project .main-content.fade-in h2,
.page-template-page-home-featured-project .main-content.fade-in h3,
.page-template-page-home-featured-project .main-content.fade-in h4,
.page-template-page-home-featured-project .main-content.fade-in h5,
.page-template-page-home-featured-project .main-content.fade-in h6,
.page-template-page-home-featured-project .main-content.fade-in p,
.page-template-page-home-featured-project .main-content.fade-in li,
.page-template-page-home-featured-project .main-content.fade-in a,
.page-template-page-home-featured-project .main-content.fade-in span {
    color: white;
}

/* Small screen adjustments for main content */
@media screen and (max-width: 768px) {
    .page-template-page-home-featured-project .main-content.fade-in {
        width: 100%;
        margin: 0;
        padding: 15px;
    }
}

/* Project Video Styles */
.project-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #fff; /* Consider if this background is needed for the homepage context */
}

.project-video {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure latestProjectMedia fills its container if it's a video */
.latestProjectMedia .project-video-container,
.latestProjectMedia .project-video {
    height: 100%; /* Adjust as needed for aspect ratio */
    object-fit: cover; /* Ensures video covers the area, might crop */
}

.latestProjectLink {
    display: block; /* Make the link a block to contain floated/flex children properly */
    text-decoration: none;
    color: inherit;
}

.latestProjectMedia {
    /* Add any specific styling for the media container if needed */
    /* For example, to maintain aspect ratio or set a max height */
    /* max-height: 500px; */ /* Example */
    overflow: hidden; /* Good practice if using object-fit */
}

/* Standard Page Layouts (2025+) */
/*--------------------------------------------------------------*/
.standard-layout-2025 .full-width-featured-banner {
    width: 100%;
    margin-bottom: 30px; /* Space between banner and content below */
    line-height: 0; /* Remove extra space if image is inline-block */
}

.standard-layout-2025 .full-width-featured-banner img {
    width: 100%;
    height: auto;
    display: block; /* Remove any default image spacing */
    object-fit: cover; /* Ensures image covers the area, could be set to a specific height too */
    max-height: 450px; /* Optional: constrain banner height */
}

.standard-layout-2025 .wrap {
    /* The global .wrap (max-width: 1200px; margin: 0 auto; padding: 0 15px;) will apply here */
    /* REMOVED display: flex; */
    /* REMOVED justify-content: flex-end; */
}

/* Clearfix for the .wrap if its direct child .content-column-right is floated */
.standard-layout-2025 .wrap::after {
    content: "";
    clear: both;
    display: table;
}

.standard-layout-2025 .content-column-right {
    width: 50%;
    box-sizing: border-box;
    padding: 20px; /* Inner padding for the content */
    /* background-color: #f9f9f9; */ /* REMOVED: Optional: slight background for content area */
    float: right; /* Align to the right */
}

/* Responsive adjustments for Standard Page Layouts (2025+) */
@media screen and (max-width: 768px) {
    .standard-layout-2025 .wrap {
        /* REMOVED justify-content: center; from previous flex attempt */
    }

    .standard-layout-2025 .content-column-right {
        width: 100%; /* Content column takes full width on smaller screens */
        float: none; /* Disable float on smaller screens */
        margin-left: 0; /* Ensure no leftover margin if margin-left: 50% was used previously */
        padding: 15px;
    }

    .standard-layout-2025 .full-width-featured-banner img {
        max-height: 300px; /* Adjust banner height for mobile if needed */
    }
}

/*--------------------------------------------------------------
Shopify Services (CPT)
  - Single template structure
  - Section blocks
  - Supporting images grid (3x2)
  - Responsive adjustments
--------------------------------------------------------------*/

/* Stage navigation (timeline) */
.single-shopify_service .shopify-stages-nav,
.single-wordpress_service .shopify-stages-nav,
.page-template-page-shopify-build .shopify-stages-nav,
.process-build .shopify-stages-nav {
    margin: 10px 0 25px;
}

.single-shopify_service .shopify-stages-nav .stages,
.single-wordpress_service .shopify-stages-nav .stages,
.page-template-page-shopify-build .shopify-stages-nav .stages,
.process-build .shopify-stages-nav .stages {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.single-shopify_service .shopify-stages-nav .stage a,
.single-wordpress_service .shopify-stages-nav .stage a,
.page-template-page-shopify-build .shopify-stages-nav .stage a,
.process-build .shopify-stages-nav .stage a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.single-shopify_service .shopify-stages-nav .stage-connector,
.single-wordpress_service .shopify-stages-nav .stage-connector,
.page-template-page-shopify-build .shopify-stages-nav .stage-connector,
.process-build .shopify-stages-nav .stage-connector {
    width: 60px;
    height: 2px;
    background: #0b1b25;
    opacity: 0.25;
}

.single-shopify_service .shopify-stages-nav .stage .stage-circle,
.single-wordpress_service .shopify-stages-nav .stage .stage-circle,
.page-template-page-shopify-build .shopify-stages-nav .stage .stage-circle,
.process-build .shopify-stages-nav .stage .stage-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #0b1b25;
    color: #0b1b25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: #fff;
}

.single-shopify_service .shopify-stages-nav .stage.active .stage-circle,
.single-wordpress_service .shopify-stages-nav .stage.active .stage-circle,
.page-template-page-shopify-build .shopify-stages-nav .stage.active .stage-circle,
.process-build .shopify-stages-nav .stage.active .stage-circle {
    background: #0b1b25;
    color: #fff;
}

.single-shopify_service .shopify-stages-nav .stage.is-missing .stage-circle,
.single-wordpress_service .shopify-stages-nav .stage.is-missing .stage-circle,
.page-template-page-shopify-build .shopify-stages-nav .stage.is-missing .stage-circle,
.process-build .shopify-stages-nav .stage.is-missing .stage-circle {
    border-style: dashed;
    opacity: 0.5;
}

.single-shopify_service .shopify-stages-nav .stage .stage-label,
.single-wordpress_service .shopify-stages-nav .stage .stage-label,
.page-template-page-shopify-build .shopify-stages-nav .stage .stage-label,
.process-build .shopify-stages-nav .stage .stage-label {
    font-size: 14px;
}

@media (max-width: 768px) {
    .single-shopify_service .shopify-stages-nav .stage .stage-circle,
    .single-wordpress_service .shopify-stages-nav .stage .stage-circle,
    .page-template-page-shopify-build .shopify-stages-nav .stage .stage-circle,
    .process-build .shopify-stages-nav .stage .stage-circle {
        width: 32px;
        height: 32px;
    }
    .single-shopify_service .shopify-stages-nav .stage-connector,
    .single-wordpress_service .shopify-stages-nav .stage-connector,
    .page-template-page-shopify-build .shopify-stages-nav .stage-connector,
    .process-build .shopify-stages-nav .stage-connector {
        width: 40px;
    }
    .single-shopify_service .shopify-stages-nav .stage .stage-label,
    .single-wordpress_service .shopify-stages-nav .stage .stage-label,
    .page-template-page-shopify-build .shopify-stages-nav .stage .stage-label,
    .process-build .shopify-stages-nav .stage .stage-label {
        font-size: 13px;
    }
}

/* Optional loading state */
.shopify-build #shopify-stage-content.loading,
.process-build #shopify-stage-content.loading { opacity: 0.6; transition: opacity 0.2s ease; }
/* Smooth content fade for AJAX swaps */
.shopify-build #shopify-stage-content,
.process-build #shopify-stage-content { opacity: 1; transition: opacity 250ms ease; }
.shopify-build #shopify-stage-content.fade-out,
.process-build #shopify-stage-content.fade-out { opacity: 0; }

/* Stage nav hover/focus effects */
.single-shopify_service .shopify-stages-nav .stage .stage-circle,
.single-wordpress_service .shopify-stages-nav .stage .stage-circle,
.page-template-page-shopify-build .shopify-stages-nav .stage .stage-circle,
.process-build .shopify-stages-nav .stage .stage-circle,
.single-shopify_service .shopify-stages-nav .stage .stage-label,
.single-wordpress_service .shopify-stages-nav .stage .stage-label,
.page-template-page-shopify-build .shopify-stages-nav .stage .stage-label,
.process-build .shopify-stages-nav .stage .stage-label {
    transition: all 0.2s ease;
}

/* Draggable featured image for Shopify Service */

/* Two-column layout for Shopify Service */
.shopify-two-col {
    display: flex;
    gap: 40px;
}
.shopify-two-col .shopify-column-left { flex: 1 1 60%; }
.shopify-two-col .shopify-column-right { flex: 1 1 40%; position: relative; }

/* Draggable photo cards in right column (featured + supporting) */
.single-shopify_service .draggable-photo-card,
.single-wordpress_service .draggable-photo-card,
.page-template-page-shopify-build .draggable-photo-card,
.process-build .draggable-photo-card {
    position: relative;
    width: 100%;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    line-height: 0;
    cursor: grab;
    padding: 0;
}
.single-shopify_service .draggable-photo-card img,
.single-wordpress_service .draggable-photo-card img,
.page-template-page-shopify-build .draggable-photo-card img,
.process-build .draggable-photo-card img {
    display: block;
    width: 100%;
    height: auto;
}
.single-shopify_service .draggable-photo-card:active,
.single-wordpress_service .draggable-photo-card:active,
.page-template-page-shopify-build .draggable-photo-card:active,
.process-build .draggable-photo-card:active { cursor: grabbing; }

@media (max-width: 1024px) {
    .single-shopify_service .draggable-featured-container,
    .page-template-page-shopify-build .draggable-featured-container {
        width: 300px;
        top: 18vh;
        right: 3vw;
    }
}

@media (max-width: 768px) {
    .single-shopify_service .draggable-featured-container,
    .page-template-page-shopify-build .draggable-featured-container {
        display: none; /* keep mobile clean */
    }
}

.single-shopify_service .shopify-stages-nav .stage a:hover .stage-circle,
.single-wordpress_service .shopify-stages-nav .stage a:hover .stage-circle,
.page-template-page-shopify-build .shopify-stages-nav .stage a:hover .stage-circle,
.single-shopify_service .shopify-stages-nav .stage a:focus .stage-circle,
.single-wordpress_service .shopify-stages-nav .stage a:focus .stage-circle,
.page-template-page-shopify-build .shopify-stages-nav .stage a:focus .stage-circle {
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.single-shopify_service .shopify-stages-nav .stage a:hover .stage-label,
.single-wordpress_service .shopify-stages-nav .stage a:hover .stage-label,
.page-template-page-shopify-build .shopify-stages-nav .stage a:hover .stage-label,
.single-shopify_service .shopify-stages-nav .stage a:focus .stage-label,
.single-wordpress_service .shopify-stages-nav .stage a:focus .stage-label,
.page-template-page-shopify-build .shopify-stages-nav .stage a:focus .stage-label {
    opacity: 0.85;
}

/* Limit styles to Shopify & WordPress Services single templates */
.single-shopify_service .entry-title,
.single-wordpress_service .entry-title {
    margin: 10px 0 15px;
}

.single-shopify_service .entry-featured-image,
.single-wordpress_service .entry-featured-image {
    margin: 20px 0 30px;
    line-height: 0;
}

.single-shopify_service .entry-featured-image img,
.single-wordpress_service .entry-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.single-shopify_service .entry-content,
.single-wordpress_service .entry-content {
    margin-bottom: 30px;
}

/* Section blocks below the intro */
.single-shopify_service .shopify-service-section,
.single-wordpress_service .shopify-service-section {
    margin: 40px 0;
}

.single-shopify_service .shopify-service-section h2,
.single-wordpress_service .shopify-service-section h2 {
    margin: 0 0 15px;
}

.single-shopify_service .shopify-service-section .section-content > *:first-child,
.single-wordpress_service .shopify-service-section .section-content > *:first-child {
    margin-top: 0;
}

.single-shopify_service .shopify-service-section .section-content > *:last-child,
.single-wordpress_service .shopify-service-section .section-content > *:last-child {
    margin-bottom: 0;
}

/* Supporting images grid (3 x 2) */
.single-shopify_service .supporting-images-container,
.single-wordpress_service .supporting-images-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0 10px;
}

.single-shopify_service .supporting-image-item,
.single-wordpress_service .supporting-image-item {
    overflow: hidden;
}

.single-shopify_service .shopify-service-supporting-img,
.single-wordpress_service .shopify-service-supporting-img,
.process-build .shopify-service-supporting-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .single-shopify_service .supporting-images-container,
    .single-wordpress_service .supporting-images-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .single-shopify_service .supporting-images-container,
    .single-wordpress_service .supporting-images-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .single-shopify_service .shopify-service-section,
    .single-wordpress_service .shopify-service-section {
        margin: 30px 0;
    }
}

/* Costs grid (appears on Shopify Build page template) */
.page-template-page-shopify-build .shopify-costs,
.process-build .process-costs {
    margin: 40px 0 10px;
}
.page-template-page-shopify-build .full-width-featured-banner,
.process-build .full-width-featured-banner {
    width: 100%;
    margin-bottom: 30px;
    line-height: 0;
    position: relative;
    overflow: hidden;
}
.page-template-page-shopify-build .full-width-featured-banner img,
.process-build .full-width-featured-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 450px;
}
.page-template-page-shopify-build .full-width-featured-banner::after,
.process-build .full-width-featured-banner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(11, 27, 37, 0.55); /* #0b1b25 at ~55% */
    pointer-events: none;
    z-index: 1;
}
.page-template-page-shopify-build .shopify-build-intro,
.process-build .process-intro {
    margin: 20px 0 30px;
}
.page-template-page-shopify-build .shopify-build-intro .intro-columns,
.process-build .process-intro .intro-columns {
    display: flex;
    gap: 30px;
    align-items: center;
}
.page-template-page-shopify-build .shopify-build-intro .intro-col,
.process-build .process-intro .intro-col {
    box-sizing: border-box;
}
.page-template-page-shopify-build .shopify-build-intro .intro-col-left,
.process-build .process-intro .intro-col-left {
    flex: 0 0 60%;
}
.page-template-page-shopify-build .shopify-build-intro .intro-col-right,
.process-build .process-intro .intro-col-right {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-template-page-shopify-build .shopify-build-intro .shopify-intro-logo,
.process-build .process-intro .shopify-intro-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
    opacity: 0.9;
}
@media (max-width: 768px) {
    .page-template-page-shopify-build .shopify-build-intro .intro-columns,
    .process-build .process-intro .intro-columns {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    .page-template-page-shopify-build .shopify-build-intro .intro-col-left,
    .page-template-page-shopify-build .shopify-build-intro .intro-col-right,
    .process-build .process-intro .intro-col-left,
    .process-build .process-intro .intro-col-right {
        flex: 0 0 100%;
        width: 100%;
    }
    .page-template-page-shopify-build .shopify-build-intro .intro-col-right,
    .process-build .process-intro .intro-col-right {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .page-template-page-shopify-build .shopify-build-intro .shopify-intro-logo,
    .process-build .process-intro .shopify-intro-logo {
        max-width: 200px;
    }
}
.page-template-page-shopify-build .shopify-build-headline,
.process-build .process-headline {
    position: relative;
    margin-top: -155px;
    z-index: 2;
    width: 50%;
}
.page-template-page-shopify-build .shopify-build-headline h1,
.process-build .process-headline h1 {
    margin: 0;
    padding: 0;
    font-size: 48px; /* slightly reduced from global 60px */
}
.page-template-page-shopify-build .shopify-build-headline h1::after,
.process-build .process-headline h1::after {
    content: "";
    display: block;
    clear: both; /* clearfix for floated word chips */
}
.page-template-page-shopify-build .shopify-build-headline .title-word,
.process-build .process-headline .title-word {
    background: #0b1b25;
    color: #fff;
    display: block;
    float: left;
    padding: 10px 18px 15px;
    margin: 0 10px 10px 0;
    line-height: 1.0;
}
@media screen and (max-width: 999px) {
    .page-template-page-shopify-build .shopify-build-headline,
    .process-build .process-headline {
        display: block;
        width: 100%;
        margin-top: 10px; /* remove desktop overlap on small screens */
    }
}
.page-template-page-shopify-build .shopify-costs-grid,
.process-build .process-costs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.page-template-page-shopify-build .shopify-cost-card,
.process-build .process-cost-card {
    background: #0b1b25;
    border: 0;
    padding: 20px 22px;
    padding-bottom: 70px; /* space for budget badge overlap */
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* anchor budget badge */
}
.page-template-page-shopify-build .shopify-cost-card:hover,
.process-build .process-cost-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.page-template-page-shopify-build .shopify-cost-title,
.process-build .process-cost-title {
    margin: 0 0 10px;
    font-size: 32px;
}
.page-template-page-shopify-build .shopify-cost-title a,
.process-build .process-cost-title a {
    color: #fff;
    text-decoration: none;
}
.page-template-page-shopify-build .shopify-cost-title a:hover,
.process-build .process-cost-title a:hover {
    opacity: 0.85;
}
.page-template-page-shopify-build .process-cost-title,
.process-build .process-cost-title {
    color: #fff;
    font-family: 'Helvetica Black', 'Be Vietnam Pro', sans-serif;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin: 0 0 15px;
    border-bottom: 1px solid;
    padding-bottom: 17px;
}
.page-template-page-shopify-build .process-cost-budget,
.process-build .process-cost-budget {
    position: absolute;
    bottom: 0;
    right: 22px;
    background: #fff;
    color: #0b1b25;
    font-weight: 300;
    border-radius: 9999px; /* pill / circle */
    padding: 10px 16px;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    white-space: nowrap;
}
.page-template-page-shopify-build .process-cost-headline,
.process-build .process-cost-headline {
    margin: 4px 0 10px;
    color: #fff;
    font-weight: 600;
}
.page-template-page-shopify-build .process-cost-content,
.process-build .process-cost-content {
    color: #fff;
}
.page-template-page-shopify-build .process-cost-content p,
.page-template-page-shopify-build .process-cost-content li,
.page-template-page-shopify-build .process-cost-content a,
.page-template-page-shopify-build .process-cost-content h3,
.page-template-page-shopify-build .process-cost-content h4,
.page-template-page-shopify-build .process-cost-content h5,
.process-build .process-cost-content p,
.process-build .process-cost-content li,
.process-build .process-cost-content a,
.process-build .process-cost-content h3,
.process-build .process-cost-content h4,
.process-build .process-cost-content h5 {
    color: #fff;
}

@media (max-width: 768px) {
    .page-template-page-shopify-build .process-cost-budget,
    .process-build .process-cost-budget {
        bottom: 0;
        right: 16px;
        padding: 8px 14px;
        font-weight: 300;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
}
.page-template-page-shopify-build .process-cost-content p,
.page-template-page-shopify-build .process-cost-content li,
.page-template-page-shopify-build .process-cost-content a,
.page-template-page-shopify-build .process-cost-content h3,
.page-template-page-shopify-build .process-cost-content h4,
.page-template-page-shopify-build .process-cost-content h5,
.process-build .process-cost-content p,
.process-build .process-cost-content li,
.process-build .process-cost-content a,
.process-build .process-cost-content h3,
.process-build .process-cost-content h4,
.process-build .process-cost-content h5 {
    color: #fff;
}
.page-template-page-shopify-build .shopify-cost-excerpt,
.process-build .process-cost-excerpt {
    margin: 10px 0 18px;
    color: #e5e5e5;
}
.page-template-page-shopify-build .shopify-cost-cta .button.read-more,
.process-build .process-cost-cta .button.read-more {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    background: transparent;
}
.page-template-page-shopify-build .shopify-cost-cta .button.read-more:hover,
.process-build .process-cost-cta .button.read-more:hover {
    background: #fff;
    color: #0b1b25;
}
@media (max-width: 1024px) {
    .page-template-page-shopify-build .shopify-costs-grid,
    .process-build .process-costs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (max-width: 768px) {
    .page-template-page-shopify-build .full-width-featured-banner img,
    .process-build .full-width-featured-banner img {
        max-height: 300px;
    }
    .page-template-page-shopify-build .shopify-costs-grid,
    .process-build .process-costs-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Mobile layout for process service two-column (content + images) */
@media (max-width: 768px) {
    .single-shopify_service .shopify-two-col,
    .single-wordpress_service .shopify-two-col,
    .process-build .shopify-two-col {
        display: block;
    }
    .single-shopify_service .shopify-column-right,
    .single-wordpress_service .shopify-column-right,
    .process-build .shopify-column-right {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        margin: 0 -15px; /* allow images to spill to screen edge */
        padding-left: 15px; /* align first card with content padding */
    }
    .single-shopify_service .draggable-photo-card,
    .single-wordpress_service .draggable-photo-card,
    .process-build .draggable-photo-card {
        display: inline-block;
        width: 70vw;
        margin-right: 12px;
        transform: none;
        cursor: default;
    }
    .single-shopify_service .draggable-photo-card:nth-child(2n),
    .single-wordpress_service .draggable-photo-card:nth-child(2n),
    .process-build .draggable-photo-card:nth-child(2n) {
        transform: translateY(6px); /* subtle stagger */
    }
    .single-shopify_service .shopify-column-left,
    .single-wordpress_service .shopify-column-left,
    .process-build .shopify-column-left {
        width: 100%;
        margin-top: 16px;
    }
    /* Stage nav: numbers only on mobile */
    .single-shopify_service .shopify-stages-nav .stage .stage-label,
    .single-wordpress_service .shopify-stages-nav .stage .stage-label,
    .process-build .shopify-stages-nav .stage .stage-label {
        display: none;
    }
}