/*
Theme Name: Noble Point Theme
Theme URI: https://noblepointmgmt.com
Author: Noble Point
Author URI: https://noblepointmgmt.com
Description: Noble Point Management & Accounting.
Version: 1.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noble-point
*/

/* ===========================
   BASE STYLES
   =========================== */
html {
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}

/* ===========================
   VARIABLES & RESET
   =========================== */
:root {
    /* Core Palette */
    --noble-dark: #361445;
    /* Deep Purple */
    --noble-purple: #4d1f61;
    /* Primary Purple */
    --noble-gold: #c9a26a;
    /* Accent Gold */
    --noble-cream: #fcf6f2;
    /* Light Background */
    --noble-text: #2d2d2d;
    /* Dark Text */
    --noble-white: #ffffff;

    /* Semantic Aliases */
    --bg-color: var(--noble-dark);
    --text-main: var(--noble-text);
    --text-light: var(--noble-cream);

    /* Typography */
    --font-serif: 'Cinzel', serif;
    --font-sans: 'Montserrat', sans-serif;

    /* Component Variables (Defaults) */
    --nav-text: rgba(77, 31, 97, 0.8);
    --nav-text-hover: var(--noble-gold);
    --nav-icon: var(--noble-purple);
    --logo-fill: var(--noble-dark);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Removed scroll-behavior: smooth to allow Lenis to control it */
    -webkit-overflow-scrolling: touch;
}

/* Lenis Recommended Styles */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    background-color: var(--white);
    color: #333;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

::selection {
    background: var(--noble-gold);
    color: var(--noble-purple);
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ===========================
   TYPOGRAPHY
   =========================== */
.font-serif {
    font-family: var(--font-serif);
}

.font-sans {
    font-family: var(--font-sans);
}

/* ===========================
   SVG ANIMATION STYLES
   =========================== */
.cls-3 {
    fill: var(--logo-fill);
    transition: fill 0.3s ease;
}

.cls-6 {
    fill: var(--noble-gold);
}

.cls-11 {
    stroke: var(--noble-gold);
    stroke-width: 2px;
    fill: none;
}

.logo-part {
    will-change: transform, opacity;
}

#star {
    transform-origin: center center;
    opacity: 0;
}

#N,
#P {
    transform-origin: center center;
    opacity: 0;
}

#hornleft,
#hornright {
    opacity: 0;
}

#nptext,
#manacc,
#lineleft,
#lineright {
    opacity: 0;
}

