#about-reference .section-about {
    --navy-dark: #072638;
    --teal-primary: #146b78;
    --teal-accent: #179b8d;
    --bg-soft: #f2f7f6;
    --text-dark: #092536;
    --text-muted: #5a6f7c;
    --white: #ffffff;
    --transition-smooth: all 0.38s cubic-bezier(0.165, 0.84, 0.44, 1);

    background-color: var(--bg-soft);
    padding: 96px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  #about-reference .about-container {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 80px;
    align-items: flex-end;
  }

  /* Left Side: Eyebrow & Heading */
  #about-reference .about-left {
    max-width: 460px;
  }

  #about-reference .about-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-primary);
    margin-bottom: 14px;
  }

  #about-reference .about-title {
    font-size: clamp(2.1rem, 3.4vw, 2.85rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-dark);
    margin: 0;
  }

  #about-reference .about-title span {
    display: block;
    color: var(--teal-primary);
  }

  /* Right Side: Open Clean Description & Button */
  #about-reference .about-right {
    position: relative;
    padding-left: 32px;
    border-left: 1.5px solid rgba(20, 107, 120, 0.15);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Subtle line fill on hover */
  #about-reference .about-right::before {
    content: '';
    position: absolute;
    left: -1.5px;
    top: 0;
    width: 1.5px;
    height: 0%;
    background-color: var(--teal-primary);
    transition: height 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  #about-reference .about-container:hover .about-right::before {
    height: 100%;
  }

  #about-reference .about-desc {
    font-size: 0.94rem;
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: 400;
    margin: 0 0 28px 0;
    max-width: 520px;
  }

  /* Dark Navy Animated Pill Button (No Default Shadow) */
  #about-reference .about-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    background: var(--navy-dark);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    overflow: hidden;
    transition: var(--transition-smooth);
    z-index: 1;
  }

  #about-reference .about-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--teal-primary), var(--teal-accent));
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
    border-radius: 50px;
  }

  #about-reference .about-btn:hover::before {
    width: 100%;
  }

  #about-reference .about-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 107, 120, 0.25);
  }

  #about-reference .about-btn .arrow-icon {
    display: inline-flex;
    transition: transform 0.35s ease;
  }

  #about-reference .about-btn:hover .arrow-icon {
    transform: translate(3px, -3px) rotate(45deg);
  }

  /* Responsive Design */
  @media (max-width: 900px) {
    #about-reference .about-container {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    #about-reference .about-right {
      padding-left: 20px;
    }
  }


  #about-reference .section-identity {
    --navy-dark: #072638;
    --teal-primary: #146b78;
    --teal-accent: #179b8d;
    --bg-clean: #ffffff;
    --soft-btn-bg: #e6efee;
    --text-dark: #092536;
    --text-muted: #5a6f7c;
    --white: #ffffff;
    --transition-smooth: all 0.38s cubic-bezier(0.165, 0.84, 0.44, 1);

    background-color: var(--bg-clean);
    padding: 96px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  #about-reference .identity-container {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 76px;
    align-items: center;
  }

  /* Left Side: Clean Image Card (No Default Shadow) */
  #about-reference .identity-left {
    position: relative;
  }

  #about-reference .identity-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(20, 107, 120, 0.12);
    transition: var(--transition-smooth);
  }

  #about-reference .identity-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(7, 38, 56, 0.12);
  }

  #about-reference .identity-img-box {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: #e2eceb;
  }

  #about-reference .identity-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  #about-reference .identity-card:hover .identity-img {
    transform: scale(1.05);
  }

  /* Right Side: Content & Soft Button */
  #about-reference .identity-right {
    max-width: 540px;
  }

  #about-reference .identity-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-primary);
    margin-bottom: 16px;
  }

  #about-reference .identity-title {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-dark);
    margin-bottom: 22px;
  }

  #about-reference .identity-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.68;
    font-weight: 400;
    margin-bottom: 36px;
  }

  /* Soft Mint-Grey Animated Button matching reference */
  #about-reference .identity-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    background: var(--soft-btn-bg);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    overflow: hidden;
    transition: var(--transition-smooth);
    z-index: 1;
  }

  #about-reference .identity-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--teal-primary), var(--teal-accent));
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
    border-radius: 50px;
  }

  #about-reference .identity-btn:hover::before {
    width: 100%;
  }

  #about-reference .identity-btn:hover {
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 107, 120, 0.22);
  }

  #about-reference .identity-btn .arrow-icon {
    display: inline-flex;
    transition: transform 0.35s ease;
  }

  #about-reference .identity-btn:hover .arrow-icon {
    transform: translate(3px, -3px) rotate(45deg);
  }

  /* Responsive Design */
  @media (max-width: 960px) {
    #about-reference .identity-container {
      grid-template-columns: 1fr;
      gap: 48px;
    }
    #about-reference .identity-right {
      max-width: 100%;
    }
    #about-reference .identity-img-box {
      height: 300px;
    }
  }

