/* ==========================================================================
   index.css — index.html dedicated styles
   Refactored to comply with CODING-RULES.md (11 rules)
   - 4-value margin/padding
   - No CSS variables (all values inlined)
   - No !important
   - px units only (no rem)
   - bottom-side spacing (no margin-top / padding-top where avoidable)
   - PC (min-width: 768px) and SP (max-width: 767px) split into separate blocks
   - border-radius: 8px (direct value)
   ========================================================================== */

/* ==========================================================================
   Base — colors / fonts (PC and SP share these atomic styles below split)
   ========================================================================== */
@media (min-width: 768px) {
  html,
  body {
    background: #f2efe9;
    color: #1c1a17;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  h1,
  h2,
  h3,
  h4 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 767px) {
  html,
  body {
    background: #f2efe9;
    color: #1c1a17;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  h1,
  h2,
  h3,
  h4 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    letter-spacing: 0.04em;
  }
}

/* ==========================================================================
   Splash
   ========================================================================== */
@media (min-width: 768px) {
  #splash {
    background: #151412;
  }
  #counter,
  .percent-sign {
    color: #f2efe9;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  }
  .progress-bar {
    background: #f2efe9;
  }
  .progress-track {
    background: rgba(242, 239, 233, 0.2);
  }
  .loading-label {
    color: #f2efe9;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3em;
  }
}
@media (max-width: 767px) {
  #splash {
    background: #151412;
  }
  #counter,
  .percent-sign {
    color: #f2efe9;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  }
  .progress-bar {
    background: #f2efe9;
  }
  .progress-track {
    background: rgba(242, 239, 233, 0.2);
  }
  .loading-label {
    color: #f2efe9;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3em;
  }
}


/* ==========================================================================
   Nav drawer (SP-oriented, but keep on both)
   ========================================================================== */
@media (min-width: 768px) {
  .nav-drawer {
    background: #f2efe9;
  }
  .drawer-link {
    color: #1c1a17;
    border-top-color: rgba(28, 26, 23, 0.1);
  }
  .drawer-en {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .drawer-ja {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .drawer-cta {
    background: #5f8d5b;
    color: #fff;
  }
}
@media (max-width: 767px) {
  .nav-drawer {
    background: #f2efe9;
  }
  .drawer-link {
    color: #1c1a17;
    border-top-color: rgba(28, 26, 23, 0.1);
  }
  .drawer-en {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .drawer-ja {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .drawer-cta {
    background: #5f8d5b;
    color: #fff;
  }
}

/* ==========================================================================
   Hero — image overlay, light text over photo
   ========================================================================== */
@media (min-width: 768px) {
  .hero {
    background: #f2efe9;
  }
  .hero-copy {
    color: #f2efe9;
  }
  .hero-eyebrow {
    color: rgba(242, 239, 233, 0.85);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.32em;
  }
  .hero-eyebrow::before {
    background: rgba(242, 239, 233, 0.75);
  }
  .hero-title,
  .hero-title .hero-reveal {
    color: #f2efe9;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    text-shadow: 0 2px 32px rgba(13, 12, 10, 0.55);
  }
  .hero-lead {
    color: rgba(242, 239, 233, 0.88);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    text-shadow: 0 1px 20px rgba(13, 12, 10, 0.45);
  }
}
@media (max-width: 767px) {
  .hero {
    background: #f2efe9;
  }
  .hero-copy {
    color: #f2efe9;
  }
  .hero-eyebrow {
    color: rgba(242, 239, 233, 0.85);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.32em;
  }
  .hero-eyebrow::before {
    background: rgba(242, 239, 233, 0.75);
  }
  .hero-title,
  .hero-title .hero-reveal {
    color: #f2efe9;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    text-shadow: 0 2px 32px rgba(13, 12, 10, 0.55);
  }
  .hero-lead {
    color: rgba(242, 239, 233, 0.88);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    text-shadow: 0 1px 20px rgba(13, 12, 10, 0.45);
  }
}

/* ==========================================================================
   Sections — alternating cashmere / cashmere-deep
   Per-section individual classes (rule #2)
   ========================================================================== */
@media (min-width: 768px) {
  .section {
    background: #f2efe9;
  }
  section#about {
    background: #f2efe9;
  }
  section#services {
    background: #ece8de;
  }
  section#strengths {
    background: #f2efe9;
  }
  section#philosophy {
    background: #ece8de;
  }
  section#compliance {
    background: #f2efe9;
  }
  section#sdgs {
    background: #ece8de;
  }
  section#organization {
    background: #f2efe9;
  }
  section#access {
    background: #ece8de;
  }
  .section-eyebrow {
    color: #5f8d5b;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.28em;
  }
  .section-head h2 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .section-head > div:first-child {
    border-left-color: #5f8d5b;
  }
  .section-head::after {
    background: rgba(28, 26, 23, 0.18);
  }
}
@media (max-width: 767px) {
  .section {
    background: #f2efe9;
  }
  section#about {
    background: #f2efe9;
  }
  section#services {
    background: #ece8de;
  }
  section#strengths {
    background: #f2efe9;
  }
  section#philosophy {
    background: #ece8de;
  }
  section#compliance {
    background: #f2efe9;
  }
  section#sdgs {
    background: #ece8de;
  }
  section#organization {
    background: #f2efe9;
  }
  section#access {
    background: #ece8de;
  }
  .section-eyebrow {
    color: #5f8d5b;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.28em;
  }
  .section-head h2 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .section-head > div:first-child {
    border-left-color: #5f8d5b;
  }
  .section-head::after {
    background: rgba(28, 26, 23, 0.18);
  }
}

/* ==========================================================================
   About editorial
   ========================================================================== */
@media (min-width: 768px) {
  .about-editorial-heading {
    color: #1c1a17;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-weight: 500;
  }
  .about-editorial-body {
    color: rgba(28, 26, 23, 0.75);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
}
@media (max-width: 767px) {
  .about-editorial-heading {
    color: #1c1a17;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-weight: 500;
  }
  .about-editorial-body {
    color: rgba(28, 26, 23, 0.75);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
}

/* ==========================================================================
   Strengths
   ========================================================================== */
@media (min-width: 768px) {
  .strength-row {
    border-top-color: rgba(28, 26, 23, 0.1);
  }
  .strength-row-num {
    color: #5f8d5b;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  }
  .strength-row-en {
    color: #857f75;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  .strength-row-title {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .strength-row-desc {
    color: rgba(28, 26, 23, 0.72);
  }
}
@media (max-width: 767px) {
  .strength-row {
    border-top-color: rgba(28, 26, 23, 0.1);
  }
  .strength-row-num {
    color: #5f8d5b;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  }
  .strength-row-en {
    color: #857f75;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  .strength-row-title {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .strength-row-desc {
    color: rgba(28, 26, 23, 0.72);
  }
}

/* ==========================================================================
   Philosophy
   ========================================================================== */
@media (min-width: 768px) {
  .kanji-glyph {
    color: #1c1a17;
  }
  .kanji-accent {
    color: #5f8d5b;
  }
  .kanji-reading {
    color: rgba(28, 26, 23, 0.6);
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .kanji-en {
    color: #857f75;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3em;
  }
  .kanji-copy {
    color: rgba(28, 26, 23, 0.75);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
}
@media (max-width: 767px) {
  .kanji-glyph {
    color: #1c1a17;
  }
  .kanji-accent {
    color: #5f8d5b;
  }
  .kanji-reading {
    color: rgba(28, 26, 23, 0.6);
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .kanji-en {
    color: #857f75;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3em;
  }
  .kanji-copy {
    color: rgba(28, 26, 23, 0.75);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
}

/* ==========================================================================
   Compliance editorial
   ========================================================================== */
@media (min-width: 768px) {
  .gov-editorial-lead {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .gov-editorial-intro {
    color: rgba(28, 26, 23, 0.72);
  }
  .gov-editorial-num {
    color: #5f8d5b;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  }
  .gov-editorial-item h3 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .gov-editorial-item h3 small {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .gov-editorial-item p {
    color: rgba(28, 26, 23, 0.72);
  }
}
@media (max-width: 767px) {
  .gov-editorial-lead {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .gov-editorial-intro {
    color: rgba(28, 26, 23, 0.72);
  }
  .gov-editorial-num {
    color: #5f8d5b;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  }
  .gov-editorial-item h3 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .gov-editorial-item h3 small {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .gov-editorial-item p {
    color: rgba(28, 26, 23, 0.72);
  }
}

/* ==========================================================================
   SDGs service rows
   ========================================================================== */
@media (min-width: 768px) {
  .service-row {
    border-top-color: rgba(28, 26, 23, 0.18);
    background: transparent;
  }
  .services-list .service-row:last-of-type {
    border-bottom-color: rgba(28, 26, 23, 0.18);
  }
  .service-row .index {
    color: #5f8d5b;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .service-row h3 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .service-row .en {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .service-row .desc {
    color: rgba(28, 26, 23, 0.72);
  }
}
@media (max-width: 767px) {
  .service-row {
    border-top-color: rgba(28, 26, 23, 0.18);
    background: transparent;
  }
  .services-list .service-row:last-of-type {
    border-bottom-color: rgba(28, 26, 23, 0.18);
  }
  .service-row .index {
    color: #5f8d5b;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .service-row h3 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .service-row .en {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .service-row .desc {
    color: rgba(28, 26, 23, 0.72);
  }
}

/* ==========================================================================
   Service-cell / service-row spacing — DOM order is now num → en → h3 → desc
   (EN above JP). Adjust margins so EN sits tight to JP, with wider gap
   before the description copy.
   ========================================================================== */
@media (min-width: 768px) {
  .service-cell-body .en {
    margin: 0 0 4px 0;
  }
  .service-cell-body h3 {
    margin: 0 0 12px 0;
  }
  .service-row > div:nth-child(2) .en {
    margin: 0 0 4px 0;
  }
  .service-row > div:nth-child(2) h3 {
    margin: 0;
  }
}
@media (max-width: 767px) {
  .service-cell-body .en {
    margin: 0 0 4px 0;
  }
  .service-cell-body h3 {
    margin: 0 0 10px 0;
  }
  .service-row > div:nth-child(2) .en {
    margin: 0 0 4px 0;
  }
  .service-row > div:nth-child(2) h3 {
    margin: 0;
  }
}

/* ==========================================================================
   Organization
   ========================================================================== */
@media (min-width: 768px) {
  .org-desc-lead {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .org-desc p {
    color: rgba(28, 26, 23, 0.75);
  }
  .org-replay {
    color: #857f75;
    border-color: rgba(28, 26, 23, 0.18);
  }
  .org-replay:hover {
    background: #5f8d5b;
    color: #fff;
    border-color: #5f8d5b;
  }
}
@media (max-width: 767px) {
  .org-desc-lead {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .org-desc p {
    color: rgba(28, 26, 23, 0.75);
  }
  .org-replay {
    color: #857f75;
    border-color: rgba(28, 26, 23, 0.18);
  }
  .org-replay:hover {
    background: #5f8d5b;
    color: #fff;
    border-color: #5f8d5b;
  }
}

/* ==========================================================================
   Access
   ========================================================================== */
@media (min-width: 768px) {
  .access-list dt {
    color: #5f8d5b;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.2em;
  }
  .access-list dd {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    border-bottom-color: rgba(28, 26, 23, 0.1);
  }
  .access-info h3 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
}
@media (max-width: 767px) {
  .access-list dt {
    color: #5f8d5b;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.2em;
  }
  .access-list dd {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    border-bottom-color: rgba(28, 26, 23, 0.1);
  }
  .access-info h3 {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
}

/* ==========================================================================
   CTA — all text #0a0202 (handled by descendant selector, no !important)
   ========================================================================== */
@media (min-width: 768px) {
  section.cta {
    background: #1c1a17;
    color: #3e3e3e;
  }
  section.cta,
  section.cta * {
    color: #3e3e3e;
  }
  .cta-eyebrow {
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3em;
  }
  .cta-title {
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .cta-text {
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
}
@media (max-width: 767px) {
  section.cta {
    background: #1c1a17;
    color: #3e3e3e;
  }
  section.cta,
  section.cta * {
    color: #3e3e3e;
  }
  .cta-eyebrow {
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.3em;
  }
  .cta-title {
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .cta-text {
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
@media (min-width: 768px) {
  .site-footer {
    background: #f2efe9;
    color: rgba(28, 26, 23, 0.72);
    border-top-color: rgba(28, 26, 23, 0.1);
  }
  .footer-brand-kanji {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .footer-brand-en {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .footer-address {
    color: rgba(28, 26, 23, 0.68);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  .footer-top h4 {
    color: #1c1a17;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.26em;
  }
  .footer-top ul li,
  .footer-top ul a {
    color: rgba(28, 26, 23, 0.68);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  .footer-top ul a:hover {
    color: #5f8d5b;
  }
  .footer-bot {
    color: rgba(28, 26, 23, 0.5);
    border-top-color: rgba(28, 26, 23, 0.1);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.18em;
  }
}
@media (max-width: 767px) {
  .site-footer {
    background: #f2efe9;
    color: rgba(28, 26, 23, 0.72);
    border-top-color: rgba(28, 26, 23, 0.1);
  }
  .footer-brand-kanji {
    color: #1c1a17;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
  }
  .footer-brand-en {
    color: #857f75;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    font-style: italic;
  }
  .footer-address {
    color: rgba(28, 26, 23, 0.68);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  .footer-top h4 {
    color: #1c1a17;
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.26em;
  }
  .footer-top ul li,
  .footer-top ul a {
    color: rgba(28, 26, 23, 0.68);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
  }
  .footer-top ul a:hover {
    color: #5f8d5b;
  }
  .footer-bot {
    color: rgba(28, 26, 23, 0.5);
    border-top-color: rgba(28, 26, 23, 0.1);
    font-family: 'Manrope', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.18em;
  }
}