/* ===========================
   LAYOUT UTILITIES
   =========================== */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 767px) {

    .container,
    .hero-content,
    .philosophy-header,
    .services-header,
    .ind-header,
    .team-header,
    .contact-content {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.text-center {
    text-align: center;
}

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

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.overflow-hidden {
    overflow: hidden;
}

.pointer-events-none {
    pointer-events: none;
}

.flex {
    display: flex;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.hidden {
    display: none;
}

.grid {
    display: grid;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-1 {
    flex: 1;
}

.gap-0 {
    gap: 0;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-16 {
    gap: 4rem;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.will-change-transform {
    will-change: transform;
}

.shrink-0 {
    flex-shrink: 0;
}

.select-none {
    user-select: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* ===========================
   NAVIGATION
   =========================== */
#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

#navbar.nav-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

#nav-logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 4rem;
    width: auto;
    pointer-events: auto;
}

.nav-links {
    display: none;
}

/* Dark Background Navigation Override */
.nav-light {
    --nav-text: var(--noble-cream);
    --nav-text-hover: var(--noble-gold);
    --nav-icon: var(--noble-cream);
    --logo-fill: var(--noble-cream);
}

.nav-link {
    color: var(--nav-text);
    font-family: var(--font-sans);
    font-size: clamp(0.7rem, 1vw, 0.75rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s;
    cursor: pointer;
    opacity: 0;
}

.nav-link:hover {
    color: var(--nav-text-hover);
}

.mobile-menu-btn {
    background: none;
    border: none;
    color: var(--nav-icon);
    cursor: pointer;
    opacity: 0;
    transition: color 0.3s;
}

/* ===========================
   MOBILE MENU
   =========================== */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--noble-cream);
    z-index: 60;
    /* Increased to sit above #navbar (z-index: 50) */
    transform: translateX(100%);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--noble-purple);
    cursor: pointer;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.nav-link-mobile {
    color: var(--noble-purple);
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    text-transform: uppercase;
    cursor: pointer;
}

/* ===========================
   HERO
   =========================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--noble-cream);
    overflow: hidden;
}

.hero-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to bottom left, rgba(77, 31, 97, 0.05), transparent);
    z-index: 0;
}

#hero-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    gap: 1rem;
}

#logo-mark {
    width: 10rem;
}

#logo-text {
    width: 16rem;
}

.hero-content {
    position: relative;
    z-index: 20;
    text-align: center;
    max-width: 56rem;
    padding: 0 1rem;
    margin-top: 2rem;
}

.hero-title {
    font-family: var(--font-serif);
    color: var(--noble-purple);
    margin-bottom: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    font-variant: normal;
}

.reveal-text-main {
    display: block;
    font-size: clamp(2rem, 5vw, 4.5rem);
    opacity: 0;
    transform: translateY(1.25rem) scale(0.9);
}

.reveal-text-sub {
    display: block;
    font-size: clamp(1.5rem, 3vw, 3rem);
    color: var(--noble-gold);
    font-style: italic;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(1.25rem);
}

.reveal-desc {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: #666;
    letter-spacing: 0.05em;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.75;
    opacity: 0;
    transform: translateY(1.25rem);
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
}

.reveal-hero-btn {
    opacity: 0;
    transform: translateY(20px);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 1s infinite alternate;
    cursor: pointer;
    opacity: 0;
}

@keyframes bounce {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    100% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* ===========================
   BUTTONS
   =========================== */
.btn {
    border: none;
    padding: 1.2rem 3rem;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 1vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    min-width: 200px;
    display: inline-block;
    text-align: center;
}

.btn-soft {
    background: var(--noble-cream);
    color: var(--noble-purple);
    box-shadow: 8px 8px 16px #e8e2de, -8px -8px 16px #ffffff;
}

.btn-soft:hover {
    color: var(--noble-gold);
    transform: translateY(-2px);
    box-shadow: 12px 12px 20px #e8e2de, -12px -12px 20px #ffffff;
}

.btn-soft:active {
    transform: translateY(1px);
    box-shadow: inset 4px 4px 8px #e8e2de, inset -4px -4px 8px #ffffff;
}

.btn-soft-purple {
    background: var(--noble-purple);
    color: var(--noble-cream);
    box-shadow:
        8px 8px 16px rgba(77, 31, 97, 0.2),
        -8px -8px 16px #ffffff;
}

.btn-soft-purple:hover {
    color: var(--noble-gold);
    transform: translateY(-2px);
    box-shadow:
        12px 12px 20px rgba(77, 31, 97, 0.3),
        -8px -8px 16px #ffffff;
}

.btn-soft-purple:active {
    transform: translateY(1px);
    box-shadow:
        inset 4px 4px 8px #2e123a,
        inset -4px -4px 8px #6c2b87;
}

/* ===========================
   PHILOSOPHY / ABOUT
   =========================== */
#about {
    padding: 6rem 0 8rem;
    background: var(--noble-purple);
    color: var(--noble-cream);
    position: relative;
    overflow: hidden;
}

.philosophy-header {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 6rem;
}

.philosophy-header h2 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: var(--noble-gold);
    letter-spacing: -0.05em;
}

.philosophy-header h3 {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(252, 246, 242, 0.8);
    font-weight: 300;
}

.philosophy-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201, 162, 106, 0.3), transparent);
    margin-top: 3rem;
}

.pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}

.pillar-divider-line {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(201, 162, 106, 0.1), rgba(201, 162, 106, 0.3), rgba(201, 162, 106, 0.1));
}

.pillar-divider-1 {
    left: 33.333%;
}

.pillar-divider-2 {
    right: 33.333%;
}

.pillar {
    position: relative;
    padding: 0 1rem 3rem;
    text-align: center;
}

.pillar+.pillar {
    border-top: 1px solid rgba(201, 162, 106, 0.1);
    padding-top: 3rem;
}

.pillar-number-wrap {
    position: relative;
    margin-bottom: 2rem;
}

.pillar-number {
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 8vw, 5rem);
    color: rgba(201, 162, 106, 0.05);
    position: absolute;
    top: -2.5rem;
    left: -1.5rem;
    user-select: none;
}

.pillar-title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 400;
    position: relative;
    z-index: 10;
    color: var(--noble-cream);
    transition: color 0.5s;
}

.pillar:hover .pillar-title {
    color: var(--noble-gold);
}

.pillar-body {
    font-family: var(--font-sans);
    color: rgba(252, 246, 242, 0.7);
    line-height: 1.75;
    font-size: 1.125rem;
    font-weight: 300;
    position: relative;
    z-index: 10;
}

/* ===========================
   SERVICES
   =========================== */
#services {
    padding: 6rem 0;
    background: var(--noble-cream);
}

.services-header {
    text-align: center;
    margin-bottom: 3rem;
}

