/* --- 1. FONTS & RESET --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Source+Sans+Pro:wght@400;700;900&display=swap');
/* --- 1. FONTS & RESET --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:wght@400;500;600;700;800&family=Source+Sans+Pro:wght@400;700;900&display=swap');

:root {
    --bg-color: #FAFAF9;
    /* Warm Off-White */
    --text-main: #1A1A1A;
    --text-muted: #666666;
    --accent: #000000;
    --line-separator: 2px solid #000000;
    --font-main: 'Montserrat', sans-serif;
    --font-header: 'Source Sans Pro', sans-serif;
    --spacing-section: 120px;
}

html {
    scroll-behavior: smooth;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;

    /* Smoothly transition background, text color, AND border colors */
    transition: background-color 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        color 0.6s ease,
        border-color 0.6s ease;
}

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

ul {
    list-style: none;
}

main.page-content {
    padding-top: 120px;
    min-height: calc(100vh - 400px);
}

main {
    padding-top: 0;
}

/* --- 2. HEADER & MOBILE MENU --- */
header {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.nav-container {
    /* Liquid Glass Effect */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    border-left: 1px solid rgba(255, 255, 255, 0.7);

    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);

    width: 90%;
    max-width: 1200px;
    border-radius: 50px;
    padding: 10px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.logo {
    display: flex;
    align-items: center;
    z-index: 1002;
}

.header-logo-img {
    height: 40px;
    width: auto;
}

/* Desktop Navigation */
.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.6;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    /* Hidden on desktop */
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1002;
}

.menu-toggle span {
    width: 25px;
    height: 2px;
    background-color: var(--text-main);
    transition: all 0.3s ease;
}

/* --- 3. SHARED COMPONENTS --- */
section {
    border-bottom: var(--line-separator);
    width: 100%;
}

.btn-explore {
    display: inline-block;
    padding: 15px 40px;
    background-color: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    font-weight: 600;
    margin-top: 30px;
}

.btn-explore:hover {
    transform: translateY(-3px);
    background-color: var(--accent);
    color: white;
}

/* Page Titles */
.page-title {
    text-align: center;
    margin-top: 80px;
    position: relative;
}

.page-title h1 {
    font-family: var(--font-header);
    font-size: 4rem;
    font-weight: 700;
    color: var(--text-main);
    display: inline-block;
    position: relative;
    padding-bottom: 20px;
}

.page-title h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background-color: var(--accent);
}

/* --- 4. HOME SECTIONS --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
}

/* --- FIXED: Increased width to 1000px so title fits on 2 lines --- */
.hero-content {
    max-width: 1000px;
    text-align: left;
    width: 100%;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: -1.5px;
}

/* About */
.about {
    min-height: 100vh;
    padding: var(--spacing-section) 10%;
    position: relative;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.qm-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

.qm-bg span {
    position: absolute;
    display: inline-block;
    font-family: serif;
    font-weight: bold;
    opacity: 0.07;

    /* Variable for rotation so JS doesn't overwrite it */
    --r: 0deg;
    transform: rotate(var(--r));

    /* THE MAGIC SAUCE: */
    /* cubic-bezier(0.25, 1, 0.5, 1) creates a "springy" drift effect */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    will-change: transform;
    pointer-events: none;
    /* Allows mouse to pass through to text */
}

.qm-bg span:nth-child(1) {
    top: 10%;
    left: 5%;
    --r: -15deg;
    font-size: 8rem;
}

.qm-bg span:nth-child(2) {
    top: 60%;
    right: 10%;
    --r: 20deg;
    font-size: 12rem;
}

.qm-bg span:nth-child(3) {
    bottom: 10%;
    left: 15%;
    --r: 10deg;
    font-size: 8rem;
}

.qm-bg span:nth-child(4) {
    top: 20%;
    right: 25%;
    --r: -5deg;
    font-size: 6rem;
}

.qm-bg span:nth-child(5) {
    top: 50%;
    left: 40%;
    --r: 15deg;
    font-size: 7rem;
    opacity: 0.05;
}

.qm-bg span:nth-child(6) {
    bottom: 20%;
    right: 40%;
    --r: -10deg;
    font-size: 5rem;
}

.qm-bg span:nth-child(7) {
    top: 5%;
    left: 50%;
    --r: 5deg;
    font-size: 5rem;
    opacity: 0.04;
}

.qm-bg span:nth-child(8) {
    bottom: 15%;
    right: 25%;
    --r: -25deg;
    font-size: 9rem;
    opacity: 0.06;
}

.qm-bg span:nth-child(9) {
    top: 35%;
    left: -2%;
    --r: 30deg;
    font-size: 6rem;
}

.qm-bg span:nth-child(10) {
    top: 30%;
    right: 2%;
    --r: -15deg;
    font-size: 7rem;
}

.qm-bg span:nth-child(11) {
    top: 75%;
    right: 15%;
    --r: 10deg;
    font-size: 4rem;
}

.qm-bg span:nth-child(12) {
    top: 85%;
    left: 30%;
    --r: -20deg;
    font-size: 6rem;
    opacity: 0.05;
}

.about-content-wrapper {
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-main);
    letter-spacing: -1px;
}

.about p {
    font-size: 1.6rem;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.8;
}

/* Services Carousel */
.services {
    padding: var(--spacing-section) 0;
    text-align: center;
    overflow: hidden;
}

.services h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 60px;
    letter-spacing: -1px;
    color: var(--text-main);
}

.carousel {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    margin-top: 20px;
}

.carousel-item {
    position: absolute;
    width: 320px;
    height: 220px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    opacity: 0;
    border: 1px solid rgba(0, 0, 0, 0.03);
    text-align: center;
    padding: 20px;
}

.service-text-main {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 900;
    font-size: 5rem;
    color: #000;
    line-height: 1;
    margin-bottom: 0px;
}

.service-text-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
}

.carousel-item.active {
    opacity: 1;
    transform: translateX(0) scale(1.1);
    z-index: 3;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.carousel-item.left {
    opacity: 0.5;
    transform: translateX(-350px) scale(0.9);
    z-index: 2;
}

.carousel-item.right {
    opacity: 0.5;
    transform: translateX(350px) scale(0.9);
    z-index: 2;
}

.carousel-item:not(.active):not(.left):not(.right) {
    opacity: 0;
    z-index: 1;
    transform: scale(0.8);
}

/* Contact Form */
.contact {
    padding: var(--spacing-section) 0;
    width: 100%;
}

.contact-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5%;
    text-align: center;
}

.contact h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: -1px;
    font-weight: 700;
}

.contact-subtext {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 50px;
    line-height: 1.5;
}

form {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: left;
}

.form-group {
    position: relative;
}

input,
textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-size: 1.1rem;
    font-family: var(--font-main);
    outline: none;
    transition: border-color 0.3s;
}

input:focus,
textarea:focus {
    border-bottom-color: var(--accent);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.submit-btn {
    align-self: center;
    background: transparent;
    border: 1px solid var(--accent);
    padding: 15px 50px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
    transition: all 0.3s;
    width: auto;
    font-family: var(--font-main);
    font-weight: 600;
}

.submit-btn:hover {
    background: var(--accent);
    color: white;
}

/* --- 5. LIST & DETAIL PAGE STYLES --- */

/* --- A. CONTAINERS --- */

/* 1. Services Page: Restricted to 1200px width */
.services-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 5%;
}

/* 2. Works Page: FULL WIDTH (so lines touch the screen edges) */
.work-page-container {
    width: 100%;
    max-width: 100%;
    padding: 60px 0;
    margin: 0;
}

/* Center the content INSIDE the full-width work container */
.work-page-container .page-title,
.work-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 3. Detail Pages (UI/UX, Illustration, etc.) */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    /* FIX: 160px top padding pushes content below the fixed header */
    padding: 160px 5% 60px 5%;
}


/* --- B. SERVICES LIST STYLES (Restored) --- */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-item {
    display: flex;
    padding: 60px 30px;
    border-bottom: 1px solid #000;
    align-items: center;
    /* Vertically center icon and text */
    cursor: pointer;
    border-radius: 0px;
    /* removed curves for Services */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
    color: var(--text-main);
    margin: 0 -30px;
    /* Expands hover area slightly */
}

