@charset "UTF-8";

/* [Imports] Variables are already defined in the previous step, ensuring this file is complete or appended correctly. 
   Since we are overwriting, I will re-include the variable definitions to be safe and have one single file.
*/

:root {
    /* Brand Colors */
    --color-primary: #C80000;
    /* Brand Red */
    --color-secondary: #E02020;
    /* Accent Red */
    --color-text: #111827;
    --color-text-sub: #6B7280;
    --color-bg: #FFFFFF;
    --color-bg-tint: #F8FAFC;
    --color-border: #E5E7EB;

    /* Typography */
    --font-base: "Noto Sans JP", sans-serif;

    /* Spacing */
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;

    /* UI */
    --radius-card: 16px;
    --radius-btn: 30px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.8;
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

/* Utility Classes */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.u-vis-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.u-text-sm {
    font-size: 0.875rem;
    color: var(--color-text-sub);
}

/* Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-btn);
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
}

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

.btn--primary:hover {
    background-color: #a50000;
}

.btn--outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-primary);
    color: white;
}

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

.btn--white:hover {
    background-color: #f1f1f1;
}

.btn--sm {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
}

.btn--lg {
    padding: 1rem 3rem;
    font-size: 1.125rem;
}

.btn-text {
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.btn-text:hover {
    opacity: 0.7;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    position: relative;
    padding-left: 1rem;
    border-left: 6px solid var(--color-primary);
    line-height: 1.2;
}

.section-title__en {
    display: block;
    font-size: 1rem;
    color: var(--color-text-sub);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.header__logo a {
    display: flex;
    align-items: center;
}

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

.header__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header__menu {
    display: flex;
    gap: 2rem;
}

.header__menu a {
    font-weight: 500;
    position: relative;
}

.header__menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.header__menu a:hover::after {
    width: 100%;
}

.header__actions {
    display: flex;
    gap: 1rem;
}

/* Page Header & Hero */
.page-hero,
.page-header {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: #fff;
    margin-top: 0;
}

.page-hero::before,
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Overlay to ensure text readability */
}

.page-hero__content,
.page-header__inner {
    position: relative;
    z-index: 1;
}

.page-hero__title,
.page-header__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.page-hero__en,
.page-header__sub {
    display: block;
    font-size: 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    margin-top: 0.5rem;
    opacity: 0.8;
}

.page-hero__breadcrumb {
    margin-top: 2rem;
    font-size: 0.9rem;
}

.page-hero__breadcrumb a {
    color: #fff;
    text-decoration: none;
    opacity: 0.7;
}

.page-hero__breadcrumb a:hover {
    opacity: 1;
}

@media (max-width: 768px) {

    .page-hero,
    .page-header {
        height: 300px;
    }

    .page-hero__title,
    .page-header__title {
        font-size: 2rem;
    }
}

.header__hamburger {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.header__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    margin: 0 auto;
}

/* Hero (Kewpie Style) */
/* Hero (Kewpie Style) */
.hero-k {
    position: relative;
    height: 85vh;
    /* Slightly more compact for a better framed look */
    min-height: 600px;
    background: #fff;
    overflow: hidden;
}

.hero-k__slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #fff;
    /* Fail-safe background */
}

.hero-k__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    opacity: 0;
}

/* Active class handled by GSAP */

.hero-k__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
}

.hero-k__side {
    width: 50%;
    max-width: 800px;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 4rem 0 6rem;
    /* Inverted Curve (Right side rounded) */
    /* Smoother Elliptical Curve */
    border-radius: 0 40% 40% 0 / 0 50% 50% 0;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.05);
}

.hero-k__content {
    width: 100%;
    max-width: 550px;
}

.hero-k__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 2rem;
    color: var(--color-primary);
}

.hero-k__title-line {
    display: inline-block;
    white-space: nowrap;
}

.hero-k__sub {
    font-size: 1.125rem;
    color: var(--color-text);
    line-height: 2;
    font-weight: 500;
}

