/* ==========================================================================

       GLOBAL HERO CONFIGURATION & VARIABLE SYSTEM

       ========================================================================== */

    #yl-off-hk-root {

      --yl-off-navy: #0a1e4a;

      --yl-off-navy-deep: #061436;

      --yl-off-orange: #ee7623;

      --yl-off-orange-soft: #f59056;

      --yl-off-ink: #0f1a33;

      --yl-off-paper: #ffffff;

      --yl-off-soft: #f5f3ee;

      --yl-off-line: rgba(10, 30, 74, 0.12);

      --yl-off-muted: #4b5775;

      display: block;

      width: 100%;

      /* 優先載入香港與繁體中文黑體 */

      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;

      color: var(--yl-off-ink);

      background: var(--yl-off-paper);

      -webkit-font-smoothing: antialiased;

    }


    /* Safe reset targeting only elements inside this component */

    #yl-off-hk-root *,

    #yl-off-hk-root *::before,

    #yl-off-hk-root *::after { 

      box-sizing: border-box; 

    }


    

    #yl-off-hk-root h1, 

    #yl-off-hk-root h2, 

    #yl-off-hk-root h3, 

    #yl-off-hk-root h4, 

    #yl-off-hk-root p, 

    #yl-off-hk-root ul, 

    #yl-off-hk-root li,

    #yl-off-hk-root aside,

    #yl-off-hk-root section {

      margin: 0;

      padding: 0;

      list-style: none;

    }


    /* ==========================================================================

       HERO STRUCTURE

       ========================================================================== */

    #yl-off-hk-root .yl-off-hk-hero {

      position: relative;

      min-height: 100vh;

      display: grid;

      grid-template-columns: 1.05fr 0.95fr;

      overflow: hidden;

    }


    /* LEFT PANEL */

    #yl-off-hk-root .yl-off-hk-hero-left {

      position: relative;

      background:

        linear-gradient(110deg, rgba(6, 20, 54, 0.92) 0%, rgba(6, 20, 54, 0.85) 40%, rgba(6, 20, 54, 0.45) 75%, rgba(6, 20, 54, 0) 100%),

        url(../img/0315c1cd-3c92-51f4-cb6f-89e7b85e7f2d.jpg) 30% center/cover no-repeat;

      padding: 80px;

      display: flex;

      flex-direction: column;

      justify-content: center;

      color: white;

      overflow: hidden;

      clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0 100%);

    }


    #yl-off-hk-root .yl-off-hk-route-tag {

      display: inline-flex; 

      align-items: center; 

      background: rgba(255, 255, 255, 0.12); 

      backdrop-filter: blur(12px);

      border: 1px solid rgba(255, 255, 255, 0.25); 

      padding: 9px 20px;

      border-radius: 999px; 

      font-size: 12px; 

      font-weight: 700;

      letter-spacing: 0.15em; 

      text-transform: uppercase; 

      width: fit-content;

      margin-bottom: 28px; 

      animation: yl-off-hk-fadeUp 0.8s ease 0.1s both;

    }


    #yl-off-hk-root .yl-off-hk-hero-title {

      font-weight: 700; 

      font-size: clamp(40px, 5.5vw, 80px); 

      line-height: 1.1;

      letter-spacing: -0.01em; 

      margin-bottom: 22px; 

      text-align: left;

      align-self: flex-start; 

      width: 100%; 

      max-width: 800px; 

      color: var(--yl-off-orange);

      animation: yl-off-hk-fadeUp 0.9s ease 0.25s both;

    }


    @media (min-width: 601px) {

      #yl-off-hk-root .yl-off-hk-hero-title {

        white-space: nowrap; 

      }

    }


    #yl-off-hk-root .yl-off-hk-hero-title em { 

      font-style: italic; 

      font-weight: 400; 

      color: var(--yl-off-orange-soft); 

      display: inline; 

    }


    #yl-off-hk-root .yl-off-hk-hero-sub {

      font-size: 17px; 

      line-height: 1.6; 

      max-width: 480px; 

      color: rgba(255, 255, 255, 0.85);

      margin-bottom: 44px; 

      font-weight: 400; 

      animation: yl-off-hk-fadeUp 0.9s ease 0.4s both;

    }


    #yl-off-hk-root .yl-off-hk-hero-sub strong { 

      color: white; 

      font-weight: 600; 

    }


    #yl-off-hk-root .yl-off-hk-cta-row { 

      display: flex; 

      gap: 14px; 

      flex-wrap: wrap; 

      animation: yl-off-hk-fadeUp 0.9s ease 0.55s both; 

    }


    #yl-off-hk-root .yl-off-hk-btn {

      display: inline-flex; 

      align-items: center; 

      gap: 10px; 

      padding: 18px 32px;

      border-radius: 999px; 

      font-weight: 600; 

      font-size: 14px; 

      letter-spacing: 0.03em;

      cursor: pointer; 

      border: none; 

      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 

      text-decoration: none;

    }


    #yl-off-hk-root .yl-off-hk-btn-primary { 

      background: var(--yl-off-orange); 

      color: white; 

      box-shadow: 0 10px 30px -8px rgba(238, 118, 35, 0.5); 

    }


    #yl-off-hk-root .yl-off-hk-btn-primary:hover { 

      background: #d6651a; 

      transform: translateY(-2px); 

      box-shadow: 0 14px 36px -8px rgba(238, 118, 35, 0.65); 

      color: #ffffff;

      text-decoration: none;

    }


    #yl-off-hk-root .yl-off-hk-btn-primary .yl-off-hk-arrow { 

      transition: transform 0.3s ease; 

    }


    #yl-off-hk-root .yl-off-hk-btn-primary:hover .yl-off-hk-arrow { 

      transform: translateX(4px); 

    }


    #yl-off-hk-root .yl-off-hk-btn-ghost { 

      background: transparent; 

      color: white; 

      border: 1.5px solid rgba(255, 255, 255, 0.8) !important; 

    }


    #yl-off-hk-root .yl-off-hk-btn-ghost:hover { 

      background: white; 

      color: var(--yl-off-navy); 

      border-color: white !important; 

      text-decoration: none;

    }


    #yl-off-hk-root .yl-off-hk-stat-strip {

      position: absolute; 

      bottom: 40px; 

      left: 80px; 

      right: 140px; 

      display: flex; 

      gap: 36px;

      padding-top: 26px; 

      border-top: 1px solid rgba(255, 255, 255, 0.18);

      animation: yl-off-hk-fadeUp 0.9s ease 0.75s both; 

      z-index: 3; 

      flex-wrap: wrap;

    }


    #yl-off-hk-root .yl-off-hk-stat { 

      color: white; 

    }


    #yl-off-hk-root .yl-off-hk-stat-num { 

      font-size: 32px; 

      font-weight: 700; 

      line-height: 1; 

      letter-spacing: -0.02em; 

      margin-bottom: 6px; 

    }


    #yl-off-hk-root .yl-off-hk-stat-num .yl-off-hk-unit { 

      font-size: 16px; 

      color: var(--yl-off-orange-soft); 

      margin-left: 2px; 

    }


    #yl-off-hk-root .yl-off-hk-stat-label { 

      font-size: 11px; 

      text-transform: uppercase; 

      letter-spacing: 0.12em; 

      color: rgba(255, 255, 255, 0.65); 

      font-weight: 500; 

      max-width: 140px; 

      line-height: 1.3; 

    }


    /* ==========================================================================

       RIGHT PANEL: KEY TAKEAWAYS

       ========================================================================== */

    #yl-off-hk-root .yl-off-hk-hero-right {

      background: var(--yl-off-paper); 

      padding: 80px 72px 60px 64px; 

      position: relative;

      display: flex; 

      flex-direction: column; 

      justify-content: center;

    }


    #yl-off-hk-root .yl-off-hk-hero-right::before {

      content: ''; 

      position: absolute; 

      inset: 0;

      background-image: radial-gradient(circle at 1px 1px, rgba(10, 30, 74, 0.06) 1px, transparent 0);

      background-size: 28px 28px; 

      opacity: 0.7; 

      pointer-events: none;

    }


    #yl-off-hk-root .yl-off-hk-takeaway-label {

      display: inline-flex; 

      align-items: center; 

      gap: 12px; 

      font-size: 12px; 

      font-weight: 700;

      letter-spacing: 0.2em; 

      text-transform: uppercase; 

      color: var(--yl-off-orange); 

      margin-bottom: 18px;

      position: relative; 

      z-index: 1; 

      animation: yl-off-hk-fadeUp 0.9s ease 0.3s both;

    }


    #yl-off-hk-root .yl-off-hk-takeaway-label::before { 

      content: ''; 

      width: 32px; 

      height: 1.5px; 

      background: var(--yl-off-orange); 

    }


    #yl-off-hk-root .yl-off-hk-takeaway-heading {

      font-weight: 600; 

      font-size: 36px; 

      line-height: 1.05; 

      letter-spacing: -0.02em;

      color: var(--yl-off-navy); 

      margin-bottom: 36px; 

      position: relative; 

      z-index: 1;

      animation: yl-off-hk-fadeUp 0.9s ease 0.45s both;

    }


    #yl-off-hk-root .yl-off-hk-takeaway-list { 

      display: flex; 

      flex-direction: column; 

      gap: 4px; 

      position: relative; 

      z-index: 1; 

    }


    #yl-off-hk-root .yl-off-hk-takeaway-item { 

      display: grid !important; 

      grid-template-columns: 44px 1fr !important; 

      gap: 18px !important; 

      padding: 22px 0 !important; 

      border-bottom: 1px solid var(--yl-off-line); 

      animation: yl-off-hk-fadeUp 0.9s ease both; 

      transition: transform 0.3s ease; 

      align-items: start;

    }


    #yl-off-hk-root .yl-off-hk-takeaway-item:hover { transform: translateX(4px); }


    #yl-off-hk-root .yl-off-hk-takeaway-item:nth-child(1) { animation-delay: 0.6s; }


    #yl-off-hk-root .yl-off-hk-takeaway-item:nth-child(2) { animation-delay: 0.7s; }


    #yl-off-hk-root .yl-off-hk-takeaway-item:nth-child(3) { animation-delay: 0.8s; }


    #yl-off-hk-root .yl-off-hk-takeaway-item:nth-child(4) { animation-delay: 0.9s; }


    #yl-off-hk-root .yl-off-hk-takeaway-item:last-child { border-bottom: none; }


    #yl-off-hk-root .yl-off-hk-icon-wrap {

      width: 44px; 

      height: 44px; 

      border-radius: 12px; 

      background: white; 

      display: grid;

      place-items: center; 

      box-shadow: 0 4px 12px -4px rgba(10, 30, 74, 0.1); 

      border: 1px solid var(--yl-off-line); 

      color: var(--yl-off-navy);

    }


    #yl-off-hk-root .yl-off-hk-icon-wrap svg { width: 22px; height: 22px; }


    #yl-off-hk-root .yl-off-hk-takeaway-text { padding-top: 4px; }


    #yl-off-hk-root .yl-off-hk-takeaway-text h4 { 

      font-size: 15px; 

      font-weight: 700; 

      color: var(--yl-off-navy); 

      margin-bottom: 4px; 

      letter-spacing: -0.005em; 

    }


    #yl-off-hk-root .yl-off-hk-takeaway-text p { 

      font-size: 14px; 

      line-height: 1.5; 

      color: var(--yl-off-muted); 

    }


    @keyframes yl-off-hk-fadeUp { 

      from { opacity: 0; transform: translateY(20px); } 

      to { opacity: 1; transform: translateY(0); } 

    }


    /* ==========================================================================

       RESPONSIVE BREAKPOINTS (FIXED FOR PORTAL)

       ========================================================================== */

    @media (max-width: 1024px) {

      #yl-off-hk-root .yl-off-hk-hero { 

        grid-template-columns: 1fr; 

        min-height: auto;

      }

      #yl-off-hk-root .yl-off-hk-hero-left::before { display: none; }

      #yl-off-hk-root .yl-off-hk-hero-left { 

        padding: 120px 40px 60px; 

        min-height: auto; 

        clip-path: none; 

      }

      #yl-off-hk-root .yl-off-hk-hero-right { 

        padding: 60px 40px; 

      }

      #yl-off-hk-root .yl-off-hk-stat-strip { 

        position: static; 

        margin-top: 40px; 

        left: 0; 

        right: 0; 

        gap: 24px; 

      }

    }


    @media (max-width: 600px) {

      #yl-off-hk-root .yl-off-hk-hero-left { 

        padding: 110px 24px 50px; 

      }

      #yl-off-hk-root .yl-off-hk-hero-right { 

        padding: 50px 24px; 

      }

      #yl-off-hk-root .yl-off-hk-stat-strip { 

        gap: 20px; 

        flex-wrap: wrap; 

      }

      #yl-off-hk-root .yl-off-hk-stat-num { 

        font-size: 26px; 

      }

      #yl-off-hk-root .yl-off-hk-takeaway-heading { 

        font-size: 28px; 

      }

      #yl-off-hk-root .yl-off-hk-cta-row { 

        flex-direction: column; 

        align-items: stretch; 

      }

      #yl-off-hk-root .yl-off-hk-btn { 

        justify-content: center; 

      }

    }


  