.service-item:hover {
    background-color: #000000;
    color: #FFFFFF;
    border-bottom-color: transparent;
    transform: scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.service-item:last-child {
    border-bottom: none;
}

/* The Left Side: Icon + Title */
.service-header {
    flex: 0 0 350px;
    /* Fixed width for alignment */
    display: flex;
    align-items: center;
    gap: 30px;
}

/* The Icon Box */
.service-icon {
    width: 70px;
    height: 70px;
    background-color: #EAEAEA;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-header);
    font-weight: 900;
    font-size: 2rem;
    color: #000000;
    transition: all 0.4s ease;
}

/* Icon turns white on hover */
.service-item:hover .service-icon {
    background-color: #FFFFFF;
    color: #000000;
}

.service-header h2 {
    font-family: var(--font-header);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: inherit;
}

/* The Right Side: Description */
.service-description {
    flex: 1;
    padding-left: 50px;
}

.service-description p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    color: inherit;
    /* Turns white on hover */
}


/* --- C. WORK LIST STYLES (New Logic) --- */
.work-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* No gap between full-width lines */
}

.work-item {
    display: flex;
    padding: 80px 40px;

    /* Variable border color for Theme Engine */
    border-bottom: 1px solid var(--accent);

    align-items: center;
    cursor: pointer;

    /* FIXED: Straight lines */
    border-radius: 0;
    margin: 0;
    /* No negative margin */

    transition: all 0.4s ease;
    text-decoration: none;
    color: var(--text-main);
}

.work-item:hover {
    padding-left: 60px;
    /* Slide effect */
    border-bottom-color: transparent;
    /* Important: NO background-color here so the Body Theme shows through */
}

.work-item h2 {
    font-size: 3.5rem;
    font-weight: 400;
    margin: 0;
    font-family: var(--font-header);
    transition: color 0.4s ease;
}


/* --- D. THEME ENGINE (Sparkle & Signmo) --- */

/* SPARKLE PRO THEME */
body.sparkle-theme {
    background-color: #F3EFE0 !important;
    color: #4A332A !important;
}

/* Apply Sparkle Colors to Elements */
body.sparkle-theme a,
body.sparkle-theme h1,
body.sparkle-theme h2,
body.sparkle-theme .service-icon,
body.sparkle-theme .work-item,
body.sparkle-theme .page-title h1 {
    color: #4A332A !important;
    border-color: #4A332A !important;
    font-family: 'DM Serif Display', serif !important;
}

/* SIGNMO THEME */
body.signmo-theme {
    background-color: #FF6B4A !important;
    color: #FFFFFF !important;
}

/* Apply Signmo Colors to Elements */
body.signmo-theme a,
body.signmo-theme h1,
body.signmo-theme h2,
body.signmo-theme .service-icon,
body.signmo-theme .work-item,
body.signmo-theme .page-title h1 {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
}

/* =========================
   PREMIUM SUCCESS MODAL
========================= */

.success-modal{
    position:fixed;
    inset:0;
    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transition:0.4s ease;
}

.success-modal.active{
    opacity:1;
    visibility:visible;
}

.success-backdrop{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.65);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.success-box{
    position:relative;

    width:90%;
    max-width:430px;

    padding:55px 40px;

    border-radius:32px;

    background:rgba(20,20,20,0.72);

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 25px 80px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);

    overflow:hidden;

    text-align:center;

    transform:translateY(30px) scale(.94);

    transition:0.45s cubic-bezier(.16,1,.3,1);

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
}

.success-modal.active .success-box{
    transform:translateY(0) scale(1);
}

.success-glow{
    position:absolute;

    width:300px;
    height:300px;

    background:radial-gradient(circle,
    rgba(255,255,255,0.18),
    transparent 70%);

    top:-120px;
    left:50%;

    transform:translateX(-50%);
}

.checkmark-wrapper{
    position:relative;

    width:100px;
    height:100px;

    margin:0 auto 28px;
}

.checkmark-circle{
    width:100px;
    height:100px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.03)
    );

    border:1px solid rgba(255,255,255,0.08);

    animation:pulse 2s infinite;
}

.checkmark{
    position:absolute;

    inset:0;

    width:100px;
    height:100px;

    stroke:white;
    stroke-width:3;
    fill:none;

    stroke-linecap:round;
    stroke-linejoin:round;

    stroke-dasharray:48;
    stroke-dashoffset:48;

    animation:drawCheck 0.8s ease forwards;
    animation-delay:.25s;
}

.success-box h2{
    color:white;

    font-size:2rem;
    font-weight:600;

    margin-bottom:14px;

    letter-spacing:-0.03em;
}

.success-box p{
    color:rgba(255,255,255,0.7);

    font-size:1rem;
    line-height:1.7;

    margin-bottom:32px;
}

.close-modal-btn{
    border:none;

    padding:14px 28px;

    border-radius:16px;

    background:white;

    color:black;

    font-weight:600;

    cursor:pointer;

    transition:0.3s ease;
}

.close-modal-btn:hover{
    transform:translateY(-2px) scale(1.03);
}

@keyframes drawCheck{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes pulse{
    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.06);
        opacity:.8;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

/* MOBILE */

@media(max-width:600px){

    .success-box{
        padding:45px 28px;
        border-radius:28px;
    }

    .success-box h2{
        font-size:1.7rem;
    }

}

/* =========================================
   ADD TO BOTTOM OF STYLE.CSS
   Sparkle Pro Case Study - New Sections
========================================= */

/* --- Global Resets & Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    /* Use a modern sans-serif font */
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* For smoother fonts on Mac */
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* --- Case Study Page Styles --- */

.cs-section {
    padding: 120px 0 80px 0;
    /* Top padding to clear the fixed header */
    background-color: #ffffff;
}

.cs-container {
    width: 90%;
    max-width: 800px;
    /* Narrower width for better readability */
    margin: 0 auto;
}

/* Title with underline */
.cs-title-wrapper {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.cs-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    display: inline-block;
    padding-bottom: 15px;
}

/* Custom underline */
.cs-title-wrapper::after {
    content: '';
    display: block;
    width: 60px;
    /* Width of the underline */
    height: 3px;
    background-color: #333;
    margin: 0 auto;
    /* Center the underline */
}

/* Content Blocks */
.cs-block {
    margin-bottom: 40px;
}

.cs-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.cs-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.7;
}

.cs-list {
    list-style: none;
    /* Remove default bullet points */
    padding: 0;
}

.cs-list li {
    font-size: 1rem;
    color: #333;
    line-height: 1.7;
    margin-bottom: 5px;
}

/* Bottom Divider */
.cs-divider {
    border: 0;
    height: 1px;
    background-color: #ddd;
    /* Light gray divider */
    margin-top: 60px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .cs-section {
        padding-top: 100px;
    }

    .cs-title {
        font-size: 2rem;
    }

    .cs-label {
        font-size: 1rem;
    }
}

/* ============================================================
   SPS PAGE — COMPLETE CSS BLOCK
   Replace everything between "--- SPS Page Styles ---" and
   "--- Signmo Page: Hero Section ---" in your style.css
   with this entire block.
   ============================================================ */

   section {
    position: relative;
}

.sps-grid-item img,
.sps-poster-item img,
.sps-logo-img-col img {
    border-radius: 0px;
}

/* --- Shared Container --- */
.sps-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* ============================================================
   SECTION 1: HERO — Two-column layout matching reference
   ============================================================ */

.sps-hero-section {
    padding: 110px 0 70px 0;
    display: flex;
    align-items: center;
    min-height: 82vh;
    background: #ffffff;
}

.sps-hero-centered {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.25fr);
    align-items: center;
    gap: 70px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.sps-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.sps-hero-copy h1 {
    font-size: 3.2rem;
    font-weight: 700;
    color: #000000;
    line-height: 0.98;
    letter-spacing: -1.8px;
    margin: 0 0 26px 0;
}

.sps-hero-img-wrap {
    width: 100%;
    max-width: 460px;
    margin: 0 0 0 auto;
}

.sps-hero-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none;
}

.sps-hero-copy p {
    font-size: 0.82rem;
    color: #333333;
    line-height: 1.18;
    max-width: 340px;
    margin: 0 0 18px 0;
}

.sps-website-link {
    display: inline-block;
    font-size: 0.82rem;
    color: #333333;
    margin-bottom: 18px;
}

.sps-website-link:hover {
    color: #000;
}

