/* =====================================================
   HAKAM WISDOM
   GLOBAL CSS
===================================================== */:root {
    --sky:#dceef7;
    --sky-dark:#8fc7df;
    --blue:#5b9fbd;
    --deep:#163b49;
    --teal:#174a59;
    --white:#ffffff;
    --text:#263d46;
    --muted:#60757d;
    --light:#f6fbfd;
    --border:#d5e5eb;
    --gold:#b9955b;
}

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

html {
    scroll-behavior:smooth;
}

body {
    font-family:"Noto Sans JP",sans-serif;
    color:var(--text);
    background:var(--white);
    line-height:1.8;
    overflow-x:hidden;
}

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

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

.container {
    width:min(1180px,92%);
    margin:auto;
}

/* =====================================================
   LANGUAGE
===================================================== */ body.en .jp {
    display:none !important;
}

body:not(.en) .en {
    display:none !important;
}

/* =====================================================
   HEADER
===================================================== */ .site-header {
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
}

.header-container {
    width:min(1180px,92%);
    min-height:78px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

/* BRAND */ .brand {
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.brand-logo {
    width:48px;
    height:48px;
    object-fit:cover;
    border-radius:50%;
}

.brand-text {
    line-height:1;
}

.brand-name {
    font-family:"Cormorant Garamond",serif;
    font-size:28px;
    font-weight:600;
    letter-spacing:1.5px;
    color:var(--deep);
}

.brand-text p {
    margin-top:5px;
    font-size:8px;
    letter-spacing:2px;
    color:var(--blue);
}

/* DESKTOP NAV */ .main-nav {
    display:flex;
    align-items:center;
    gap:22px;
    margin-left:auto;
}

.main-nav a {
    font-size:12px;
    font-weight:500;
    color:var(--deep);
    transition:.3s;
}

.main-nav a:hover {
    color:var(--blue);
}

/* LANGUAGE */ .language-switcher {
    display:flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
}

.language-switcher button {
    border:0;
    background:transparent;
    color:var(--deep);
    font-family:"Noto Sans JP",sans-serif;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    padding:5px 2px;
    transition:.3s;
}

.language-switcher button:hover,.language-switcher button.active {
    color:var(--blue);
}

.language-switcher span {
    color:var(--border);
}

/* MOBILE MENU */ .mobile-menu {
    display:none;
    background:rgba(51,145,240,0.448);
    border-top:1px solid var(--border);
    box-shadow:0 15px 30px rgba(20,70,85,.08);
}

.mobile-menu.open {
    display:block;
}

.mobile-menu a {
    display:block;
    padding:16px 6%;
    border-bottom:1px solid var(--border);
    color:var(--deep);
    font-size:14px;
    font-weight:500;
}

.mobile-menu a:hover {
    background:var(--light);
    color:var(--blue);
}

/* =====================================================
   HERO
===================================================== */ .hero {
    min-height:88vh;
    background:linear-gradient( 120deg,rgba(255,255,255,.96),rgba(220,238,247,.84) ),url("https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1800&q=85") center/cover;
    display:flex;
    align-items:center;
}

.hero-content {
    max-width:760px;
    padding:90px 0;
}

.eyebrow {
    color:var(--blue);
    font-size:13px;
    letter-spacing:4px;
    margin-bottom:18px;
    font-weight:600;
}

.hero h1 {
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(58px,9vw,100px);
    line-height:.9;
    font-weight:600;
    color:var(--deep);
    margin-bottom:25px;
    letter-spacing:2px;
}

.hero h2 {
    font-size:clamp(20px,3vw,30px);
    font-weight:400;
    color:var(--teal);
    margin-bottom:18px;
}

.hero p {
    max-width:650px;
    color:var(--muted);
    font-size:15px;
}

.buttons {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:35px;
}

.btn {
    display:inline-block;
    padding:13px 27px;
    border-radius:4px;
    font-size:13px;
    font-weight:600;
    transition:.3s;
}

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

.btn-primary:hover {
    background:var(--blue);
    transform:translateY(-2px);
}

.btn-outline {
    border:1px solid var(--deep);
    color:var(--deep);
}

.btn-outline:hover {
    background:white;
}

/* =====================================================
   SECTIONS
===================================================== */ section {
    padding:100px 0;
}

.section-head {
    text-align:center;
    margin-bottom:55px;
}

.section-label {
    color:var(--blue);
    letter-spacing:4px;
    font-size:11px;
    font-weight:700;
    margin-bottom:10px;
}

.section-title {
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(40px,6vw,58px);
    color:var(--deep);
    line-height:1;
    font-weight:600;
}

.section-subtitle {
    margin-top:12px;
    color:var(--muted);
    font-size:14px;
}

/* =====================================================
   ABOUT
===================================================== */ .intro {
    background:var(--light);
}

.intro-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.intro-image {
    border-radius:3px;
    overflow:hidden;
    box-shadow:20px 20px 0 var(--sky);
}

.intro-text h3 {
    font-family:"Cormorant Garamond",serif;
    font-size:38px;
    color:var(--deep);
    margin-bottom:20px;
}

.intro-text p {
    color:var(--muted);
    margin-bottom:15px;
}

/* =====================================================
   MESSAGE
===================================================== */ .message-section {
    background:white;
}

.message-content {
    max-width:850px;
    margin:auto;
    color:var(--muted);
    font-size:15px;
}

.message-content p {
    margin-bottom:20px;
}

/* =====================================================
   WHY US
===================================================== */ .why-us {
    background:#fbfdfe;
}

.why-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.why-card {
    padding:30px;
    background:white;
    border:1px solid var(--border);
    transition:.3s;
}

.why-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(20,70,85,.09);
}

.why-icon {
    font-family:"Cormorant Garamond",serif;
    font-size:36px;
    color:var(--sky-dark);
    margin-bottom:10px;
}

.why-card h3 {
    color:var(--deep);
    font-size:18px;
    margin-bottom:12px;
}

.why-card p {
    color:var(--muted);
    font-size:13px;
}

/* =====================================================
   SERVICE DETAILS
===================================================== */ .service-details {
    background:var(--white);
}

.service-detail-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.service-detail-card {
    padding:35px;
    border:1px solid var(--border);
    background:white;
}

.service-detail-number {
    font-family:"Cormorant Garamond",serif;
    font-size:42px;
    color:var(--sky-dark);
}

.service-detail-card h3 {
    font-size:22px;
    color:var(--deep);
    margin:8px 0 14px;
}

.service-detail-card p {
    color:var(--muted);
    font-size:14px;
    margin-bottom:18px;
}

.service-list,.service-features {
    margin-top:20px;
    color:var(--muted);
    font-size:13px;
}

.service-list strong,.service-features strong {
    color:var(--deep);
}

.service-detail-card ul {
    margin-top:8px;
    padding-left:20px;
}

/* =====================================================
   WORKFLOW
===================================================== */ .workflow {
    background:var(--light);
}

.flow-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
}