.component-html img {
	max-width: 100%;
}


    #yl-features-root {
      --navy: #0a1e4a;
      --navy-deep: #061436;
      --orange: #ee7623;
      --orange-soft: #f59056;
      --ink: #0f1a33;
      --paper: #ffffff;
      --soft: #f5f7f9;
      --line: rgba(10, 30, 74, 0.10);
      --muted: #5b6478;
      display: block;
      width: 100%;
      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    #yl-features-root *,
    #yl-features-root *::before,
    #yl-features-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

    #yl-features-root .features {
      background: var(--soft);
      padding: 80px 40px;
    }

    #yl-features-root .features-inner {
      max-width: 1240px;
      margin: 0 auto;
    }

    #yl-features-root .features-head {
      text-align: center;
      max-width: 900px; /* 35-character headline now comfortably fits in 1 line on desktop screens */
      margin: 0 auto 56px;
    }

    #yl-features-root .features-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px;
    }

    #yl-features-root .features-eyebrow::before,
    #yl-features-root .features-eyebrow::after {
      content: '';
      width: 28px;
      height: 1.5px;
      background: var(--orange);
    }

    #yl-features-root .features-title {
      font-size: clamp(28px, 3.4vw, 40px);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.005em;
      line-height: 1.1;
      color: var(--navy);
    }

    #yl-features-root .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    #yl-features-root .feature-card {
      position: relative;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 40px 34px 36px;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    }

    #yl-features-root .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 4px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #yl-features-root .feature-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 48px -20px rgba(10, 30, 74, 0.28);
      border-color: transparent;
    }

    #yl-features-root .feature-card:hover::before { transform: scaleX(1); }

    #yl-features-root .feature-icon {
      width: 60px; height: 60px;
      border-radius: 14px;
      background: rgba(238, 118, 35, 0.10);
      color: var(--orange);
      display: grid;
      place-items: center;
      margin-bottom: 26px;
      transition: background 0.35s ease, color 0.35s ease;
    }

    #yl-features-root .feature-card:hover .feature-icon {
      background: var(--orange);
      color: white;
    }

    #yl-features-root .feature-icon svg { width: 30px; height: 30px; }

    #yl-features-root .feature-card h3 {
      font-size: 21px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--navy);
      margin-bottom: 14px;
    }

    #yl-features-root .feature-card p {
      font-size: 15px;
      line-height: 1.65;
      color: var(--yl-ots-navy);
    }

    #yl-features-root .feature-index {
      position: absolute;
      top: 30px; right: 34px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: rgba(10, 30, 74, 0.18);
    }

    @media (max-width: 980px) {
      #yl-features-root .features-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
      #yl-features-root .features { padding: 64px 28px; }
    }

    @media (max-width: 600px) {
      #yl-features-root .features { padding: 48px 20px; }
      #yl-features-root .features-head { margin-bottom: 40px; }
      #yl-features-root .feature-card { padding: 32px 26px 30px; }
    }

  

    /* ==========================================================================
       GLOBAL CONFIGURATION & VARIABLE SYSTEM
       ========================================================================== */
    #yl-ots-root {
      --yl-ots-navy: #0a1e4a;
      --yl-ots-navy-deep: #061436;
      --yl-ots-orange: #ee7623;
      --yl-ots-ink: #0f1a33;
      --yl-ots-paper: #ffffff;
      --yl-ots-soft: #f5f7f9;
      --yl-ots-line: rgba(10, 30, 74, 0.10);
      --yl-ots-muted: #5b6478;

      display: block;
      width: 100%;
      /* 優先套用香港與繁體中文系統字型 */
      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;
      color: var(--yl-ots-ink);
      -webkit-font-smoothing: antialiased;
    }


    /* Safe reset: Targets only the root box-sizing, completely avoids stripping padding from our structural classes */
    #yl-ots-root *,
    #yl-ots-root *::before,
    #yl-ots-root *::after { 
      box-sizing: border-box; 
    }


    
    #yl-ots-root h1, 
    #yl-ots-root h2, 
    #yl-ots-root h3, 
    #yl-ots-root h4, 
    #yl-ots-root p {
      margin: 0;
      padding: 0;
    }


    /* ==========================================================================
       STRUCTURE & HEADER (SIDE-BY-SIDE GRID)
       ========================================================================== */
    #yl-ots-root .yl-ots-section {
      padding: 80px 60px;
      background: var(--yl-ots-paper); 
    }


    #yl-ots-root .yl-ots-inner {
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr; /* Gives text slightly more room than the image */
      gap: 64px;
      align-items: flex-start; /* Aligns image exactly with the top text */
    }


    #yl-ots-root .yl-ots-head {
      text-align: left;
    }


    #yl-ots-root .yl-ots-eyebrow {
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--yl-ots-orange);
      line-height: 1.1;
      margin-bottom: 12px;
    }


    #yl-ots-root .yl-ots-title {
      font-size: clamp(14px, 1.4vw, 16px);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--yl-ots-navy);
      font-weight: 600;
      margin-bottom: 24px;
    }


    #yl-ots-root .yl-ots-desc {
      font-size: 16px;
      line-height: 1.65;
      color: var(--yl-ots-navy);
      max-width: 100%;
    }


    /* ==========================================================================
       MEDIA / SIDE IMAGE
       ========================================================================== */
    #yl-ots-root .yl-ots-media {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 18px 40px -20px rgba(10, 30, 74, 0.35);
      aspect-ratio: 4 / 3; /* Keeps the rectangle shape */
      background: var(--yl-ots-soft);
      width: 100%;
    }


    #yl-ots-root .yl-ots-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 110% 35%; /* Fine-tuned focal point as requested */
      transform: scale(1.1); /* Adjusted zoom scale */
      display: block;
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }


    #yl-ots-root .yl-ots-media:hover img {
      transform: scale(1.17); /* Subtly zooms in more on hover */
    }


    /* ==========================================================================
       RESPONSIVE BREAKPOINTS (FIXED FOR PORTAL)
       ========================================================================== */
    @media (max-width: 1024px) {
      #yl-ots-root .yl-ots-inner {
        grid-template-columns: 1fr; /* Stacks to a single column on tablet */
        gap: 40px;
      }
      #yl-ots-root .yl-ots-section {
        padding: 64px 40px;
      }
      #yl-ots-root .yl-ots-media {
        aspect-ratio: 16 / 9; /* Wider ratio when stacked */
        object-position: 100% 35%; /* Adjusted for stacked view to prevent over-cropping */
      }
    }


    @media (max-width: 600px) {
      #yl-ots-root .yl-ots-section {
        padding: 48px 20px;
      }
      #yl-ots-root .yl-ots-head {
        margin-bottom: 12px;
      }
      #yl-ots-root .yl-ots-media {
        aspect-ratio: 3 / 2;
        border-radius: 12px;
      }
    }

  

    #yl-flex-root {
      --navy: #0a1e4a;
      --navy-deep: #061436;
      --orange: #ee7623;
      --ink: #0f1a33;
      --paper: #ffffff;
      --soft: #f5f7f9;
      --line: rgba(10, 30, 74, 0.10);
      --muted: #5b6478;
      display: block;
      width: 100%;
      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    #yl-flex-root *,
    #yl-flex-root *::before,
    #yl-flex-root *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #yl-flex-root .flex-section {
      padding: 76px 60px;
      background: var(--soft);
    }

    #yl-flex-root .flex-inner {
      max-width: 1240px;
      margin: 0 auto;
    }

    #yl-flex-root .flex-head { 
      margin-bottom: 52px; 
    }

    #yl-flex-root .flex-eyebrow {
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--orange);
      line-height: 1.1;
      margin-bottom: 8px;
    }

    #yl-flex-root .flex-sub {
      font-size: clamp(13px, 1.4vw, 16px);
      letter-spacing: 0.04em;
      color: var(--yl-ots-navy);
      font-weight: 500;
    }

    #yl-flex-root .flex-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      align-items: stretch;
    }

    #yl-flex-root .flex-card {
      display: flex;
      flex-direction: column;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
    }

    #yl-flex-root .flex-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 26px 52px -22px rgba(10,30,74,0.30);
      border-color: transparent;
    }

    #yl-flex-root .flex-media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
    }

    #yl-flex-root .flex-media img {
      width: 100%; 
      height: 108%;
      object-fit: cover;
      object-position: top;
      display: block;
      transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
    }

    #yl-flex-root .flex-card:hover .flex-media img { 
      transform: scale(1.06); 
      transform-origin: top;
    }

    #yl-flex-root .flex-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(6,20,54,0.35), rgba(6,20,54,0) 55%);
    }

    #yl-flex-root .flex-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 1;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(6px);
      color: var(--navy);
      display: grid;
      place-items: center;
      box-shadow: 0 6px 16px -6px rgba(10,30,74,0.4);
    }

    #yl-flex-root .flex-badge svg {
      width: 22px;
      height: 22px;
    }

    #yl-flex-root .flex-content {
      display: flex;
      flex-direction: column;
      padding: 28px 28px 32px;
      flex: 1 1 auto;
    }

    #yl-flex-root .flex-card h3 {
      font-size: 20px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      color: var(--navy);
      line-height: 1.2;
      padding-bottom: 16px;
      margin-bottom: 18px;
      border-bottom: 2px solid var(--line);
      position: relative;
    }

    #yl-flex-root .flex-card h3::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 44px;
      height: 2px;
      background: var(--orange);
    }

    #yl-flex-root .flex-card p {
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--muted);
      margin-bottom: 14px;
    }

    #yl-flex-root .flex-card p:last-child {
      margin-bottom: 0;
    }

    #yl-flex-root .flex-card p strong {
      color: var(--navy);
      font-weight: 700;
    }

    #yl-flex-root .flex-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    #yl-flex-root .flex-list li {
      position: relative;
      padding-left: 22px;
      font-size: 14.5px;
      line-height: 1.6;
      color: var(--yl-ots-navy);
    }

    #yl-flex-root .flex-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
    }

    #yl-flex-root .flex-list strong {
      color: var(--navy);
      font-weight: 700;
    }

    @media (max-width: 920px) {
      #yl-flex-root .flex-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin: 0 auto;
      }
      #yl-flex-root .flex-section {
        padding: 60px 28px;
      }
    }

    @media (max-width: 560px) {
      #yl-flex-root .flex-section {
        padding: 46px 18px;
      }
      #yl-flex-root .flex-head {
        margin-bottom: 36px;
      }
      #yl-flex-root .flex-content {
        padding: 24px 22px 26px;
      }
    }

  

    #yl-industry-root {
      --navy: #0a1e4a;
      --navy-deep: #061436;
      --orange: #ee7623;
      --ink: #0f1a33;
      --paper: #ffffff;
      --soft: #f5f7f9;
      --line: rgba(10, 30, 74, 0.10);
      --muted: #5b6478;
      display: block;
      width: 100%;
      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    #yl-industry-root *,
    #yl-industry-root *::before,
    #yl-industry-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

    #yl-industry-root .ind-section {
      padding: 76px 60px;
      background: var(--paper);
    }

    #yl-industry-root .ind-inner { max-width: 1240px; margin: 0 auto; }

    #yl-industry-root .ind-head { margin-bottom: 52px; }

    #yl-industry-root .ind-eyebrow {
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--orange);
      line-height: 1.1;
      margin-bottom: 8px;
    }

    #yl-industry-root .ind-sub {
      font-size: clamp(13px, 1.4vw, 16px);
      letter-spacing: 0.04em;
      color: var(--yl-ots-navy);
      font-weight: 500;
    }

    #yl-industry-root .ind-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      align-items: stretch;
    }

    #yl-industry-root .ind-card {
      position: relative;
      display: flex;
      flex-direction: column;
      border-radius: 18px;
      overflow: hidden;
      min-height: 540px;
      box-shadow: 0 18px 40px -20px rgba(10,30,74,0.35);
      transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.4s ease;
    }

    #yl-industry-root .ind-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 60px -24px rgba(10,30,74,0.45);
    }

    #yl-industry-root .ind-photo {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    #yl-industry-root .ind-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
    }

    #yl-industry-root .ind-card:hover .ind-photo img { transform: scale(1.07); }

    #yl-industry-root .ind-photo::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(6,20,54,0.15) 0%, rgba(6,20,54,0.05) 30%, rgba(6,20,54,0.45) 100%);
    }

    #yl-industry-root .ind-card-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      justify-content: flex-end;
      padding: 24px;
    }

    #yl-industry-root .ind-panel {
      position: relative;
      background: var(--paper);
      border-radius: 14px;
      padding: 52px 26px 30px;
      text-align: center;
      box-shadow: 0 16px 36px -18px rgba(10,30,74,0.4);
      border-top: 3px solid var(--orange);
      min-height: 250px;
    }

    #yl-industry-root .ind-icon {
      position: absolute;
      top: 0; left: 50%;
      transform: translate(-50%, -50%);
      width: 64px; height: 64px;
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      display: grid; place-items: center;
      box-shadow: 0 10px 24px -8px rgba(10,30,74,0.55);
      border: 4px solid var(--paper);
    }

    #yl-industry-root .ind-icon svg { width: 28px; height: 28px; }

    #yl-industry-root .ind-panel h3 {
      font-size: 20px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 14px;
    }

    #yl-industry-root .ind-panel p {
      font-size: 14.5px;
      line-height: 1.7;
      color: var(--yl-ots-navy);
    }

    @media (max-width: 920px) {
      #yl-industry-root .ind-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
      #yl-industry-root .ind-section { padding: 60px 28px; }
      #yl-industry-root .ind-card { min-height: 480px; }
      #yl-industry-root .ind-panel { min-height: 0; }
    }

    @media (max-width: 560px) {
      #yl-industry-root .ind-section { padding: 46px 18px; }
      #yl-industry-root .ind-head { margin-bottom: 36px; }
      #yl-industry-root .ind-card { min-height: 440px; }
      #yl-industry-root .ind-panel { padding: 48px 20px 26px; }
    }

  

    #yl-scale-root {
      --navy: #0a1e4a;
      --orange: #ee7623;
      --ink: #0f1a33;
      --paper: #ffffff;
      --bg: #f4f6fa;
      --muted: #5b6478;
      display: block;
      width: 100%;
      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    #yl-scale-root *,
    #yl-scale-root *::before,
    #yl-scale-root *::after { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }

    #yl-scale-root .scale-section {
      background: var(--bg);
      padding: 48px 40px;
    }

    #yl-scale-root .scale-container {
      max-width: 1240px;
      margin: 0 auto;
      background: var(--paper);
      padding: 56px 56px 64px;
      border-radius: 20px;
    }

    #yl-scale-root .scale-head {
      margin-bottom: 56px;
    }

    #yl-scale-root .scale-title {
      font-size: clamp(28px, 3.4vw, 40px);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.005em;
      line-height: 1.1;
      color: var(--navy);
      margin-bottom: 18px; /* Fixed: Combined back into the .scale-title rule */
    }

    #yl-scale-root .scale-sub {
      font-size: 15px;
      line-height: 1.6;
      color: var(--yl-ots-navy);
    }

    #yl-scale-root .scale-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }

    #yl-scale-root .stat {
      display: flex;
      flex-direction: column;
    }

    #yl-scale-root .stat-headline {
      font-size: clamp(30px, 3.4vw, 40px);
      font-weight: 800;
      line-height: 1.1;
      color: var(--navy);
      margin-bottom: 32px;
      letter-spacing: -0.01em;
    }

    #yl-scale-root .stat-headline .num {
      color: var(--orange);
      margin-right: 6px;
    }

    #yl-scale-root .stat-desc {
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--yl-ots-navy);
    }

    @media (max-width: 900px) {
      #yl-scale-root .scale-section { padding: 32px 20px; }
      #yl-scale-root .scale-container { padding: 40px 32px 44px; border-radius:20px; }
      #yl-scale-root .scale-head { margin-bottom: 40px; }
      #yl-scale-root .scale-grid { grid-template-columns: 1fr; gap: 32px; }
      #yl-scale-root .stat-headline { margin-bottom: 12px; }
    }

  

    /* ==========================================================================
       GLOBAL CONFIGURATION & VARIABLE SYSTEM
       ========================================================================== */
    #yl-green-root {
      --yl-green-navy: #0a1e4a;
      --yl-green-orange: #ee7623;
      --yl-green-color: #0a1e4a;
      --yl-green-soft: #eaeef5;
      --yl-green-ink: #0f1a33;
      --yl-green-paper: #ffffff;
      --yl-green-bg: #f4f6fa;
      --yl-green-line: rgba(10, 30, 74, 0.10);
      --yl-green-muted: #5b6478;

      display: block;
      width: 100%;
      /* 優先載入香港與繁體中文黑體 */
      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;
      color: var(--yl-green-ink);
      -webkit-font-smoothing: antialiased;
    }


    /* Safe reset targeting only elements inside this component */
    #yl-green-root *,
    #yl-green-root *::before,
    #yl-green-root *::after { 
      box-sizing: border-box; 
    }


    
    #yl-green-root h2,
    #yl-green-root p { 
      margin: 0; 
      padding: 0; 
    }


    /* ==========================================================================
       LAYOUT & CONTAINERS 
       ========================================================================== */
    #yl-green-root .yl-green-section {
      background: var(--yl-green-paper);
      padding: 48px 40px;
    }


    #yl-green-root .yl-green-container {
      max-width: 1240px;
      margin: 0 auto;
      background: var(--yl-green-paper);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }


    /* ==========================================================================
       HEADER STYLING
       ========================================================================== */
    #yl-green-root .yl-green-head {
      text-align: center;
      padding: 56px 40px 12px;
    }


    #yl-green-root .yl-green-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14px; /* Slightly larger for Chinese readability */
      font-weight: 700;
      letter-spacing: 0.15em; /* Adjusted spacing for Chinese characters */
      text-transform: uppercase;
      color: var(--yl-green-orange);
      margin-bottom: 14px;
    }


    #yl-green-root .yl-green-eyebrow::before,
    #yl-green-root .yl-green-eyebrow::after {
      content: '';
      width: 24px; height: 1.5px;
      background: var(--yl-green-orange);
    }


    #yl-green-root .yl-green-title {
      font-size: clamp(28px, 3.4vw, 40px);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em; /* Adjusted for Chinese */
      line-height: 1.2;
      color: var(--yl-green-navy);
    }


    /* ==========================================================================
       2-COLUMN GRID & MEDIA
       ========================================================================== */
    #yl-green-root .yl-green-grid {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      align-items: stretch;
      padding: 48px 56px 64px;
      gap: 56px;
    }


    #yl-green-root .yl-green-media {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      min-height: 380px;
      box-shadow: 0 18px 40px -20px rgba(10,30,74,0.35);
      background: #000;
    }


    #yl-green-root .yl-green-media video,
    #yl-green-root .yl-green-media img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      z-index: 1; 
    }


    #yl-green-root .yl-green-tag {
      position: absolute;
      top: 18px; left: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(6px);
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 12px; /* Adjusted for Chinese */
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--yl-green-color);
      box-shadow: 0 6px 14px -6px rgba(10, 30, 74, 0.3);
      z-index: 2; 
    }


    #yl-green-root .yl-green-tag .yl-green-leaf {
      width: 8px; height: 8px;
      background: var(--yl-green-color);
      border-radius: 50%;
    }


    /* ==========================================================================
       RIGHT COLUMN CONTENT
       ========================================================================== */
    #yl-green-root .yl-green-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }


    #yl-green-root .yl-green-logo {
      max-width: 280px;
      height: auto;
      margin-bottom: 24px;
      display: block;
    }


    #yl-green-root .yl-green-body p {
      font-size: 16px; /* Slightly larger for Chinese readability */
      line-height: 1.8;
      color: var(--yl-ots-navy);
      margin-bottom: 20px;
    }


    #yl-green-root .yl-green-body p:last-child {
      margin-bottom: 0;
    }


    /* ==========================================================================
       RESPONSIVE BREAKPOINTS (FIXED FOR PORTAL)
       ========================================================================== */
    @media (max-width: 920px) {
      #yl-green-root .yl-green-section { padding: 32px 20px; }
      #yl-green-root .yl-green-head { padding: 40px 28px 8px; }
      #yl-green-root .yl-green-grid { grid-template-columns: 1fr; padding: 32px 28px 44px; gap: 32px; }
      #yl-green-root .yl-green-media { min-height: 260px; }
    }

  

    #yl-faq-root {
      --navy: #0a1e4a;
      --ink: #0f1a33;
      --ink-soft: #5b6478;
      --accent: #ee7623;
      --line: rgba(10, 30, 74, 0.12);
      --bg: #f4f6fa;
      display: block;
      width: 100%;
      font-family: 'Microsoft JhengHei', 'PingFang HK', 'Calibri', 'Segoe UI', Arial, sans-serif;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    #yl-faq-root *,
    #yl-faq-root *::before,
    #yl-faq-root *::after { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }

    #yl-faq-root .faq-section {
      background: var(--bg);
      padding: 72px 40px;
    }

    #yl-faq-root .wrap-narrow {
      max-width: 1140px;
      margin: 0 auto;
    }

    #yl-faq-root .section-header {
      margin-bottom: 32px;
    }

    #yl-faq-root .section-header h2 {
      font-size: clamp(28px, 3.4vw, 40px);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.005em;
      line-height: 1.1;
      color: var(--navy);
    }

    #yl-faq-root .faq-list { 
      border-top: 1px solid var(--line); 
    }

    #yl-faq-root details.faq { 
      border-bottom: 1px solid var(--line); 
      padding: 24px 0; 
    }

    #yl-faq-root details.faq summary {
      cursor: pointer;
      list-style: none;
      font-size: 17px;
      font-weight: 700;
      color: var(--navy);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      line-height: 1.4;
      transition: color 0.2s;
    }

    #yl-faq-root details.faq summary::-webkit-details-marker { display: none; }

    #yl-faq-root details.faq summary:hover { color: var(--accent); }

    #yl-faq-root details.faq summary::after {
      content: '+';
      font-size: 28px;
      font-weight: 300;
      color: var(--accent);
      transition: transform 0.3s;
      flex-shrink: 0;
      line-height: 1;
    }

    #yl-faq-root details.faq[open] summary::after { 
      transform: rotate(45deg); 
    }

    #yl-faq-root details.faq .answer {
      padding-top: 14px;
      color: var(--ink-soft);
      font-size: 16px;
      line-height: 1.65;
      max-width: 90%;
    }

    #yl-faq-root details.faq .answer strong { 
      color: var(--navy); 
      font-weight: 700; 
    }

    @media (max-width: 600px) {
      #yl-faq-root .faq-section { padding: 48px 20px; }
      #yl-faq-root details.faq summary { font-size: 16px; gap: 16px; }
    }

  