.hero-k__scroll {
    position: absolute;
    bottom: 2.5rem;
    right: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: white;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-k__scroll-line {
    width: 1px;
    height: 40px;
    background: white;
    animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* Mobile Adjustment for Hero */
@media (max-width: 1024px) {
    .hero-k__side {
        width: 55%;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (max-width: 768px) {
    .hero-k {
        height: auto;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .hero-k__slider {
        position: relative;
        height: 60vh;
        /* Increased from 50vh */
        z-index: 1;
    }

    .hero-k__slide {
        background-position: center top;
        /* Anchor to top to show food better */
    }

    .hero-k__inner {
        position: relative;
        margin-top: -20vh;
        /* Deeper overlap to reduce visual gap */
        z-index: 2;
        order: 2;
    }

    .hero-k__side {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 4rem 1.5rem 6rem;
        /* Reduced top padding (6rem -> 4rem) */
        border-radius: 100% 100% 0 0 / 25% 25% 0 0;
        /* Smoother top curve */
        text-align: center;
        box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.08);
        /* Stronger shadow at the seam */
    }

    .hero-k__title {
        font-size: 2.25rem;
    }

    .hero-k__scroll {
        display: none;
    }
}

/* Sections */
.section {
    position: relative;
    overflow: hidden;
    padding: var(--space-xl) 0;
}

.section:nth-child(even) {
    background-color: var(--color-bg-tint);
}


/* About Us */
.about {
    padding: 0 0 var(--space-xl) 0;
    /* No top padding to allow image to flush top if needed, or adjust as per design */
    background: #fff;
    overflow: hidden;
}

.about__container {
    display: flex;
    align-items: center;
    /* Full width split layout */
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.about__image {
    width: 55%;
    position: relative;
    /* Create the curved cutout effect */
}

.about__image img {
    border-radius: 0 300px 300px 0 / 0 300px 300px 0;
    /* Dynamic curve */
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.about__content {
    width: 45%;
    padding: 0 5%;
}

.about__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.2;
    color: var(--color-primary);
}

.about__title-en {
    display: block;
    font-size: 1rem;
    color: var(--color-text-sub);
    font-weight: 500;
    margin-top: 0.5rem;
}

.about__text {
    margin-bottom: 2rem;
    color: var(--color-text);
    line-height: 2;
    font-size: 1.1rem;
}

/* Mobile Responsive for About Us */
@media (max-width: 768px) {
    .about__container {
        flex-direction: column;
    }

    .about__image {
        width: 100%;
        margin-bottom: 3rem;
    }

    .about__image img {
        height: 300px;
        border-radius: 0;
    }

    .about__content {
        width: 100%;
        padding: 0 1.5rem;
        /* Center text on mobile? Let's keep it left for now to match strict split, but typically centered is nice */
    }

    .about__title {
        font-size: 2rem;
    }
}

/* Strength */
.strength__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.strength__item {
    position: relative;
    padding-top: 2rem;
}

.strength__num {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary);
    opacity: 0.1;
    position: absolute;
    top: -1rem;
    left: -1rem;
    z-index: 0;
}

.strength__head {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.strength__desc {
    color: var(--color-text-sub);
}

/* Strength Cards - Mobile */
@media (max-width: 768px) {
    .strength-card {
        flex-direction: column !important;
        padding: 2rem !important;
        gap: 2rem !important;
    }

    .strength-card > div {
        flex: none !important;
        width: 100% !important;
    }

    .strength-card h2 {
        font-size: 1.5rem !important;
    }

    .strength-card__image-container {
        flex: none !important;
        width: 100% !important;
    }
}

/* Slider Area */
.slider-area {
    width: 100%;
    overflow: hidden;
    margin-top: var(--space-lg);
    background: transparent;
}

.slider-area__track {
    display: flex;
    align-items: center;
    /* Vertically center the items */
    width: max-content;
    animation: sliderScroll 40s linear infinite;
    padding: 2rem 0;
    /* Add top/bottom padding for shadows/overflow if needed */
}

.slider-area__item {
    padding: 0 1.5rem;
    /* Increased spacing */
    flex-shrink: 0;
    width: auto;
    /* Allow auto width based on image aspect */
}

.slider-area__item img {
    display: block;
    width: auto;
    /* Auto width to maintain aspect ratio */
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* Staggered Sizes (Convex-Concave Effect) */
/* Pattern repeats every 4 items */
.slider-area__item:nth-child(4n + 1) img {
    height: 300px;
    /* Standard */
}

.slider-area__item:nth-child(4n + 2) img {
    height: 200px;
    /* Slightly smaller height */
    width: 260px;
    /* Narrower width, forcing vertical rectangle appearance via object-fit */
}

.slider-area__item:nth-child(4n + 3) img {
    height: 380px;
    /* Largest */
}

.slider-area__item:nth-child(4n + 4) img {
    height: 280px;
    /* Medium */
}

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

    100% {
        /*
           We have 8 images in total (4 original + 4 duplicate).
           To loop seamlessly, we translate by 50% (the width of one full set).
        */
        transform: translateX(-50%);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .slider-area__item {
        padding: 0 0.75rem;
    }

    /* Scale down all sizes for mobile */
    .slider-area__item:nth-child(4n + 1) img {
        height: 200px;
    }

    .slider-area__item:nth-child(4n + 2) img {
        height: 150px;
    }

    .slider-area__item:nth-child(4n + 3) img {
        height: 260px;
    }

    .slider-area__item:nth-child(4n + 4) img {
        height: 190px;
    }
}

/* Area Ticker */
.area__ticker {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.area__ticker-row {
    width: 100%;
    overflow: hidden;
}

.area__ticker-track {
    display: flex;
    gap: 4rem;
    white-space: nowrap;
    width: max-content;
    /* Ensure track takes full width of text for correct translate calculation */
    animation: tickerScroll 80s linear infinite;
}

.area__ticker span {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Filled Style */
.area__ticker-row--filled span {
    color: var(--color-primary);
    opacity: 0.05;
}

/* Outline Style */
.area__ticker-row--outline .area__ticker-track {
    animation-delay: -25s;
    /* Large stagger offset (~1/2 cycle + shift) */
}

.area__ticker-row--outline span {
    color: transparent;
    -webkit-text-stroke: 2px rgba(200, 0, 0, 0.1);
}

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

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

/* Services Vertical Background Slider */
.services__bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 0;
    pointer-events: none;
    gap: 1rem;
    /* Gap between columns */
    padding: 0 1rem;
    /* Padding on sides */
    background: #f0f0f0;
    /* Fallback */
}

.services__bg-col {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.services__bg-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Gap between images vertically */
    /* Animation definition needed per column */
}

/* Images in the slider */
.services__bg-track img {
    width: 100%;
    height: 40vh;
    /* Fixed height for consistency */
    object-fit: cover;
    border-radius: 8px;
    /* Slight rounded corners */
    display: block;
}

/* Animations */
/* Column 1 & 3: Up */
.services__bg-col--1 .services__bg-track,
.services__bg-col--3 .services__bg-track {
    animation: slideUp 30s linear infinite;
}

/* Column 2: Down */
.services__bg-col--2 .services__bg-track {
    animation: slideDown 30s linear infinite;
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }

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

    /* Assuming 4 images, move by half (2 images) */
}

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

    100% {
        transform: translateY(0);
    }
}

/* Overlay */
.services__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark overlay to match reference */
    background: rgba(0, 0, 0, 0.7);
    z-index: 0;
    backdrop-filter: blur(2px);
}

/* Ensure container is above */
.services .container {
    position: relative;
    z-index: 2;
    /* increased to be above overlay */
}

/* Dark Mode Text Overrides for Services */
.services .section-title {
    color: #FFFFFF;
}

.services .section-title__en {
    color: rgba(255, 255, 255, 0.7);
}

/* Services */
.services .container {
    position: relative;
    z-index: 1;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.service-card {
    background: white;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

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

.service-card__thumb {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.service-card__body {
    padding: 1.5rem;
}

.service-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.service-card__text {
    font-size: 0.9rem;
    color: var(--color-text-sub);
}

/* Categories */
.categories__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.categories__list li {
    background: white;
    border: 1px solid var(--color-border);
    padding: 0.5rem 1.5rem;
    border-radius: 99px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.categories__list li:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Makers / Partners */
.makers {
    background: #fff;
}

.makers__lead {
    text-align: center;
    color: var(--color-text-sub);
    font-size: 1rem;
    margin-top: -2rem;
    margin-bottom: 3rem;
}

.makers__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.makers__item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    transition: all 0.3s ease;
    overflow: hidden;
}

.makers__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(200, 0, 0, 0.08);
    transform: translateY(-3px);
}

.makers__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.makers__note {
    text-align: center;
    color: var(--color-text-sub);
    font-size: 0.85rem;
    margin-top: 2rem;
}

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

@media (max-width: 768px) {
    .makers__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .makers__item {
        padding: 1rem;
    }
}

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

/* Delivery Area */
.area .container {
    position: relative;
    z-index: 1;
}

.area__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    text-align: center;
}

.area__map-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.area__circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    box-shadow: 0 10px 20px rgba(200, 0, 0, 0.3);
}

.area__circle--sub {
    background: var(--color-secondary);
    width: 200px;
    height: 200px;
    font-size: 1.5rem;
}

/* Force all text inside any area circle to be white */
.area__circle span,
.area__circle--sub span {
    color: #FFFFFF !important;
}

.area__arrow {
    font-size: 2rem;
    color: var(--color-text-sub);
}

@media (max-width: 768px) {
    .area__map-placeholder {
        flex-direction: column;
    }

    .area__circle,
    .area__circle--sub {
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        border-radius: 16px;
        font-size: 1.25rem;
    }

    .area__arrow {
        transform: rotate(90deg);
    }
}

/* Company */
.company__list {
    display: grid;
    gap: 1rem;
}

.company__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
}

.company__row dt {
    font-weight: 700;
}

/* News */
.news__list {
    max-width: 800px;
}

.news-item {
    display: flex;
    gap: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    align-items: baseline;
    transition: background 0.2s;
}

.news-item:hover {
    background: var(--color-bg-tint);
}

.news-date {
    font-family: monospace;
    color: var(--color-text-sub);
}

.news-cat {
    font-size: 0.8rem;
    padding: 2px 8px;
    background: var(--color-bg-tint);
    border-radius: 4px;
    color: var(--color-text-sub);
}

.news-title {
    font-weight: 500;
}

.news__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-lg);
}

/* CTA */
.cta {
    padding: var(--space-xl) 0;
    background: var(--color-bg-tint);
}

.cta__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.cta__item {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-card);
    text-align: center;
    border: 1px solid var(--color-border);
}

.cta__item--primary {
    background: var(--color-primary);
    color: white;
    border: none;
}

.cta__item--primary .cta__text {
    color: rgba(255, 255, 255, 0.9);
}

.cta__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}


.cta__text {
    margin-bottom: 2rem;
    color: var(--color-text-sub);
}

/* Background Images (Local Files) */
.section__bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    /* Subtler default for images */
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
}

/* Fallback/Default patterns if no specific image is set */
.section__bg--pattern-1 {
    background-image: url('../assets/img/bg_pattern_1.svg');
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.4;
}

.section__bg--pattern-2 {
    background-image: url('../assets/img/bg_pattern_2.svg');
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.6;
}

/* Force white text in Circles */
.area__circle span,
.area__circle--sub span {
    color: #FFFFFF !important;
}

/* Footer */
.footer {
    background: #ffffff;
    color: var(--color-text);
    padding-top: 80px;
    border-top: 1px solid var(--color-border);
}

.footer__container {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    padding-bottom: 60px;
}

.footer__brand {
    flex: 1.5;
}

.footer__logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.footer__logo-img {
    height: 40px;
    width: auto;
    margin-bottom: 1rem;
}

.footer__company {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-text-sub);
}

.footer__address {
    font-style: normal;
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--color-text-sub);
    margin-bottom: 2rem;
}

.footer__sns {
    margin-top: 2rem;
}

.footer__sns a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer__sns a:hover {
    color: var(--color-primary);
}

.footer__nav {
    flex: 3;
    display: flex;
    justify-content: flex-end;
    gap: 5rem;
}

.footer__nav-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-text);
    position: relative;
    padding-bottom: 0.5rem;
}

.footer__nav-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--color-primary);
}

.footer__nav-list {
    list-style: none;
    padding: 0;
}

.footer__nav-list li {
    margin-bottom: 0.75rem;
}

.footer__nav-list a {
    color: var(--color-text-sub);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.footer__nav-list a:hover {
    color: var(--color-primary);
    padding-left: 5px;
}

.footer__bottom {
    background: var(--color-bg-tint);
    padding: 20px 0;
    text-align: center;
}

.footer__copyright {
    font-size: 0.75rem;
    color: var(--color-text-sub);
}

@media (max-width: 1024px) {
    .footer__container {
        flex-direction: column;
        gap: 3rem;
    }

    .footer__nav {
        justify-content: flex-start;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .footer {
        padding-top: 60px;
    }

    .footer__nav {
        flex-wrap: wrap;
        gap: 2rem;
    }

    .footer__nav-group {
        width: calc(50% - 1rem);
    }
}

/* Mobile Menu */
@media (max-width: 768px) {
    .header__nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        z-index: 99;
    }

    .header__nav.is-open {
        display: flex;
    }

    .header__menu {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .header__menu a {
        font-size: 1.25rem;
    }

    .header__actions {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* Hamburger animation */
    .header__hamburger {
        z-index: 200;
    }

    .header__hamburger.is-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .header__hamburger.is-open span:nth-child(2) {
        opacity: 0;
    }

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

    .header__hamburger span {
        transition: all 0.3s ease;
    }

    /* Prevent body scroll when menu open */
    body.is-menu-open {
        overflow: hidden;
    }

    .hero__title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .hero__sub {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 100%;
    }

    .hero__content {
        margin-top: 0;
        /* Align higher */
    }

    .hero__scroll {
        display: none;
        /* Hide on mobile as requested */
    }

    .hero__scroll-line {
        height: 30px;
        /* Even shorter on mobile */
    }

    .cta__container,
    .area__content,
    .company__row {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 2rem;
    }

    .area__arrow {
        transform: rotate(90deg);
    }

    .header__hamburger {
        display: flex;
    }
}

/* =========================================
   Page Hero Section
   ========================================= */
.page-hero {
    position: relative;
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    /* Offset for Fixed Header */
    overflow: hidden;
}

/* Dark Overlay for Readability */
.page-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.page-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    padding: 0 1rem;
}

.page-hero__title {
    font-family: var(--font-base);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-hero__en {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    opacity: 0.9;
    text-transform: uppercase;
}

.page-hero__breadcrumb {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.25rem 1rem;
    border-radius: 99px;
    backdrop-filter: blur(4px);
}

.page-hero__breadcrumb a:hover {
    text-decoration: underline;
    opacity: 1;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .page-hero {
        height: 250px;
        margin-top: 60px;
        /* Smaller header offset on mobile */
    }

    .page-hero__title {
        font-size: 1.75rem;
    }

    .page-hero__en {
        font-size: 0.9rem;
    }
}

/* =========================================
   Greeting Section (About Us)
   ========================================= */
.greeting {
    position: relative;
    padding: 8rem 0;
    /* More padding for background text space */
    overflow: hidden;
}

.greeting__bg-text {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Thinner (was 900) */
    font-size: 8rem;
    color: #ffffff;
    /* White as requested */
    /* Very subtle tint */
    opacity: 1;
    z-index: 0;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
    padding-left: 2rem;
    padding-top: 1rem;
}

.greeting__container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 4rem;
    align-items: flex-start;
}

.greeting__visual {
    position: relative;
    width: 40%;
    max-width: 400px;
}

.greeting__img {
    width: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 20px 20px 0px rgba(200, 0, 0, 0.1);
    /* Secondary color shadow */
}

.greeting__img img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3/4;
    object-fit: cover;
}

.greeting__vertical-title {
    position: absolute;
    top: -2rem;
    right: -1rem;
    background: white;
    padding: 1.5rem 0.5rem;
    writing-mode: vertical-rl;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.greeting__content {
    flex: 1;
    max-width: 600px;
    padding-top: 1rem;
}

.greeting__head {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: var(--color-text);
}

.greeting__text {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-sub);
    margin-bottom: 3rem;
    text-align: justify;
}

.greeting__sign {
    text-align: right;
    font-family: "Noto Sans JP", sans-serif;
}

.greeting__role {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-sub);
    margin-bottom: 0.25rem;
}

.greeting__name {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Mobile Adjustment for Greeting */
@media (max-width: 900px) {
    .greeting__bg-text {
        font-size: 6rem;
        top: 10%;
    }

    .greeting__container {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .greeting__visual {
        width: 100%;
        max-width: 350px;
        margin-left: -2rem;
        /* Offset for vertical text balance */
    }

    .greeting__vertical-title {
        right: -1.5rem;
        top: 2rem;
    }

    .greeting__content {
        padding-top: 0;
    }
}

/* =========================================
   Values Section (About Us)
   ========================================= */
.values {
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
    background-color: var(--color-bg-tint);
}

.values__bg-text {
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 15rem;
    color: #fff;
    opacity: 0.5;
    z-index: 0;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}

.values__main-visual {
    position: relative;
    width: 100%;
    margin-bottom: 4rem;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.values__main-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.values__title-box {
    position: absolute;
    top: 0;
    right: 10%;
    background: white;
    padding: 2.5rem 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    /* Hanging effect */
}

.values__vertical-title {
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.values__vertical-main {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-text);
}

.values__vertical-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    transform: rotate(180deg);
    /* Fix rotation for vertical text */
}

.values__overlay-copy {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.values__description {
    max-width: 800px;
    margin: 0 auto 4rem;
    position: relative;
    z-index: 1;
}

.values__lead {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.values__text {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-sub);
}

.values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.values__item {
    background: white;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.values__item-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.values__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.values__item-content {
    padding: 1.5rem;
}

.values__item-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

.values__item-text {
    font-size: 0.9rem;
    color: var(--color-text-sub);
    line-height: 1.8;
}

/* Mobile Adjustment for Values */
@media (max-width: 768px) {
    .values__main-visual {
        height: 600px;
        /* Taller on mobile to fit content */
    }

    .values__main-img {
        height: 100%;
    }

    .values__title-box {
        right: 1rem;
        padding: 1.5rem 0.75rem;
    }

    .values__vertical-main {
        font-size: 1.5rem;
    }

    .values__overlay-copy {
        font-size: 2rem;
        left: 1.5rem;
        bottom: 2rem;
    }

    .values__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Youki Navi Section (About Us)
   ========================================= */
.navi-section {
    position: relative;
    padding: 0;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.navi-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    z-index: 0;
}

.navi-grid__item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.navi-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
}

/* Subtle zoom effect */
.navi-grid__item:nth-child(odd) img {
    transform-origin: left top;
}

.navi-grid__item:nth-child(even) img {
    transform-origin: right bottom;
}

.navi-section:hover .navi-grid__item img {
    transform: scale(1.1);
}

.navi-card {
    position: relative;
    z-index: 2;
    background: white;
    padding: 4rem 3rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-card);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.navi-card__title {
    writing-mode: horizontal-tb;
    /* Changed to horizontal */
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text);
    margin: 0 auto 1rem;
    /* Added bottom margin */
    height: auto;
    /* reset height */
    display: block;
    /* structured as block or flex column if needed */
    text-align: center;
    line-height: 1.4;
}

.navi-card__title-line {
    display: inline-block;
    /* or block to stack lines */
    margin: 0 0.5rem;
    /* space between if inline */
}

.navi-card__title-line {
    display: block;
}

.navi-card__content {
    width: 100%;
}

.navi-card__text {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-sub);
    margin-bottom: 2rem;
    text-align: left;
    /* Reset text align for body */
}

.navi-card__cta {
    display: flex;
    justify-content: center;
}

/* Mobile Adjustment for Navi */
@media (max-width: 768px) {
    .navi-section {
        min-height: auto;
        padding: 4rem 1rem;
        background: #f0f0f0;
        /* Fallback */
    }

    .navi-grid {
        position: relative;
        height: 300px;
        display: none;
        /* Hide grid images on mobile to focus on card? Or keep them? Let's keep them as bg */
    }



    /* On mobile, maybe show images as just background or stacked? 
       For "Card in center" look, absolute BG is fine, but content might overflow if card is tall.
       Let's stick to absolute BG but insure min-height handles content.
    */

    .navi-grid {
        display: grid;
        /* Restore */
        position: absolute;
        opacity: 0.3;
        /* Fade images on mobile for readability if they clash */
    }

    .navi-card {
        padding: 2rem;
        width: 100%;
    }

    .navi-card__title {
        writing-mode: horizontal-tb;
        font-size: 1.2rem;
        height: auto;
    }
}

/* =========================================
   Service Split Layout (Services Page)
   ========================================= */
.services-split {
    background: #fff;
    padding-bottom: 8rem;
}

.service-split__list {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.service-split__item {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--color-border);
}

.service-split__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Alternate Layout if desired, but user asked for "Left Text, Right Image" explicitly for all? 
   "Right Image, Left Text like shape" -> imply consistent or alternating.
   Reference site alternates. But prompt said "Right Image, Left Text".
   I will keep it consistent (Text Left, Image Right) as per explicit text, but add a modifier if alternate is needed.
   Let's stick to Text Left, Image Right as requested.
*/

.service-split__content {
    flex: 1;
    order: 1;
    /* Left */
}

.service-split__img {
    flex: 1;
    order: 2;
    /* Right */
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.service-split__img img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-split__item:hover .service-split__img img {
    transform: scale(1.03);
}

.service-split__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary);
}

.service-split__num {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.2;
}

.service-split__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
}