.sps-btn-pill {
    display: inline-block;
    padding: 9px 14px;
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.78rem;
    transition: all 0.3s ease;
}

.sps-btn-pill:hover {
    background-color: #333;
    color: #ffffff;
    border-color: #333;
}

/* Responsive — hero */
@media (max-width: 968px) {
    .sps-hero-section {
        padding: 130px 0 70px 0;
    }

    .sps-hero-centered {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 760px;
    }

    .sps-hero-copy {
        text-align: center;
        align-items: center;
    }

    .sps-hero-copy h1 {
        font-size: 3rem;
    }

    .sps-hero-copy p {
        max-width: 600px;
    }

    .sps-hero-img-wrap {
        max-width: 520px;
        margin: 0 auto;
    }
}


/* ============================================================
   SECTION 2: BUSINESS CARDS — Solid beige background
   ============================================================ */

.sps-cards-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

/* Solid beige block from the midpoint to the bottom.
   This is a hard split, not a colour gradient. */
.sps-cards-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    background: #efe4cf;
    z-index: 0;
    pointer-events: none;
}

.sps-cards-section .sps-container {
    position: relative;
    z-index: 1;
}

.sps-split-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

/* Left Column */
.sps-col-left {
    width: 48%;
    padding-right: 20px;
}

.sps-col-left .sps-display-text {
    text-align: left;
    margin-bottom: 20px;
}

/* Right Column */
.sps-col-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    margin-top: 80px;
}

.sps-desc-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    max-width: 350px;
    align-self: flex-start;
    margin-bottom: 10px;
}

.sps-col-right .sps-display-text {
    text-align: left;
    margin-bottom: 30px;
}

/* Display Typography */
.sps-display-text {
    font-size: 7rem;
    font-weight: 700;
    color: #000;
    line-height: 0.88;
    margin: 0;
    letter-spacing: -4px;
}

.sps-col-right .sps-display-text {
    margin-top: -10px;
}

.sps-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive — cards */
@media (max-width: 968px) {
    .sps-split-layout {
        flex-direction: column;
    }

    .sps-col-left,
    .sps-col-right {
        width: 100%;
        margin-top: 0;
        padding-right: 0;
    }

    .sps-col-right {
        margin-top: 60px;
    }

    .sps-desc-text {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .sps-display-text {
        font-size: 4rem;
    }

    .sps-cards-section {
        background: #ffffff;
        padding: 60px 0;
    }

    .sps-cards-section::after {
        top: 50%;
    }
}


/* ============================================================
   SECTION 3: POSTERS — reference layout
   ============================================================ */

.sps-posters-section {
    min-height: 620px;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        to right,
        #faefd9 0%,
        #faefd9 38%,
        #fcfcfc 38%,
        #fcfcfc 100%
    );
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
}

.sps-posters-section .sps-container {
    width: 82%;
    max-width: none;
    height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sps-posters-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    width: 100%;
    margin: 0;
    padding-top: 62px;
}

.sps-posters-title-col,
.sps-posters-desc-col {
    width: auto;
    padding: 0;
}

.sps-posters-title-col {
    display: flex;
    justify-content: flex-start;
}

.sps-posters-desc-col {
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
}

.sps-posters-title-col .sps-display-text {
    font-size: 6.4rem;
    line-height: 0.9;
    letter-spacing: -3px;
    margin: 0;
}

.sps-posters-desc-col .sps-desc-text {
    margin: 28px 0 0;
    max-width: 360px;
    font-size: 0.98rem;
    line-height: 1.08;
    color: #222;
}

.sps-posters-grid {
    display: flex;
    justify-content: center;
    gap: 52px;
    width: 100%;
    margin-top: 34px;
    padding: 0;
}

.sps-poster-item {
    flex: 0 0 46%;
    max-width: 470px;
}

.sps-poster-item img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none;
}


/* ============================================================
   SECTION 4: LOGO PRINTS — reference layout
   ============================================================ */

.sps-logo-section {
    min-height: 620px;
    padding: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        #faefd9 0%,
        #faefd9 45%,
        #fcfcfc 45%,
        #fcfcfc 100%
    );
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
}

.sps-logo-layout {
    width: 88%;
    max-width: none;
    height: 620px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.sps-logo-text-col {
    flex: 0 0 40%;
    padding-left: 0;
    max-width: none;
    z-index: 2;
}

.sps-logo-text-col .sps-display-text {
    font-size: 6.2rem;
    line-height: 0.84;
    letter-spacing: -4px;
    margin: 0;
}

.logo-word,
.prints-word {
    margin: 0;
    position: relative;
    z-index: 2;
}

.prints-word {
    margin-top: 8px;
}

.logo-desc {
    max-width: 390px;
    font-size: 0.98rem;
    line-height: 1.08;
    color: #333;
    margin-top: 28px;
}

.sps-logo-img-col {
    flex: 0 0 54%;
    display: flex;
    justify-content: flex-end;
}

.sps-logo-img-col img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    box-shadow: none;
}


/* ============================================================
   SHARED GRID — Sections 5 & 6
   ============================================================ */

.sps-grid-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.sps-grid-item {
    flex: 1;
    max-width: none;
    min-width: 0;
}

.sps-grid-item img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: none;
}


/* ============================================================
   SECTION 5: OBJECTS — reference layout
   ============================================================ */

.sps-objects-section {
    min-height: 620px;
    padding: 110px 0 110px;
    background: linear-gradient(
        to bottom,
        #fcfcfc 0%,
        #fcfcfc 56%,
        #faefd9 56%,
        #faefd9 100%
    );
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
}

.sps-objects-section .sps-container {
    width: 94%;
    max-width: none;
}


/* ============================================================
   SECTION 6: VEHICLES — reference layout
   ============================================================ */

.sps-vehicles-section {
    min-height: 620px;
    padding: 130px 0 120px;
    background: linear-gradient(
        to bottom,
        #faefd9 0%,
        #faefd9 39.5%,
        #fcfcfc 39.5%,
        #fcfcfc 100%
    );
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
}

.sps-vehicles-section .sps-container {
    width: 94%;
    max-width: none;
}


/* ============================================================
   Responsive — reference sections
   ============================================================ */

