/* Styles extracted from about.html */

html,
body {
      max-width: 100%;
      overflow-x: hidden;
    }

body {
      min-width: 0;
    }

body *,
body *::before,
body *::after {
      min-width: 0;
    }

header {
      padding-bottom: 86px;
    }

    .about-hero,
    .about-section,
    .site-footer {
      max-width: 100%;
      overflow-x: clip;
    }

    .about-hero {
      min-height: 420px;
      display: flex;
      align-items: flex-end;
      padding: 6rem 20px 3rem;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(120deg, rgba(6,43,95,0.88), rgba(23,32,51,0.52) 52%, rgba(29,78,216,0.42)),
        url("../image/gate.png") center / cover no-repeat;
    }

    .about-hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 120px;
      background: linear-gradient(180deg, transparent, rgba(209,214,219,0.95));
      pointer-events: none;
    }

    .about-hero-content {
      width: min(100%, 1200px);
      margin: 0 auto;
      position: relative;
      z-index: 1;
      color: #ffffff;
      animation: aboutHeroIn 0.8s ease both;
    }

    .about-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      margin-bottom: 0.85rem;
      padding: 0.45rem 0.8rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.28);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }

    .about-hero h1 {
      max-width: 820px;
      font-size: clamp(2.4rem, 6vw, 4.8rem);
      line-height: 1.04;
      margin-bottom: 0.9rem;
      letter-spacing: 0;
    }

    .about-hero p {
      max-width: 680px;
      color: #e5edf8;
      font-size: clamp(1rem, 2vw, 1.15rem);
    }

    .about-section {
      padding: 3.2rem 20px 0;
    }

    .about-wrap {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .work-intro {
      display: grid;
      grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
      gap: 1.5rem;
      align-items: stretch;
      width: 100%;
    }

    .work-heading,
    .work-copy,
    .focus-panel,
    .image-band {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96) 60%, rgba(255,252,239,0.9)),
        repeating-linear-gradient(135deg, rgba(6,43,95,0.018) 0 1px, transparent 1px 26px);
      border: 1px solid rgba(30,58,95,0.14);
      border-radius: 18px;
      box-shadow:
        0 18px 42px rgba(15,23,42,0.11),
        0 1px 0 rgba(255,255,255,0.90) inset;
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    }

    .work-heading {
      padding: 1.8rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 300px;
      overflow: hidden;
      position: relative;
    }

    .work-heading::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--accent), #d4af37);
      pointer-events: none;
    }

    .work-heading::after {
      content: "";
      position: absolute;
      right: -80px;
      bottom: -90px;
      width: 220px;
      height: 220px;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(212,175,55,0.20), rgba(29,78,216,0.08) 42%, transparent 68%);
      pointer-events: none;
    }

    .work-heading > * {
      position: relative;
      z-index: 1;
    }

    .work-label {
      display: inline-flex;
      width: fit-content;
      padding: 0.34rem 0.72rem;
      border-radius: 999px;
      background: rgba(29,78,216,0.09);
      border: 1px solid rgba(29,78,216,0.15);
      color: var(--primary);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.9px;
      text-transform: uppercase;
    }

    .work-heading h2 {
      color: var(--primary);
      font-size: clamp(1.8rem, 3.4vw, 2.8rem);
      line-height: 1.08;
      margin-top: 1rem;
      letter-spacing: 0;
    }

    .work-heading-icon {
      width: 58px;
      height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border: 1px solid rgba(255,255,255,0.9);
      color: #ffffff;
      font-size: 1.32rem;
      box-shadow:
        0 14px 28px rgba(6,43,95,0.24),
        0 1px 0 rgba(255,255,255,0.32) inset;
    }

    .work-copy {
      padding: 1.8rem;
    }

    .work-copy::before,
    .focus-panel::before,
    .image-band::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--accent), #d4af37);
      pointer-events: none;
    }

    .work-heading:hover,
    .work-copy:hover,
    .focus-panel:hover,
    .image-band:hover {
      transform: translateY(-5px);
      border-color: rgba(29,78,216,0.30);
      box-shadow:
        0 24px 52px rgba(15,23,42,0.16),
        0 0 0 1px rgba(29,78,216,0.08);
    }

    .work-copy p {
      color: #526071;
      font-size: 0.95rem;
      line-height: 1.78;
      margin-bottom: 0.9rem;
    }

    .work-copy p:last-child {
      margin-bottom: 0;
    }

    .focus-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.15rem;
      margin-top: 1.35rem;
      width: 100%;
    }

    .focus-panel {
      min-height: 210px;
      padding: 1.35rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .focus-panel i {
      width: 50px;
      height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      border-radius: 14px;
      color: #ffffff;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      border: 1px solid rgba(255,255,255,0.9);
      box-shadow:
        0 12px 22px rgba(6,43,95,0.22),
        0 1px 0 rgba(255,255,255,0.32) inset;
      font-size: 1.05rem;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .focus-panel:hover i {
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 16px 28px rgba(6,43,95,0.30);
    }

    .focus-panel h3 {
      color: var(--primary);
      margin-bottom: 0.45rem;
      font-size: 1.03rem;
      line-height: 1.25;
    }

    .focus-panel p {
      color: #526071;
      font-size: 0.88rem;
      line-height: 1.62;
      margin: 0;
    }

    .about-why {
      margin-top: 1.5rem;
      padding: 2rem 1.25rem;
      border-radius: 20px;
      border: 1px solid rgba(91,103,115,0.14);
      background:
        linear-gradient(135deg, rgba(255,247,237,0.96), rgba(239,246,255,0.96) 48%, rgba(240,253,244,0.94)),
        #ffffff;
      box-shadow: 0 18px 40px rgba(15,23,42,0.12);
      overflow: hidden;
      position: relative;
    }

    .about-why::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 6px;
      background: linear-gradient(90deg, #fb7185, #fbbf24, #34d399, #60a5fa, #a78bfa);
    }

    .about-why::after {
      content: "";
      position: absolute;
      inset: 6px 0 0;
      background: repeating-linear-gradient(135deg, rgba(6,43,95,0.035) 0 1px, transparent 1px 20px);
      pointer-events: none;
    }

    .about-why-head {
      margin-bottom: 1.35rem;
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .about-why-head h2 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 0.82rem;
      margin: 0 0 0.8rem;
      padding: 0.42rem 0.9rem;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 12px 24px rgba(6,43,95,0.2);
    }

    .about-why-head p {
      max-width: 780px;
      color: #172033;
      font-size: clamp(1.45rem, 3vw, 2rem);
      font-weight: 750;
      line-height: 1.18;
      margin: 0 auto;
    }

    .about-why-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      position: relative;
      z-index: 1;
      width: 100%;
    }

    .about-why-card {
      --choose-color: #1d4ed8;
      --choose-grad: linear-gradient(135deg, #60a5fa, #1d4ed8);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
      min-height: 146px;
      padding: 1rem;
      border-radius: 14px;
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(91,103,115,0.12);
      border-left: 5px solid var(--choose-color);
      box-shadow: 0 10px 24px rgba(15,23,42,0.10);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .about-why-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: var(--choose-grad);
    }

    .about-why-card:hover {
      transform: translateY(-4px);
      border-color: rgba(91,103,115,0.18);
      box-shadow: 0 16px 30px rgba(15,23,42,0.15);
    }

    .about-why-icon {
      width: 58px;
      height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      color: #ffffff;
      font-size: 1.15rem;
      flex: 0 0 auto;
      background: var(--choose-grad);
      box-shadow: 0 12px 22px rgba(15,23,42,0.16);
    }

    .about-why-card h3 {
      color: var(--choose-color);
      font-size: 1.05rem;
      line-height: 1.25;
      margin: 0.1rem 0 0.35rem;
    }

    .about-why-card p {
      color: var(--slate);
      font-size: 0.83rem;
      line-height: 1.48;
      margin: 0;
    }

    .about-why-card.choose-red {
      --choose-color: #f43f5e;
      --choose-grad: linear-gradient(135deg, #fb7185, #ef4444);
    }

    .about-why-card.choose-green {
      --choose-color: #16a34a;
      --choose-grad: linear-gradient(135deg, #34d399, #16a34a);
    }

    .about-why-card.choose-pink {
      --choose-color: #db2777;
      --choose-grad: linear-gradient(135deg, #fb7185, #db2777);
    }

    .about-why-card.choose-teal {
      --choose-color: #0891b2;
      --choose-grad: linear-gradient(135deg, #22d3ee, #0891b2);
    }

    .about-why.choice-section {
      padding: 2.55rem 1.25rem 2.25rem;
      background:
        radial-gradient(circle at 12% 12%, rgba(212,175,55,0.16), transparent 28%),
        radial-gradient(circle at 92% 0%, rgba(29,78,216,0.14), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96) 52%, rgba(255,251,235,0.88));
      border-radius: 22px;
      box-shadow: 0 22px 48px rgba(15,23,42,0.14);
    }

    .about-why.choice-section::before {
      height: 6px;
      background: linear-gradient(90deg, var(--primary), var(--accent), #d4af37);
    }

    .about-why.choice-section::after {
      inset: 6px 0 0;
      background:
        linear-gradient(rgba(6,43,95,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,43,95,0.035) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    .choice-inner {
      position: relative;
      z-index: 1;
    }

    .choice-header {
      max-width: 880px;
      margin: 0 auto 1.35rem;
      text-align: center;
    }

    .choice-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.7rem;
      padding: 0.42rem 0.9rem;
      border-radius: 999px;
      color: var(--primary);
      background: rgba(29,78,216,0.10);
      border: 1px solid rgba(29,78,216,0.16);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .choice-header h2 {
      color: var(--primary);
      font-size: clamp(1.8rem, 4vw, 2.85rem);
      line-height: 1.08;
      margin-bottom: 0.65rem;
    }

    .choice-header p {
      color: var(--slate);
      font-size: 1rem;
      line-height: 1.65;
      margin: 0 auto;
    }

    .choice-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.8rem;
      margin: 0 auto 1.35rem;
      width: 100%;
    }

    .choice-stat {
      min-height: 74px;
      padding: 0.82rem 0.9rem;
      border-radius: 14px;
      background:
        repeating-linear-gradient(135deg, rgba(29,78,216,0.055) 0 1px, transparent 1px 18px),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(239,248,255,0.94));
      border: 1px solid rgba(91,103,115,0.14);
      box-shadow: 0 10px 22px rgba(15,23,42,0.08);
    }

    .choice-stat strong {
      display: block;
      color: var(--primary);
      font-size: 1rem;
      line-height: 1.15;
    }

    .choice-stat span {
      display: block;
      margin-top: 0.22rem;
      color: var(--slate);
      font-size: 0.76rem;
      line-height: 1.35;
    }

    .choice-showcase {
      display: grid;
      grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.35fr);
      gap: 1rem;
      align-items: stretch;
      width: 100%;
    }

    .choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      width: 100%;
    }

    .choice-card {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 236px;
      border-radius: 16px;
      background:
        repeating-linear-gradient(135deg, rgba(29,78,216,0.052) 0 1px, transparent 1px 20px),
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,248,255,0.96));
      border: 1px solid rgba(91,103,115,0.14);
      box-shadow: 0 14px 28px rgba(15,23,42,0.10);
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    }

    .choice-card:hover {
      transform: translateY(-7px);
      border-color: rgba(29,78,216,0.28);
      box-shadow: 0 24px 44px rgba(15,23,42,0.16);
    }

    .choice-card-image {
      height: 128px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(6,43,95,0.08), rgba(29,78,216,0.12));
    }

    .choice-card-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 0.35s ease, filter 0.35s ease;
    }

    .choice-card:hover .choice-card-image img {
      transform: scale(1.07);
      filter: saturate(1.08) contrast(1.03);
    }

    .choice-card-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(6,43,95,0.03), rgba(6,43,95,0.34));
    }

    .choice-featured {
      min-height: 100%;
      border-color: rgba(212,175,55,0.35);
      box-shadow: 0 22px 46px rgba(15,23,42,0.15);
    }

    .choice-featured .choice-card-image {
      height: 292px;
    }

    .choice-card-body {
      flex: 1;
      padding: 0.95rem 1rem 1.05rem;
    }

    .choice-featured .choice-card-body {
      padding: 1.15rem;
    }

    .choice-badge {
      display: inline-flex;
      align-items: center;
      margin-bottom: 0.48rem;
      padding: 0.28rem 0.62rem;
      border-radius: 999px;
      color: var(--primary);
      background: rgba(212,175,55,0.16);
      border: 1px solid rgba(212,175,55,0.26);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }

    .choice-card h3 {
      color: var(--primary);
      font-size: 1.08rem;
      font-weight: 800;
      line-height: 1.22;
      margin: 0 0 0.38rem;
    }

    .choice-featured h3 {
      font-size: 1.35rem;
    }

    .choice-card p {
      color: var(--slate);
      font-size: 0.84rem;
      line-height: 1.5;
      margin: 0;
    }

    @media (max-width: 980px) {
      .choice-showcase {
        grid-template-columns: 1fr;
      }

      .choice-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .choice-featured .choice-card-image {
        height: 240px;
      }
    }

    @media (max-width: 640px) {
      .about-why.choice-section {
        padding: 2.25rem 1rem;
      }

      .choice-header {
        margin-bottom: 1.1rem;
      }

      .choice-header p {
        font-size: 0.92rem;
      }

      .choice-stats,
      .choice-grid {
        grid-template-columns: 1fr;
      }

      .choice-stat {
        min-height: 64px;
      }

      .choice-featured .choice-card-image,
      .choice-card-image {
        height: 170px;
      }
    }

    .image-band {
      margin-top: 1.5rem;
      padding: 1rem 0;
      max-width: 100%;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .image-band-track {
      display: flex;
      width: max-content;
      max-width: none;
      gap: 1rem;
      padding-inline: 1rem;
      animation: aboutImageSlide 34s linear infinite;
      will-change: transform;
    }

    .image-band:hover .image-band-track {
      animation-play-state: paused;
    }

    .image-band img {
      width: clamp(230px, 28vw, 360px);
      flex: 0 0 auto;
      height: 220px;
      object-fit: cover;
      border-radius: 14px;
      display: block;
      border: 1px solid rgba(255,255,255,0.86);
      box-shadow: 0 12px 28px rgba(15,23,42,0.14);
      transition: transform 0.35s ease, filter 0.35s ease;
    }

    .image-band img:hover {
      transform: scale(1.035);
      filter: saturate(1.08);
    }

    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }

    .reveal-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .focus-panel:nth-child(2) {
      transition-delay: 0.08s;
    }

    .focus-panel:nth-child(3) {
      transition-delay: 0.16s;
    }

    @media (max-width: 900px) {
      .work-intro,
      .focus-grid {
        grid-template-columns: 1fr;
      }

      .about-why-grid {
        grid-template-columns: 1fr;
      }

      .work-heading {
        min-height: 260px;
      }

      .image-band img {
        width: clamp(240px, 56vw, 330px);
        height: 240px;
      }
    }

    @media (max-width: 600px) {
      header {
        padding-bottom: 94px;
      }

      .about-hero {
        min-height: 380px;
        padding-inline: 14px;
        padding-top: 5rem;
        padding-bottom: 2.4rem;
      }

      .about-section {
        padding-top: 2rem;
        padding-inline: 12px;
      }

      .work-heading,
      .work-copy,
      .focus-panel,
      .about-why {
        padding: 1.35rem;
        border-radius: 16px;
      }

      .work-heading {
        min-height: 0;
      }

      .work-heading h2 {
        font-size: clamp(1.65rem, 9vw, 2.25rem);
      }

      .choice-showcase,
      .choice-grid,
      .choice-stats,
      .about-why-grid {
        gap: 0.85rem;
      }

      .choice-card,
      .about-why-card {
        min-height: 0;
      }

      .choice-card-body,
      .choice-featured .choice-card-body {
        padding: 0.9rem;
      }

      .image-band img {
        width: min(78vw, 285px);
        height: clamp(180px, 58vw, 220px);
      }

      .image-band-track {
        gap: 0.7rem;
        padding-inline: 0.75rem;
      }

      .social-floating {
        right: 10px;
        bottom: 10px;
      }

      .social-floating a {
        width: 42px;
        height: 42px;
      }
    }

    @media (max-width: 420px) {
      header {
        padding-bottom: 104px;
      }

      .about-hero {
        min-height: 340px;
        padding-top: 4.5rem;
        padding-bottom: 2rem;
      }

      .about-kicker {
        max-width: 100%;
        flex-wrap: wrap;
        font-size: 0.68rem;
        letter-spacing: 0.7px;
      }

      .work-heading,
      .work-copy,
      .focus-panel,
      .about-why {
        padding: 1.05rem;
      }

      .focus-panel i,
      .about-why-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
      }

      .about-why-card {
        flex-direction: column;
        gap: 0.7rem;
      }

      .choice-featured .choice-card-image,
      .choice-card-image {
        height: 150px;
      }

      .choice-badge {
        white-space: normal;
      }

      .image-band {
        padding-block: 0.8rem;
        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      }

      .image-band img {
        width: min(82vw, 260px);
        height: clamp(170px, 62vw, 205px);
        border-radius: 12px;
      }
    }

    @media (hover: none), (max-width: 768px) {
      .work-heading:hover,
      .work-copy:hover,
      .focus-panel:hover,
      .image-band:hover,
      .about-why-card:hover,
      .choice-card:hover {
        transform: none;
      }
    }

    @keyframes aboutImageSlide {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(calc(-50% - 0.5rem));
      }
    }

    @keyframes aboutHeroIn {
      from {
        opacity: 0;
        transform: translateY(24px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }