@import 'variables.0acc6731b987.css';

/* CSS Reset & Basics */
* {
    box-sizing: border-box;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

/* Layout Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--padding-side);
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem var(--padding-side);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    mix-blend-mode: difference;
    text-decoration: none;
}

.logo img {
    /* height controlled via inline html styles for the icon */
    max-height: 100%;
}

.nav-links {
    display: flex;
    gap: clamp(1rem, 1.6vw, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    position: relative;
    display: inline-block;
    mix-blend-mode: difference;
}

/* Links keep their natural width, including longer Japanese labels. */
.nav-links li {
    flex-shrink: 0;
}

.nav-links li a {
    white-space: nowrap;
}

/* Header Text Flip Hover Effect */
.hover-flip {
    --flip-height: 1.75em;
    height: var(--flip-height);
    line-height: var(--flip-height);
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.hover-flip-inner {
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
}

.hover-flip .front,
.hover-flip .back {
    height: var(--flip-height);
    min-height: var(--flip-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hover-flip .back {
    color: var(--color-accent);
}

@media (hover: hover) {
    .hover-flip:hover .hover-flip-inner {
        transform: translateY(calc(-1 * var(--flip-height)));
    }
}

/* Page Transition Overlay */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-accent);
    z-index: 1000;
    pointer-events: none;
    transform: translateY(100%);
    /* Start hidden below */
}

/* Typography styles */
.section-title {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: 300;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.section-title span {
    color: var(--color-accent);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-text);
    border-radius: 4px;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background-color: var(--color-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--transition-normal);
    z-index: -1;
}

.btn:hover {
    border-color: var(--color-accent);
    color: #fff;
}

.btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Specific Page Sections (Home) */
.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    padding: 6rem 1rem 8rem 1rem;
    width: 100%;
}

.hero-content h1 {
    font-size: clamp(1.75rem, 5.4vw, 5rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    opacity: 0;
    /* JS Animation Starting State */
    transform: translateY(30px);
}

.hero-content p {
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #aaa;
    margin-bottom: 3rem;
    opacity: 0;
    /* JS Animation Starting State */
}

/* Common Section padding */
section {
    padding: clamp(4rem, 8vw, 8rem) 0;
}

/* Footer layout update to horizontal */
.site-footer {
    padding: 4rem var(--padding-side) 2rem;
    background-color: #050505;
    border-top: 1px solid #222;
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-info {
    flex: 1;
    min-width: 0;
}

.footer-info img {
    height: 30px;
    margin-bottom: 1rem;
}

.footer-info p {
    color: #888;
    line-height: 1.8;
    font-size: 0.9rem;
}

/* Make footer navigation truly horizontal */
.footer-nav {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    /* Allows sections to wrap if needed */
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* Horizontal list */
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
    /* Allows links to wrap on small screens */
    /* Center horizontally with the button */
}

.footer-nav ul li a {
    color: #ccc;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.footer-nav ul li a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #222;
    color: #555;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* Global Lang Toggle - Apple style glass button */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    /* Semi-transparent white */
    backdrop-filter: blur(10px);
    /* Glass blur effect */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    /* Pill shape */
    color: #fff !important;
    font-size: 0.8rem !important;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all var(--transition-fast) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Image Hover Animations */
.card-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.card-info {
    padding: 1.5rem;
    background: #111;
}

.card-info h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.card-info p {
    font-size: 1rem;
    color: #aaa;
}

.card-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.8s ease;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

/* Fix iOS double-click hover issue by preventing hover stickiness */
@media (hover: hover) {
    .service-link-card:hover .card-overlay-text {
        opacity: 1;
    }
}

.img-color-hover {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    filter: saturate(0.8) brightness(0.95);
    transition: filter 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, filter;
}

@media (hover: hover) {

    .service-link-card:hover .img-color-hover,
    .img-color-hover:hover {
        filter: grayscale(0%) brightness(1);
        transform: scale(1.05);
        /* Floating and coloring effect */
    }
}

/* Enhancing readibility and visual impact of about.html CEO section */
.msg-text-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ceo-img {
    filter: grayscale(100%) brightness(0.9);
    transition: filter 0.8s ease, transform 0.8s ease, box-shadow 0.8s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform-origin: center;
}

.ceo-img-wrap:hover .ceo-img {
    filter: grayscale(0%) brightness(1.1);
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 94, 0, 0.15);
    /* Orange hue glowing box shadow */
}

/* Responsive CEO Layout */
.ceo-grid-container {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    position: relative;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.ceo-grid-img {
    min-width: 0;
}

.ceo-grid-text {
    min-width: 0;
}

@media (max-width: 768px) {
    .ceo-grid-container {
        display: flex;
        flex-direction: column;
    }

    .ceo-grid-text {
        margin-top: 0;
        padding: 1.5rem;
    }
}

/* Works Marquee Animation */
.marquee-wrapper {
    width: 100%;
    /* Removed 100vw and margin-left calc layout hack to prevent mobile scroll bug */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 3rem 0;
    /* Extra padding for vertical offsets */
}

.marquee-content {
    display: inline-flex;
    align-items: center;
    /* Center horizontally scrolling items */
    animation: marquee-scroll 30s linear infinite;
}

.marquee-item {
    margin: 0 1.5rem;
    border-radius: 24px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Sizing Setup */
.marquee-item.size-s {
    width: 260px;
    height: 180px;
}

.marquee-item.size-m {
    width: 320px;
    height: 240px;
}

.marquee-item.size-l {
    width: 440px;
    height: 320px;
}

/* Vertical Stagger Offsets */
.marquee-item.offset-up {
    transform: translateY(-40px);
}

.marquee-item.offset-down {
    transform: translateY(40px);
}

.marquee-item.offset-up-more {
    transform: translateY(-80px);
}

.marquee-item.offset-down-more {
    transform: translateY(80px);
}

.marquee-item.offset-none {
    transform: translateY(0);
}

.marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.55) brightness(0.85);
    transition: filter 0.5s ease, transform 0.5s ease;
    display: block;
}

.marquee-item:hover img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}

/* Left-to-Right Scrolling Animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(calc(-100% / 2));
        /* Start at -50% (show duplicated set) */
    }

    100% {
        transform: translateX(0);
        /* Scroll to 0 (show original set) */
    }
}