@media (max-width: 968px) {
    .sps-posters-section,
    .sps-logo-section,
    .sps-objects-section,
    .sps-vehicles-section {
        min-height: auto;
    }

    .sps-posters-section {
        background: linear-gradient(to bottom, #faefd9 0 30%, #fcfcfc 30% 100%);
        padding: 70px 0 80px;
    }

    .sps-posters-section .sps-container,
    .sps-logo-layout {
        width: 90%;
        height: auto;
        max-width: 720px;
    }

    .sps-posters-header {
        grid-template-columns: 1fr;
        padding-top: 0;
    }

    .sps-posters-desc-col {
        padding-left: 0;
    }

    .sps-posters-desc-col .sps-desc-text {
        margin-top: 18px;
        max-width: 100%;
    }

    .sps-posters-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 35px;
    }

    .sps-poster-item {
        flex: none;
        width: 100%;
        max-width: 600px;
    }

    .sps-logo-section {
        background: linear-gradient(to bottom, #faefd9 0 35%, #fcfcfc 35% 100%);
        padding: 70px 0 80px;
    }

    .sps-logo-layout {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 45px;
    }

    .sps-logo-text-col,
    .sps-logo-img-col {
        width: 100%;
        flex: none;
    }

    .sps-logo-text-col .sps-display-text {
        font-size: 4rem;
    }

    .sps-logo-img-col {
        justify-content: center;
    }

    .sps-objects-section {
        background: linear-gradient(to bottom, #fcfcfc 0 56%, #faefd9 56% 100%);
        padding: 70px 0 80px;
    }

    .sps-vehicles-section {
        background: linear-gradient(to bottom, #faefd9 0 30%, #fcfcfc 30% 100%);
        padding: 70px 0 80px;
    }

    .sps-grid-row {
        flex-direction: column;
        gap: 30px;
    }

    .sps-grid-item {
        width: 100%;
    }
}


/* ============================================================
   SECTION 7: DISCOVERY — unchanged
   ============================================================ */

.sps-discovery-section {
    background-color: #ffffff;
    padding: 120px 0 150px 0;
    text-align: center;
}

.sps-discovery-header h2 {
    font-size: 3.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 80px;
    letter-spacing: -1px;
}

.sps-discovery-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.sps-circle-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
    background-color: #FFF6E5;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.signmo-circle-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
    background-color: #FCEFE8;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.sps-circle-item img {
    width: 140px;
    height: auto;
    display: block;
}

.signmo-circle-item img {
    width: 140px;
    height: auto;
    display: block;
}

.sps-circle-item:hover {
    transform: translateY(-5px);
    box-shadow: -15px 15px 30px rgba(0, 0, 0, 0.1);
}

.signmo-circle-item:hover {
    transform: translateY(-5px);
    box-shadow: -15px 15px 30px rgba(0, 0, 0, 0.1);
}

/* Responsive — discovery */
@media (max-width: 968px) {
    .sps-discovery-header h2 {
        font-size: 2.5rem;
        padding: 0 20px;
    }

    .sps-discovery-grid {
        gap: 30px;
    }

    .sps-circle-item {
        width: 180px;
        height: 180px;
    }

    .sps-circle-item img {
        width: 100px;
    }
}

/* --- Signmo Page: Hero Section --- */

.signmo-hero-section {
    /* Top padding accounts for the fixed header (160px) */
    padding: 160px 0 80px 0;
    display: flex;
    align-items: center;
    min-height: 80vh;
    background-color: #ffffff;
}

.signmo-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.signmo-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* Left Column (Text) */
.signmo-text-col {
    flex: 1;
    max-width: 500px;
    /* Limits text width for readability */
}

.signmo-text-col h1 {
    font-size: 4rem;
    /* Big bold title */
    font-weight: 700;
    color: #000;
    margin-bottom: 30px;
    line-height: 1.1;
}

.signmo-text-col p {
    font-size: 1rem;
    color: #444;
    margin-bottom: 25px;
    line-height: 1.6;
}

.signmo-website-link {
    display: inline-block;
    font-size: 1rem;
    color: #444;
    margin-bottom: 40px;
    text-decoration: none;
}

.signmo-website-link:hover {
    color: #000;
}

/* Pill Button (Same style as Sparkle Pro) */
.signmo-btn-pill {
    display: inline-block;
    padding: 12px 35px;
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.signmo-btn-pill:hover {
    background-color: #333;
    color: #ffffff;
}

/* Right Column (Image) */
.signmo-image-col {
    flex: 1.2;
    /* Give image slightly more space */
    display: flex;
    justify-content: flex-end;
}

.signmo-image-col img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: Add a shadow if the image itself doesn't have one */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
}

/* --- Responsive Design --- */
@media (max-width: 968px) {
    .signmo-content-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .signmo-text-col {
        max-width: 100%;
        padding: 0 20px;
    }

    .signmo-text-col h1 {
        font-size: 3rem;
    }

    .signmo-image-col {
        justify-content: center;
        width: 100%;
    }
}

/* ===============================
   PREMIUM SHOWCASE SECTION
=============================== */

/* =========================================
   PREMIUM SIGNMO SHOWCASE
========================================= */

.signmo-showcase-section {
    padding: 120px 0;
    background: #f3f3f3;
    position: relative;
    overflow: visible;
}

/* =========================================
   MAIN WRAPPER
========================================= */

.signmo-showcase-wrapper {
    position: relative;

    width: 82%;
    max-width: 1350px;

    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 90px 80px;

    z-index: 5;
}

/* =========================================
   OUTLINE FRAME
   THIS IS THE BIG BACK CARD
========================================= */

.signmo-showcase-wrapper::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    border: 0px solid rgba(70,70,70,0.7);

    border-radius: 38px;

    background: rgba(255,255,255,0.18);

    top: 0;
    left: 0;

    z-index: 2;
}

/* =========================================
   ORANGE CARD
========================================= */

.signmo-showcase-wrapper::after {
    content: "";

    position: absolute;

    width: calc(100% + 160px);
    height: calc(100% - 120px);

    border-radius: 32px;

    background:
    linear-gradient(
        135deg,
        rgba(248,140,104,0.95),
        rgba(244,173,142,0.95)
    );

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;

    box-shadow:
        0 30px 60px rgba(244,140,100,0.18);
}

/* =========================================
   PEACH BACK CARD
========================================= */

.signmo-showcase-section::before {
    content: "";

    position: absolute;

    width: 88%;
    max-width: 1500px;

    height: 70%;

    border-radius: 28px;

    background:
    linear-gradient(
        135deg,
        rgba(255,205,185,0.9),
        rgba(255,224,210,0.9)
    );

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;
}

/* =========================================
   MAIN DARK CARD
========================================= */

.signmo-showcase-wrapper img {

    position: relative;

    width: 100%;

    max-width: 1080px;

    display: block;

    border-radius: 28px;

    z-index: 6;

    transform: scale(1.02);

    box-shadow:
        0 40px 80px rgba(0,0,0,0.22),
        0 15px 40px rgba(0,0,0,0.14);
}

.signmo-showcase-wrapper {
    transform: translateY(-8px);
}

/* ===============================
   BACK LAYER 1
=============================== */

.signmo-showcase-wrapper::before {
    content: "";

    position: absolute;

    width: calc(100% + 120px);
    height: calc(100% - 100px);

    background:
        linear-gradient(
            135deg,
            rgba(255,143,107,0.85),
            rgba(255,177,138,0.92)
        );

    border-radius: 28px;

    z-index: -1;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    filter: blur(0px);

    box-shadow:
        0 25px 60px rgba(255,130,90,0.18);
}

/* ===============================
   BACK LAYER 2
=============================== */

.signmo-showcase-wrapper::after {
    content: "";

    position: absolute;

    width: calc(100% + 240px);
    height: calc(100% - 180px);

    background:
        linear-gradient(
            135deg,
            rgba(255,188,164,0.85),
            rgba(255,213,194,0.92)
        );

    border-radius: 24px;

    z-index: -2;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    box-shadow:
        0 20px 50px rgba(255,170,140,0.14);
}

/* ===============================
   FAKE AMBIENT GLOW
=============================== */

.signmo-showcase-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    background: radial-gradient(
        circle,
        rgba(255,180,150,0.18) 0%,
        rgba(255,180,150,0) 70%
    );

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;

    pointer-events: none;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 1024px) {

    .signmo-showcase-wrapper {
        width: 82%;
        padding: 45px;
    }

    .signmo-showcase-wrapper::before {
        width: calc(100% + 80px);
        height: calc(100% - 60px);
    }

    .signmo-showcase-wrapper::after {
        width: calc(100% + 140px);
        height: calc(100% - 120px);
    }
}

@media (max-width: 768px) {

    .signmo-showcase-section {
        padding: 80px 0;
    }

    .signmo-showcase-wrapper {
        width: 90%;
        padding: 20px;
        border-radius: 22px;
    }

    .signmo-showcase-wrapper img {
        border-radius: 14px;
    }

    .signmo-showcase-wrapper::before {
        width: calc(100% + 30px);
        height: calc(100% - 20px);
        border-radius: 18px;
    }

    .signmo-showcase-wrapper::after {
        width: calc(100% + 60px);
        height: calc(100% - 40px);
        border-radius: 16px;
    }
}

/* --- Section 3: Signmo Cards Styles --- */

/* =========================================
   SIGNMO LIFESTYLE SECTION
========================================= */

.signmo-lifestyle-section {

    background: #efefef;

    padding: 80px 0;

    overflow: hidden;
}

/* =========================================
   MAIN PEACH CONTAINER
========================================= */

.signmo-lifestyle-container {

    width: 94%;

    max-width: 1700px;

    margin: 0 auto;

    background: #f7a588;

    border-radius: 22px;

    padding: 20px;

    position: relative;
}

/* =========================================
   GRID LAYOUT
========================================= */

.signmo-lifestyle-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;
}

/* =========================================
   IMAGE CARDS
========================================= */

.signmo-lifestyle-card {

    position: relative;

    overflow: hidden;

    border-radius: 14px;

    background: #ddd;

    aspect-ratio: 1.42 / 1;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.06);
}

/* =========================================
   IMAGES
========================================= */

.signmo-lifestyle-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .signmo-lifestyle-grid {

        grid-template-columns: 1fr;

    }

    .signmo-lifestyle-container {

        padding: 14px;

    }

    .signmo-lifestyle-card {

        border-radius: 12px;
    }
}

/* =========================================
   GRADIENT GALLERY SECTION
========================================= */