.fragment-heading-text-colored a {
	color: inherit;
}

.component-paragraph img {
	max-width: 100%;
}

.component-html img {
	max-width: 100%;
}


    .footer-heading {
      font-size: 19.2px;
      margin-bottom: 10px;
			margin-top: 20px;
    }


    .list-unstyled a {
      text-decoration: none;
      color: #fff;
    }


    .list-unstyled a:hover {
      text-decoration: underline;
    }


    .social-icons a {
      font-size: 24px;
    }


    /* Modal Styles */
    .close-btn {
      position: absolute;
      top: 10px;
      font-size: 30px;
      cursor: pointer;
      color: #000;
      z-index: 1001; /* Ensure it stays above other content */
      padding: 5px; /* Added padding to give it a clickable area */
    }


    .close-btn:hover {
      color: #555;
    }


    .iframe-container {
      height: 500px; /* Fixed height to control scrollbar */
      overflow-y: auto; /* Enable vertical scrollbar if needed */
      padding-right: 10px; /* Reduced right padding to fit within modal-content padding */
    }


    iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }


    /* Ensure scrollbar doesn't overlap close button on mobile */
    @media (max-width: 576px) {
      .modal-content {
        width: 90%;
        margin: 20px auto;
        padding-right: 30px; /* Adjusted for mobile */
      }

      .close-btn {
        right: 5px; /* Adjusted for mobile */
      }

      .iframe-container {
        height: 400px; /* Adjusted for mobile */
        padding-right: 5px; /* Reduced for mobile */
      }
    }

/* supplemental spacing used by original layout fragments */
@media (min-width: 768px) { .p-md-7 { padding: 64px; } .p-md-5 { padding: 48px; } }