/*!
 * Theme Name: Reflect Group Theme
 * Theme URI: https://veracitydesign.co.uk/
 * Author: Veracity Design
 * Author URI: https://veracitydesign.co.uk/
 * Description: A lightweight, high-performance theme developed by Veracity Design for Reflect Group. Private client use only.
 * Version: 1.0.0
 * License: Proprietary — All rights reserved.
 * License URI: https://veracitydesign.co.uk/license/
 * Text Domain: reflect-group
 *
 * This theme contains components originally based on Underscores (_s) by Automattic, licensed under the GPL v2.
 * Usage of this theme is strictly limited to licensed Veracity Design clients. Redistribution or resale is not permitted.
 */

/* ============================================
   BASE - CLIENT TYPOGRAPHY
   ============================================ */
body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    color: #5a5563;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    color: #2b2430;
}

h1 { font-size: 5.4rem; }
h2 { font-size: 3.6rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.6rem; }
h5 { font-size: 1.4rem; }
p  { font-size: 1.45rem; line-height: 1.8; margin-bottom: 1.6rem; font-family: 'Poppins', sans-serif !important; }
p:last-child { margin-bottom: 0; }



@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-Black.eot');
    src: url('fonts/poppins/Poppins-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-Black.woff2') format('woff2'),
        url('fonts/poppins/Poppins-Black.woff') format('woff'),
        url('fonts/poppins/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-BlackItalic.eot');
    src: url('fonts/poppins/Poppins-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-BlackItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-BlackItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-Bold.eot');
    src: url('fonts/poppins/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-Bold.woff2') format('woff2'),
        url('fonts/poppins/Poppins-Bold.woff') format('woff'),
        url('fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-BoldItalic.eot');
    src: url('fonts/poppins/Poppins-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-BoldItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-BoldItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-ExtraBold.eot');
    src: url('fonts/poppins/Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-ExtraBold.woff2') format('woff2'),
        url('fonts/poppins/Poppins-ExtraBold.woff') format('woff'),
        url('fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-ExtraBoldItalic.eot');
    src: url('fonts/poppins/Poppins-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-ExtraBoldItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-ExtraBoldItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-ExtraLight.eot');
    src: url('fonts/poppins/Poppins-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-ExtraLight.woff2') format('woff2'),
        url('fonts/poppins/Poppins-ExtraLight.woff') format('woff'),
        url('fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-ExtraLightItalic.eot');
    src: url('fonts/poppins/Poppins-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-ExtraLightItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-ExtraLightItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-Italic.eot');
    src: url('fonts/poppins/Poppins-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-Italic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-Italic.woff') format('woff'),
        url('fonts/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-Light.eot');
    src: url('fonts/poppins/Poppins-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-Light.woff2') format('woff2'),
        url('fonts/poppins/Poppins-Light.woff') format('woff'),
        url('fonts/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-LightItalic.eot');
    src: url('fonts/poppins/Poppins-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-LightItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-LightItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-Medium.eot');
    src: url('fonts/poppins/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-Medium.woff2') format('woff2'),
        url('fonts/poppins/Poppins-Medium.woff') format('woff'),
        url('fonts/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-MediumItalic.eot');
    src: url('fonts/poppins/Poppins-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-MediumItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-MediumItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-Regular.eot');
    src: url('fonts/poppins/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-Regular.woff2') format('woff2'),
        url('fonts/poppins/Poppins-Regular.woff') format('woff'),
        url('fonts/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-SemiBold.eot');
    src: url('fonts/poppins/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
        url('fonts/poppins/Poppins-SemiBold.woff') format('woff'),
        url('fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-SemiBoldItalic.eot');
    src: url('fonts/poppins/Poppins-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-SemiBoldItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-Thin.eot');
    src: url('fonts/poppins/Poppins-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-Thin.woff2') format('woff2'),
        url('fonts/poppins/Poppins-Thin.woff') format('woff'),
        url('fonts/poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins/Poppins-ThinItalic.eot');
    src: url('fonts/poppins/Poppins-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/poppins/Poppins-ThinItalic.woff2') format('woff2'),
        url('fonts/poppins/Poppins-ThinItalic.woff') format('woff'),
        url('fonts/poppins/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* ============================================
   REFLECT COLOUR SYSTEM
   ============================================ */
.purplet      { color: #5d2a6e; }
.purpleb      { background-color: #5d2a6e; }
.purple-deepb { background-color: #46204f; }
.plumt        { color: #2b1f33; }
.plumb        { background-color: #2b1f33; }
.charcoalb    { background-color: #221d26; }
.darkcardb    { background-color: #111111; }
.lilact       { color: #d9c8e3; }
.lilacb       { background-color: #e6dcec; }
.lightb       { background-color: #f3f1f4; }
.greyt2       { color: #8d8794; }
.purple-gradient { background: linear-gradient(135deg, #5d2a6e 0%, #3c1c47 100%) !important; }
.dark-plum-gradient { background: linear-gradient(135deg, #000000 0%, #1d0a29 100%) !important; }

/* ============================================
   BUTTONS - CLIENT COLOURS
   (base structure lives in veracity-base.css)
   ============================================ */
.btn1 {
    background: #e6dcec;
    color: #2b1f33;
    border: 2px solid #e6dcec;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: none;
}
.btn1:hover {
    background: #fff;
    border-color: #fff;
}

.btn2 {
    background: #5d2a6e;
    color: #fff;
    border: 2px solid #5d2a6e;
    font-weight: 600;
}
.btn2:hover {
    background: transparent;
    color: #5d2a6e;
}

.btn-ghost {
    border: 2px solid #5d2a6e;
    color: #5d2a6e;
    font-weight: 700;
}
.btn-ghost:hover {
    background: #5d2a6e;
    color: #fff;
    border: 2px solid #5d2a6e;
}

/* ghost button on dark backgrounds */
.btn-ghost-light {
    border-color: #fff;
    color: #fff;
}
.btn-ghost-light:hover {
    background: #fff;
    border-color: #fff;
    color: #221d26;
}

/* ============================================
   SHARED COMPONENTS
   ============================================ */
.eyebrow {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 5px;
    margin-bottom: 1.2rem;
}

.sec-title {
    font-size: 3.6rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1.8rem;
}

.sec-title2 {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.8rem;
}

.sec-title3 {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1.8rem;
}

/* ============================================
   HEADER - CLIENT COLOURS
   (nav structure + behaviour live in veracity-nav.css / .js)
   ============================================ */
.site-header {
    position: relative;
    z-index: 100;
}

.logo {
    display: block;
    width: 220px;
    height: 56px;
    background: url(img/reflect-horizontal-main.webp);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    position: absolute;
    left: 7%;
    top: 12px;
    z-index: 10;
}

/* ============================================
   HERO
   ============================================ */
.rg-hero {
    background-image: url(img/home-main-temp.jpg);
    background-size: cover;
    background-position: center;
    background-color: #000000;
    overflow: hidden;
    animation: heroFadeIn 0.8s ease;
}

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

.rg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 38%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.1) 100%);
    z-index: 2;
    transform: translateZ(0);
}

.hero-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(100deg, #000 0%, #000 38%, #222 70%, #333 100%);
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.35;
}

.rg-hero-about {
    background-image: url(img/about-main.webp);
    background-size: cover;
    background-position: center;
    background-color: #6b6470;
    overflow: hidden;
}

.rg-hero-about:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.rg-hero-projects {
    background-image: url(img/overview-main.webp);
    background-size: cover;
    background-position: center;
    background-color: #6b6470;
    overflow: hidden;
}

.rg-hero-projects:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.rg-hero-contact {
    background-image: url(img/contact-main.webp);
    background-size: cover;
    background-position: center;
    background-color: #6b6470;
    overflow: hidden;
}

.rg-hero-contact:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 38%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.hero-content {
    position: absolute;
    z-index: 3;
    bottom: 50%;
    left: 7%;
    transform: translateY(50%);
    max-width: 640px;
}
.hero-content h1 {
    font-size: 7.5rem;
    font-weight: 200;
    line-height: 1.12;
    color: #fff;
    margin-bottom: 3rem;
}

.hero-content2 {
    position: relative;
}
.hero-content2 h1 {
    font-size: 5.5rem;
    font-weight: 200;
    line-height: 1.12;
    margin-bottom: 3rem;
}

/* ============================================
   WHO WE ARE
   ============================================ */
.who-section { padding: 9rem 7%; }
.who-img-col { padding-right: 6%; }
.who-text-col { padding-left: 3%; }

/* offset solid block treatment (Reflect variant of border-img) */
.block-img1 {
    position: relative;
    display: inline-block;
    width: 100%;
}

.block-img-fill {
    position: absolute;
    left: -4%;
    top: -5%;
    width: 55%;
    height: 55%;
    background: #5d2a6e;
    z-index: 1;
}

/* ============================================
   IMAGE BLOCKS
   ============================================ */
.image-block1 {
    position: relative;
    width: 100%;
    height: 450px;
    z-index: 4;
    background: #cfc9d4;
}

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

/* ============================================
   WHAT WE DO
   ============================================ */
.whatwedo-section { padding: 6rem 7% 11rem; overflow: hidden; }
.whatwedo-intro { max-width: 640px; }

.rg-bg-icon1 {
    position: absolute;
    width: 700px;
    height: 700px;
    right: -8%;
    top: 10%;
    background: url(img/reflect-icon.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
}

.wedo-cards {
    margin: 6rem -1% 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
}
.wedo-card {
    position: relative;
    padding: 100px 28px 32px;
    margin-top: 38px;
    color: #fff;
    background-color: #111111;
    transition: ease 0.8s;
    display: flex;
    flex-direction: column;
}

.wedo-card:hover {
background-color: #5d2a6e;
transform: translateY(-5px);
}
.wedo-card h3 { color: #fff; font-size: 2.2rem; margin-bottom: 1.4rem; }
.wedo-card p { color: rgba(255,255,255,0.85); font-size: 1.35rem; }

.wedo-icon-box {
    position: absolute;
    top: 0px;
    left: 28px;
    width: 70px;
    height: 70px;
    background-color: #e6dcec;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wedo-icon-box img {
    width: 55%;
    height: auto;
    display: block;
}
.wedo-icon-box svg {
    width: 32px;
    height: 32px;
    color: #5d2a6e;
}


.faded-logo {
    position: absolute;
    top: -15%;
    width: 1800px;
    height: 1800px;
    right: 0%;
    bottom: 0%;
    left: 20%;
    background: url(img/reflect-main-icon.webp);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.08;
}

.faded-logo2 {
    position: absolute;
    top: -15%;
    width: 1800px;
    height: 1800px;
    right: 0%;
    bottom: 0%;
    left: 20%;
    background: url(img/reflect-about-icon.png);
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.05;
}

/* ============================================
   OUR WORK
   ============================================ */
.work-section { padding: 8rem 7%; }
.work-head { margin-bottom: 4.5rem; }
.work-title {
    font-size: 4.8rem;
    font-weight: 200;
    letter-spacing: 8px;
    color: #fff;
    float: left;
}
.work-head .btn-ghost-light { float: right; margin-top: 6px; }
.work-grid { margin: 0 -1%; }
.work-card {
    position: relative;
    float: left;
    width: 23%;
    margin: 1%;
    height: 34rem;
    background-size: cover;
    background-position: center;
    background-color: #3a3340;
    overflow: hidden;
    display: block;
    transition: transform 0.6s ease;
}
.work-eyebrow {
    display: block;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 3px;
    color: #999999;
    margin-bottom: 0.4rem;
}

/* band at bottom of image cards */
.work-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 22px;
    background: rgba(26,26,26,0.9);
    height: 85px;
    overflow: hidden;
    transition: height 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.work-band h3 {
    color: #fff;
    font-size: 1.9rem;
    margin: 0;
}

/* hidden description */
.work-desc {
    color: rgba(255,255,255,0.85);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-top: 1.2rem;
    opacity: 0;
    transition: opacity 0.45s ease 0.15s;
}

/* learn more link - pinned to bottom left */
.work-link {
    position: absolute;
    bottom: 22px;
    left: 22px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.45s ease 0.2s;
}


/* full-width line above the link — stretches edge to edge */
.work-band::after {
    content: '';
    position: absolute;
    bottom: 52px;
    left: 22px;
    right: 22px;
    height: 1px;
    background-color: rgba(255,255,255,0.4);
    opacity: 0;
    transition: opacity 0.45s ease 0.2s;
}

/* hover state */
.work-card:hover .work-band {
    height: 100%;
}
.work-card:hover .work-desc,
.work-card:hover .work-link,
.work-card:hover .work-band::after {
    opacity: 1;
}

/* ============================================
   OUR PARTNERS
   ============================================ */
.partners-section { padding: 8rem 7%; }
.partners-logo-col { padding-right: 6%; }
.partners-text-col { padding-left: 3%; }

.partner-grid { margin: 0 -1.5%; }

.partner-logo {
    float: left;
    width: 29.3%;
    margin: 2%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1);
    opacity: 0.75;
    transition: all 0.3s;
}
.partner-logo:hover { filter: grayscale(0); opacity: 1; }
.partner-logo img { max-height: 95px; width: auto; }

/* ============================================
   GET IN TOUCH / CONTACT
   ============================================ */
.contact-section { padding: 9rem 7%; }
.contact-text-col { padding-right: 8%; }
.contact-form-col { padding-left: 3%; }

.contact-logo-mark { margin-bottom: 2rem; }
.contact-logo-mark img { width: 44px; height: auto; }

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 3.5rem;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contact-detail-icon {
    width: 35px;
    height: 35px;
    background: #220e35;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-detail-icon svg {
    width: 20px;
    height: 20px;
}

.contact-detail-value {
    text-decoration: none;
    font-weight: 500;
    font-size: 1.7rem;
    color: #2b2430;
}

/* form — styles target CF7 / plugin output classes on build */
.rg-form { width: 100%; }
.form-row { margin: 0 -1.5%; }

.form-field {
    width: 100%;
    border: none;
    border-bottom: 1px solid #d5d0da;
    background: transparent;
    padding: 14px 4px;
    margin-bottom: 2.6rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    color: #2b2430;
    outline: none;
    transition: border-color 0.3s;
}
.form-field:focus { border-bottom-color: #5d2a6e; }
.form-field::placeholder { color: #b3adba; }
.form-half { width: 47%; margin: 0 1.5%; float: left; }
textarea.form-field { min-height: 110px; resize: vertical; }

.form-submit {
    display: block;
    width: 100%;
    background: #111111;
    color: #fff;
    border: none;
    padding: 16px 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}
.form-submit:hover { background: #5d2a6e; }

/* ============================================
   FOOTER - CLIENT COLOURS
   (structure lives in veracity-base.css)
   ============================================ */
.footer { padding: 6rem 7% 4rem; }

.footer-box4 { display: none; }

.footer-logo { display: block; margin-bottom: 2rem; }
.footer-logo img { width: 240px; height: auto; }

.footer h4 { color: #fff; font-size: 1.7rem; margin-bottom: 18px; }
.footer p { color: rgba(255,255,255,0.7); }
.footer a { color: rgba(255,255,255,0.75); font-size: 1.35rem; margin-bottom: 10px; }
.footer a:hover { color: #d9c8e3; }

/* ============================================
   RESPONSIVE - 1080px
   ============================================ */
@media screen and (max-width: 1080px) {
    .hero-content h1 { font-size: 6.2rem; }
    .work-card { width: 48%; height: 30rem; }
    .work-title { font-size: 3.8rem; }
}

/* ============================================
   RESPONSIVE - 870px
   ============================================ */
@media screen and (max-width: 870px) {
    .who-section, .partners-section, .contact-section { padding: 7rem 6%; }
    .whatwedo-section { padding: 5rem 6% 10rem; }
    .wedo-card { min-height: 260px; }
    .faded-logo {
        position: absolute;
        top: -15%;
        width: 1800px;
        height: 1800px;
        right: 0%;
        bottom: 0%;
        left: 5%;
    }
}

/* ============================================
   RESPONSIVE - 750px
   ============================================ */
@media screen and (max-width: 750px) {
    .wedo-cards .third3 { margin-top: 38px; margin-bottom: 1.5rem; }
    .wedo-cards { margin-top: 3rem; }
    .partner-logo { width: 43%; }
    .faded-logo {
        position: absolute;
        top: 25%;
        width: 1800px;
        height: 1800px;
        right: 0%;
        bottom: 0%;
        left: -69%;
        background-position: bottom;
    }
    .partner-logo {
    float: left;
    margin: 3.5%;
  }

}


/* ============================================
   RESPONSIVE - 610px (MAIN MOBILE FLIP)
   ============================================ */
@media screen and (max-width: 610px) {
    .who-img-col, .who-text-col,
    .partners-logo-col, .partners-text-col,
    .contact-text-col, .contact-form-col { padding-left: 0; padding-right: 0; }
    .who-text-col { margin-top: 4rem; }
    .partners-logo-col { margin-top: 4rem; }
    .contact-form-col { margin-top: 5rem; }

    /* partners: text first on mobile */
    .partners-section { display: flex; flex-direction: column; }
    .partners-text-col { order: 1; }
    .partners-logo-col { order: 2; }

    .hero-content {
    left: 5%;
    right: 5%;
    bottom: 65%;
    max-width: none;
}
.partner-logo img {
    max-height: 77px;
    width: auto;
}

.rg-hero-about::before {
    background: linear-gradient(
        360deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.5) 40%,
        rgba(0,0,0,0.7) 75%,
        rgba(0,0,0,0.9) 100%
    );
}

.rg-hero::before {
    background: linear-gradient(
        360deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.5) 40%,
        rgba(0,0,0,0.7) 75%,
        rgba(0,0,0,0.9) 100%
    );
}

.rg-hero-projects::before {
    background: linear-gradient(
        360deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.5) 40%,
        rgba(0,0,0,0.7) 75%,
        rgba(0,0,0,0.9) 100%
    );
}

.rg-hero-contact::before {
    background: linear-gradient(
        360deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.5) 40%,
        rgba(0,0,0,0.7) 75%,
        rgba(0,0,0,0.9) 100%
    );
}

    .hero-content h1 { font-size: 5.6rem; }

    .sec-title, h2 { font-size: 3.8rem; }
    .sec-title2, h2 { font-size: 3.8rem; }
    .sec-title3, h2 { font-size: 3.8rem; }
    .work-title { float: none; font-size: 4rem; letter-spacing: 5px; }
    .work-head .btn-ghost-light { float: none; margin-top: 2rem; }
    .work-card { width: 100%; margin: 0.8rem 0; }

    .form-half { width: 100%; margin: 0; float: none; }

    .image-block1 { height: 320px; }

    .rg-hero {
        background-image: url(img/home-main-mob.webp);
        background-size: cover;
        background-position: center;
        min-height: 70vh;
    }
    .work-head .fr {
        float: none;
        display: flex;
        justify-content: center;
    }
}

/* ============================================
   RESPONSIVE - 480px
   ============================================ */
@media screen and (max-width: 480px) {
    .hero-content h1 { font-size: 4.5rem; }
    .sec-title, h2 { font-size: 3.2rem; }
    .sec-title2, h2 { font-size: 3.2rem; }
    .sec-title3, h2 { font-size: 3.2rem; }
    .btn1, .btn2, .btn-ghost { padding: 12px 22px; font-size: 1.1rem; }
    .logo { width: 160px; height: 44px; top: 16px; }
    .partner-logo { height: 80px; }
}

/* ============================================
   REFLECT FONTS
   Poppins is loaded via Google Fonts in
   functions.php (veracity_theme_scripts).
   ============================================ */

/* ============================================
   FOOTER
   ============================================ */

   /* Dark bar sits flush under the gradient footer — no white gap */
   #page .footer-bottom {
       width: 100%;
       height: 45px;
       background-color: #171717;
       position: relative;
       margin: 0;
       padding: 0;
       border-top: none;
   }

   /* "Built by Veracity Design" — pinned to the right */
   #page .footer-bottom .veracity {
       position: absolute;
       right: 5%;
       top: 15px;
       float: none;
       color: #fff;
       font-size: 12px;
       font-family: 'Exo 2', sans-serif;
       letter-spacing: 0.5px;
   }

   #page .footer-bottom .veracity a {
       display: inline;
       color: #fff;
       transition: color 0.3s;
   }
   #page .footer-bottom .veracity a:hover { color: #b06cc9; }

   /* Small "v" icon */
   #page .footer-bottom .veracity-v {
       width: 29px;
       height: 29px;
       margin-top: -5px;
       margin-right: 6px;
       float: left;
   }

   /* Copyright — left */
   #page .footer-bottom p.copyright {
       float: none;
       margin: 0;
       padding-left: 5%;
       padding-top: 15px;
       color: #fff;
       font-size: 12px;
       text-align: left;
   }

   /* ---- Responsive ---- */
   @media only screen and (min-width: 1250px) {
       #page .footer-bottom .veracity   { font-size: 14px; }
       #page .footer-bottom p.copyright { font-size: 13px; }
   }

   @media only screen and (max-width: 520px) {
       #page .footer-bottom .veracity,
       #page .footer-bottom p.copyright { font-size: 11px; }
   }

   /* Below 400px the bar grows taller and Veracity drops to bottom-left */
   @media only screen and (max-width: 400px) {
       #page .footer-bottom { height: 92px; }
       #page .footer-bottom .veracity {
           right: auto;
           top: auto;
           bottom: 14px;
           left: 7%;
           font-size: 12px;
       }
       #page .footer-bottom p.copyright {
           padding-left: 7%;
           font-size: 12px;
       }
   }


/* ════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════
   INNER PAGES — About + Projects
   (added after home styles; new selectors, no cascade conflicts)
   ════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════ */

/* ============================================
   INNER HERO (About / Projects)
   inherits .rg-hero base; overrides bg + sizing
   ============================================ */

.rg-hero-inner .hero-content h1 {
    font-size: 6rem;
    margin-bottom: 1.8rem;
}
.hero-sub {
    color: rgba(255,255,255,0.85);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 480px;
    margin-bottom: 3rem;
}

/* ============================================
   ABOUT INTRO (centred)
   ============================================ */
.about-intro-section { padding: 9rem 7%; overflow: hidden; }
.about-intro { max-width: 980px; }
.about-intro .sec-title { font-size: 4rem; }

/* centred watermark variant of .faded-logo */
.faded-logo-centre {
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 1000px;
    background-position: top center;
}

/* ============================================
   MEET THE TEAM
   ============================================ */
.team-section { padding: 4rem 7% 9rem; }
.team-text-col { padding-right: 6%; }
.team-grid { margin: 0 -1%; }

.team-card {
    position: relative;
    float: left;
    width: 48%;
    margin: 1%;
    overflow: hidden;
}

.team-card-img {
    width: 100%;
    height: 360px;
    background-size: cover;
    background-position: center top;
    background-color: #3a3340;
    filter: grayscale(1);
    transition: filter 0.5s ease, transform 0.8s ease;
}
.team-card:hover .team-card-img {
    filter: grayscale(0);
    transform: scale(1.04);
}

.team-card-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px 24px 22px;
    background: linear-gradient(to top, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.55) 60%, transparent 100%);
    border-bottom: 10px solid #8046a0;
}
.team-name {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.2;
}
.team-creds {
    display: block;
    color: rgba(255,255,255,0.8);
    font-size: 1.15rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* ============================================
   OUR VALUES
   ============================================ */
.values-section {
    padding: 4rem 7% 9rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.values-text-col { padding-right: 8%; }
.values-grid {
    margin: 0 -2%;
    display: flex;
    flex-wrap: wrap;
}

.value-card {
    width: 46%;
    margin: 2%;
    min-height: 205px;
    padding: 34px 30px;
    background: #f3f1f4;
    transition: background-color 0.8s ease, transform 0.8s ease;
    display: flex;
    flex-direction: column;
}
.value-card:hover {
    background: #5d2a6e;
    transform: scale(1.04);
}
.value-title {
    font-size: 1.9rem;
    font-weight: 600;
    color: #2b2430;
    margin-bottom: 14px;
    transition: color 0.8s ease;
}
.value-card:hover .value-title { color: #fff; }
.value-line {
    display: block;
    width: 100%;
    height: 2px;
    background: #5d2a6e;
    margin-bottom: 18px;
    transition: background 0.8s ease;
}
.value-card:hover .value-line { background: rgba(255,255,255,0.85); }
.value-card p {
    font-size: 1.3rem;
    color: #6a6472;
    transition: color 0.8s ease;
}
.value-card:hover p { color: rgba(255,255,255,0.9); }

.half-early {
    width: 50%;
    float: left;
}

@media screen and (max-width: 820px) {
    .half-early {
        width: 100%;
        float: none;
        margin-top: 10%;
    }
}

/* ============================================
   GET IN TOUCH — CTA BAND
   dark band with offset purple corner accents
   ============================================ */
   /* ============================================
      CTA BAND
      ============================================ */
   .cta-band {
       padding: 6rem 7%;
       position: relative;
   }
   .cta-band-inner {
       padding: 6rem 6rem;
       text-align: center;
       position: relative;
       background-image: url(img/cta-background-pattern.webp);
       background-repeat: no-repeat;
       background-size: cover;
       z-index: 2;
   }
   .cta-band-box {
       position: relative;
       margin: 0 5%;
       padding: 0;
       background-color: #1a1a2e;
       background-size: cover;
       background-position: center;
       overflow: visible;
   }
   .cta-band-title {
       font-size: 4.2rem;
       font-weight: 300;
       color: #fff;
       margin-bottom: 1.8rem;
   }
   .cta-band p {
       font-size: 1.4rem;
       color: rgba(255,255,255,0.75);
       line-height: 1.7;
       margin-bottom: 2.8rem;
   }
   .cta-band-btn {
       display: inline-block;
       padding: 14px 34px;
       background: #f3f1f4;
       color: #5d2a6e;
       font-size: 1.25rem;
       font-weight: 600;
       letter-spacing: 1px;
       cursor: pointer;
       transition: all 0.3s ease;
   }
   .cta-band-btn:hover {
       background: #5d2a6e;
       color: #fff;
   }

   /* decorative purple blocks - behind the banner */
   .cta-block-tl {
       position: absolute;
       top: -20px;
       left: -20px;
       width: 90px;
       height: 90px;
       background: #5d2a6e;
       z-index: -1;
   }
   .cta-block-br {
       position: absolute;
       bottom: -20px;
       right: -20px;
       width: 90px;
       height: 90px;
       background: #5d2a6e;
       z-index: -1;
   }

/* ============================================
   PROJECTS INTRO (centred)
   ============================================ */
.projects-intro-section { padding: 9rem 7%; }
.projects-intro { max-width: 920px; }
.projects-intro .eyebrow { color: #8d8794; }

/* ============================================
   INDUSTRIES GRID (Projects)
   light, static cards — distinct from dark .work-card
   ============================================ */
.industry-grid { margin: 0 -1.5%; text-align: left; }

.industry-card {
    float: left;
    width: 22%;
    margin: 1.5%;
}

.industry-img {
    width: 100%;
    height: 235px;
    background-size: cover;
    background-position: center;
    background-color: #cfc9d4;
    filter: grayscale(1);
    margin-bottom: 22px;
    transition: filter 0.5s ease;
}
.industry-card:hover .industry-img { filter: grayscale(0); }

.industry-title {
    font-size: 2rem;
    font-weight: 500;
    color: #2b2430;
    margin-bottom: 14px;
}
.industry-card p {
    font-size: 1.3rem;
    color: #6a6472;
    margin-bottom: 20px;
}

.industry-link {
    display: inline-block;
    position: relative;
    padding-top: 16px;
    color: #5d2a6e;
    font-size: 1.25rem;
    font-weight: 600;
}
.industry-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #d5cdda;
}
.industry-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #5d2a6e;
    transition: width 0.35s ease;
}
.industry-card:hover .industry-link::after { width: 100%; }

/* ============================================
   INNER PAGES — RESPONSIVE
   ============================================ */
@media screen and (max-width: 1080px) {
    .rg-hero-inner .hero-content h1 { font-size: 5.2rem; }
    .industry-card { width: 47%; }
}

@media screen and (max-width: 870px) {
    .about-intro-section, .team-section,
    .values-section, .projects-intro-section,
    .cta-band-section { padding-left: 6%; padding-right: 6%; }
    .cta-band { padding: 5rem 4rem; }
}

@media screen and (max-width: 750px) {
    .team-card-img { height: 300px; }
    .team-card {
    position: relative;
    float: left;
    width: 100%;
    margin: 1%;
    overflow: hidden;
}
}

@media screen and (max-width: 610px) {
    /* hero */
    .rg-hero-inner .hero-content h1 { font-size: 4.4rem; }
    .hero-sub { max-width: none; }
    .faded-logo-centre { top: 17%;}

    /* intros */
    .about-intro .sec-title { font-size: 3.4rem; }

    /* team — stack text over cards, cards side by side stay */
    .team-text-col { padding-right: 0; margin-bottom: 4rem; }
    .team-card { width: 48%; }
    .team-card-img { height: 340px; }

    /* values — text over grid, cards full width */
    .values-text-col { padding-right: 0; margin-bottom: 4rem; }
    .value-card { width: 96%; margin: 2%; min-height: 0; }

    /* industries — two per row */
    .industry-card { width: 46%; }

    /* cta corners shrink */
    .cta-corner { width: 90px; height: 44px; }
    .cta-band { padding: 4.5rem 2.6rem; }
    .cta-band p br { display: none; }
}

@media screen and (max-width: 480px) {
    .rg-hero-inner .hero-content h1 { font-size: 3.8rem; }
    .team-card { width: 96%; margin: 2%; }
    .team-card-img { height: 320px; }
    .industry-card { width: 96%; margin: 2%; }
    .industry-img { height: 220px; }
}