.signmo-gradient-gallery-section {

    background: #efefef;

    padding: 120px 0;

    overflow: hidden;
}

/* =========================================
   MAIN WRAPPER
========================================= */

.gradient-gallery-wrapper {

    position: relative;

    width: 88%;

    max-width: 1400px;

    margin: 0 auto;

    border-radius: 34px;

    padding: 42px;

    overflow: hidden;

    isolation: isolate;
}

/* =========================================
   BACK PEACH LAYER
========================================= */

.gradient-gallery-wrapper::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 34px;

    background:
    linear-gradient(
        135deg,
        rgba(255,212,199,0.95),
        rgba(255,184,157,0.95)
    );

    z-index: -2;
}

/* =========================================
   MAIN RADIAL / CONIC GLOW
========================================= */

.gradient-gallery-wrapper::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 34px;

    background:
    conic-gradient(
        from 210deg at 50% 50%,
        rgba(255,215,205,0.9),
        rgba(255,170,140,0.95),
        rgba(255,200,185,0.92),
        rgba(255,150,120,0.95),
        rgba(255,215,205,0.9)
    );

    opacity: 0.85;

    z-index: -1;

    filter: blur(0px);
}

/* =========================================
   CENTER GLOW
========================================= */

.gradient-gallery-wrapper .gradient-gallery-grid::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.65) 0%,
        rgba(255,255,255,0) 72%
    );

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;

    pointer-events: none;
}

/* =========================================
   GRID
========================================= */

.gradient-gallery-grid {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px;

    z-index: 2;
}

/* =========================================
   IMAGE CARDS
========================================= */

.gradient-gallery-card {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: rgba(255,255,255,0.18);

    backdrop-filter: blur(8px);

    aspect-ratio: 1.35 / 1;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.08);
}

/* =========================================
   IMAGES
========================================= */

.gradient-gallery-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;
}

/* =========================================
   HOVER
========================================= */

.gradient-gallery-card:hover img {

    transform: scale(1.04);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .gradient-gallery-wrapper {

        padding: 18px;

        border-radius: 24px;
    }

    .gradient-gallery-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .gradient-gallery-card {

        border-radius: 16px;
    }
}

/* --- Section 5: Signmo Collage Styles --- */