.services-header h3 {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--noble-gold);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.services-header h2 {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 400;
    color: var(--noble-purple);
    letter-spacing: -0.05em;
}

.services-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.75;
}

.service-col {
    border-bottom: 1px solid rgba(201, 162, 106, 0.2);
    padding-bottom: 1.5rem;
}

.service-col-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-col-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.service-icon {
    color: var(--noble-purple);
    opacity: 0.8;
}

.service-icon svg {
    width: 2rem;
    height: 2rem;
}

.service-col h4 {
    font-family: var(--font-serif);
    font-size: 1.50rem;
    font-weight: 450;
    color: var(--noble-purple);
}

.service-dept {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

.service-chevron {
    color: var(--noble-purple);
    transition: transform 0.3s;
}

.service-chevron.rotated {
    transform: rotate(180deg);
}

.service-chevron svg {
    width: 1.25rem;
    height: 1.25rem;
}

.service-content {
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    max-height: 0;
    opacity: 0;
}

.service-content.open {
    max-height: 2000px;
    opacity: 1;
    padding-top: 1rem;
}

.service-subsection {
    margin-bottom: 2rem;
}

.service-subsection h5 {
    font-family: var(--font-serif);
    color: var(--noble-gold);
    font-size: clamp(1.125rem, 2vw, 1.325rem);
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.service-subsection ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-subsection li {
    color: #666;
    font-family: var(--font-sans);
    font-weight: 500;
}

/* ===========================
   INDUSTRIES
   =========================== */
.ind-header-block {
    position: relative;
    /* Using clamp for a responsive but stable height instead of vh to prevent GSAP pin jumping on resize */
    height: clamp(160px, 20vw, 240px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--noble-purple);
    z-index: 10;
}

.ind-header-block::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: var(--noble-purple);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 10;
    pointer-events: none;
}

.ind-marquee-block {
    position: relative;
    /* Using clamp for a responsive but stable height instead of vh to prevent GSAP pin jumping on resize */
    height: clamp(160px, 20vw, 240px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--noble-purple);
    z-index: 20;
}

.ind-header {
    text-align: center;
    margin-bottom: 0;
}

.ind-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--noble-gold);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.ind-heading {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    color: var(--noble-cream);
    letter-spacing: -0.05em;
}

.ind-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--noble-gold), transparent);
    margin-bottom: 0;
    transform-origin: center;
    opacity: 0.8;
    /* Increased opacity to look like a gold line, not a white line */
}

.marquee-wrapper {
    position: relative;
    width: 100%;
    padding: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.marquee-fade-left,
.marquee-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6rem;
    z-index: 10;
    pointer-events: none;
}

.marquee-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--noble-purple), transparent);
}

.marquee-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--noble-purple), transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    will-change: transform;
}

.marquee-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    /* Prevent text wrapping */
}

.marquee-item-text {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 3vw, 1.875rem);
    color: var(--noble-cream);
    letter-spacing: -0.025em;
    padding: 0 1rem;
}

.marquee-item-diamond {
    color: var(--noble-gold);
    font-size: 1.125rem;
    user-select: none;
    padding: 0 0.5rem;
}

/* Reduced font size for mobile internally with clamp */
/* ===========================
   TEAM
   =========================== */
#team {
    position: relative;
    background: var(--noble-purple);
    color: white;
    padding: 6rem 0 8rem;
}

.team-header {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 6rem;
}

.team-heading {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    color: var(--noble-gold);
    letter-spacing: -0.05em;
    margin-bottom: 1.5rem;
}

.team-subtitle {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(252, 246, 242, 0.8);
    font-weight: 300;
}

.team-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201, 162, 106, 0.3), transparent);
    margin-top: 3rem;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    max-width: 64rem;
    margin: 0 auto;
}

.team-card {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.team-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    width: 220px;
    height: 280px;
    margin-bottom: 1.5rem;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: all 0.7s;
}

.team-card:hover .team-img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.team-img.grayscale {
    filter: grayscale(1);
}

.team-img-border {
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    transition: all 0.5s;
    pointer-events: none;
}

.team-card:hover .team-img-border {
    border-color: rgba(201, 162, 106, 0.4);
}

.team-gold-line {
    width: 3rem;
    height: 2px;
    background: rgba(201, 162, 106, 0.4);
    margin-bottom: 1rem;
}

.team-name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--noble-gold);
    margin-bottom: 0.25rem;
}

.team-role {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    opacity: 0.7;
}

.team-short-bio {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.75;
    color: #d1d5db;
}

.bio-expanded {
    overflow: hidden;
    height: 0;
    opacity: 0;
}

.bio-expanded p {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1rem;
}