.service-split__text {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-sub);
    margin-bottom: 2rem;
    text-align: justify;
}

.service-split__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.service-split__tags li {
    font-size: 0.9rem;
    background: var(--color-bg-tint);
    padding: 0.5rem 1rem;
    border-radius: 99px;
    font-weight: 500;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Mobile Adjustment for Service Split */
@media (max-width: 900px) {
    .service-split__list {
        gap: 4rem;
    }

    .service-split__item {
        flex-direction: column;
        gap: 2rem;
        padding-bottom: 3rem;
    }

    .service-split__content {
        order: 2;
        /* Text below image on mobile usually looks better? Or Keep text top? 
                   Standard mobile flow is often Image -> Text or Title -> Image -> Text.
                   Let's do Title (Head) -> Image -> Body is hard with this markup.
                   Let's just stack Image Top, Content Bottom for visual impact.
                */
        order: 2;
        width: 100%;
    }

    .service-split__img {
        order: 1;
        width: 100%;
    }

    .service-split__head {
        border-bottom: 1px solid var(--color-primary);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    .service-split__title {
        font-size: 1.5rem;
    }
}

/* =========================================
   Service Intro Section (Services Page)
   ========================================= */
.service-intro {
    background-color: var(--color-bg-tint);
    /* Subtle gray background like reference */
    padding: 10rem 0;
    text-align: center;
    position: relative;
    /* Needed for absolute positioning of bg text */
    overflow: hidden;
}

.service-intro__bg-text {
    position: absolute;
    top: 20%;
    /* Moved up */
    left: 60%;
    /* Moved right */
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 15rem;
    color: #ffffff;
    /* White background text */
    /* Very subtle tint */
    opacity: 0.8;
    /* Adjust as needed */
    z-index: 0;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}

.service-intro__container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.service-intro__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 3rem;
    color: var(--color-text);
    letter-spacing: 0.05em;
}

.service-intro__text {
    font-size: 1rem;
    line-height: 2.2;
    color: var(--color-text-sub);
    font-weight: 500;
}

/* Mobile Adjustment for Intro */
@media (max-width: 768px) {
    .service-intro {
        padding: 6rem 0;
    }

    .service-intro__title {
        font-size: 1.5rem;
    }

    .service-intro__text {
        font-size: 0.95rem;
        text-align: left;
        /* Easier to read on mobile? Or keep center? Left is usually safer for long text */
        text-align: justify;
    }

    .service-intro__text {
        font-size: 0.95rem;
        text-align: left;
        /* Easier to read on mobile? Or keep center? Left is usually safer for long text */
        text-align: justify;
    }
}

/* =========================================
   Features Section (Metrics Style - About Us)
   ========================================= */
.features {
    background-color: white;
    padding-bottom: 8rem;
}

.features__list {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.features__item {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    text-align: center;
}

.features__circle {
    width: 240px;
    height: 240px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    /* Thinner border */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.features__item:hover .features__circle {
    transform: scale(1.05);
}

.features__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    display: block;
}

.features__number {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}

.features__unit {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-top: 0.25rem;
}

.features__desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-text-sub);
}