.signmo-collage-section {
    /* Gradient Split: 45% White (Top), 55% Peach (Bottom) */
    /* This connects seamlessly with the previous section (which ended in White) */
    background: linear-gradient(to bottom, #ffffff 55%, #FFB996 45%);
    padding: 100px 0;
}

.signmo-collage-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.signmo-collage-wrapper img {
    width: 100%;
    max-width: 800px;
    /* Large display width */
    height: auto;
    display: block;
    /* Optional: If your image file doesn't have the rounded corners baked in, 
       uncomment the line below to create the card shape via CSS */
    /* border-radius: 30px; */

    /* Strong shadow to lift the dark card off the background */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .signmo-collage-section {
        padding: 60px 0;
        /* Adjust gradient split slightly for mobile if needed */
        background: linear-gradient(to bottom, #ffffff 40%, #FFB996 40%);
    }
}

/* --- Section 6: Signmo Screens Styles --- */

.signmo-screens-section {
    /* Gradient Split: 50% Peach (Top), 50% White (Bottom) */
    /* This starts with Peach to connect with the previous section, creating a solid band */
    background: linear-gradient(to bottom, #FFB996 50%, #ffffff 50%);
    padding: 100px 0;
}

.signmo-screens-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    /* Space between the two devices */
    align-items: center;
}

.signmo-screen-item {
    flex: 1;
    max-width: 650px;
    /* Allow these to be fairly large */
}

.signmo-screen-item img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: Shadows for depth */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* ===============================
   New Gradient Stack Section
   =============================== */

.signmo-gradient-stack-section {
    padding: 120px 0;
    background-color: #ffffff;
    overflow: visible;
}

/* The container for the two stacked blocks */
.gradient-stack-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 600px;
    /* Increased height to accommodate images */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Shared styles for both blocks */
.gradient-block-back,
.gradient-block-front {
    position: absolute;
    border-radius: 50px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Back Gradient Block --- */
.gradient-block-back {
    width: 100%;
    z-index: 1;
    opacity: 0.9;

    background: conic-gradient(from 0deg at 50% 50%,
            #FD876D 32.4deg,
            #FDAD9C 140.4deg,
            rgba(252, 182, 173, 0.57) 212.4deg,
            #FF905E 334.8deg,
            #FD876D 360deg);
}

/* --- Front Gradient Block --- */
.gradient-block-front {
    width: 92%;
    z-index: 2;
    box-shadow: 0 30px 80px rgba(253, 135, 109, 0.3);

    /* Added to center the grid container */
    display: flex;
    justify-content: center;
    align-items: center;

    background: conic-gradient(from 0deg at 50% 50%,
            #FEA377 46.8deg,
            #FCDBD5 133.2deg,
            #FDAB9A 324deg,
            #FEA377 360deg);
}

/* ===============================
   Image Grid Layout (Gradient Section)
   =============================== */

.gradient-content-grid {
    display: grid;
    /* Defines a 3-column layout: Mobile (1fr) | Mobile (1fr) | Desktop (1.6fr) */
    grid-template-columns: 1fr 1fr 1.6fr;
    /* Defines 2 equal rows */
    grid-template-rows: 1fr 1fr;
    gap: 25px;
    /* Spacing between images */

    width: 88%;
    height: 88%;

    /* Center the grid inside the container */
    margin: 0 auto;
}

/* General Image Styles */
.gradient-content-grid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensures the full screenshot is visible */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Adds depth */
}

/* --- Positioning the 4 Images --- */

/* 1. Left Mobile Screen (Pink) - Spans 2 rows (Full Height) */
.grid-img-left {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* 2. Middle Mobile Screen (Orange) - Spans 2 rows (Full Height) */
.grid-img-middle {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* 3. Top Right Desktop Screen */
.grid-img-top-right {
    grid-column: 3;
    grid-row: 1;
}

/* 4. Bottom Right Desktop Screen */
.grid-img-bottom-right {
    grid-column: 3;
    grid-row: 2;
}

/* --- Responsive Adjustments (Mobile) --- */
@media (max-width: 768px) {
    .signmo-gradient-stack-section {
        padding: 60px 0;
    }

    .gradient-stack-wrapper {
        height: auto;
        display: block;
    }

    /* Hide the back gradient on mobile to reduce clutter */
    .gradient-block-back {
        display: none;
    }

    .gradient-block-front {
        position: relative;
        width: 100%;
        height: auto;
        padding: 40px 25px;
    }

    /* Change grid to a vertical stack on phone screens */
    .gradient-content-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 30px;
    }

    .gradient-content-grid img {
        height: auto;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
}

/* --- Creative Spotlight 404 Styles --- */

.error-spotlight-main {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #050505;
    /* Deep black/charcoal */
    overflow: hidden;
    cursor: none;
    /* Hides the default mouse cursor for immersion */
}

/* Common container for both layers to ensure perfect overlap */
.error-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Lets clicks pass through to the real elements */
}

/* --- Layer 1: The Dim Layer (The "Ghost") --- */
.dim-layer {
    z-index: 1;
    pointer-events: auto;
    /* Allow clicking the dim button if mouse is far away */
}

.dim-layer .huge-404 {
    color: #1a1a1a;
    /* Very dark gray, barely visible against black */
    text-shadow: none;
}

.dim-layer .error-msg {
    color: #1a1a1a;
}

.dim-layer .error-btn-dim {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 35px;
    color: #333;
    border: 1px solid #333;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Ensures custom cursor doesn't confuse interaction */
}

/* --- Layer 2: The Bright Layer (The "Flashlight") --- */
.bright-layer {
    z-index: 2;
    background-color: transparent;
    /* The magic starts here: Initially clipped to 0 until JS kicks in */
    clip-path: circle(0px at 50% 50%);
    /* Smooth transition for the circle size, instant for position */
    transition: clip-path 0.1s ease-out;
    pointer-events: auto;
    /* Allows clicking links inside the spotlight */
}

.bright-layer .huge-404 {
    color: #ffffff;
}

.bright-layer .error-msg {
    color: #ffffff;
}

.bright-layer .error-btn-bright {
    /* Use the same class logic but brighter colors */
    display: inline-block;
    margin-top: 30px;
    padding: 12px 35px;
    color: #000;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

/* --- Typography Shared Styles --- */
.error-content {
    text-align: center;
    padding: 0 20px;
}

.huge-404 {
    font-size: 15vw;
    /* Responsive huge size */
    font-weight: 900;
    line-height: 0.8;
    margin: 0;
    letter-spacing: -5px;
    font-family: 'Poppins', sans-serif;
}

.error-msg {
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 20px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
}

/* --- Custom Cursor Replacement (Optional Polish) --- */
/* Create a small white dot to guide the user since we hid the cursor */
.error-spotlight-main::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    transform: translate(-50%, -50%);
    /* We track this with JS as well for smooth movement */
    left: var(--cursor-x, 50%);
    top: var(--cursor-y, 50%);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .huge-404 {
        font-size: 25vw;
        /* Bigger relative to screen on mobile */
    }

    .error-msg {
        font-size: 1rem;
    }

    /* On mobile, standard mouse cursor is better */
    .error-spotlight-main {
        cursor: auto;
    }

    /* Make the spotlight fixed in center or larger on mobile so it's usable */
    .bright-layer {
        clip-path: circle(50% at 50% 50%) !important;
    }
}

.detail-section {
    padding: 150px 5%;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    /*FIX */
    border-bottom: var(--line-separator);
}

/* --- NEW FOOTER STYLES --- */
footer {
    background-color: #FAFAF9;
    /* Or #F9F9F9 matches your image background */
    /* Reduced side padding from 5% to 20px so it can go really wide */
    padding: 80px 20px;
    color: #1A1A1A;
    font-family: 'Montserrat', sans-serif;
}

.footer-container {
    /* CHANGED: Removed the 1200px limit. Now it fills the screen. */
    max-width: 100%;
    width: 95%;
    /* Keeps it safe from touching the very edges */
    margin: 0 auto;
}

/* Top Section: 4 Columns */
.footer-top {
    display: flex;
    justify-content: space-between;
    /* Spreads columns to far edges */
    text-align: center;
    margin-bottom: 80px;
}

.footer-column {
    flex: 1;
    padding: 0 10px;
}

/* Headings */
.footer-column h4 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    /* Regular weight looks closer to your image */
    font-size: 1.2rem;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
    color: var(--text-main);
}

/* Paragraphs and Links */
.footer-column p,
.footer-links a {
    font-size: 0.95rem;
    line-height: 2;
    /* Increased line height for better spacing */
    color: #333;
    margin: 0 0 10px 0;
    /* Added bottom margin for spacing between items */
}

/* Quick Links styling */
.footer-links a {
    display: block;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #000;
}

/* Bottom Section: Logo Image */
.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.footer-big-logo {
    /* Allows the logo to be as wide as the container if needed */
    width: 100%;
    max-width: 100%;
    /* Ensures it doesn't overflow */
    height: auto;
    display: block;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 50px;
    }

    .footer-column {
        padding: 0;
    }

    /* On mobile, you might want the logo smaller */
    .footer-big-logo {
        width: 100%;
    }
}

/* --- 7. RESPONSIVE / MOBILE OPTIMIZATION --- */
@media (max-width: 992px) {

    /* Detail Pages Tablet */
    .detail-section {
        padding: 100px 5%;
        min-height: auto;
    }

    .section-container,
    .section-container.reverse {
        flex-direction: column;
        text-align: center;
        gap: 60px;
    }

    .detail-section p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .big-icon-box {
        width: 250px;
        height: 250px;
        font-size: 6rem;
    }

    .service-item,
    .work-item {
        flex-direction: column;
        gap: 20px;
        padding: 40px 20px;
        margin: 0;
    }

    .service-header {
        flex: auto;
        width: 100%;
    }

    .service-description {
        padding-left: 0;
    }
}

@media (max-width: 768px) {

    /* Mobile Menu */
    .menu-toggle {
        display: flex;
        z-index: 1003;
    }

    .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: #FAFAF9;
        /* Solid BG so menu is visible */
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 40px 0;
        border-bottom: 2px solid #000;
        display: none;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        z-index: 1002;
    }

    .nav-links.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    /* Typography fixes */
    .hero h1 {
        font-size: 2.5rem;
    }

    .page-title h1 {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .about p,
    .detail-section p {
        font-size: 1.2rem;
    }

    /* Spacing */
    .detail-section,
    .about,
    .services,
    .contact {
        padding: 80px 5%;
    }

    /* Components */
    .carousel-item {
        width: 260px;
        height: 180px;
    }

    .service-text-main {
        font-size: 4rem;
    }

    .work-item h2 {
        font-size: 1.8rem;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        gap: 50px;
    }

    .footer-col {
        width: 100%;
    }

    .footer-brand {
        padding-right: 0;
        align-items: center;
        text-align: center;
    }

    .footer-logo-big {
        font-size: 6rem;
    }

    .footer-desc {
        max-width: 100%;
        text-align: center;
    }

    .footer-link {
        font-size: 1.5rem;
    }
}

/* =========================================
   BRAND IDENTITY HERO SECTION
========================================= */

#brand-identity-hero {
    padding-top: 100px !important;
    padding-bottom: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.bi-hero-section {
    width: 100%;
    padding: 60px 0;
    border-bottom: none;
}

.bi-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

/* Left Column - Text Content */
.bi-hero-left {
    flex: 1;
    max-width: 650px;
    padding-top: 20px;
}

.bi-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

.bi-hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.bi-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 50px 0;
    max-width: 90%;
}

/* Get a Quote Button */
.bi-hero-btn {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid #000;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    margin: -30px 0px 20px 0px;
}

.bi-hero-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Right Column - The "Bi" Image */
.bi-hero-right {
    flex-shrink: 0;
}

.bi-hero-image {
    width: 400px;
    height: 400px;
    display: block;
    object-fit: contain;
    margin-top: 50px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .bi-hero-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 60px;
    }

    .bi-hero-left {
        max-width: 100%;
        padding-top: 0;
    }

    .bi-hero-desc {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .bi-hero-image {
        width: 350px;
        height: 350px;
    }

    .bi-hero-title {
        font-size: 3.5rem;
    }

    .bi-hero-subtitle {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .bi-hero-title {
        font-size: 3rem;
    }

    .bi-hero-subtitle {
        font-size: 1.8rem;
    }

    .bi-hero-desc {
        font-size: 1rem;
    }

    .bi-hero-image {
        width: 300px;
        height: 300px;
    }
}

/* =========================================
   BRAND IDENTITY - VISION SECTION
========================================= */

.bi-vision-section {
    width: 100%;
    padding: 80px 0;
    border-top: 2px solid #000;
    border-bottom: none;
}

.bi-vision-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
}

/* Left Column - Quote Image */
.bi-vision-left {
    flex-shrink: 0;
}

.bi-vision-image {
    width: 450px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Right Column - Text Content */
.bi-vision-right {
    flex: 1;
    max-width: 650px;
}

.bi-vision-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    margin: 0 0 30px 0;
    letter-spacing: -1px;
}

.bi-vision-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 40px 0;
}

/* Get a Quote Button */
.bi-vision-btn {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid #000;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.bi-vision-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 992px) {
    .bi-vision-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 50px;
    }

    .bi-vision-image {
        width: 350px;
    }

    .bi-vision-right {
        max-width: 100%;
    }

    .bi-vision-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .bi-vision-section {
        padding: 60px 0;
    }

    .bi-vision-image {
        width: 300px;
    }

    .bi-vision-title {
        font-size: 2.2rem;
    }

    .bi-vision-desc {
        font-size: 1rem;
    }
}

/* =========================================
   BRAND IDENTITY - BUNDLE SECTION
========================================= */

.bi-bundle-section {
    width: 100%;
    padding: 100px 0;
    /* Adds the separator line from the previous section */
    border-top: 2px solid #000;
    border-bottom: none;
}

.bi-bundle-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Vertically centers the text with the image */
    gap: 80px;
}

/* Left Column - Text Content */
.bi-bundle-left {
    flex: 1;
    max-width: 600px;
}

.bi-bundle-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    /* Large size to match visual hierarchy */
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin: 0 0 30px 0;
    letter-spacing: -1px;
}

.bi-bundle-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 50px 0;
    max-width: 95%;
}

