/* :root vars, reset, body, nav, mobile-menu — moved to resources/css/app.css */
    /* ========================================
       SHARED STYLES
    ======================================== */
    /* .section-label / .section-title / .section-desc / .btn-gold — moved to resources/css/partials/typography.css */

    /* ========================================
       PAGE HERO
    ======================================== */
    .page-hero {
      height: 70vh; min-height: 500px;
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: var(--charcoal-deep);
    }
    .page-hero-bg {
      position: absolute; inset: 0;
      background: image-set(url('/images/page-hero-experience.webp') type('image/webp'), url('/images/page-hero-experience.jpg') type('image/jpeg')) center/cover no-repeat;
    }
    .page-hero-content {
      position: relative; z-index: 1;
      text-align: center; color: var(--ivory);
      padding: 4rem 5rem;
    }
    .page-hero-content::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      -webkit-mask-image: radial-gradient(ellipse 50% 70% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(ellipse 50% 70% at center,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 12%,rgba(0,0,0,0.74) 26%,rgba(0,0,0,0.5) 42%,rgba(0,0,0,0.28) 58%,rgba(0,0,0,0.13) 72%,rgba(0,0,0,0.05) 84%,rgba(0,0,0,0.01) 94%,rgba(0,0,0,0) 100%);
    }
    .page-hero-content h1 {
      font-size: 3rem; font-weight: 900; letter-spacing: 0.3em; line-height: 1.3;
      color: var(--ivory); text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 8px rgba(0,0,0,0.3); margin-bottom: 1rem;
    }
    .page-hero-content h1 span {
      display: block; font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.8rem; letter-spacing: 0.6em;
      color: var(--gold); font-weight: 400; margin-top: 0.5rem;
      text-shadow: 0 2px 16px rgba(0,0,0,0.5);
    }
    .page-hero-content p {
      font-size: 0.9rem; font-weight: 300;
      color: rgba(255, 253, 245, 0.95); letter-spacing: 0.15em;
      text-shadow: 0 1px 8px rgba(0,0,0,0.4);
    }

    /* ========================================
       SERVICES GRID
    ======================================== */
    .services-section {
      background: var(--ivory);
      padding: 7rem 4rem;
    }
    .services-header {
      text-align: center; margin-bottom: 5rem;
    }
    .services-header .section-desc {
      margin: 0 auto; text-align: center;
    }
    .services-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2rem; max-width: 1200px; margin: 0 auto;
    }
    .service-card {
      position: relative; overflow: hidden;
      background: var(--champagne-light);
      transition: transform 0.4s;
    }
    .service-card:hover { transform: translateY(-4px); }
    .service-card-img {
      position: relative; overflow: hidden;
      aspect-ratio: 4/3;
    }
    .service-card-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 6s ease;
    }
    .service-card:hover .service-card-img img { transform: scale(1.05); }
    .service-card-text {
      padding: 2rem 2rem 2.5rem;
    }
    .service-card-text .en-label {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 0.55rem; letter-spacing: 0.4em;
      color: var(--gold); text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    .service-card-text h3 {
      font-size: 1.1rem; font-weight: 600;
      color: var(--charcoal); letter-spacing: 0.08em;
      margin-bottom: 0.8rem;
    }
    .service-card-text p {
      font-size: 0.78rem; color: rgba(80, 83, 80, 0.55);
      line-height: 2.2; font-weight: 300;
    }

    /* ========================================
       TIMELINE SECTION
    ======================================== */
    .timeline-section {
      background: var(--charcoal-deep);
      padding: 7rem 4rem;
      position: relative; overflow: hidden;
    }
    .timeline-header {
      text-align: center; margin-bottom: 5rem;
      position: relative;
    }
    .timeline-header .section-title { color: var(--champagne-light); }
    .timeline-header .section-desc { color: rgba(255, 253, 245, 0.45); margin: 0 auto; text-align: center; }

    .timeline-tabs {
      display: flex; justify-content: center;
      gap: 0.6rem; margin-bottom: 4rem;
      flex-wrap: wrap; position: relative;
    }
    .timeline-tab {
      padding: 0.7rem 2rem;
      font-family: 'Noto Serif TC', Georgia, serif;
      font-size: 0.78rem; letter-spacing: 0.25em;
      background: transparent; cursor: pointer;
      border: 1px solid rgba(201, 169, 110, 0.35);
      color: rgba(255, 253, 245, 0.55);
      transition: all 0.4s;
    }
    .timeline-tab:hover {
      color: var(--gold);
      border-color: var(--gold);
    }
    .timeline-tab.active {
      background: var(--gold);
      color: var(--ivory);
      border-color: var(--gold);
    }
    .timeline-panel { display: none; }
    .timeline-panel.active { display: block; }
    .timeline {
      max-width: 800px; margin: 0 auto;
      position: relative;
    }
    .timeline::before {
      content: ''; position: absolute;
      left: 50%; top: 0; bottom: 0;
      width: 1px; background: rgba(201, 169, 110, 0.2);
      transform: translateX(-50%);
    }
    .timeline-item {
      display: flex; align-items: center;
      margin-bottom: 3.5rem;
      position: relative;
    }
    .timeline-item:last-child { margin-bottom: 0; }
    .timeline-item:nth-child(odd) { flex-direction: row; }
    .timeline-item:nth-child(even) { flex-direction: row-reverse; }
    .timeline-time {
      flex: 1; text-align: right; padding-right: 3rem;
    }
    .timeline-item:nth-child(even) .timeline-time {
      text-align: left; padding-right: 0; padding-left: 3rem;
    }
    .timeline-time .time {
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 1.2rem; color: var(--gold);
      letter-spacing: 0.1em; font-weight: 400;
    }
    .timeline-dot {
      width: 12px; height: 12px;
      background: var(--gold); border-radius: 50%;
      flex-shrink: 0; position: relative; z-index: 1;
    }
    .timeline-content {
      flex: 1; padding-left: 3rem;
    }
    .timeline-item:nth-child(even) .timeline-content {
      padding-left: 0; padding-right: 3rem;
      text-align: right;
    }
    .timeline-content h4 {
      font-size: 0.95rem; font-weight: 600;
      color: var(--champagne-light); letter-spacing: 0.08em;
      margin-bottom: 0.4rem;
    }
    .timeline-content p {
      font-size: 0.75rem; color: rgba(255, 253, 245, 0.4);
      line-height: 2; font-weight: 300;
    }

    /* ========================================
       TESTIMONIALS
    ======================================== */
    .testimonials-section {
      background: var(--champagne-light);
      padding: 7rem 4rem;
    }
    .testimonials-header {
      text-align: center; margin-bottom: 4.5rem;
    }
    .testimonials-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem; max-width: 1100px; margin: 0 auto;
    }
    .testimonial-card {
      background: var(--ivory);
      padding: 3rem 2.5rem;
      position: relative;
    }
    .testimonial-card::before {
      content: '\201C';
      font-family: Georgia, 'Bodoni 72', serif;
      font-size: 4rem; color: var(--gold);
      opacity: 0.2; position: absolute;
      top: 1rem; left: 1.5rem; line-height: 1;
    }
    .testimonial-card p {
      font-size: 0.82rem; color: rgba(80, 83, 80, 0.6);
      line-height: 2.3; font-weight: 300;
      font-style: italic; margin-bottom: 1.5rem;
      position: relative;
    }
    .testimonial-author {
      display: flex; align-items: center; gap: 0.8rem;
    }
    .testimonial-author-line {
      width: 24px; height: 1px; background: var(--gold);
    }
    .testimonial-author span {
      font-size: 0.72rem; color: var(--champagne);
      letter-spacing: 0.1em; font-weight: 400;
    }
    .testimonial-author .date {
      font-size: 0.6rem; color: rgba(80, 83, 80, 0.35);
      font-family: Georgia, serif;
    }

    /* ========================================
       CTA SECTION
    ======================================== */
    .cta-section {
      background: var(--ivory);
      text-align: center;
      padding: 7rem 2rem;
      position: relative; overflow: hidden;
    }
    .cta-text-wrap {
      position: relative;
      display: inline-block;
      padding: 2rem 3rem;
    }

    /* FOOTER — moved to resources/css/app.css */

    /* ========================================
       ANIMATIONS
    ======================================== */
    .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }
    .fade-in-slow { opacity: 0; transform: translateY(20px); transition: opacity 1.4s ease, transform 1.4s ease; }
    .fade-in-slow.visible { opacity: 1; transform: translateY(0); }
    .stagger-children .fade-in:nth-child(1) { transition-delay: 0s; }
    .stagger-children .fade-in:nth-child(2) { transition-delay: 0.15s; }
    .stagger-children .fade-in:nth-child(3) { transition-delay: 0.3s; }
    .stagger-children .fade-in:nth-child(4) { transition-delay: 0.45s; }
    .stagger-children .fade-in:nth-child(5) { transition-delay: 0.6s; }
    .stagger-children .fade-in:nth-child(6) { transition-delay: 0.75s; }

    /* ========================================
       RESPONSIVE
    ======================================== */
    @media (max-width: 768px) {
      nav { padding: 1rem 1.8rem; }
      .nav-links {
        position: fixed; top: 0; right: -100%;
        width: 75%; max-width: 320px; height: 100vh;
        background: rgba(255, 253, 245, 0.97);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        flex-direction: column; justify-content: center;
        align-items: center; gap: 2rem;
        transition: right 0.4s ease;
      }
      .nav-links.open { right: 0; }
      .nav-links a { font-size: 0.9rem; color: rgba(80, 83, 80, 0.7); }
      .nav-toggle { display: block; }

      .page-hero { height: 55vh; }
      .page-hero-content { padding: 3rem 3rem; }
      .page-hero-content h1 { font-size: 2.2rem; letter-spacing: 0.2em; }

      .services-section { padding: 5rem 2rem; }
      .services-grid { grid-template-columns: 1fr; }

      .timeline-section { padding: 5rem 2rem; }
      .timeline { max-width: none; }
      .timeline::before { left: 20px; transform: none; }
      .timeline-item,
      .timeline-item:nth-child(odd),
      .timeline-item:nth-child(even) {
        flex-direction: column; align-items: flex-start;
        padding-left: 45px; position: relative;
      }
      .timeline-time,
      .timeline-item:nth-child(even) .timeline-time {
        text-align: left; padding: 0;
        margin-bottom: 0.3rem; flex: none;
      }
      .timeline-content,
      .timeline-item:nth-child(even) .timeline-content {
        text-align: left; padding: 0; flex: none;
      }
      .timeline-dot { position: absolute; left: -50px; top: 0.5rem; }
      .timeline-tabs { gap: 0.4rem; }
      .timeline-tab { padding: 0.6rem 1.2rem; letter-spacing: 0.18em; }

      .testimonials-section { padding: 5rem 2rem; }
      .testimonials-grid { grid-template-columns: 1fr; }

    }

    @media (max-width: 480px) {
      .page-hero-content h1 { font-size: 1.8rem; letter-spacing: 0.15em; }
    }