/**
 * IRORI Custom Theme - Main Design System
 */

:root {
    /* Colors - Wa-Modern Palette */
    --color-primary: #0F233A;
    /* Kachiiro (Deep Indigo) */
    --color-secondary: #F5381E;
    /* Shuiro (Cinnabar Red) */
    --color-text-main: #2B2B2B;
    /* Sumiiro (Ink Black) */
    --color-text-muted: #666666;
    --color-bg-light: #F7F6F2;
    /* Kinari (Washi White) */
    --color-white: #FFFFFF;
    --color-border: #D1CEC7;
    /* Sophisticated gray-beige border */

    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    --font-main: 'Noto Sans JP', sans-serif;
    --font-accent: 'Outfit', sans-serif;

    /* Spacing */
    --space-unit: 8px;
    --container-width: 1400px;
}

/* Reset & Basic Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: var(--color-white);
    overflow-x: hidden;
    /* Prevent horizontal scroll globally */
    width: 100%;
}

html {
    overflow-x: hidden;
    width: 100%;
}

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

li {
    list-style: none;
}

/* Layout */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 calc(var(--space-unit) * 3);
}

/* Typography Helpers */
.font-accent {
    font-family: var(--font-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.3;
}

/* Header: Modern 2025 Blending Design */
.site-header {
    background: transparent;
    border-bottom: none;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 10px 0;
}

/* Scrolled State: Glassmorphism Effect */
.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 5px 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    transition: height 0.4s;
}

.site-header.is-scrolled .header-inner {
    height: 60px;
}

/* Hero Section: Overlay with Header */
.hero-section {
    background-color: var(--color-bg-light);
    padding: calc(var(--space-unit) * 20) 0 calc(var(--space-unit) * 12);
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: 0;
    overflow: hidden;
}

.hero-content {
    animation: fadeUp 1s ease-out forwards;
}