.close-btn {
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(10px);
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* ===========================
   DISCOVERY CALL / CONTACT
   =========================== */
#contact {
    padding: 6rem 0;
    background: var(--noble-cream);
    color: var(--noble-purple);
    border-top: 1px solid rgba(201, 162, 106, 0.2);
}

.contact-inner {
    text-align: center;
}

.contact-inner h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 2rem;
}

.contact-inner p {
    font-family: var(--font-sans);
    color: #666;
    margin-bottom: 3rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.calendly-wrap {
    overflow: hidden;
    transition: all 0.7s ease-in-out;
    width: 100%;
    max-height: 0;
    opacity: 0;
}

.calendly-wrap.open {
    max-height: 800px;
    opacity: 1;
}

.calendly-inline-widget {
    width: 100%;
    min-width: 320px;
    height: 700px;
}

/* ===========================
   SITE FOOTER
   =========================== */
.site-footer {
    background: var(--noble-purple);
    color: var(--noble-cream);
    padding: 4rem 0 5rem;
}

.site-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.footer-logo {
    width: 5rem;
    margin-bottom: 2rem;
}

.footer-summary {
    max-width: 32rem;
    text-align: center;
    margin-bottom: 3rem;
}

.footer-summary p {
    color: rgba(252, 246, 242, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}

.footer-logo .cls-3 {
    fill: var(--noble-cream);
}

.footer-logo .cls-6 {
    fill: var(--noble-gold);
}

.footer-logo svg {
    width: 100%;
    height: auto;
}

.footer-divider {
    width: 6rem;
    height: 1px;
    background: var(--noble-gold);
    margin-bottom: 3rem;
    opacity: 0.5;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 4rem;
    width: 100%;
    max-width: 56rem;
}

.footer-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.footer-section-title {
    color: var(--noble-gold);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.footer-contact-item a,
.footer-contact-item span,
.footer-address-link {
    color: rgba(252, 246, 242, 0.8);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    font-family: var(--font-sans);
    transition: color 0.3s;
    line-height: 1.6;
}

.footer-contact-item a:hover,
.footer-address-link:hover {
    color: var(--noble-gold);
}

.footer-v-divider {
    display: none;
    width: 1px;
    height: 2.5rem;
    background: rgba(201, 162, 106, 0.4);
}

.footer-copyright {
    color: rgba(252, 246, 242, 0.4);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-family: var(--font-sans);
    text-align: center;
    text-transform: uppercase;
}

/* ===========================
   SCROLLBAR
   =========================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #fcf6f2;
}

::-webkit-scrollbar-thumb {
    background: #4d1f61;
    border-radius: 4px;
}

/* ===========================
   RESPONSIVE — TABLET+
   =========================== */
@media (min-width: 768px) {
    .container {
        padding: 0 3rem;
    }

    /* Nav */


    /* Hero */
    #logo-mark {
        width: 14rem;
    }

    #logo-text {
        width: 24rem;
    }



    .hero-buttons {
        flex-direction: row;
    }

    /* Philosophy */
    #about {
        padding: 8rem 0;
    }



    .philosophy-header h3 {
        font-size: 1.5rem;
    }

    .pillars-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pillar-divider-line {
        display: block;
    }

    .pillar {
        padding: 0 1.5rem;
        text-align: left;
    }

    .pillar+.pillar {
        border-top: none;
        padding-top: 0;
    }



    .pillar-title {
        font-size: 1.5rem;
    }

    .pillar-body {
        font-size: 1rem;
    }

    /* Services */
    #services {
        padding: 6rem 0;
    }

    .services-header {
        margin-bottom: 5rem;
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .service-col {
        border-bottom: none;
        padding-bottom: 0;
    }

    .service-col:last-child {
        grid-column: span 2;
    }

    .service-col-header {
        cursor: default;
    }

    .service-col-header-left {
        display: block;
    }

    .service-icon {
        margin-bottom: 1rem;
    }

    .service-icon svg {
        width: 2.5rem;
        height: 2.5rem;
    }



    .service-dept {
        font-size: 0.75rem;
    }

    .service-chevron {
        display: none;
    }

    .service-content {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible;
    }

    .service-col:last-child .service-content-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 3rem;
    }

    /* Industries */
    .ind-header {
        margin-bottom: 0;
    }

    .ind-divider {
        margin-bottom: 0;
    }

    .marquee-fade-left,
    .marquee-fade-right {
        width: 12rem;
    }

    .marquee-item-text {
        padding: 0 1.5rem;
    }

    .marquee-item-diamond {
        padding: 0 1rem;
    }

    /* Team */
    #team {
        padding: 8rem 0;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6rem;
    }



    .team-subtitle {
        font-size: 1.5rem;
    }

    .team-img-wrap {
        width: 260px;
        height: 320px;
    }

    .team-name {
        font-size: 1.875rem;
    }

    .team-role {
        font-size: 0.875rem;
    }

    .team-short-bio {
        font-size: 1rem;
    }

    /* Contact */
    .contact-inner h2 {
        font-size: 3rem;
    }

    /* Footer */
    .footer-contact {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
    }

    .footer-contact-item {
        padding: 0 2.5rem;
        /* Equal padding for all */
    }

    /* Remove specific first/last child padding adjustments as we have 3 items now */
    .footer-contact-item:first-child {
        padding-right: 2.5rem;
        padding-left: 0;
    }

    .footer-contact-item:last-child {
        padding-left: 2.5rem;
        padding-right: 0;
    }

    .footer-v-divider {
        display: block;
    }

    .footer-logo {
        width: 6rem;
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-col:last-child {
        grid-column: span 1;
    }

    .service-col:last-child .service-content-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .pillar {
        padding: 0 3rem;
    }

    .pillar-number {
        font-size: 7rem;
        left: -2.5rem;
    }

    .pillar-title {
        font-size: 2.25rem;
    }

    .pillar-body {
        font-size: 1.125rem;
    }

    .marquee-item-text {
        font-size: 2.25rem;
    }

    .ind-heading {
        font-size: 3.75rem;
    }

    .philosophy-header h2 {
        font-size: 3.75rem;
    }

    .services-header h2 {
        font-size: 3.75rem;
    }
}