/* Button Styling (Consistent with previous sections) */
.bi-bundle-btn {
    display: inline-block;
    padding: 14px 60px;
    /* Wider padding to match the pill shape in image */
    border: 1px solid #000;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.bi-bundle-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Right Column - Image */
.bi-bundle-right {
    flex-shrink: 0;
}

.bi-bundle-image {
    width: 500px;
    /* Adjust based on your actual image size */
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 20px;
    /* Matches the rounded corners in your design image */
}

/* Responsive Design */
@media (max-width: 992px) {
    .bi-bundle-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 60px;
    }

    .bi-bundle-left {
        max-width: 100%;
    }

    .bi-bundle-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .bi-bundle-image {
        width: 100%;
        max-width: 450px;
    }

    .bi-bundle-title {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .bi-bundle-section {
        padding: 60px 0;
    }

    .bi-bundle-title {
        font-size: 2.5rem;
    }

    .bi-bundle-desc {
        font-size: 1rem;
    }

    .bi-bundle-image {
        max-width: 350px;
    }
}

/* =========================================
   PUBLICATION HERO SECTION
========================================= */

#publication-hero {
    padding-top: 100px !important;
    padding-bottom: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.pub-hero-section {
    width: 100%;
    padding: 60px 0;
    border-bottom: none;
}

.pub-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

/* Left Column - Text Content */
.pub-hero-left {
    flex: 1;
    max-width: 650px;
    padding-top: 20px;
}

.pub-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

.pub-hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0 0 40px 0;
    letter-spacing: -0.5px;
}

.pub-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: -30px 0 30px 0;
    max-width: 95%;
    /* Slightly wider to accommodate the longer text paragraph */
}

/* Get a Quote Button */
.pub-hero-btn {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid #000;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.pub-hero-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Right Column - The "Pb" Image */
.pub-hero-right {
    flex-shrink: 0;
}

.pub-hero-image {
    width: 400px;
    height: 400px;
    display: block;
    object-fit: contain;
    margin-top: 50px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .pub-hero-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 60px;
    }

    .pub-hero-left {
        max-width: 100%;
        padding-top: 0;
    }

    .pub-hero-desc {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .pub-hero-image {
        width: 350px;
        height: 350px;
    }

    .pub-hero-title {
        font-size: 3.5rem;
    }

    .pub-hero-subtitle {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .pub-hero-title {
        font-size: 3rem;
    }

    .pub-hero-subtitle {
        font-size: 1.8rem;
    }

    .pub-hero-desc {
        font-size: 1rem;
    }

    .pub-hero-image {
        width: 300px;
        height: 300px;
    }
}

/* =========================================
   PUBLICATION - COVER SECTION
========================================= */

.pub-cover-section {
    width: 100%;
    padding: 80px 0;
    /* Adds the border line separating this from the hero section */
    border-top: 2px solid #000;
    border-bottom: none;
}

.pub-cover-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
}

/* Left Column - Quote Image */
.pub-cover-left {
    flex-shrink: 0;
}

.pub-cover-image {
    width: 450px;
    /* Adjust based on your actual image aspect ratio */
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 20px;
    /* Matches the rounded corners in the design */
}

/* Right Column - Text Content */
.pub-cover-right {
    flex: 1;
    max-width: 650px;
}

.pub-cover-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    margin: 0 0 30px 0;
    letter-spacing: -1px;
}

.pub-cover-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 40px 0;
}

/* Button Styling */
.pub-cover-btn {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid #000;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.pub-cover-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 992px) {
    .pub-cover-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 50px;
    }

    .pub-cover-image {
        width: 350px;
    }

    .pub-cover-right {
        max-width: 100%;
    }

    .pub-cover-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .pub-cover-section {
        padding: 60px 0;
    }

    .pub-cover-image {
        width: 300px;
    }

    .pub-cover-title {
        font-size: 2.2rem;
    }

    .pub-cover-desc {
        font-size: 1rem;
    }
}

/* =========================================
   UI/UX HERO SECTION
========================================= */

#uiux-hero {
    padding-top: 100px !important;
    padding-bottom: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically centers the content */
    overflow-x: hidden;
}

.uiux-hero-section {
    width: 100%;
    padding: 60px 0;
    border-bottom: none;
}

.uiux-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

/* Left Column - Text Content */
.uiux-hero-left {
    flex: 1;
    max-width: 650px;
}

.uiux-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

.uiux-hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0 0 40px 0;
    letter-spacing: -0.5px;
}

.uiux-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin: 0 0 50px 0;
    max-width: 90%;
}

/* Get a Quote Button */
.uiux-hero-btn {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid #000;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.uiux-hero-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Right Column - The "Ux" Image */
.uiux-hero-right {
    flex-shrink: 0;
}

.uiux-hero-image {
    width: 400px;
    height: 400px;
    display: block;
    object-fit: contain;
    border-radius: 20px;
    margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .uiux-hero-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 60px;
    }

    .uiux-hero-left {
        max-width: 100%;
    }

    .uiux-hero-desc {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .uiux-hero-image {
        width: 350px;
        height: 350px;
    }

    .uiux-hero-title {
        font-size: 3.5rem;
    }

    .uiux-hero-subtitle {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .uiux-hero-title {
        font-size: 3rem;
    }

    .uiux-hero-subtitle {
        font-size: 1.8rem;
    }

    .uiux-hero-desc {
        font-size: 1rem;
    }

    .uiux-hero-image {
        width: 300px;
        height: 300px;
    }
}

/* =========================================
   ILLUSTRATION HERO SECTION
========================================= */

#illustration-hero {
    padding-top: 100px !important;
    padding-bottom: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically centers the content */
    overflow-x: hidden;
}

.ill-hero-section {
    width: 100%;
    padding: 60px 0;
    border-bottom: none;
}

.ill-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

/* Left Column - Text Content */
.ill-hero-left {
    flex: 1;
    max-width: 650px;
}

.ill-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

.ill-hero-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #1A1A1A;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.ill-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin: 0 0 40px 0;
    max-width: 90%;
}

/* Get a Quote Button */
.ill-hero-btn {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid #000;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.ill-hero-btn:hover {
    background-color: #000;
    color: #fff;
}

/* Right Column - The "Il" Image */
.ill-hero-right {
    flex-shrink: 0;
}