.hero-slogan-area {
    animation: fadeUp 1s ease-out 0.3s forwards;
    opacity: 0;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Grid System */
.grid {
    display: grid;
    gap: calc(var(--space-unit) * 3);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Layout Grid for Content + Sidebar */
.site-content-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: calc(var(--space-unit) * 6);
    padding-top: calc(var(--space-unit) * 6);
    padding-bottom: calc(var(--space-unit) * 6);
}

@media (max-width: 900px) {
    .site-content-grid {
        grid-template-columns: 1fr;
    }
}

/* Single Post Specifics */
.single-post-article {
    background: var(--color-white);
}

.breadcrumb {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: calc(var(--space-unit) * 2);
}

.entry-header {
    margin-bottom: calc(var(--space-unit) * 4);
}

.entry-meta {
    margin-bottom: calc(var(--space-unit) * 1);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.entry-category {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
}

.entry-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.entry-thumbnail {
    margin-bottom: calc(var(--space-unit) * 4);
}

.entry-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Author Box */
.author-box {
    display: flex;
    align-items: center;
    background: var(--color-bg-light);
    padding: calc(var(--space-unit) * 3);
    border-radius: 8px;
    margin-bottom: calc(var(--space-unit) * 5);
}

.author-avatar {
    margin-right: calc(var(--space-unit) * 2);
}

.author-avatar img {
    border-radius: 50%;
}

.author-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.author-name {
    font-size: 1.1rem;
    margin: 2px 0;
}

.author-description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Entry Content Typography */
.entry-content h2 {
    font-size: 1.8rem;
    border-left: 5px solid var(--color-primary);
    padding-left: 15px;
    margin: 40px 0 20px;
}

.entry-content h3 {
    font-size: 1.4rem;
    margin: 30px 0 15px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

/* Sidebar Widgets */
.widget {
    margin-bottom: calc(var(--space-unit) * 5);
}

.widget-title {
    font-size: 1.2rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.widget ul li {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.widget ul li a:hover {
    color: var(--color-secondary);
}

/* Archive Header */
.archive-header {
    background: var(--color-bg-light);
    padding: calc(var(--space-unit) * 6) 0;
    margin-bottom: calc(var(--space-unit) * 4);
    text-align: center;
}

.archive-title {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

/* Post Grid */
.post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--space-unit) * 3);
}

@media (max-width: 600px) {
    .post-grid {
        grid-template-columns: 1fr;
    }
}

/* Post Card Styling (Cocoon-like but cleaner) */
.post-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    background: var(--color-white);
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.post-card-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.post-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-category {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
}

.post-card-content {
    padding: calc(var(--space-unit) * 2);
}

.post-card-date {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.post-card-title {
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 700;
}

/* Pagination */
.pagination {
    margin-top: calc(var(--space-unit) * 6);
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination .page-numbers {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Special styling for those "Orange Dashed" cards if we want to match exactly */
.post-card-link {
    display: block;
    height: 100%;
}

/* --- Header & Navigation --- */

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.5px;
}

.logo-link:hover .site-title {
    opacity: 0.8;
}

.main-navigation {
    margin-left: auto;
    margin-right: calc(var(--space-unit) * 4);
}

.nav-menu-list {
    display: flex;
    align-items: center;
    height: 100%;
    gap: calc(var(--space-unit) * 3);
}

.nav-menu-list a {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 10px 0;
    height: 100%;
    position: relative;
    transition: var(--transition-smooth);
}

.nav-menu-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: var(--transition-smooth);
}

.nav-menu-list a:hover {
    color: var(--color-secondary);
}

.nav-menu-list a:hover::after {
    width: 100%;
}

/* --- Dropdown / sub-menu styles --- */
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children>a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.menu-item-has-children>a::before {
    content: '▼';
    font-size: 0.6rem;
    transition: transform 0.3s;
    order: 2;
}

@media (max-width: 1024px) {
    .menu-item-has-children>a::before {
        display: none;
        /* Hide arrow on mobile */
    }
}

.menu-item-has-children.is-expanded>a::before {
    transform: rotate(180deg);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1001;
    border: 1px solid var(--color-border);
}

/* Desktop Hover */
@media (min-width: 1025px) {
    .menu-item-has-children:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Click to Expand (Required by user) */
.menu-item-has-children.is-expanded>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li {
    margin: 0;
}

.sub-menu a {
    display: block;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-main);
    transition: background 0.3s;
}

.sub-menu a::after {
    display: none;
    /* Hide hover line for sub-menu */
}

.sub-menu a:hover {
    background: var(--color-bg-light);
    color: var(--color-secondary);
}

/* Mobile Responsive Dropdown - Now always visible as requested */
@media (max-width: 1024px) {
    .menu-item-has-children>a {
        justify-content: center;
        padding-bottom: 5px;
        /* Reduce padding to keep it tight */
    }

    .nav-menu-list a {
        height: auto;
        /* Reset desktop height */
        display: block;
        /* Use block for better vertical flow on mobile */
        text-align: center;
        padding: 5px 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-primary);
    }

    .sub-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        border: none;
        padding: 0;
        max-height: none;
        /* Always show */
        overflow: visible;
        transition: none;
    }

    .sub-menu li {
        margin: 5px 0;
    }

    .sub-menu a {
        font-size: 1.1rem;
        padding: 8px;
        text-align: center;
        opacity: 0.8;
    }
}

/* --- Buttons --- */

.btn {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white) !important;
}

.btn-secondary:hover {
    background-color: #d65d1d;
    /* Slightly darker orange */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(243, 112, 33, 0.3);
}

/* --- Mobile Toggle (Minimalist) --- */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    transition: 0.3s;
}

/* --- Mobile Menu Drawer --- */
.mobile-menu-cta {
    display: none;
}