/* ===========================
   VISUAL GRID SCROLL SECTION
   =========================== */
#visual-scroll-wrap {
    position: relative;
    width: 100%;
    /* Increased height to accommodate the 2-step animation + crop effect */
    height: 400vh;
    /* Slightly reduced to prevent excessive empty scroll */
    background-color: var(--noble-purple);
    /* Noble Purple Background */
    z-index: 30;
    /* Higher z-index to cover the tiered Industries blocks */
}

.visual-sticky-content {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Mobile viewport support */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Clips the vertical strip to the screen edges */
    position: sticky;
    top: 0;
    will-change: transform;
    /* Hint for performance */
}

.visual-grid {
    --gap: clamp(10px, 1.5vw, 30px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--gap);
    width: 95%;
    max-width: 800px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    position: relative;
    /* Critical: Allows the vertical strip to extend beyond the grid initially */
    overflow: visible;
}

/* Image Styling */
.grid-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    opacity: 0;
    transform: scale(0.8);
    border: 1px solid rgba(201, 162, 106, 0.25);
    box-shadow:
        0 4px 16px rgba(54, 20, 69, 0.08),
        0 1px 4px rgba(54, 20, 69, 0.04);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Warm overlay tint to unify color temperature */
.grid-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(201, 162, 106, 0.06) 0%,
            rgba(54, 20, 69, 0.08) 100%);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}

/* Hover micro-interactions */
.grid-item:hover {
    transform: scale(1.03);
    box-shadow:
        0 8px 30px rgba(54, 20, 69, 0.12),
        0 2px 8px rgba(201, 162, 106, 0.15);
    z-index: 5;
}

.grid-item:hover::after {
    opacity: 0;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.grid-item:hover img {
    transform: scale(1.05);
}

/* Layer Positioning */
.grid-layer {
    display: contents;
}

/* Layer 1 - Corners */
.layer-1>.grid-item:nth-child(odd) {
    grid-column: 1;
}

.layer-1>.grid-item:nth-child(even) {
    grid-column: 3;
}

.layer-1>.grid-item:nth-child(1),
.layer-1>.grid-item:nth-child(2) {
    grid-row: 1;
}

.layer-1>.grid-item:nth-child(3),
.layer-1>.grid-item:nth-child(4) {
    grid-row: 3;
}

/* Layer 2 - Mid Sides */
.layer-2>.grid-item:nth-child(odd) {
    grid-column: 1;
}

.layer-2>.grid-item:nth-child(even) {
    grid-column: 3;
}

.layer-2>.grid-item {
    grid-row: 2;
}

/* Layer 3 - Center Top/Bottom */
.layer-3>.grid-item {
    grid-column: 2;
}

.layer-3>.grid-item:first-child {
    grid-row: 1;
}

.layer-3>.grid-item:last-child {
    grid-row: 3;
}

/* Scaler Cell - Absolute Center */
.scaler-cell {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    z-index: 20;
}

.scaler-img-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Critical: Visible overflow allows the strip effect */
    overflow: visible;
}

.main-scaler-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* START STATE: Full Screen */
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    /* Override global img { max-width: 100% } */
    object-fit: cover;
    z-index: 100;
    border-radius: 0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
/* ===========================
   TESTIMONIALS
   =========================== */
#testimonials {
    background-color: var(--noble-cream);
    padding: 6rem 0;
    overflow: hidden;
}

.reveal-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}

.reveal-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    transform: scaleX(0);
}

.bg-noble-gold {
    background-color: var(--noble-gold);
}

.bg-noble-purple {
    background-color: var(--noble-purple);
}

.content-to-reveal {
    opacity: 0;
    display: inline-block;
}

/* Sub-title acts as Section Label (matching .ind-label) */
.sub-title {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--noble-gold);
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-weight: 400;
}

/* Reputation Header Specifics */
.reputation-header-wrap {
    margin-bottom: 3rem;
    text-align: center;
    /* Center align to match other headers? Or keep left? */
}

/* User didn't request centering, but headers are usually centered. 
   However, the reveal animation is left-to-right. 
   I'll keep default alignment (left) for now as the quote is left-aligned. */

.reputation-title {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    /* Matches .ind-heading */
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.05em;
    color: var(--noble-purple);
}

.reputation-inverse {
    background-color: var(--noble-purple);
    color: var(--noble-cream);
    padding: 0 0.5rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.relative-quote-wrapper {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.quote-line-reveal {
    position: relative;
    overflow: hidden;
}

.quote-line-reveal .line-text {
    display: block;
    margin: 0;
}

.line-reveal-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-color: var(--noble-cream);
    z-index: 2;
    pointer-events: none;
}

.line-reveal-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background-color: var(--noble-purple);
    z-index: 3;
    pointer-events: none;
    transform: scaleX(0);
}

.line-text {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 2.5vw, 2rem);
    line-height: 1.4;
    color: #333;
    font-weight: 500;
}

.line-text .highlight {
    font-weight: 700;
    border-bottom: 3px solid var(--noble-purple);
    color: var(--noble-purple);
}

.quote-mark {
    font-family: serif;
    font-size: 12rem;
    line-height: 1;
    color: rgba(201, 162, 106, 0.3);
    /* Faint Noble Gold */
    position: absolute;
    user-select: none;
    z-index: 5;
}

.quote-open {
    top: -4rem;
    left: -4rem;
}

.quote-close {
    bottom: -4rem;
    right: -2rem;
    position: absolute;
}

.quote-content {
    position: relative;
    z-index: 10;
}

.quote-signature {
    padding-left: 1.5rem;
    border-left: 2px solid var(--noble-gold);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: #666;
    margin-top: 3rem;
    min-height: 3em;
    position: relative;
    display: flex;
    align-items: center;
}

.cursor-blink {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--noble-gold);
    margin-left: 4px;
}

.visual-grid {
    height: 60vh;
    aspect-ratio: auto;
}

@media (max-width: 767px) {

    /* 3-Column Grid for Mobile */
    .visual-grid {
        grid-template-columns: repeat(3, 1fr);
        width: 92%;
        gap: 10px;
    }

    .layer-1 {
        display: none;
    }

    .layer-2>.grid-item:nth-child(odd) {
        grid-column: 1;
    }

    .layer-2>.grid-item:nth-child(even) {
        grid-column: 3;
    }

    .layer-3>.grid-item {
        grid-column: 2;
    }

    .scaler-cell {
        grid-column: 2;
    }

    /* Industries Spacing Fix */
    .industries-section {
        padding-top: 2rem;
    }

    .ind-header {
        margin-bottom: 0;
    }
}

/* ===========================
   MARQUEE
   =========================== */
.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    /* Removed padding to allow flex centering to work */
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center;  <-- We might need this, or just let justify-content do it if column */
}

.marquee-track {
    display: flex;
    width: fit-content;
    animation: marquee-scroll 40s linear infinite;
    gap: 4rem;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.33%);
    }
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.marquee-item-text {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--noble-cream);
}

.marquee-item-diamond {
    color: var(--noble-gold);
    font-size: 1.5rem;
}

.marquee-fade-left,
.marquee-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
    pointer-events: none;
}

.marquee-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--noble-purple), transparent);
}

.marquee-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--noble-purple), transparent);
}

/* ===========================
   LUSION CURSOR STYLES
   =========================== */

/* 1. Hide the default mouse cursor on Desktop */
@media (min-width: 1024px) {

    *,
    *::before,
    *::after {
        cursor: none !important;
        /* Force hide default cursor */
    }
}

/* 2. Style the custom cursor (Wrapper - Position Only) */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    /* Wrapper has no size */
    height: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    /* Controlled by JS */
}

/* Visuals managed by pseudo-element to avoid GSAP transform conflict */
#custom-cursor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    /* Center on cursor position */

    width: 12px;
    height: 12px;
    background-color: var(--noble-gold);
    border-radius: 50%;

    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, clip-path 0.3s ease, border-radius 0.3s ease;
}

/* 3. Hover State (The "Bubble" effect) */
body.hovering #custom-cursor::before {
    width: 50px;
    height: 50px;
    background-color: var(--noble-gold);
    opacity: 0.5;
}

/* Hide on mobile */
@media (max-width: 1023px) {
    #custom-cursor {
        display: none;
    }
}

/* ===========================
   NOBLE STAR CURSOR (SERVICE SECTION)
   =========================== */

/* Spin Animation - Applied to pseudo-element */
@keyframes cursorSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Star Shape & Behavior */
#custom-cursor.cursor-star::before {
    /* 1. Shape: 4-Point Star */
    clip-path: polygon(50.4% 80.9%, 17.9% 100.0%, 26.8% 63.5%, 0.0% 37.6%, 35.4% 36.0%, 49.2% 0.0%, 64.3% 36.3%, 100.0% 37.4%, 72.8% 62.1%, 81.2% 99.1%);

    /* 2. Size & Color */
    width: 45px;
    height: 45px;
    background-color: var(--noble-gold);
    opacity: 1;
    /* Solid gold */
    border-radius: 0;

    /* 3. Animation */
    animation: cursorSpin 4s linear infinite;
}

/* ===========================
   RESPONSIVE — DESKTOP (NAV)
   =========================== */
@media (min-width: 992px) {
    .nav-links {
        display: flex;
        gap: 2rem;
    }

    .mobile-menu-btn {
        display: none;
    }
}

@media (max-width: 1024px) {

    .mobile-hidden,
    #visual-scroll-wrap .visual-grid .mobile-hidden {
        display: none !important;
    }

    .visual-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        grid-auto-flow: dense !important;
        /* Ensure items fill around the center */
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        gap: 12px !important;
        padding-inline: 1rem;
    }

    /* Reset grid placement for auto-flow */
    .grid-layer {
        display: contents !important;
    }

    .grid-layer>.grid-item {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        height: 100% !important;
        /* opacity: 1 !important; Removed to allow GSAP animation */
        visibility: visible !important;
    }

    /* Force Scaler Cell to Center (Row 2, Col 2) */
    .scaler-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        z-index: 20;
    }

    .scaler-img-wrap {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: visible !important;
        /* Allow image to burst out */
    }

    .main-scaler-img {
        position: absolute;
        /* Changed from !important to allow GSAP */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        /* Default, GSAP will override to 100vw */
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }
}

/* ===========================
   ACCESSIBILITY
   =========================== */
:focus-visible {
    outline: 2px solid var(--noble-gold);
    outline-offset: 4px;
}

.service-col-header:focus-visible,
.team-card:focus-visible {
    outline: 2px solid var(--noble-gold);
    outline-offset: -2px;
    /* Inset for cards */
}

/* ===========================
   UTILITY CLASSES (ACCESSIBILITY)
   =========================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===========================
   FOOTER ADDITIONS
   =========================== */
.footer-careers-link {
    margin-bottom: 2rem;
}

.footer-careers-link a {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--noble-gold);
    transition: color 0.3s, opacity 0.3s;
    font-weight: 500;
}

.footer-careers-link a:hover {
    color: var(--noble-cream);
    opacity: 0.8;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.footer-social-link {
    color: rgba(252, 246, 242, 0.6);
    transition: color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social-link:hover {
    color: var(--noble-gold);
    transform: translateY(-2px);
}

.footer-social-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ===========================
   CAREERS PAGE
   =========================== */

/* --- Careers Nav Override --- */
/* On careers page, nav links should be visible immediately (homepage hides them for hero animation) */
.page-template-page-careers .nav-link,
.page-template-page-careers .mobile-menu-btn {
    opacity: 1;
}

/* --- Hero --- */
.careers-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--noble-purple);
    overflow: hidden;
    padding: 8rem 0 6rem;
}

.careers-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to bottom left, rgba(201, 162, 106, 0.05), transparent);
    z-index: 0;
}

.careers-hero-inner {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 56rem;
    padding: 0 1.5rem;
}

.careers-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--noble-gold);
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-weight: 400;
}

.careers-hero-title {
    font-family: var(--font-serif);
    color: var(--noble-cream);
    margin-bottom: 2rem;
    font-weight: 400;
    line-height: 1.1;
}