.flow-card {
    background:white;
    border:1px solid var(--border);
    padding:25px;
    text-align:center;
}

.flow-card span {
    font-family:"Cormorant Garamond",serif;
    font-size:32px;
    color:var(--sky-dark);
}

.flow-card h3 {
    color:var(--deep);
    font-size:17px;
    margin:8px 0;
}

.flow-card p {
    color:var(--muted);
    font-size:12px;
}

/* =====================================================
   COMPANY
===================================================== */ .company-table {
    max-width:950px;
    margin:auto;
    border:1px solid var(--border);
}

.company-row {
    display:grid;
    grid-template-columns:220px 1fr;
    border-bottom:1px solid var(--border);
}

.company-row:last-child {
    border-bottom:0;
}

.company-row strong {
    padding:20px;
    background:var(--light);
    color:var(--deep);
    font-size:13px;
}

.company-row span {
    padding:20px;
    color:var(--muted);
    font-size:13px;
}

/* =====================================================
   SERVICES
===================================================== */ .services-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.service-card {
    padding:35px;
    background:white;
    border:1px solid var(--border);
    transition:.3s;
}

.service-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(20,70,85,.09);
    border-color:var(--sky-dark);
}

.service-number {
    font-family:"Cormorant Garamond",serif;
    font-size:36px;
    color:var(--sky-dark);
}

.service-card h3 {
    color:var(--deep);
    font-size:20px;
    margin:7px 0 12px;
}

.service-card p {
    color:var(--muted);
    font-size:14px;
}

.service-card ul {
    margin-top:15px;
    padding-left:20px;
    color:var(--muted);
    font-size:13px;
}

/* =====================================================
   ACHIEVEMENTS
===================================================== */ .achievements {
    background:var(--sky);
}

.achievement-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.achievement {
    background:white;
    padding:30px;
    text-align:center;
    border-radius:4px;
}

.achievement strong {
    display:block;
    font-family:"Cormorant Garamond",serif;
    font-size:42px;
    color:var(--deep);
}

.achievement span {
    font-size:13px;
    color:var(--muted);
}

/* =====================================================
   LEADER
===================================================== */ .leader {
    background:#fbfdfe;
}