@media (max-width: 1024px) {

    .header-cta {
        display: none;
    }

    .mobile-menu-cta {
        display: block;
        margin-top: 40px;
    }

    .menu-toggle {
        display: flex;
        z-index: 1001;
        position: relative;
    }

    .main-navigation {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100dvh;
        background: rgba(247, 246, 242, 0.98);
        /* Kinari with slight opacity */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1000;
        padding: 40px 20px;
        margin: 0;
        /* Override default margin */
    }

    .main-navigation.is-open {
        right: 0;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    }

    .nav-menu-list {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 100%;
        height: auto;
        /* Reset desktop height */
    }

    .nav-menu-list li {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .main-navigation.is-open .nav-menu-list li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger delay for menu items */
    .main-navigation.is-open .nav-menu-list li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .main-navigation.is-open .nav-menu-list li:nth-child(2) {
        transition-delay: 0.15s;
    }

    .main-navigation.is-open .nav-menu-list li:nth-child(3) {
        transition-delay: 0.2s;
    }

    .main-navigation.is-open .nav-menu-list li:nth-child(4) {
        transition-delay: 0.25s;
    }

    .main-navigation.is-open .nav-menu-list li:nth-child(5) {
        transition-delay: 0.3s;
    }

    .nav-menu-list a {
        font-size: 1.25rem;
        font-weight: 700;
        padding: 10px;
        color: var(--color-primary);
    }
}

/* Hamburger Animation */
.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Visibility Helpers */
.d-none-mobile {
    display: block;
}

@media (max-width: 1024px) {
    .d-none-mobile {
        display: none;
    }
}

/* Logo Scaling */
.site-logo {
    max-height: 50px;
    width: auto;
    display: block;
}

/* --- Footer --- */

.site-footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: calc(var(--space-unit) * 8) 0 calc(var(--space-unit) * 4);
    margin-top: calc(var(--space-unit) * 10);
}