.careers-reveal-main {
    display: block;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--noble-cream);
}

.careers-reveal-sub {
    display: block;
    font-size: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--noble-gold);
    font-style: italic;
    margin-top: 0.75rem;
}

.careers-reveal-desc {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    color: rgba(252, 246, 242, 0.7);
    letter-spacing: 0.03em;
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    line-height: 1.75;
}

.careers-reveal-btn {
    opacity: 1;
}

/* --- Listings Section --- */
.careers-listings {
    padding: 6rem 0;
    background: var(--noble-cream);
}

.careers-listings-header {
    text-align: center;
    margin-bottom: 4rem;
}

.careers-section-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--noble-gold);
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 400;
}

.careers-section-heading {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 400;
    color: var(--noble-purple);
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
}

.careers-divider {
    width: 6rem;
    height: 1px;
    background: var(--noble-gold);
    margin: 0 auto;
    opacity: 0.5;
}

/* --- Job Cards --- */
.job-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 56rem;
    margin: 0 auto;
}

.job-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(201, 162, 106, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.job-card:first-child {
    border-top: 1px solid rgba(201, 162, 106, 0.2);
}

.job-card:hover {
    padding-left: 1.5rem;
}

.job-card-content {
    flex: 1;
}

.job-card-title {
    font-family: var(--font-serif);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 400;
    color: var(--noble-purple);
    margin-bottom: 0.75rem;
    transition: color 0.3s;
}

.job-card:hover .job-card-title {
    color: var(--noble-gold);
}

.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.job-badge {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--noble-purple);
    border: 1px solid rgba(201, 162, 106, 0.4);
    padding: 0.35rem 0.85rem;
    font-weight: 500;
}

.job-card-desc {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #666;
    line-height: 1.75;
    font-weight: 300;
}

.job-card-action {
    flex-shrink: 0;
}

.job-card-action .btn {
    min-width: auto;
    padding: 0.9rem 2rem;
    font-size: 0.7rem;
}

/* --- Empty State --- */
.careers-empty {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto;
    padding: 4rem 0;
}

.careers-empty p {
    font-family: var(--font-sans);
    color: #666;
    font-size: 1.125rem;
    line-height: 1.75;
}

/* --- CTA Section --- */
.careers-cta {
    padding: 6rem 0;
    background: var(--noble-cream);
}

.careers-cta-inner {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.careers-cta-heading {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    color: var(--noble-purple);
    letter-spacing: -0.05em;
    margin-bottom: 1.5rem;
}

.careers-cta-text {
    font-family: var(--font-sans);
    color: var(--noble-purple);
    opacity: 0.8;
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    font-weight: 300;
}

/* --- Responsive: Tablet+ --- */
@media (min-width: 768px) {
    .careers-hero {
        min-height: 65vh;
        padding: 10rem 0 8rem;
    }

    .job-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 2.5rem 1.5rem;
    }

    .job-card:hover {
        padding-left: 2.5rem;
    }

    .footer-social-link svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* --- Responsive: Desktop --- */
@media (min-width: 1024px) {
    .careers-hero {
        min-height: 70vh;
    }

    .careers-listings {
        padding: 8rem 0;
    }

    .careers-cta {
        padding: 8rem 0;
    }
}

/* =========================================
   VIDEO SECTION
   ========================================= */

.video-section {
    background: var(--noble-cream);
    overflow: hidden;
}

.video-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.video-heading {
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    color: var(--noble-gold);
    letter-spacing: -0.05em;
    margin: 0;
}

.video-frame {
    position: relative;
    width: 85%;
    max-width: 960px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--noble-gold, #C9A26A);
    opacity: 0;
    transform: scale(0.92);
    /* Animated in via JS */
}

.video-frame video {
    display: block;
    width: 100%;
    height: auto;
    background: #1a1030;
}

/* YouTube Responsive Embed */
.video-youtube-wrap {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
}

.video-youtube-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Custom Play Overlay */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 16, 48, 0.35);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 2;
}

.video-play-overlay:hover {
    background: rgba(26, 16, 48, 0.5);
}

.video-play-overlay:hover .video-play-icon {
    transform: scale(1.12);
    box-shadow: 0 0 30px rgba(201, 162, 106, 0.4);
}

.video-play-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--noble-purple, #2D1A4E);
    color: var(--noble-gold, #C9A26A);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.video-play-icon svg {
    margin-left: 3px;
    /* Optical centering for play triangle */
}

.video-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .video-frame {
        width: 95%;
        border-radius: 8px;
    }

    .video-play-icon {
        width: 56px;
        height: 56px;
    }

    .video-play-icon svg {
        width: 24px;
        height: 24px;
    }
}