/* --- Hamburger Menu (Mobile Navigation) --- */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
    /* Keep above mobile menu */
    margin-left: auto;
    /* push to the right */
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.3s ease;
    mix-blend-mode: difference;
}

/* Animations for open toggle */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

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

@media (max-width: 1100px) {
    .menu-toggle {
        display: flex;
    }

    .site-header {
        padding: 1rem 5%;
        /* give some padding */
    }

    .site-header nav {
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: 100%;
        height: 100dvh;
        overflow-y: auto;
        /* Force solid background and fix blend mode issues */
        background-color: var(--color-bg);
        mix-blend-mode: normal;
        /* Override header blend mode */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 1000;
        padding: 100px 1.25rem 2rem;
    }

    .site-header nav.active {
        transform: translateX(0);
    }

    .site-header.menu-open .logo {
        mix-blend-mode: normal;
        position: relative;
        z-index: 1002;
    }

    .site-header.menu-open .menu-toggle span {
        mix-blend-mode: normal;
    }

    .nav-links {
        flex-direction: column;
        gap: clamp(0.8rem, 2.5vh, 1.5rem);
        /* Increased gap */
        align-items: center;
        /* center items visually */
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links li a {
        font-size: 1.2rem;
        /* Larger font size for mobile */
        letter-spacing: 0.15em;
        text-shadow: none;
        mix-blend-mode: normal;
        /* Override difference mode inside full background */
        height: var(--flip-height);
        overflow: hidden;
        white-space: nowrap;
    }

    .nav-links li a .hover-flip-inner {
        position: relative;
        transform: none;
    }

    .nav-links li a .hover-flip .front,
    .nav-links li a .hover-flip .back {
        height: var(--flip-height);
    }

    .nav-links .back {
        display: none;
    }

    .lang-toggle {
        margin-top: 0.5rem;
        margin-left: 0;
    }
}

/* --- Service Details Buttons --- */
.service-card>.details-btn {
    display: block;
    margin: 1.5rem auto 0;
}

.details-btn {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.details-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 94, 0, 0.4);
}

.details-btn.open {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border-color: #fff;
}

/* --- Service Detail Modals --- */
.service-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 10, 0.97);
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.service-modal.open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.service-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-close-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ccc;
    padding: 0.6rem 1.4rem;
    border-radius: 30px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.03em;
}

.modal-close-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #000;
}

.modal-close-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.service-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 3rem var(--padding-side);
    -webkit-overflow-scrolling: touch;
}

.service-modal-body .detail-content-panel {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .service-modal-header {
        padding: 0.8rem 1rem;
    }

    .service-modal-body {
        padding: 2rem 1.2rem;
    }
}

.detail-content-panel {
    display: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 4rem;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.detail-content-panel.active {
    display: block;
    animation: fadeInSlideUp 0.6s forwards;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Detail Content Styling */
.detail-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--color-accent);
}

.detail-title .detail-subtitle {
    font-size: 1rem;
    color: #666;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

.detail-lead {
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 2rem;
    color: #fff;
    line-height: 1.6;
}

.detail-text {
    font-size: 1rem;
    color: #aaa;
    line-height: 1.8;
    margin-bottom: 4rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

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

    .detail-content-panel {
        padding: 2rem;
    }
}

.detail-card {
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.detail-card h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #fff;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
}

.detail-card p {
    color: #999;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.detail-list,
.options-list {
    list-style: none;
    padding: 0;
}

.detail-list li {
    margin-bottom: 1.5rem;
    color: #bbb;
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
    padding-left: 1.5rem;
}

.detail-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 0.8rem;
    top: 4px;
}

.detail-list li strong {
    color: #fff;
}

.price-box {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 94, 0, 0.05);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
}

.price-box h4,
.options-box h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #fff;
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.price span {
    font-size: 1rem;
    font-weight: 400;
}

.price-note {
    font-size: 0.85rem !important;
    color: #777 !important;
    margin: 0 !important;
}

.options-list li {
    color: #aaa;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.options-list li::before {
    content: "・";
}