.footer-inner {
    display: flex;
    flex-direction: column;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: calc(var(--space-unit) * 4);
    padding-bottom: calc(var(--space-unit) * 6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-branding {
    flex: 1;
    min-width: 250px;
}

.footer-logo {
    max-height: 40px;
    width: auto;
    margin-bottom: 15px;
}

.footer-tagline {
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer-navigation ul {
    display: flex;
    gap: 20px;
}

.footer-navigation a {
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer-navigation a:hover {
    opacity: 1;
    color: var(--color-secondary);
}

.footer-social {
    display: flex;
    align-items: center;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.footer-bottom {
    padding-top: calc(var(--space-unit) * 4);
    text-align: center;
}

.copyright {
    font-size: 0.75rem;
    opacity: 0.5;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-navigation ul {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* --- Footer CTA --- */


.footer-cta-section {
    background-color: var(--color-bg-light);
    padding: calc(var(--space-unit) * 10) 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.footer-cta-title {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: calc(var(--space-unit) * 2);
    line-height: 1.3;
}

.footer-cta-text {
    margin-bottom: calc(var(--space-unit) * 4);
    color: var(--color-text-main);
    opacity: 0.9;
}

.btn-large {
    padding: 16px 40px;
    font-size: 1.1rem;
}

/* --- Footer Branding Refinements --- */

.footer-main {
    padding-top: calc(var(--space-unit) * 6);
}

.footer-site-logo {
    margin-bottom: 20px;
}

.site-logo-footer {
    max-height: 60px;
    filter: brightness(0) invert(1);
    /* Force to white if needed, but let's be careful */
}

/* If the logo has color, maybe we don't want to invert it. 
   But on dark kachiiro, white text is better. 
   Let's create a class for white version or use filter for now. */
.site-logo-footer {
    filter: brightness(0) invert(1);
}

.footer-company-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.operated-by {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
}

.footer-company-logo {
    max-height: 25px;
    transition: opacity 0.3s;
}

.footer-company-logo:hover {
    opacity: 1;
}

.d-mobile {
    display: none;
}

@media (max-width: 600px) {
    .d-mobile {
        display: block;
    }

    .footer-cta-title {
        font-size: 1.5rem;
    }
}


.hero-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: calc(var(--space-unit) * 8);
    align-items: center;
}

.en-main {
    display: block;
    font-size: 6rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 30px;
    text-transform: uppercase;
}

.en-main .first-letter {
    color: var(--color-secondary);
}

.jp-sub {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
}

.highlight-box {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 2px 12px;
    display: inline-block;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white) !important;
}

.btn-secondary-outline {
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary) !important;
    background: transparent;
    transition: all 0.3s;
}

.btn-secondary-outline:hover {
    background: var(--color-secondary);
    color: var(--color-white) !important;
}

/* --- Hero Visual: En-Circle Connection Animation --- */

.hero-visual-area {
    position: relative;
    padding: calc(var(--space-unit) * 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.en-circle-container {
    position: relative;
    width: 650px;
    height: 650px;
    margin-bottom: 40px;
}

.en-center-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.en-center-logo {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(15, 35, 58, 0.2));
}

.en-label {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 10px;
}

.en-orbit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotateOrbit 30s linear infinite;
}

.en-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 210px;
    transform-origin: center center;
}

.en-card {
    background: var(--color-white);
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    transition: transform 0.3s;
}

.en-card:hover {
    transform: scale(1.1) !important;
    z-index: 20;
    border-color: var(--color-secondary);
}

.en-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
}

.card-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
}

/* Positioning orbit items + Initial Counter-rotation to keep them upright */
.item-1 {
    transform: translate(-50%, -50%) rotate(0deg) translateY(-260px);
}

.item-1 .en-card {
    transform: rotate(0deg);
}

.item-2 {
    transform: translate(-50%, -50%) rotate(90deg) translateY(-260px);
}

.item-2 .en-card {
    transform: rotate(-90deg);
}

.item-3 {
    transform: translate(-50%, -50%) rotate(180deg) translateY(-260px);
}

.item-3 .en-card {
    transform: rotate(-180deg);
}

.item-4 {
    transform: translate(-50%, -50%) rotate(270deg) translateY(-260px);
}

.item-4 .en-card {
    transform: rotate(-270deg);
}

@keyframes rotateOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animations to keep cards upright while orbiting */
.item-1 .en-card {
    animation: counterRotate1 30s linear infinite;
}

.item-2 .en-card {
    animation: counterRotate2 30s linear infinite;
}

.item-3 .en-card {
    animation: counterRotate3 30s linear infinite;
}

.item-4 .en-card {
    animation: counterRotate4 30s linear infinite;
}

@keyframes counterRotate1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes counterRotate2 {
    from {
        transform: rotate(-90deg);
    }

    to {
        transform: rotate(-450deg);
    }
}

@keyframes counterRotate3 {
    from {
        transform: rotate(-180deg);
    }

    to {
        transform: rotate(-540deg);
    }
}

@keyframes counterRotate4 {
    from {
        transform: rotate(-270deg);
    }

    to {
        transform: rotate(-630deg);
    }
}

.en-card:hover {
    transform: scale(1.1) !important;
    /* Keep scale on hover but maintain uprightness */
    z-index: 20;
    border-color: var(--color-secondary);
}

/* --- Common Section Styles --- */
.section-padding {
    padding: calc(var(--space-unit) * 10) 0;
}

.bg-pattern {
    background-color: var(--color-white);
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 20px 20px;
}

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

.section-title {
    margin-bottom: calc(var(--space-unit) * 8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.section-title .en-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: 0.1em;
    font-family: var(--font-accent);
}

.section-title .jp-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* --- Search Section (Tabbed UI) --- */
.category-tabs-wrapper {
    margin-bottom: 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    /* For scrollbar space */
}

.category-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    min-width: max-content;
    /* Ensure tabs don't wrap awkwardly */
}

.tab-btn {
    padding: 10px 24px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-main);
    border-radius: 50px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-smooth);
    font-family: var(--font-main);
}

.tab-btn:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.tab-btn.active {
    background: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

/* Post Grid Simple (for Search Results) */
.post-grid-simple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    min-height: 200px;
    /* Prevent layout jump */
}