/* Shared site width, semantic title, and responsive refinements. */
#about-reference .about-container, #about-reference .identity-container { max-width: 1202px; }
#about-reference .about-title { font-family: Inter,Arial,sans-serif; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
#about-reference .identity-title { font-family: Inter,Arial,sans-serif; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; margin-top: 0; }
#about-reference a:focus-visible { outline: 3px solid #116f7b; outline-offset: 5px; }
@media (max-width: 640px) {
 #about-reference .section-about, #about-reference .section-identity { padding: 48px 20px; }
 #about-reference .about-container, #about-reference .identity-container { gap: 32px; }
 #about-reference .identity-img-box { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
 #about-reference *, #about-reference *::before { transition: none !important; }
 #about-reference .identity-card:hover, #about-reference .identity-card:hover .identity-img, #about-reference .about-btn:hover, #about-reference .identity-btn:hover { transform: none; }
}

/* Purpose: a strong Vision panel, open Mission commitments and quiet pillars. */
.public-site[data-page="about"] .corporate-purpose { background: #f5f8f7; scroll-margin-top: 104px; padding-block: 72px; }
.public-site[data-page="about"] .corporate-purpose-heading { margin-bottom: 40px; }
.public-site[data-page="about"] .corporate-purpose-heading .eyebrow { display: flex; align-items: center; gap: 12px; }
.public-site[data-page="about"] .corporate-purpose-heading .eyebrow::before { content: ''; width: 24px; height: 2px; background: #b8984f; }
.public-site[data-page="about"] .corporate-purpose-heading h2 { margin: 12px 0 0; color: #072638; font-size: clamp(32px,3vw,44px); letter-spacing: -.03em; line-height: 1.15; font-weight: 600; }
.public-site[data-page="about"] .corporate-purpose-heading h2 span { color: #116f7b; }
.public-site[data-page="about"] .corporate-statements { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: start; }
.public-site[data-page="about"] .corporate-statement h3 { color: #116f7b; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 20px; }
.public-site[data-page="about"] .corporate-statement .corporate-positioning { font-size: 30px; font-weight: 500; color: #072638; line-height: 1.25; margin: 0 0 24px; letter-spacing: -.025em; }
.public-site[data-page="about"] .corporate-statement > p:not(.corporate-positioning),
.public-site[data-page="about"] .corporate-mission-list { font-size: 15px; color: #526b77; line-height: 1.75; margin: 0; }
.public-site[data-page="about"] .corporate-vision { background: #072638; padding: 40px; border-radius: 14px; position: relative; }
.public-site[data-page="about"] .corporate-vision::before { content: ''; display: block; width: 40px; height: 3px; background: #c7a34d; margin-bottom: 32px; }
.public-site[data-page="about"] .corporate-vision h3 { color: #a7d8cc; }
.public-site[data-page="about"] .corporate-vision .corporate-positioning { color: #fff; font-size: clamp(28px,2.4vw,34px); }
.public-site[data-page="about"] .corporate-vision > p:not(.corporate-positioning) { color: #cedee4; }
.public-site[data-page="about"] .corporate-mission { padding-block: 8px; }
.public-site[data-page="about"] .corporate-mission-list { padding: 0; margin-top: 24px; list-style: none; counter-reset: commitments; }
.public-site[data-page="about"] .corporate-mission-list li { counter-increment: commitments; position: relative; padding: 16px 0 16px 44px; border-bottom: 1px solid #dce7e3; }
.public-site[data-page="about"] .corporate-mission-list li:first-child { padding-top: 0; }
.public-site[data-page="about"] .corporate-mission-list li::before { content: counter(commitments,decimal-leading-zero); position: absolute; left: 0; top: 20px; color: #116f7b; font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.public-site[data-page="about"] .corporate-mission-list li:first-child::before { top: 4px; }
.public-site[data-page="about"] .corporate-mission-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.public-site[data-page="about"] .corporate-mission-list strong { color: #183e4c; font-weight: 600; }
.public-site[data-page="about"] .corporate-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 48px; padding: 32px; border-radius: 12px; background: #e7f0ec; }
.public-site[data-page="about"] .corporate-pillars article { padding-top: 16px; position: relative; }
.public-site[data-page="about"] .corporate-pillars article::before { content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 2px; background: #ad8e47; transition: width 200ms ease; }
.public-site[data-page="about"] .corporate-pillars article:hover::before { width: 40px; }
.public-site[data-page="about"] .corporate-pillars h3 { margin: 0 0 8px; color: #072638; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.public-site[data-page="about"] .corporate-pillars p { margin: 0; color: #526b77; font-size: 14px; line-height: 1.7; }
@media (max-width: 900px) {
 .public-site[data-page="about"] .corporate-statements { grid-template-columns: 1fr; gap: 32px; }
 .public-site[data-page="about"] .corporate-pillars { gap: 24px; }
}
@media (max-width: 640px) {
 .public-site[data-page="about"] .corporate-purpose { padding-block: 48px; scroll-margin-top: 96px; }
 .public-site[data-page="about"] .corporate-purpose-heading { margin-bottom: 32px; }
 .public-site[data-page="about"] .corporate-vision { padding: 28px; }
 .public-site[data-page="about"] .corporate-vision::before { margin-bottom: 24px; }
 .public-site[data-page="about"] .corporate-statement .corporate-positioning { font-size: 28px; }
 .public-site[data-page="about"] .corporate-pillars { grid-template-columns: 1fr; gap: 28px; padding: 24px; margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
 .public-site[data-page="about"] .corporate-pillars article::before { transition: none; }
}

/* Supplied Commitment section reference. */

  #commitment-reference.section-commitment {
    --navy-dark: #072638;
    --teal-primary: #146b78;
    --teal-accent: #179b8d;
    --bg-clean: #ffffff;
    --soft-btn-bg: #e6efee;
    --text-dark: #092536;
    --text-muted: #5a6f7c;
    --white: #ffffff;
    --transition-smooth: all 0.38s cubic-bezier(0.165, 0.84, 0.44, 1);

    background-color: var(--bg-clean);
    padding: 96px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  #commitment-reference .commitment-container {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 76px;
    align-items: center;
  }

  /* Left Side: Content & Soft Button */
  #commitment-reference .commitment-left {
    max-width: 540px;
  }

  #commitment-reference .commitment-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 16px;
  }

  #commitment-reference .commitment-eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background-color: var(--text-dark);
    display: inline-block;
  }

  #commitment-reference .commitment-title {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-dark);
    margin-bottom: 22px;
  }

  #commitment-reference .commitment-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.68;
    font-weight: 400;
    margin-bottom: 36px;
  }

  /* Soft Mint-Grey Animated Button matching reference */
  #commitment-reference .commitment-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    background: var(--soft-btn-bg);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    overflow: hidden;
    transition: var(--transition-smooth);
    z-index: 1;
  }

  #commitment-reference .commitment-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--teal-primary), var(--teal-accent));
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
    border-radius: 50px;
  }

  #commitment-reference .commitment-btn:hover::before {
    width: 100%;
  }

  #commitment-reference .commitment-btn:hover {
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 107, 120, 0.22);
  }

  #commitment-reference .commitment-btn .arrow-icon {
    display: inline-flex;
    transition: transform 0.35s ease;
  }

  #commitment-reference .commitment-btn:hover .arrow-icon {
    transform: translate(3px, -3px) rotate(45deg);
  }

  /* Right Side: Clean Image Card (No Default Shadow) */
  #commitment-reference .commitment-right {
    position: relative;
  }

  #commitment-reference .commitment-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(20, 107, 120, 0.12);
    transition: var(--transition-smooth);
  }

  #commitment-reference .commitment-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(7, 38, 56, 0.12);
  }

  #commitment-reference .commitment-img-box {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: #e2eceb;
  }

  #commitment-reference .commitment-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  #commitment-reference .commitment-card:hover .commitment-img {
    transform: scale(1.05);
  }

  /* Responsive Design */
  @media (max-width: 960px) {
    #commitment-reference .commitment-container {
      grid-template-columns: 1fr;
      gap: 48px;
    }
    #commitment-reference .commitment-left {
      max-width: 100%;
    }
    #commitment-reference .commitment-img-box {
      height: 300px;
    }
  }

#commitment-reference .commitment-container { max-width: 1202px; }
#commitment-reference .commitment-title { margin-top: 0; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
#commitment-reference .commitment-btn:focus-visible { outline: 3px solid #146b78; outline-offset: 5px; }
@media (max-width: 640px) { #commitment-reference.section-commitment { padding: 48px 20px; } }
@media (prefers-reduced-motion: reduce) {
 #commitment-reference *, #commitment-reference *::before { transition: none !important; }
 #commitment-reference .commitment-btn:hover, #commitment-reference .commitment-card:hover, #commitment-reference .commitment-card:hover .commitment-img { transform: none; }
}

/* Owner team photograph: show the full 4:3 frame so the brand wall stays visible. */
#about-reference .identity-img-box,
#about-reference .section-identity .identity-img-box { height: auto; aspect-ratio: 4 / 3; }
#commitment-reference .commitment-img-box { height: auto; aspect-ratio: 3 / 2; }