.detail-market h3 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.detail-market>p {
    text-align: center;
    color: #aaa;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.market-table {
    width: 100%;
    border-collapse: collapse;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

.market-table th,
.market-table td {
    padding: 1.2rem;
    text-align: center;
    border-bottom: 1px solid #222;
}

.market-table th {
    background: #1a1a1a;
    font-weight: 500;
    color: #fff;
    font-size: 0.95rem;
}

.market-table td {
    color: #ccc;
    font-size: 0.95rem;
}

.market-table tr:last-child td {
    border-bottom: none;
}

.highlight-discount {
    background: var(--color-accent);
    color: #fff;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
}

.table-note {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    margin-bottom: 4rem;
}

.detail-message {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 3rem;
    border-top: 1px solid #333;
}

.detail-message h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 2rem;
}

.detail-message p {
    color: #aaa;
    font-size: 1rem;
    line-height: 1.8;
}

/* === StoryRise: 3 KEYS TO SUCCESS === */
.success-hover-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 10;
}

.success-item {
    position: relative;
    padding: 2.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s ease;
    cursor: default;
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
}

.success-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.success-item:hover {
    background: rgba(255, 90, 0, 0.05);
    /* very light accent color block */
    border-color: rgba(255, 90, 0, 0.3);
    transform: translateX(10px);
}

.success-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 3rem;
    width: 100%;
}

.success-num {
    font-size: 4rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    transition: all 0.4s ease;
    min-width: 80px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.05em;
}

.success-item:hover .success-num {
    color: var(--color-accent);
    -webkit-text-stroke: 0px transparent;
    text-shadow: 0 0 20px rgba(255, 90, 0, 0.4);
}

.success-text-wrap {
    flex: 1;
}

.success-item h3 {
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    transition: color 0.4s ease;
}

.success-item:hover h3 {
    color: var(--color-accent);
}

.success-item p {
    font-size: 1rem;
    color: #888;
    line-height: 1.6;
    max-width: 500px;
    transition: color 0.4s ease;
}

.success-item:hover p {
    color: #ddd;
}

/* Hover Image Styling - making it smaller and stylish */
.success-img {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) scale(0.9) translateX(20px);
    width: 240px;
    /* Reduced base size */
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.success-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2);
    transition: filter 0.5s ease;
}

.success-item:hover .success-img {
    opacity: 1;
    transform: translateY(-50%) scale(1) translateX(0);
}

.success-item:hover .success-img img {
    filter: grayscale(0%) contrast(1.1);
}

@media (max-width: 900px) {
    .success-item {
        padding: 2rem 1rem;
    }

    .success-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .success-num {
        font-size: 3rem;
    }

    .success-item h3 {
        font-size: 1.5rem;
    }

    /* Hide the floating image on smaller screens or adjust it completely */
    .success-img {
        display: none;
    }
}

/* Utility for mobile only line breaks */
.sp-only {
    display: none !important;
}

@media (max-width: 768px) {
    .sp-only {
        display: block !important;
    }
}

/* Storyrise CTA Background Image Hover Effect */
.storyrise-feature-img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    filter: brightness(0.7) grayscale(100%);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.storyrise-feature:hover .storyrise-feature-img {
    transform: scale(1.05);
    filter: brightness(0.8) grayscale(0%);
}

/* Shared typography and responsive spacing */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    text-wrap: balance;
}

button, input, textarea, select {
    font-family: inherit;
    line-height: 1.5;
}

button, .btn {
    max-width: 100%;
}

.btn {
    line-height: 1.6;
    text-align: center;
    padding: 1rem clamp(1.25rem, 4vw, 3rem);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

main:not([data-barba-namespace="home"]):not([data-barba-namespace="storyrise"]) .hero-content {
    padding: clamp(2rem, 5vw, 4rem) 0 2rem;
}

main:not([data-barba-namespace="home"]):not([data-barba-namespace="storyrise"]) .hero-content p {
    margin-bottom: 0;
}

.hero-content + .service-list, .hero-content + .works-grid {
    margin-top: 2rem;
}

.hero-content p {
    line-height: 1.8;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.service-list > *, .detail-grid > *, .liquid-card > *, .success-text-wrap {
    min-width: 0;
}

.msg-text-box {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: 3rem;
}

.plan-price span {
    display: inline-block;
}

.footer-nav, .footer-nav ul {
    gap: 1rem 1.5rem;
}

.footer-nav ul li {
    width: auto;
}

.footer-nav .lang-toggle {
    margin-top: 0;
}

.site-footer {
    line-height: 1.8;
}

.footer-bottom {
    color: #999;
}

.table-responsive {
    max-width: 100%;
}

.market-table {
    min-width: 36rem;
}

@media (max-width: 768px) {
    .hero-content {
        padding: 7rem var(--padding-side) 6rem;
    }

    .hero-content h1 {
        letter-spacing: 0.06em;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .section-title {
        letter-spacing: 0.08em;
    }

    .footer-inner, .footer-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-info {
        width: 100%;
    }

    .detail-content-panel {
        padding: 1.25rem;
    }

    .service-modal-body {
        padding: 1.25rem 1rem;
    }

    .plan-grid {
        gap: 2.5rem;
    }

    .plan-price span {
        display: block;
        margin-top: 0.5rem;
    }

    .channel-caption h3 {
        font-size: 1.75rem;
    }

    .privacy-hero h1 {
        letter-spacing: 0.08em;
    }
}


/* A consistent photographic direction: graphite, warm light and restrained orange. */
.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.8);
}

.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.65), rgba(5, 5, 5, 0.4) 45%, rgba(5, 5, 5, 0.85));
    pointer-events: none;
}