.post-grid-simple .post-card {
    background: var(--color-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Tag Area (Secondary) */
.tag-area-title {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    border-bottom: none;
    padding-bottom: 0;
}

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

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-60 {
    margin-top: 60px;
}

@media (max-width: 1024px) {
    .post-grid-simple {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .category-tabs {
        justify-content: flex-start;
        /* Left align on mobile for scrolling */
        padding: 0 20px;
    }

    .category-tabs-wrapper {
        margin-left: -20px;
        /* Offset container padding */
        margin-right: -20px;
    }

    .post-grid-simple {
        grid-template-columns: 1fr;
    }
}

.slogan-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-main);
    text-align: center;
    font-weight: 500;
}

@media (max-width: 1440px) {
    .en-main {
        font-size: 5rem;
    }

    .en-circle-container {
        transform: scale(0.8);
        margin-right: -100px;
        /* Offset to keep visual balance */
    }
}

@media (max-width: 1200px) {
    .en-main {
        font-size: 4rem;
    }

    .en-circle-container {
        transform: scale(0.7);
        margin-right: -150px;
    }
}

@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .en-main {
        font-size: 4.5rem;
    }

    .jp-sub {
        font-size: 1.2rem;
    }

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

@media (max-width: 1024px) {
    .en-main {
        font-size: 4rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: 160px;
        padding-bottom: 40px;
        min-height: auto;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .en-main {
        font-size: 2.8rem;
        line-height: 1.1;
        margin-bottom: 20px;
        word-wrap: break-word;
    }

    .jp-sub {
        font-size: 1.2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
        margin-top: 30px;
    }

    .btn {
        width: 100%;
        max-width: 320px;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Proper scaling for the animation on mobile */
    .hero-visual-area {
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: visible;
        /* Let scale() handle overflow visually but keep centered */
    }

    .en-circle-container {
        width: 300px;
        height: 300px;
        transform: scale(0.9);
        margin: 40px 0;
    }

    .en-item {
        width: 120px;
    }

    .en-card img {
        height: 70px;
    }

    .item-1 {
        transform: translate(-50%, -50%) rotate(0deg) translateY(-120px);
    }

    .item-2 {
        transform: translate(-50%, -50%) rotate(90deg) translateY(-120px);
    }

    .item-3 {
        transform: translate(-50%, -50%) rotate(180deg) translateY(-120px);
    }

    .item-4 {
        transform: translate(-50%, -50%) rotate(270deg) translateY(-120px);
    }

    /* Adjust animations to the new radius */
    @keyframes counterRotate1 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(-360deg);
        }
    }

    @keyframes counterRotate2 {
        from {
            transform: rotate(-90deg);
        }

        to {
            transform: rotate(-450deg);
        }
    }

    @keyframes counterRotate3 {
        from {
            transform: rotate(-180deg);
        }

        to {
            transform: rotate(-540deg);
        }
    }

    @keyframes counterRotate4 {
        from {
            transform: rotate(-270deg);
        }

        to {
            transform: rotate(-630deg);
        }
    }
}

@media (max-width: 480px) {
    .en-main {
        font-size: 2.2rem;
    }

    .en-circle-container {
        transform: scale(0.85);
        width: 280px;
        height: 280px;
    }
}

/* --- New Posts Section (4 Column Grid) --- */
.news-section {
    background-color: var(--color-white);
}

.post-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .post-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .post-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .post-grid-4 {
        grid-template-columns: 1fr;
    }

    .news-section {
        padding-bottom: 20px;
    }
}

/* --- Middle CV Section (yoriaiSEO) --- */
.bg-light {
    background-color: var(--color-bg-light);
}

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

.cv-content {
    flex: 1;
}

.cv-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cv-image img {
    max-width: 100%;
    height: auto;
    border-radius: 32px;
    /* 背景に馴染ませるためのブレンドモード */
    mix-blend-mode: multiply;
    /* 周囲をふんわりと消すためのマスク */
    -webkit-mask-image: radial-gradient(circle, black 65%, transparent 100%);
    mask-image: radial-gradient(circle, black 65%, transparent 100%);
    /* さりげない浮遊感のための影 */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.03));
    transition: var(--transition-smooth);
}