/* Mobile Adjustment for Features */
@media (max-width: 768px) {
    .features__list {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .features__circle {
        width: 200px;
        height: 200px;
        border-width: 1px;
    }

    .features__number {
        font-size: 2.5rem;
    }
}

/* =========================================
   Closing Section (About Us)
   ========================================= */
.closing {
    background-color: var(--color-primary);
    color: white;
    padding: 8rem 0;
    text-align: center;
}

.closing__container {
    max-width: 800px;
    margin: 0 auto;
}

.closing__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.closing__text {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 2.2;
    opacity: 0.95;
    text-align: justify;
    /* Justify or center? Reference looks justified/centered block. Let's try center for now as my previous intro was justifying mobile. */
    text-align-last: center;
    /* Try to center the last line if justified */
}

/* Mobile Adjustment for Closing */
@media (max-width: 768px) {
    .closing {
        padding: 5rem 0;
    }

    .closing__title {
        font-size: 1.75rem;
    }

    .closing__text {
        font-size: 1rem;
        text-align: left;
    }
}

/* =========================================
   Contact Page Styles
   ========================================= */
.contact-intro {
    background: #fff;
    padding: 4rem 0;
    text-align: center;
}

.contact-intro__text {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text-sub);
}

.contact-form {
    background: var(--color-bg-tint);
    padding: 6rem 0 8rem;
}

.contact-form__wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 4rem;
}