.ill-hero-image {
    width: 400px;
    height: 400px;
    display: block;
    object-fit: contain;
    border-radius: 20px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .ill-hero-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 60px;
    }

    .ill-hero-left {
        max-width: 100%;
    }

    .ill-hero-desc {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .ill-hero-image {
        width: 350px;
        height: 350px;
    }

    .ill-hero-title {
        font-size: 3.5rem;
    }

    .ill-hero-subtitle {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .ill-hero-title {
        font-size: 3rem;
    }

    .ill-hero-subtitle {
        font-size: 1.8rem;
    }

    .ill-hero-desc {
        font-size: 1rem;
    }

    .ill-hero-image {
        width: 300px;
        height: 300px;
    }
}

footer {
    border-top: 2px solid #000;
    /* This creates the line */
    padding-top: 20px;
    /* Adds some space between the line and the copyright text */
    margin-top: 0;
    /* Ensures there's no unwanted gap */
}

/* =========================================
   DESIGN INTERFACE (FIGMA/ADOBE) CONTACT STYLES
========================================= */

/* --- 1. Layout --- */
.design-interface-section {
    padding: 80px 0;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align top so text aligns with form top */
}

.interface-container {
    width: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

/* --- 2. Left Column: Text & Specs --- */
.interface-text-col {
    flex: 1;
    max-width: 450px;
    padding-top: 40px;
    /* Align visually with the form label */
}

.interface-title {
    font-family: var(--font-header);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
}

.interface-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 50px;
}

/* Design Specs List (Like a Property Panel) */
.design-specs-list {
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.design-specs-list li {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    font-family: var(--font-main);
    font-size: 0.95rem;
}

.spec-label {
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.spec-value {
    color: #000;
    font-weight: 600;
}

.spec-value.link:hover {
    color: #18A0FB;
    /* Figma Blue Hover */
    text-decoration: underline;
}

/* --- 3. Right Column: The Canvas --- */
.interface-canvas-col {
    flex: 1.2;
    position: relative;
    padding: 40px;
    /* Space for handles */
}

/* The Dot Grid Background */
.canvas-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    /* CSS Dot Grid Pattern */
    background-image: radial-gradient(#d1d1d1 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.6;
    border-radius: 10px;
    border: 1px dashed #ddd;
    /* Subtle canvas boundary */
}

/* --- 4. The "Selection" Frame (The Core Effect) --- */
.selection-frame-wrapper {
    background: #fff;
    position: relative;
    z-index: 2;

    /* THE SELECTION BORDER */
    border: 2px solid #18A0FB;
    /* This is the specific "Figma Blue" */
    /* Alternatively use #000 if you want strict monochrome */

    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    /* Soft lift */
    transition: all 0.3s ease;
}

/* Corner Handles (Little white squares) */
.handle {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #18A0FB;
    /* Match border color */
    position: absolute;
    z-index: 3;
}

.handle.tl {
    top: -6px;
    left: -6px;
}

.handle.tr {
    top: -6px;
    right: -6px;
}

.handle.bl {
    bottom: -6px;
    left: -6px;
}

.handle.br {
    bottom: -6px;
    right: -6px;
    cursor: nwse-resize;
}

/* Resizer cursor hint */

/* Labels */
.selection-label {
    position: absolute;
    top: -28px;
    left: -2px;
    background: #18A0FB;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.75rem;
    padding: 4px 10px;
    font-weight: 600;
    border-radius: 4px 4px 0 0;
}

.dimensions-tag {
    position: absolute;
    bottom: -30px;
    right: 0;
    color: #18A0FB;
    font-size: 0.75rem;
    font-family: monospace;
    font-weight: 600;
}

/* --- 5. Form Styling (Property Panel Look) --- */
.design-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Inputs mimic property fields (light gray bg) */
.design-form input,
.design-form textarea,
.design-form select {
    width: 100%;
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
    padding: 12px;
    border-radius: 4px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: #333;
    transition: all 0.2s;
}

.design-form input:focus,
.design-form textarea:focus,
.design-form select:focus {
    background: #fff;
    border-color: #18A0FB;
    /* Highlights blue on focus */
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 160, 251, 0.1);
}

.design-form textarea {
    min-height: 120px;
    resize: none;
}

/* Submit Button */
.design-submit-btn {
    margin-top: 10px;
    background: #000;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.design-submit-btn:hover {
    background: #18A0FB;
    /* Changes to Figma Blue on hover */
    transform: translateY(-2px);
}

/* --- 6. Fake Cursor --- */
.fake-cursor {
    position: absolute;
    bottom: 20px;
    right: -30px;
    pointer-events: none;
    /* Ignore clicks */
    animation: cursorFloat 4s infinite ease-in-out;
    z-index: 5;
    opacity: 0;
    /* Hidden by default, visible on hover */
    transition: opacity 0.3s;
}

/* Show cursor when hovering the form */
.selection-frame-wrapper:hover .fake-cursor {
    opacity: 1;
}

.cursor-name {
    background: #E61E4D;
    /* Figma "Partner" Color (Pink) */
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
    position: absolute;
    top: 15px;
    left: 10px;
}

@keyframes cursorFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-10px, -15px);
    }
}

/* --- 7. Responsive --- */
@media (max-width: 992px) {
    .interface-container {
        flex-direction: column;
        gap: 50px;
    }

    .interface-text-col {
        max-width: 100%;
        text-align: center;
    }

    .design-specs-list {
        text-align: left;
        /* Keep list aligned left */
    }

    .interface-canvas-col {
        padding: 20px 10px;
    }

    .fake-cursor {
        display: none;
        /* Hide on mobile */
    }
}

/* =========================================
   CUSTOM "YOU" CURSOR STYLES
========================================= */

/* 1. Hide default cursor inside the frame */
.selection-frame-wrapper {
    cursor: none !important;
    /* Forces default mouse to disappear */
}

/* Ensure inputs still show a text cursor if preferred, 
   OR keep 'none' to maintain the Figma vibe everywhere. 
   I recommend keeping 'none' for the full effect, 
   but ensuring the inputs are clickable. */
.design-form input,
.design-form textarea,
.design-form select,
.design-submit-btn {
    cursor: none !important;
}

/* 2. The Follower Element */
.custom-cursor-follower {
    position: fixed;
    /* Fixed allows it to follow screen coordinates easily */
    top: 0;
    left: 0;
    z-index: 9999;
    /* Always on top */
    pointer-events: none;
    /* CRITICAL: Allows you to click "through" the fake cursor */

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    /* Hidden by default until JS activates */
    opacity: 0;
    transform: translate(-100px, -100px);
    /* Start off-screen */
    transition: opacity 0.2s ease, transform 0.05s linear;
    /* Smooth movement */
}

/* The "You" Tag Box */
/* The "You" Tag Box - Positioned for the new sharp SVG */
/* The "You" Tag Box - Figma Style */
.cursor-tag {
    background-color: #E61E4D;
    /* Figma "Partner Pink" */
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    /* Slightly larger for readability */
    padding: 3px 8px;
    /* Balanced padding */
    border-radius: 6px;
    /* Smooth rounded corners */

    /* Precision Positioning */
    margin-top: -8px;
    /* Pulls tag up to hug the cursor */
    margin-left: 14px;
    /* Pushes tag right to clear the arrow tip */

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 9999;
}

/* Optional: Scale effect when clicking */
.custom-cursor-follower.clicking {
    transform: scale(0.9);
}
/* ============================================================
   BRANDING ESSENTIALS PAGE — CLEAN EDITORIAL LAYOUT
   Added as page-specific overrides so the rest of the website
   keeps its existing styling.
   ============================================================ */

.branding-essentials-page {
    background: #FAFAF9;
    color: #1A1A1A;
}

.branding-essentials-page main {
    padding-top: 0;
}

.be-page-heading {
    width: 100%;
    padding: 150px 5% 75px;
    border-bottom: none;
    background: #FAFAF9;
}

.be-page-heading-inner {
    width: min(1200px, 100%);
    margin: 0 auto;
    text-align: center;
}

.be-page-heading h1 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3.25rem, 6vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    color: #000;
}

.be-heading-line {
    width: 470px;
    max-width: 70%;
    height: 1px;
    background: #000;
    margin: 28px auto 0;
}

.be-detail-section {
    position: relative;
    width: 100%;
    min-height: 58vh;
    padding: 80px 5%;
    border-top: 1px solid #000;
    border-bottom: none;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.be-detail-section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36%;
    z-index: 0;
}

.be-detail-section-left::before {
    left: 0;
}

.be-detail-section-right::before {
    right: 0;
}

.be-section-inner {
    position: relative;
    z-index: 1;
    width: min(1200px, 100%);
    margin: 0 auto;
    display: flex;
}

.be-detail-section-left .be-section-inner {
    justify-content: flex-start;
}

.be-detail-section-right .be-section-inner {
    justify-content: flex-end;
}

.be-content {
    width: min(760px, 72%);
}

.be-detail-section-left .be-content {
    padding-left: 0;
}

.be-detail-section-right .be-content {
    padding-right: 0;
}

.be-content h2 {
    margin: 0 0 34px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3.2rem, 6vw, 5rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -2px;
    color: #000;
}

.be-content p {
    margin: 0;
    max-width: 720px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.08rem;
    line-height: 1.72;
    color: #333;
}

.be-btn-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 42px;
    padding: 13px 34px;
    border: 1px solid #000;
    border-radius: 999px;
    background: transparent;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.be-btn-quote:hover {
    background: #000;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .be-page-heading {
        padding-top: 125px;
    }

    .be-detail-section {
        min-height: auto;
        padding: 90px 5%;
    }

    .be-detail-section::before {
        width: 100%;
        height: 42%;
        top: 0;
        bottom: auto;
        left: 0 !important;
        right: auto !important;
    }

    .be-section-inner,
    .be-detail-section-left .be-section-inner,
    .be-detail-section-right .be-section-inner {
        justify-content: flex-start;
    }

    .be-content {
        width: 100%;
        max-width: 800px;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .be-page-heading {
        padding: 115px 5% 55px;
    }

    .be-page-heading h1 {
        letter-spacing: -1.2px;
    }

    .be-heading-line {
        margin-top: 22px;
        max-width: 85%;
    }

    .be-detail-section {
        padding: 75px 6%;
    }

    .be-content h2 {
        margin-bottom: 24px;
        letter-spacing: -1.5px;
    }

    .be-content p {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .be-btn-quote {
        margin-top: 32px;
    }
}