.cv-image img:hover {
    transform: scale(1.03) rotate(1deg);
}

.cv-label {
    display: inline-block;
    background: var(--color-secondary);
    color: var(--color-white);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.cv-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
    margin-bottom: 25px;
    font-family: var(--font-accent);
}

.cv-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-main);
    margin-bottom: 30px;
}

.cv-features {
    list-style: none;
    margin-bottom: 35px;
    padding: 0;
}

.cv-features li {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cv-features .check-icon {
    color: var(--color-secondary);
    font-weight: 900;
    font-size: 1.2rem;
}

.btn-accent {
    background: var(--color-secondary);
    color: var(--color-white);
    border: 2px solid var(--color-secondary);
    padding: 16px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-accent:hover {
    background: #e4321b;
    border-color: #e4321b;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 56, 30, 0.3);
}

/* --- Logo Slider Section --- */
.logo-slider-section {
    padding: 60px 0;
    background-color: var(--color-white);
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.logo-slider-track {
    width: 100%;
    display: flex;
}

.logo-slider-list {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    animation: sliderScroll 60s linear infinite;
}

.logo-slider-img {
    height: 60px;
    /* Adjust based on original image proportion */
    width: auto;
    margin: 0 50px;
    display: block;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.logo-slider-img:hover {
    opacity: 1;
}

@keyframes sliderScroll {
    0% {
        transform: translateX(0);
    }

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

@media (max-width: 768px) {
    .logo-slider-section {
        padding: 40px 0;
    }

    .logo-slider-img {
        height: 40px;
        margin: 0 30px;
    }
}


.btn-large {
    min-width: 280px;
    justify-content: center;
}

/* Responsive CV Section */
@media (max-width: 900px) {
    .cv-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .cv-features {
        display: inline-block;
        text-align: left;
    }

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

    .cv-image img {
        max-width: 80%;
        margin: 0 auto;
    }
}

/* --- Case Study Section --- */
.case-study-section {
    background-color: var(--color-white);
}

.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.case-card {
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
    border: 1px solid var(--color-border);
}

.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-secondary);
}

.case-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.case-card-image {
    position: relative;
    padding-top: 60%;
    /* 3:2 Aspect Ratio */
    overflow: hidden;
    background: var(--color-bg-light);
}

.case-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.case-card:hover .case-card-image img {
    transform: scale(1.05);
}

.case-card-label {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--color-secondary);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    z-index: 10;
}

.case-card-body {
    padding: 25px;
}

.case-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 15px;
    color: var(--color-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-main);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.read-more .arrow-icon {
    font-style: normal;
    transition: transform 0.3s ease;
}

.case-card:hover .read-more .arrow-icon {
    transform: translateX(5px);
}

@media (max-width: 900px) {
    .case-study-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .case-study-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Page Template (1 Column) --- */
.site-content-narrow {
    max-width: 800px;
    /* Optimal readability width */
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(var(--space-unit) * 6);
    padding-bottom: calc(var(--space-unit) * 8);
}

.page-article {
    background: var(--color-white);
    padding: 0;
    /* Let content breathe, or add padding if card-style needed */
}

/* Ensure images within page content are responsive */
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Table styles for pages (company profile etc) */
.entry-content table {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.entry-content th {
    background: var(--color-bg-light);
    width: 30%;
    font-weight: 700;
    color: var(--color-primary);
}

/* --- 404 Page --- */
.error-404 {
    padding: 60px 0;
}

.error-404 .page-title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.error-404 p {
    font-size: 1.1rem;
    color: var(--color-text-main);
    margin-bottom: 30px;
}

/* --- Search Results --- */
.no-results .page-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    border-bottom: none;
    /* Reset if inherited */
}

.search-form {
    max-width: 500px;
    margin: 30px auto 0;
    display: flex;
    gap: 10px;
}

.search-field {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.search-submit {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
}

.search-submit:hover {
    opacity: 0.9;
}

/* --- Padding Fix for Fixed Header --- */
/* Add padding to the top of pages (excluding front-page) to prevent content overlap */
body:not(.home) .site-content-grid,
body:not(.home) .site-content-narrow,
body:not(.home) .archive-header {
    padding-top: 120px;
    /* Adjust based on header height (~80px) + visual spacing */
}

/* Ensure front-page hero starts correctly */
body.home .hero-section {
    padding-top: 0;
}

@media (max-width: 768px) {
    body.home .hero-section {
        padding-top: 160px;
    }
}

/* --- Entry Content Decorations (Lists & Others) --- */

/* Unordered List */
.entry-content ul {
    margin: 2rem 0;
    padding-left: 0;
    list-style: none;
    /* Remove default bullets */
}

.entry-content ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    line-height: 1.7;
}

.entry-content ul li::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--color-secondary);
    border-radius: 50%;
}

/* Ordered List */
.entry-content ol {
    margin: 2rem 0;
    padding-left: 0;
    counter-reset: ol-counter;
    list-style: none;
}

.entry-content ol li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.8rem;
    line-height: 1.7;
}