.contact-form__header {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-form__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.contact-form__subtitle {
    font-size: 0.95rem;
    color: var(--color-text-sub);
    line-height: 1.6;
}

.contact-form__required-note {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #e63946;
}

.styled-form {
    width: 100%;
}

.styled-form__group {
    margin-bottom: 2rem;
}

.styled-form__group:last-of-type {
    margin-bottom: 3rem;
}

.styled-form__label {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.styled-form__required {
    color: #e63946;
    margin-left: 0.25rem;
}

.styled-form__input,
.styled-form__select,
.styled-form__textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fafafa;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

.styled-form__input:focus,
.styled-form__select:focus,
.styled-form__textarea:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 80, 163, 0.1);
}

.styled-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
}

.styled-form__textarea {
    resize: vertical;
}

.styled-form__note {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 0.85rem;
    color: var(--color-text-sub);
    line-height: 1.6;
}

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

.styled-form__btn {
    min-width: 240px;
    padding: 1.25rem 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.styled-form__btn-arrow {
    transition: transform 0.3s ease;
}

.styled-form__btn:hover .styled-form__btn-arrow {
    transform: translateX(5px);
}

/* =========================================
   Contact Alt (Phone) Styles
   ========================================= */
.contact-alt {
    background: white;
    padding: 6rem 0 2rem;
    text-align: center;
}

.contact-alt__box {
    max-width: 600px;
    margin: 0 auto;
    padding: 4rem;
    background: white;
    border-radius: var(--radius-card);
    border: 2px solid var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-alt__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-text);
}

.contact-alt__phone {
    margin-bottom: 1rem;
}

.contact-alt__phone a {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1;
}

.contact-alt__phone a:hover {
    opacity: 0.8;
}

.contact-alt__hours {
    font-size: 1rem;
    color: var(--color-text-sub);
    font-weight: 500;
}

/* Mobile Adjustment for Contact */
@media (max-width: 768px) {
    .contact-form__wrapper {
        padding: 3rem 1.5rem;
    }

    .contact-form__title {
        font-size: 1.5rem;
    }

    .contact-alt__phone a {
        font-size: 1.5rem;
    }
}

/* =========================================
   Thanks Page
   ========================================= */
.thanks {
    padding: 10rem 0;
    text-align: center;
}

.thanks__icon {
    margin-bottom: 2rem;
    animation: scaleIn 0.8s ease-out;
}

.thanks__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-text);
}

.thanks__text {
    font-size: 1.1rem;
    line-height: 2;
    color: var(--color-text-sub);
    max-width: 600px;
    margin: 0 auto;
}

@keyframes scaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile Adjustment for Thanks */
@media (max-width: 768px) {
    .thanks {
        padding: 6rem 1.5rem;
    }

    .thanks__title {
        font-size: 1.75rem;
    }

    .thanks__text {
        font-size: 1rem;
    }
}

/* =========================================
   News Section & List (Kewpie Style)
   ========================================= */
.news {
    background: #fff !important;
}

.news__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ddd;
    min-height: 200px;
    /* Ensure space for loader and ScrollTrigger */
}

.news-list__item {
    display: flex;
    flex-direction: column;
    padding: 30px 0 25px;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #fff;
    gap: 12px;
}

.news-list__item:hover {
    background: rgba(0, 0, 0, 0.015);
}

.news-list__item-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.news-list__date {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #333;
}

.news-list__category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 2px 10px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    /* Capsule shape */
    text-align: center;
}

.news-list__item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-list__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.news-list__item:hover .news-list__title {
    color: var(--color-primary);
    text-decoration: underline;
}

.news-list__preview {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    /* Controlled by JS */
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal__content {
    position: relative;
    background: white;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    border-radius: var(--radius-card);
    padding: 4rem 3rem;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.modal.is-open .modal__content {
    transform: translateY(0);
    opacity: 1;
}

.modal__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    background: var(--color-bg-tint);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
}

.modal__close:hover {
    background: #eee;
}

.news-detail__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.news-detail__date {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-sub);
}

.news-detail__category {
    background: var(--color-bg-tint);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px;
}

.news-detail__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.news-detail__content {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text);
}

/* Mobile Adjustment for News */
@media (max-width: 768px) {
    .news-list__item {
        padding: 20px 0;
        gap: 10px;
    }

    .news-list__item-header {
        gap: 12px;
    }

    .news-list__category {
        min-width: 80px;
        font-size: 11px;
    }

    .news-list__date {
        font-size: 13px;
    }

    .news-list__title {
        font-size: 15px;
    }

    .news-list__preview {
        font-size: 13px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .modal__content {
        padding: 3rem 1.5rem;
    }

    .news-detail__title {
        font-size: 1.5rem;
    }
}