.leader-grid {
    display:grid;
    grid-template-columns:390px 1fr;
    gap:70px;
    align-items:center;
}

.leader-image {
    height:520px;
    object-fit:cover;
    object-position:center;
}

.leader-content h3 {
    font-family:"Cormorant Garamond",serif;
    font-size:48px;
    color:var(--deep);
    margin-bottom:20px;
}

.leader-content p {
    color:var(--muted);
    font-size:14px;
    margin-bottom:18px;
}

.language-label {
    color:var(--blue);
    font-size:11px;
    letter-spacing:2px;
    margin-bottom:10px;
}

.principles {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:25px;
}

.principle {
    border-left:3px solid var(--sky-dark);
    padding:10px 15px;
    background:white;
}

.principle strong {
    color:var(--deep);
    display:block;
    font-size:14px;
}

.principle span {
    color:var(--muted);
    font-size:12px;
}

/* =====================================================
   STAFF
===================================================== */ .staff {
    background:var(--light);
}

.staff-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.staff-card {
    background:white;
    border:1px solid var(--border);
    overflow:hidden;
}

.staff-photo {
    height:260px;
    object-fit:cover;
    filter:saturate(.75);
}

.staff-info {
    padding:25px;
}

.staff-number {
    color:var(--blue);
    font-size:11px;
    letter-spacing:2px;
}

.staff-info h3 {
    color:var(--deep);
    font-family:"Cormorant Garamond",serif;
    font-size:27px;
    margin:5px 0 8px;
}

.staff-info p {
    color:var(--muted);
    font-size:12px;
}

.staff-info details {
    margin-top:15px;
}

.staff-info summary {
    color:var(--blue);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}

/* =====================================================
   ACTIVITIES
===================================================== */ .activities-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    grid-template-rows:250px 250px;
    gap:12px;
}

.activity {
    position:relative;
    overflow:hidden;
    border-radius:3px;
}

.activity:first-child {
    grid-row:span 2;
}

.activity img {
    height:100%;
    object-fit:cover;
    transition:.5s;
}

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

.activity-overlay {
    position:absolute;
    inset:auto 0 0;
    padding:30px 20px 18px;
    color:white;
    background:linear-gradient( transparent,rgba(0,0,0,.72) );
}

.activity-overlay h3 {
    font-size:16px;
}

.activity-overlay p {
    font-size:11px;
    opacity:.85;
}

/* =====================================================
   CONTACT
===================================================== */ .contact {
    background:#dce8f0;
}

.contact-wrapper {
    max-width:900px;
    margin:auto;
    background:white;
    box-shadow:0 20px 60px rgba(20,70,85,.12);
}

.contact-header {
    background:var(--teal);
    color:white;
    padding:25px 35px;
    font-size:24px;
    font-family:"Cormorant Garamond",serif;
}

.required-note {
    color:#c93232;
    font-size:12px;
    padding:25px 35px 0;
}

form {
    padding:25px 35px 40px;
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.form-group {
    margin-bottom:20px;
}

label {
    display:block;
    color:var(--deep);
    font-size:13px;
    font-weight:600;
    margin-bottom:7px;
}

label span {
    color:#c93232;
}

input,textarea {
    width:100%;
    border:1px solid #c8d9df;
    background:#fbfdfe;
    padding:12px 13px;
    font-family:inherit;
    font-size:13px;
    color:var(--text);
    border-radius:2px;
    outline:none;
}

input:focus,textarea:focus {
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(91,159,189,.1);
}

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

.submit-btn {
    width:100%;
    border:none;
    background:var(--teal);
    color:white;
    padding:15px;
    font-family:inherit;
    font-size:14px;
    cursor:pointer;
    transition:.3s;
}

.submit-btn:hover {
    background:var(--blue);
}

.contact-direct {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:25px 35px 0;
}

.contact-direct>div {
    background:var(--light);
    border:1px solid var(--border);
    padding:18px;
}

.contact-direct strong {
    display:block;
    color:var(--deep);
    font-size:13px;
    margin-bottom:5px;
}

.contact-direct a {
    color:var(--blue);
    font-size:13px;
    word-break:break-word;
}

/* =====================================================
   FOOTER
===================================================== */ footer {
    background:var(--deep);
    color:white;
    padding:60px 0 25px;
}

.footer-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:50px;
}

footer .logo {
    font-family:"Cormorant Garamond",serif;
    font-size:28px;
    color:white;
}

footer .logo span {
    display:block;
    font-family:"Noto Sans JP",sans-serif;
    font-size:8px;
    letter-spacing:2px;
}