.entry-content ol li::before {
    counter-increment: ol-counter;
    content: counter(ol-counter) ".";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-secondary);
    font-weight: 700;
    font-family: var(--font-accent);

    /* Reset properties that might leak from ul styles */
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
}

/* Blockquote */
.entry-content blockquote {
    background: var(--color-bg-light);
    border-left: 5px solid var(--color-secondary);
    padding: 1.5rem 2rem;
    margin: 2.5rem 0;
    font-style: italic;
    color: var(--color-text-muted);
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Pre / Code */
.entry-content pre {
    background: #f4f4f4;
    padding: 1.5rem;
    overflow-x: auto;
    border-radius: 4px;
    margin: 2rem 0;
    font-family: monospace;
    font-size: 0.9em;
    border: 1px solid var(--color-border);
}

/* Inline Code */
.entry-content code {
    background: #f4f4f4;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
    border: 1px solid var(--color-border);
}

/* Bold Strong */
.entry-content strong,
.entry-content b {
    font-weight: 700;
    background: linear-gradient(transparent 70%, rgba(245, 56, 30, 0.2) 70%);
    /* Marker style with secondary color */
}

/* Mark */
.entry-content mark {
    background: #ffe066;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
}

/* --- Table of Contents (Commons) --- */
.toc-box {
    background: var(--color-bg-light);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--color-border);
}

.toc-title,
.toc-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

.toc-box ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}

.toc-box ol li {
    margin-bottom: 10px;
    line-height: 1.5;
    font-size: 0.95rem;
    position: relative;
    padding-left: 20px;
}

.toc-box ol li::before {
    counter-increment: toc-counter;
    /* Can be simple numbers */
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-secondary);
    font-weight: 700;
}

.toc-box a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.3s;
    display: block;
}

.toc-box a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Ident for H3 (toc-item-3) */
.toc-item-3 {
    margin-left: 20px !important;
    font-size: 0.9rem !important;
}

/* --- Sidebar Sticky TOC (PC) --- */
.toc-sidebar-wrapper {
    position: sticky;
    top: 100px;
    /* Adjust based on header height */
    z-index: 10;
    margin-bottom: 30px;
}

/* If existing sidebar widgets are flexible, this wrapper handles stickiness.
   However, sidebar.php structure puts TOC at top. 
   If we want ONLY TOC to sticky and others to scroll away, 
   CSS structure needs specific handling. 
   Currently applied to TOC wrapper only. */

/* --- SP Accordion TOC --- */
.toc-sp {
    margin: 30px 0;
}

.toc-sp .toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
    /* Override default */
}

.toc-sp .toc-label {
    margin-bottom: 0;
}