.hero:has(.hero-media) .hero-content h1 {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

.hero:has(.hero-media) .hero-content p {
    color: #ddd;
}

.page-visual {
    margin: 0 auto 3rem;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #111;
}

.page-visual img {
    display: block;
    width: 100%;
    height: clamp(180px, 30vw, 340px);
    object-fit: cover;
    filter: saturate(0.8);
}

.ceo-signoff {
    margin-top: 2rem;
    text-align: right;
    color: #ddd;
}

img[src*="/generated/"]:not(.hero-media) {
    object-fit: cover;
}

.service-card .card-img-wrap img {
    display: block;
    margin-bottom: 0;
    filter: saturate(0.8) brightness(0.95);
}

.yt-thumb {
    filter: saturate(0.6) brightness(0.9);
}

@media (max-width: 768px) {
    .hero-media {
        object-position: 65% center;
    }

    .hero-shade {
        background: linear-gradient(180deg, rgba(5, 5, 5, 0.65), rgba(5, 5, 5, 0.55) 50%, rgba(5, 5, 5, 0.9));
    }
}

/* Shared direction: graphite surfaces, warm orange, generous editorial spacing. */
html { scroll-padding-top: 125px; }
main { min-width: 0; }
[hidden] { display: none !important; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.skip-link { position: fixed; top: -100px; left: 1rem; background: #fff; color: #050505; padding: .75rem 1rem; z-index: 2000; }
.skip-link:focus { top: 1rem; }
.site-header { transition: box-shadow .35s, background-color .35s; }
.site-header.is-scrolled { background: rgba(5,5,5,.94) !important; box-shadow: 0 1px 0 #ffffff16; backdrop-filter: blur(18px); }
.nav-links .nav-video { color: var(--color-accent); letter-spacing: .04em; }
.nav-links a[aria-current="page"]::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background: var(--color-accent); }
.reading-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; z-index: 1100; }
.quick-route { position: fixed; right: clamp(1rem,3vw,2rem); bottom: max(1.25rem,env(safe-area-inset-bottom)); z-index: 85; }
.quick-route-toggle { display: flex; gap: .65rem; align-items: center; padding: .85rem 1.2rem; border: 1px solid #ffffff30; border-radius: 50px; background: #161616f2; color: #f7f4f0; font-size: .8rem; cursor: pointer; box-shadow: 0 8px 30px #0006; transition: border-color .25s, transform .25s; }
.quick-route-toggle > span:first-child { color: var(--color-accent); font-size: 1.1rem; transition: transform .25s; }
.quick-route-toggle[aria-expanded="true"] > span:first-child { transform: rotate(45deg); }
.quick-route-toggle:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.quick-route-panel { position: absolute; bottom: calc(100% + .75rem); right: 0; width: min(330px,calc(100vw - 2rem)); background: #141414; border: 1px solid #ffffff20; border-radius: 16px; padding: 1.5rem; box-shadow: 0 25px 80px #000a; }
.quick-route-panel .eyebrow { font-size: .75rem; letter-spacing: .04em; margin-bottom: .75rem; }
.quick-route-panel a { display: flex; justify-content: space-between; border-bottom: 1px solid #ffffff12; padding: .85rem 0; font-size: .95rem; }
.quick-route-panel a::after { content: '↗'; color: var(--color-accent); }
.quick-route-panel a:last-child { border-bottom: 0; }
.eyebrow { color: var(--color-accent); font-size: .69rem; font-weight: 500; letter-spacing: .15em; line-height: 1.65; text-transform: uppercase; }
.display-heading { font-size: clamp(2rem,4.7vw,3.8rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.45; }
.display-heading em { color: var(--color-accent); font-style: normal; }
.section-intro { margin-bottom: clamp(2rem,4vw,3.5rem); max-width: 800px; }
.section-intro .eyebrow { margin-bottom: 1.4rem; }
.section-lead { max-width: 43rem; color: #aaa; font-size: clamp(.95rem,1.2vw,1.05rem); line-height: 2; margin-top: 1.5rem; }
.muted { color: #aaa; font-size: .9rem; line-height: 1.95; }
.content-section { padding-top: clamp(4rem,8vw,7rem); padding-bottom: 1rem; scroll-margin-top: 70px; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-accent); background: none; border: 0; padding: .65rem 0; font-size: .88rem; font-weight: 500; line-height: 1.8; text-decoration: underline; text-decoration-color: #ff660055; text-underline-offset: 6px; cursor: pointer; }
.text-link:hover { text-decoration-color: var(--color-accent); }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: #090909; font-weight: 600; }
.btn-accent:hover { background: #ff8133; color: #090909; }
.btn, .details-btn, .submit-btn { transition: transform .3s, background .3s, border-color .3s, color .3s, box-shadow .3s; }
.btn:hover, .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px #ff660016; }
.explore-home { padding-top: clamp(3rem,6vw,6rem); padding-bottom: 3rem; }
.explore-home .display-heading { font-size: clamp(1.65rem,3vw,2.5rem); }
.explore-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.explore-card { display: block; position: relative; border: 1px solid #ffffff1a; background: linear-gradient(130deg,#191919,#0a0a0a); padding: 2rem 1.7rem 3.2rem; border-radius: 14px; transition: transform .35s, border-color .35s; }
.explore-card h3 { font-size: 1.12rem; margin: 1.3rem 0 .8rem; color: #eee; }
.explore-card p { color: #aaa; line-height: 1.9; font-size: .85rem; }
.route-arrow { position: absolute; bottom: 1.2rem; right: 1.7rem; color: var(--color-accent); font-size: 1.5rem; transition: transform .3s; }
.explore-card:hover { transform: translateY(-6px); border-color: #ff660088; }
.explore-card:hover .route-arrow { transform: translate(3px,-3px); }
.web-home { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; padding-top: 2rem; padding-bottom: 7rem; }
.web-home-copy .eyebrow { margin-bottom: 1.5rem; }
.web-home-copy .btn { margin-top: 2rem; }
.web-home-images { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem .75rem; background: radial-gradient(ellipse,#5b321c55,transparent 70%); }
.web-home-images img { width: calc(50% - .5rem); border: 1px solid #ffffff22; border-radius: 6px; box-shadow: 0 22px 50px #0008; transition: transform .6s; }
.web-home-images img:last-child { margin-top: 3.5rem; }
.web-home-images:hover img:first-child { transform: translateY(-8px); }
.web-home-images:hover img:last-child { transform: translateY(8px); }
.web-showcase { padding-top: 2rem; scroll-margin-top: 115px; }
.web-showcase .section-intro { max-width: 780px; }
.web-cases { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3.5rem 2rem; }
.web-case { min-width: 0; }
.web-preview { position: relative; padding: 0; width: 100%; display: block; text-align: left; background: #141414; border: 1px solid #ffffff20; border-radius: 10px; overflow: hidden; cursor: zoom-in; transition: border-color .4s, transform .4s; }
.browser-chrome { display: flex; gap: 4px; align-items: center; height: 35px; padding: 0 12px; background: #1d1d1d; border-bottom: 1px solid #ffffff14; }
.browser-chrome i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #666; }
.browser-chrome i:first-child { background: #ff6600; }
.browser-chrome > span { flex: 1; text-align: center; color: #aaa; font-size: .55rem; letter-spacing: .1em; }
.browser-chrome b { color: #aaa; font-size: .9rem; font-weight: 400; }
.web-screen { display: block; aspect-ratio: 1.5; overflow: hidden; }
.web-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.preview-action { position: absolute; bottom: 1rem; right: 1rem; padding: .45rem .85rem; border: 1px solid #ffffff35; border-radius: 50px; background: #101010e8; font-size: .7rem; color: #fff; box-shadow: 0 3px 18px #0003; }
.web-preview:hover { transform: translateY(-4px); border-color: #ff660077; }
.web-preview:hover img { transform: scale(1.025); }
.web-case-copy { padding: 1.4rem .2rem 0; }
.web-case-copy .eyebrow { margin-bottom: .65rem; font-size: .65rem; }
.web-case-copy h3 { font-size: 1.3rem; font-weight: 500; margin-bottom: .6rem; }
.case-headline { font-size: .94rem; color: #e1e1e1; margin-bottom: .5rem; }
.web-case-copy .muted { font-size: .86rem; max-width: 40rem; }
.collection-link { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 2rem 0; margin-top: 1.5rem; border-bottom: 1px solid #ffffff1a; color: #aaa; font-size: .9rem; }
.project-cta { display: flex; justify-content: space-between; align-items: center; gap: 3rem; padding: clamp(2rem,5vw,4rem); border: 1px solid #ff66003d; background: radial-gradient(ellipse at 100% 0,#ff660013,transparent 65%),#101010; border-radius: 16px; margin: 4rem 0; }
.project-cta h3 { font-size: clamp(1.25rem,2.5vw,1.8rem); margin: 1rem 0; font-weight: 500; }
.project-cta p:not(.eyebrow) { color: #aaa; font-size: .9rem; line-height: 1.95; max-width: 40rem; margin-top: 1rem; }
.project-cta > .btn { flex-shrink: 0; }
.other-works { padding-top: 2rem; padding-bottom: 4rem; }
.works-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; margin-top: 2rem; }
.work-item { position: relative; background-color: #191919; height: 300px; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; }
.work-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; background: linear-gradient(transparent,#050505f5); padding-top: 4rem; }
.work-info h3 { font-size: 1rem; margin-bottom: .3rem; }
.work-info p { font-size: .8rem; color: var(--color-accent); }
.design-dialog { padding: 0; border: 1px solid #ffffff26; border-radius: 14px; background: #171717; color: #eee; width: min(1080px,calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); box-shadow: 0 30px 100px #000a; }
.design-dialog::backdrop { background: #000d; backdrop-filter: blur(12px); }
.design-dialog[open] { display: flex; flex-direction: column; }
.design-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #ffffff20; flex-shrink: 0; }
.design-dialog h2 { font-size: 1rem; font-weight: 400; }
.dialog-close { background: #292929; color: #fff; border: 1px solid #ffffff25; border-radius: 50px; padding: .5rem 1rem; font: inherit; font-size: .8rem; cursor: pointer; flex-shrink: 0; }
.design-dialog-scroll { overflow: auto; padding: 1.5rem; overscroll-behavior: contain; }
.design-dialog-scroll img { display: block; height: auto; width: 100%; }
.design-dialog-scroll details { margin-top: 2rem; border-top: 1px solid #ffffff20; padding-top: 1rem; }
.design-dialog-scroll summary { cursor: pointer; color: #ccc; padding: .5rem 0 1rem; font-size: .9rem; }
body.design-open { overflow: hidden; }
.service-web-examples { padding: 3rem 0; text-align: center; }
.service-web-examples h3 { font-size: 1.5rem; margin: 1rem 0 2rem; font-weight: 400; }
.service-web-images { display: flex; align-items: flex-start; gap: 1.5rem; max-width: 650px; margin: 0 auto 2rem; }
.service-web-images img { width: calc(50% - .75rem); border: 1px solid #ffffff20; border-radius: 6px; }
.service-card > a.details-btn { text-align: center; display: block; }
.video-hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; padding-top: 190px; padding-bottom: 5rem; }
.video-hero-copy .eyebrow { margin-bottom: 1.5rem; }
.video-hero .display-heading { font-size: clamp(2.3rem,4.5vw,3.8rem); }
.video-hero .section-lead { font-size: .95rem; max-width: 30rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.hero-actions .btn { padding: .9rem 1.6rem; }
.hero-note { font-size: .72rem; color: #999; margin-top: 1.2rem; line-height: 1.9; }
.video-hero-visual { margin: 0; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #ffffff16; box-shadow: 0 30px 80px #ff66000a; }
.video-hero-visual img { width: 100%; height: 490px; object-fit: cover; object-position: 43%; display: block; }
.video-hero-visual figcaption { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-between; background: linear-gradient(transparent,#000c); padding: 2rem 1.25rem 1.25rem; font-size: .55rem; letter-spacing: .12em; color: #ddd; }
.video-hero-visual figcaption span:last-child { color: #ff8940; }
.section-nav { position: sticky; top: 102px; z-index: 60; border-top: 1px solid #ffffff18; border-bottom: 1px solid #ffffff18; background: #0b0b0bf2; backdrop-filter: blur(14px); }
.section-nav > div { display: flex; justify-content: space-between; gap: 1.2rem; overflow-x: auto; scrollbar-width: thin; }
.section-nav a { flex-shrink: 0; display: block; padding: 1rem 0; font-size: .8rem; color: #999; border-bottom: 2px solid transparent; }
.section-nav a:hover, .section-nav a[aria-current="location"] { color: #fff; border-color: var(--color-accent); }
.goals-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.goal-card { background: #101010; padding: 1.8rem; border: 1px solid #ffffff14; border-radius: 12px; transition: background .3s,border-color .3s; }
.item-number { font-size: .7rem; letter-spacing: .1em; color: var(--color-accent); }
.goal-card h3 { font-size: 1.05rem; font-weight: 500; margin: 1.5rem 0 1rem; }
.goal-tags { color: #ddd; font-size: .78rem; line-height: 1.9; margin-bottom: 1rem; }
.goal-card .muted { font-size: .82rem; }
.goal-card:hover { background: #16120f; border-color: #ff660050; }
.production-plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.production-plan { display: flex; flex-direction: column; border: 1px solid #ffffff20; border-radius: 12px; padding: 2.2rem; background: linear-gradient(145deg,#171717,#0c0c0c); }
.production-plan:first-child { border-color: #ff660066; }
.plan-kicker { color: #aaa; font-size: .8rem; margin-top: 1.5rem; }
.production-plan h3 { font-size: 1.55rem; font-weight: 500; margin: .4rem 0 1rem; }
.production-plan .muted { font-size: .85rem; }
.production-plan ul { list-style: none; padding: 1rem 0 1.5rem; margin: 0; border-top: 1px solid #ffffff18; }
.production-plan li { position: relative; padding: .4rem 0 .4rem 1.25rem; color: #c5c5c5; font-size: .83rem; line-height: 1.85; }
.production-plan li::before { content: '✓'; color: var(--color-accent); position: absolute; left: 0; }
.production-plan > .text-link { margin-top: auto; align-self: flex-start; }
.fine-print { color: #999; font-size: .78rem; line-height: 1.95; margin-top: 1.5rem; }
.option-group { background: #101010; border: 1px solid #ffffff18; border-radius: 10px; margin-bottom: 1rem; overflow: hidden; }
.option-group > summary, .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.8rem; cursor: pointer; list-style: none; font-size: 1rem; }
summary::-webkit-details-marker { display: none; }
.option-group > summary span:last-child, .faq-item > summary span:last-child { color: var(--color-accent); transition: transform .3s; flex-shrink: 0; }
.option-group[open] > summary span:last-child, .faq-item[open] > summary span:last-child { transform: rotate(45deg); }
.option-items { padding: 0 1.8rem; }
.option-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 1.3rem 0; border-top: 1px solid #ffffff16; }
.option-item h3 { font-size: .94rem; font-weight: 500; margin-bottom: .5rem; }
.option-item .muted { font-size: .8rem; }
.production-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #ffffff25; }
.production-flow li { padding: 2rem 1.5rem 1rem 0; }
.production-flow h3 { font-size: .95rem; font-weight: 500; margin: 1.3rem 0 1rem; }
.production-flow .muted { font-size: .82rem; }
.faq-item { border-bottom: 1px solid #ffffff20; }
.faq-item > summary { padding: 1.5rem 0; font-size: .95rem; }
.faq-item > p { color: #aaa; font-size: .9rem; line-height: 2; max-width: 50rem; padding-bottom: 1.5rem; }
.enquiry-context { background: #15110e; border: 1px solid #ff660055; border-radius: 10px; padding: 1.5rem; margin-bottom: 2rem; text-align: left; }
.enquiry-context h2 { font-size: 1rem; margin-bottom: .5rem; font-weight: 500; }
.enquiry-context p { color: #aaa; font-size: .8rem; line-height: 1.9; }
.marquee-wrapper:hover .marquee-content, .marquee-wrapper:focus-within .marquee-content, .marquee-wrapper[data-paused="true"] .marquee-content { animation-play-state: paused; }
.marquee-pause { position: absolute; right: 1.5rem; bottom: .5rem; z-index: 3; color: #ccc; border: 1px solid #ffffff25; background: #171717; border-radius: 30px; padding: .5rem 1rem; font: inherit; font-size: .72rem; cursor: pointer; }
@media (min-width: 1101px) and (max-width: 1280px) {
 .site-header .nav-links { gap: .9rem; }
 .site-header .nav-links a { font-size: .78rem; letter-spacing: .035em; }
}
@media (max-width: 900px) {
 .video-hero { grid-template-columns: 1fr; padding-top: 155px; gap: 2.5rem; }
 .video-hero-visual img { height: clamp(260px,55vw,450px); }
 .video-hero .section-lead { max-width: 40rem; }
 .goals-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .production-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .project-cta { flex-direction: column; align-items: flex-start; gap: 2rem; }
 .web-home { gap: 2rem; }
 .web-home .display-heading { font-size: 2rem; }
 .explore-grid { gap: .7rem; }
 .explore-card { padding: 1.5rem 1.2rem 3rem; }
}
@media (max-width: 600px) {
 html { scroll-padding-top: 115px; }
 .quick-route-toggle { padding: .7rem 1rem; font-size: .72rem; }
 .section-nav { top: 102px; }
 .section-nav > div { padding-left: 1.25rem; padding-right: 1.25rem; }
 .section-nav a { padding: .9rem 0; font-size: .73rem; }
 .content-section { scroll-margin-top: 60px; }
 .video-hero { padding-bottom: 2.5rem; }
 .video-hero .display-heading { font-size: clamp(2rem,8.5vw,2.8rem); }
 .hero-actions { gap: .75rem 1.2rem; }
 .hero-actions .btn { padding: .85rem 1.1rem; font-size: .8rem; }
 .explore-grid, .web-cases, .goals-grid, .production-plans, .works-grid { grid-template-columns: 1fr; }
 .explore-card { padding: 1.6rem 1.4rem; }
 .explore-card h3 { margin: .8rem 0 .6rem; }
 .explore-card p { max-width: 85%; }
 .web-home { grid-template-columns: 1fr; padding-bottom: 4rem; }
 .web-home-images { max-width: 420px; margin-top: .5rem; }
 .web-cases { gap: 2.75rem; }
 .web-case-copy h3 { font-size: 1.2rem; }
 .collection-link { align-items: flex-start; flex-direction: column; gap: .25rem; }
 .project-cta { margin: 3rem 0; padding: 2rem 1.5rem; }
 .project-cta .btn { width: 100%; }
 .work-item { height: 250px; }
 .design-dialog-bar { padding: 1rem; }
 .design-dialog-scroll { padding: .75rem; }
 .production-plan { padding: 1.7rem; }
 .production-plan h3 { font-size: 1.35rem; }
 .goal-card { padding: 1.6rem; }
 .goal-card h3 { margin-top: 1rem; }
 .option-group > summary { padding: 1.1rem 1.3rem; font-size: .9rem; }
 .option-items { padding: 0 1.3rem; }
 .option-item { gap: 1rem; }
 .production-flow { grid-template-columns: 1fr; }
 .production-flow li { display: flex; gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid #ffffff18; }
 .production-flow li .item-number { padding-top: .3rem; }
 .production-flow h3 { margin: 0 0 .75rem; }
 .faq-item > summary { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 .marquee-content { animation: none !important; }
 .gs-reveal { opacity: 1 !important; transform: none !important; }
}

/* Barba transitions are disabled; the dormant overlay must not paint below the viewport. */
.transition-overlay { visibility: hidden; }
.production-plan ul { margin-top: 1.5rem; }
.option-item > div { width: 100%; }
body:has(.site-header.menu-open) .quick-route { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
 .video-hero-visual img { animation: camera-drift 14s ease-in-out 1; }
 @keyframes camera-drift { 0% { transform: scale(1.045); } 100% { transform: scale(1); } }
 .option-group[open] .option-items, .faq-item[open] > p { animation: answer-in .3s ease-out; }
 @keyframes answer-in { from { opacity: .4; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
}
.site-footer { padding-bottom: 5rem; }

/* Avoid a body scroll container so the section menu follows the viewport. */
body { overflow-x: clip; }
.section-nav { top: 102px; }

/* Confirmed film work and authentic channel thumbnails. */
.work-jump { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; padding-top: 1.25rem; }
.film-work { padding-top: 3.5rem; padding-bottom: 4rem; }
.film-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.film-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ffffff1a; border-radius: 12px; background: #101010; transition: transform .35s,border-color .35s; }
.film-card:hover { transform: translateY(-5px); border-color: #ff660070; }
.film-thumb, .yt-image-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.film-card:hover .film-thumb img { transform: scale(1.025); }
.film-play { position: absolute; left: 1rem; bottom: 1rem; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: #0a0a0ad9; border: 1px solid #ffffff35; border-radius: 50%; padding-left: 2px; font-size: .65rem; }
.film-duration { position: absolute; bottom: .7rem; right: .7rem; padding: .2rem .45rem; border-radius: 4px; background: #080808dc; color: #eee; font-size: .65rem; letter-spacing: .04em; }
.film-copy { padding: 1.7rem; display: flex; flex: 1; flex-direction: column; }
.film-copy h3 { font-size: 1.05rem; line-height: 1.8; font-weight: 500; color: #e8e8e8; margin-top: 1rem; margin-bottom: 1.5rem; }
.film-copy .text-link { margin-top: auto; font-size: .78rem; }
.film-work-footer { margin-top: 1.5rem; text-align: right; }
.youtube-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding-top: 190px; padding-bottom: 5rem; }
.youtube-intro .eyebrow { margin-bottom: 1.5rem; }
.youtube-intro .display-heading { font-size: clamp(2.1rem,3.6vw,3rem); }
.youtube-feature { position: relative; display: block; border-radius: 10px; border: 1px solid #ffffff25; overflow: hidden; box-shadow: 0 22px 70px #ff66000a; }
.youtube-feature img { display: block; width: 100%; height: auto; }
.youtube-feature-label { display: flex; justify-content: space-between; padding: .9rem 1.2rem; background: #171717; color: #ddd; font-size: .65rem; letter-spacing: .1em; }
.youtube-feature-label span { color: var(--color-accent); }
.youtube-selection { padding-top: 1rem; padding-bottom: 6rem; scroll-margin-top: 120px; }
.yt-filters { display: flex; flex-wrap: wrap; gap: .65rem; }
.yt-filters button { border: 1px solid #ffffff26; border-radius: 50px; padding: .65rem 1rem; background: #141414; color: #aaa; font: inherit; font-size: .75rem; cursor: pointer; transition: color .25s,background .25s,border-color .25s; }
.yt-filters button[aria-pressed="true"] { background: #ff66001c; border-color: #ff660099; color: #ff8e42; }
.yt-image-wrap .yt-thumb { display: block; height: 100%; width: 100%; object-fit: cover; }
.yt-info { display: flex; flex: 1; flex-direction: column; }
.yt-grid .yt-card { display: flex; flex-direction: column; }
.yt-grid .yt-card[hidden] { display: none; }
.yt-metadata { display: flex; justify-content: space-between; gap: .5rem; color: #999; font-size: .7rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #ffffff16; }
.yt-grid .yt-title { font-size: .95rem; line-height: 1.8; }
.yt-grid .yt-cat { font-size: .62rem; }
@media (max-width: 900px) {
 .youtube-intro { grid-template-columns: 1fr; gap: 3rem; padding-top: 155px; }
 .youtube-feature { max-width: 650px; }
}
@media (max-width: 600px) {
 .film-grid { grid-template-columns: 1fr; gap: 1.5rem; }
 .film-copy { padding: 1.4rem; }
 .film-copy h3 { font-size: .95rem; }
 .work-jump { gap: .6rem 1.5rem; }
 .work-jump .text-link { font-size: .77rem; }
 .youtube-intro { padding-bottom: 3.5rem; }
 .youtube-intro .display-heading { font-size: 2rem; }
 .yt-filters { gap: .5rem; }
 .yt-filters button { font-size: .7rem; padding: .65rem .8rem; }
}

/* Keep all four service cards visually consistent after the imagery refresh. */
.service-list .service-card { display: flex; flex-direction: column; background: #101010; border: 1px solid #ffffff18; border-radius: 14px; overflow: hidden; }
.service-list .card-img-wrap { border-radius: 0; margin-bottom: 0; }
.service-list .card-img-wrap img { border-radius: 0; filter: none; }
.service-list .card-info { padding: 1.7rem; background: none; flex: 1; }
.service-list .service-card h3 { font-size: 1.3rem; }
.service-list .service-card > .details-btn { display: block; width: calc(100% - 3.4rem); margin: 0 1.7rem 1.7rem; text-align: center; padding: .85rem 1rem; }
.yt-card .yt-thumb { filter: none; }
.film-copy h3, .yt-grid .yt-title { text-wrap: pretty; }

/* Rebuilt, editable Japanese WEB design samples. */
.web-sample-note { max-width: 800px; margin: -1rem 0 2.5rem; font-size: .76rem; color: #aaa; line-height: 1.9; }
.sample-page-link { display: inline-block; margin-top: 1.1rem; font-size: .78rem; }
.design-live-link { font-size: .75rem; color: var(--color-accent); margin-left: auto; text-decoration: underline; text-underline-offset: 4px; }
.design-live-link[hidden] { display: none; }
@media (max-width: 600px) { .design-dialog-bar { gap: .7rem; flex-wrap: wrap; } .design-live-link { font-size: .65rem; } .design-dialog h2 { font-size: .85rem; } }