footer p {
    color:#c6d7dc;
    font-size:12px;
    margin-top:15px;
}

footer h4 {
    color:white;
    margin-bottom:12px;
    font-size:13px;
}

footer a {
    color:#c6d7dc;
    display:block;
    font-size:12px;
    margin:6px 0;
}

.copyright {
    border-top:1px solid rgba(255,255,255,.15);
    margin-top:40px;
    padding-top:20px;
    text-align:center;
    color:#9bb3bb;
    font-size:10px;
}

/* =====================================================
   HAMBURGER
===================================================== */ 
.hamburger {
    display:none;
    width:44px;
    height:44px;
    padding:8px;
    border:none;
    background:transparent;
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    z-index:9999;
}

.hamburger span {
    display:block !important;
    width:25px;
    height:2px;
    background:#96daf8 !important;
    border-radius:2px;
}

/* HAMBURGER → X */ .hamburger.active span:nth-child(1) {
    transform:translateY(7px) rotate(45deg);
}

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

.hamburger.active span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg);
}

/* =====================================================
   TABLET
===================================================== */ @media (max-width:1000px) {
    .main-nav {
        gap:12px;
    }
    .main-nav a {
        font-size:10px;
    }
    .why-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .flow-grid {
        grid-template-columns:repeat(3,1fr);
    }
    .staff-grid {
        grid-template-columns:repeat(2,1fr);
    }
}

/* =====================================================
   MOBILE
===================================================== */ @media (max-width:850px) {

    /* HEADER */ .header-container {
        min-height:68px;
        gap:12px;
    }
    .main-nav {
        display:none;
    }
    .language-switcher {
        margin-left:auto;
    }
    .hamburger {
        display:flex;
    }
    .brand-logo {
        width:42px;
        height:42px;
    }
    .brand-name {
        font-size:24px;
    }
    .brand-text p {
        font-size:7px;
        letter-spacing:1.5px;
    }

    /* HERO */ .hero {
        min-height:80vh;
    }
    .hero-content {
        padding:70px 0;
    }

    /* SECTIONS */ section {
        padding:70px 0;
    }

    /* ABOUT */ .intro-grid,.leader-grid {
        grid-template-columns:1fr;
        gap:45px;
    }

    /* WHY */ .why-grid {
        grid-template-columns:1fr 1fr;
    }

    /* SERVICE */ .service-detail-grid {
        grid-template-columns:1fr;
    }
    .services-grid {
        grid-template-columns:1fr;
    }

    /* WORKFLOW */ .flow-grid {
        grid-template-columns:1fr 1fr;
    }

    /* LEADER */ .leader-image {
        height:400px;
    }

    /* STAFF */ .staff-grid {
        grid-template-columns:1fr;
    }

    /* ACTIVITIES */ .activities-grid {
        grid-template-columns:1fr 1fr;
        grid-template-rows:220px 220px 220px;
    }
    .activity:first-child {
        grid-row:span 1;
        grid-column:span 2;
    }

    /* FOOTER */ .footer-grid {
        grid-template-columns:1fr;
        gap:25px;
    }
}

/* =====================================================
   SMALL MOBILE
===================================================== */ @media (max-width:550px) {
    .container {
        width:90%;
    }
    .brand-name {
        font-size:22px;
    }
    .brand-text p {
        display:none;
    }
    .language-switcher button {
        font-size:10px;
    }
    .hamburger {
        width:38px;
        height:38px;
    }
    .hero h1 {
        font-size:65px;
    }
    .hero h2 {
        font-size:20px;
    }
    .hero p {
        font-size:13px;
    }
    .buttons {
        flex-direction:column;
        align-items:stretch;
    }
    .btn {
        text-align:center;
    }
    .why-grid {
        grid-template-columns:1fr;
    }
    .flow-grid {
        grid-template-columns:1fr;
    }
    .achievement-grid {
        grid-template-columns:1fr;
    }
    .principles {
        grid-template-columns:1fr;
    }
    .company-row {
        grid-template-columns:1fr;
    }
    .company-row strong {
        padding:12px 16px;
    }
    .company-row span {
        padding:15px;
    }
    .leader-content h3 {
        font-size:40px;
    }
    .activities-grid {
        grid-template-columns:1fr;
        grid-template-rows:repeat(5,230px);
    }
    .activity:first-child {
        grid-column:auto;
    }
    .form-row {
        grid-template-columns:1fr;
    }
    .contact-direct {
        grid-template-columns:1fr;
        padding-left:22px;
        padding-right:22px;
    }
    .contact-header,.required-note,form {
        padding-left:22px;
        padding-right:22px;
    }
}