.toc-icon {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

/* Toggle State Logic (Handled via JS class) */
.toc-icon.is-open {
    transform: rotate(180deg);
}

.js-toc-content {
    /* JS will toggle display or max-height */
    margin-top: 15px;
    border-top: 1px solid var(--color-border);
    padding-top: 15px;
}

/* Hide entire sidebar on mobile as requested */
@media (max-width: 900px) {
    #secondary {
        display: none !important;
    }
}

/* --- Single Page Layout (Grid) --- */
.site-content-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    /* Main Content + Sidebar */
    gap: 40px;
    padding-top: 60px;
    /* Default top padding */
    padding-bottom: 60px;
}

@media (max-width: 900px) {
    .site-content-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}

/* Ensure images don't overflow grid */
.entry-content,
.entry-content p {
    max-width: 100%;
}

/* --- Custom Salesforce/Pardot Form Styling (Wa-Modern) --- */

/* Form Wrapper */
.iroriformdiv {
    margin-top: calc(var(--space-unit) * 4);
    width: 100%;
}

.contactwhite {
    background: var(--color-white);
    padding: calc(var(--space-unit) * 5);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* Form Layout Classes */
.cflex {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
    width: 100%;
}

.cdiv {
    margin-bottom: calc(var(--space-unit) * 2);
    width: 100%;
}

.cdiv p {
    margin-bottom: 8px;
    margin-top: 0;
}

.cdiv p:last-child {
    margin-bottom: 0;
}

.fname,
.sname {
    flex: 1;
}

/* Labels */
.iroriformdiv label {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Required Mark */
.iroriformdiv .hissu {
    color: var(--color-secondary);
    margin-left: 4px;
    font-weight: 700;
}

/* Inputs & Textareas */
.inputc,
.areac {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--color-text-main);
    background-color: #FAFAFA;
    transition: var(--transition-smooth);
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    /* Critical for width: 100% */
}

.areac {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

.inputc:focus,
.areac:focus {
    border-color: var(--color-secondary);
    background-color: var(--color-white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 56, 30, 0.1);
}

.inputc::placeholder {
    color: #BBB;
}

/* Submit Button Container */
.accountformdiv>p:last-child,
.iroriformdiv input[type="submit"] {
    margin-top: 20px;
}

/* Handle p wrapper for submit button */
.iroriformdiv p:has(.send) {
    text-align: center;
    margin-top: 40px;
}

/* Submit Button */
.send.btn.asend {
    display: inline-block;
    width: 100%;
    min-width: 280px;
    max-width: 320px;
    margin: 20px auto 0;
    padding: 18px 40px;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    /* Rounded pill style */
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 15px rgba(245, 56, 30, 0.2);
    appearance: none;
    -webkit-appearance: none;
}

.send.btn.asend:hover {
    background-color: #d65d1d;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 56, 30, 0.3);
}

.send.btn.asend:disabled {
    background-color: #CCC;
    cursor: default;
    /* Keep default if it's a lead gen form sometimes */
    transform: none;
    box-shadow: none;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .contactwhite {
        padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .cflex {
        flex-direction: column;
        gap: 0;
    }

    .cdiv {
        margin-bottom: 20px;
    }

    .send.btn.asend {
        width: 100%;
        max-width: 100%;
        padding: 16px 20px;
        min-width: 0;
    }
}

/* --- Article CTA Styles --- */
.article-cta {
    margin: 40px 0;
    width: 100%;
}

.article-cta-inner {
    max-width: 100%;
}

.cta-banner-link {
    display: block;
    transition: var(--transition-smooth);
}

.cta-banner-link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.cta-banner-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-text-box {
    background: var(--color-white);
    border: 2px solid var(--color-secondary);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.cta-text-box h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.cta-text-box p {
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .article-cta {
        margin: 30px 0;
    }

    .cta-text-box {
        padding: 20px;
    }

    .cta-text-box h3 {
        font-size: 1.3rem;
    }
}