@font-face {
      font-family: 'DB Heavant';
      src: url('assets/fonts/DB Heavent v3.2.1.ttf') format('truetype');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'DB Heavant';
      src: url('assets/fonts/DB Heavent Med v3.2.1.ttf') format('truetype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'DB Heavant';
      src: url('assets/fonts/DB Heavent Bd v3.2.1.ttf') format('truetype');
      font-weight: 700;
      font-display: swap;
    }.production-service-landing-page /* ─── Reset ─────────────────────────────────────────────────────── */
    *, .production-service-landing-page *::before, .production-service-landing-page *::after{ margin: 0; padding: 0; box-sizing: border-box; }.production-service-landing-page{ scroll-behavior: smooth; }.production-service-landing-page{
      --bg:        #0f0f0f;
      --bg-alt:    #161616;
      --bg-card:   #1a1a1a;
      --green:     #4DC896;
      --green-dim: rgba(77,200,150,0.15);
      --gold:      #F5C518;
      --white:     #ffffff;
      --gray:      rgba(255,255,255,0.60);
      --gray-dim:  rgba(255,255,255,0.35);
      --border:    rgba(255,255,255,0.12);
      --radius:    8px;
      --tr:        0.3s ease;
    }.production-service-landing-page{
      font-family: 'DB Heavant', 'Noto Sans Thai', sans-serif;
      font-size: 28px;
      background: var(--bg);
      color: var(--white);
      line-height: 1.7;
    }.production-service-landing-page img{ display: block; max-width: 100%; height: auto; }.production-service-landing-page a{ text-decoration: none; color: inherit; }.production-service-landing-page .container{
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 32px;
    }.production-service-landing-page /* Image placeholder (ทีม tech แทนด้วย <img> จริง) */
    .ph{
      background: #222;
      border: 1px dashed #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #555;
      font-size: 23px;
      border-radius: var(--radius);
    }.production-service-landing-page .ph svg{ width: 32px; height: 32px; opacity: 0.4; }.production-service-landing-page /* ══════════════════════════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════════════════════════ */
    .hero{
      position: relative;
      min-height: 560px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--bg);
    }.production-service-landing-page /* video background — เต็มจอ */
    .hero__video{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
    }.production-service-landing-page /* dark overlay ทับ video ทั้งหน้า */
    .hero__overlay{
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.52);
      pointer-events: none;
    }.production-service-landing-page /* content กลางจอ */
    .hero__content{
      position: relative;
      z-index: 2;
      width: 100%;
      text-align: center;
      padding: 80px 24px;
    }.production-service-landing-page .hero__title{
      font-size: clamp(46px, 3.5vw, 66px);
      font-weight: 700;
      color: var(--green);
      line-height: 1.2;
      margin-bottom: 14px;
    }.production-service-landing-page .hero__sub{
      font-size: clamp(38px, 2.5vw, 46px);
      font-style: italic;
      color: var(--white);
      margin-bottom: 8px;
    }.production-service-landing-page .hero__desc{
      font-size: clamp(35px, 2vw, 40px);
      color: var(--white);
      margin-bottom: 28px;
    }.production-service-landing-page .hero__divider{
      width: 48px;
      border: none;
      border-top: 1.5px solid rgba(255,255,255,0.4);
      margin: 20px auto;
    }.production-service-landing-page .hero__note{
      font-size: 33px;
      color: var(--gray);
      line-height: 1.7;
    }.production-service-landing-page /* ══════════════════════════════════════════════════════════════════
       ABOUT
    ══════════════════════════════════════════════════════════════════ */
    .about{
      background: var(--bg);
      padding: 80px 0;
    }.production-service-landing-page .about__inner{
      display: grid;
      grid-template-columns: 45% 1fr;
      gap: 64px;
      align-items: center;
    }.production-service-landing-page .about__image .ph{
      width: 100%;
      aspect-ratio: 4/3;
      min-height: 320px;
    }.production-service-landing-page .about__image img{
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: center center;
      border-radius: var(--radius);
      display: block;
    }.production-service-landing-page .about__title{
      font-size: clamp(32px, 2.8vw, 42px);
      font-weight: 700;
      color: var(--green);
      margin-bottom: 16px;
    }.production-service-landing-page .about__quote{
      font-size: clamp(28px, 2vw, 32px);
      font-weight: 700;
      color: var(--white);
      margin-bottom: 20px;
      line-height: 1.4;
    }.production-service-landing-page .about__body{
      font-size: 27px;
      color: var(--gray);
      line-height: 1.4;
    }.production-service-landing-page .about__body strong{ color: var(--white); }.production-service-landing-page .about__body p + p{ margin-top: 14px; }.production-service-landing-page /* ══════════════════════════════════════════════════════════════════
       SERVICES
    ══════════════════════════════════════════════════════════════════ */
    .services{
      position: relative;
      padding: 80px 0;
      overflow: hidden;
    }.production-service-landing-page /* background image layer */
    .services__bg{
      position: absolute;
      inset: 0;
      background-image: url('assets/03_Our_Services/01_Our_Service_BG.webp');
      background-size: cover;
      background-position: center;
      filter: brightness(0.9);
    }.production-service-landing-page .services__overlay{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.10);
    }.production-service-landing-page .services > .container{ position: relative; z-index: 1; }.production-service-landing-page .services__header{
      text-align: center;
      margin-bottom: 52px;
    }.production-service-landing-page .services__header h2{
      font-size: clamp(36px, 3vw, 48px);
      font-weight: 700;
      color: var(--green);
      margin-bottom: 10px;
    }.production-service-landing-page .services__header p{
      font-size: clamp(32px, 2.8vw, 46px);
      font-weight: 700;
      color: var(--white);
    }.production-service-landing-page /*
      Grid layout ตามต้นแบบ:
      [Internal Videos (span 2 rows)] | [LIVE Seminar  ] | [Brand Videos       ]
                                      | [Commercial    ] | [Photography        ]
    */
    .services__grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 20px;
      align-items: start;
    }.production-service-landing-page /* Internal Videos — span แถวซ้าย 2 แถว */
    .svc--internal{
      grid-column: 1;
      grid-row: 1 / 3;
    }.production-service-landing-page /* card base */
    .svc{
      background: rgba(15,15,15,0.55);
      border-radius: 14px;
      padding: 32px 28px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.08);
      height: 100%;
    }.production-service-landing-page .svc__title{
      font-size: clamp(28px, 1.8vw, 32px);
      font-weight: 700;
      font-style: italic;
      color: var(--green);
      text-align: center;
      margin-bottom: 10px;
    }.production-service-landing-page .svc__subtitle{
      font-size: clamp(27px, 1.7vw, 30px);
      font-weight: 700;
      color: var(--white);
      text-align: center;
      line-height: 1.4;
      margin-bottom: 16px;
    }.production-service-landing-page .svc__divider{
      border: none;
      border-top: 1px solid rgba(255,255,255,0.18);
      margin: 0 0 18px;
    }.production-service-landing-page .svc__body{
      font-size: 25px;
      color: rgba(255,255,255,0.72);
      line-height: 1.4;
      text-align: center;
    }.production-service-landing-page .svc__body p + p{ margin-top: 12px; }.production-service-landing-page .svc__section{ margin-top: 18px; }.production-service-landing-page .svc__section-title{
      font-size: 25px;
      font-weight: 700;
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-align: center;
      margin-bottom: 6px;
    }.production-service-landing-page .svc__section-body{
      font-size: 24px;
      color: rgba(255,255,255,0.65);
      text-align: center;
      line-height: 1.4;
    }.production-service-landing-page /* ══════════════════════════════════════════════════════════════════
       PROCESS
    ══════════════════════════════════════════════════════════════════ */
    .process{
      background: var(--bg);
      padding: 80px 0;
    }.production-service-landing-page .process__header{
      text-align: center;
      margin-bottom: 56px;
    }.production-service-landing-page .process__header h2{
      font-size: clamp(34px, 3vw, 46px);
      font-weight: 700;
      color: var(--green);
      margin-bottom: 8px;
    }.production-service-landing-page .process__header p{
      font-size: 27px;
      color: var(--gray);
    }.production-service-landing-page /* 3-column grid: [STEP label] [icon + green line] [content] */
    .process__timeline{
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }.production-service-landing-page .process__step{
      display: grid;
      grid-template-columns: 110px 72px 1fr;
      column-gap: 32px;
    }.production-service-landing-page /* ── Column 1: STEP label ── */
    .process__step-label-col{
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding-top: 20px; /* vertically aligns with icon center */
    }.production-service-landing-page .process__step-label{
      text-align: right;
      line-height: 1.25;
    }.production-service-landing-page .process__step-label span{
      display: inline;
      font-size: 25px;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 0.04em;
    }.production-service-landing-page /* ── Column 2: icon + green connecting line ── */
    .process__step-icon-col{
      display: flex;
      flex-direction: column;
      align-items: center;
    }.production-service-landing-page .process__step-icon{
      width: 72px;
      height: 72px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }.production-service-landing-page .process__step-icon svg{
      width: 34px;
      height: 34px;
      stroke: var(--white);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }.production-service-landing-page .process__step-icon img{
      width: 160px;
      height: 160px;
      object-fit: contain;
    }.production-service-landing-page /* Green line that grows to fill remaining height of the row */
    .process__step:not(:last-child) .process__step-icon-col::after{
      content: '';
      flex: 1;
      width: 2px;
      background: var(--green);
      min-height: 32px;
    }.production-service-landing-page /* ── Column 3: content ── */
    .process__step-content{
      padding-top: 14px;
      padding-bottom: 48px;
    }.production-service-landing-page .process__step:last-child .process__step-content{
      padding-bottom: 0;
    }.production-service-landing-page .process__step-tag{
      font-size: 23px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--green);
      margin-bottom: 8px;
    }.production-service-landing-page .process__step-name{
      font-size: clamp(27px, 2vw, 32px);
      font-weight: 700;
      color: var(--white);
      margin-bottom: 14px;
    }.production-service-landing-page .process__step-desc{
      font-size: 25px;
      color: var(--gray);
      line-height: 1.4;
    }.production-service-landing-page .process__step-desc p + p{ margin-top: 10px; }.production-service-landing-page /* ══════════════════════════════════════════════════════════════════
       PORTFOLIO
    ══════════════════════════════════════════════════════════════════ */
    .portfolio{
      background: var(--bg-alt);
      padding: 80px 0;
    }.production-service-landing-page .portfolio__header{
      text-align: center;
      margin-bottom: 48px;
    }.production-service-landing-page .portfolio__header h2{
      font-size: clamp(32px, 2.8vw, 44px);
      font-weight: 700;
      color: var(--green);
    }.production-service-landing-page /* ── Carousel ── */
    .portfolio__carousel-wrap{
      position: relative;
    }.production-service-landing-page .portfolio__track-outer{
      overflow: hidden;
    }.production-service-landing-page .portfolio__track{
      display: flex;
      gap: 8px;
      will-change: transform;
    }.production-service-landing-page .portfolio__slide{
      flex: 0 0 auto;
      height: 400px;
      overflow: hidden;
    }.production-service-landing-page /* ภาพปกติ — สัดส่วน 4:3 */
    .portfolio__slide{ width: calc(400px * 4 / 3); }.production-service-landing-page /* ภาพ wide (16:9) */
    .portfolio__slide--wide{ width: calc(400px * 16 / 9); }.production-service-landing-page .portfolio__slide .ph, .production-service-landing-page .portfolio__slide img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
      border: none;
      display: block;
      transition: transform 0.5s ease;
    }.production-service-landing-page .portfolio__slide:hover .ph, .production-service-landing-page .portfolio__slide:hover img{
      transform: scale(1.06);
    }.production-service-landing-page /* ลูกศร */
    .portfolio__btn{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      border: 1.5px solid rgba(255,255,255,0.25);
      color: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--tr);
      backdrop-filter: blur(4px);
    }.production-service-landing-page .portfolio__btn:hover{ background: rgba(0,0,0,0.85); border-color: var(--green); }.production-service-landing-page .portfolio__btn svg{ width: 20px; height: 20px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.production-service-landing-page .portfolio__btn--prev{ left: 16px; }.production-service-landing-page .portfolio__btn--next{ right: 16px; }

    @media (max-width: 768px) {
      .production-service-landing-page .portfolio__slide { height: 260px; }
      .production-service-landing-page .portfolio__slide { width: calc(260px * 4 / 3); }
      .production-service-landing-page .portfolio__slide--wide { width: calc(260px * 16 / 9); }
    }.production-service-landing-page /* ══════════════════════════════════════════════════════════════════
       CONTACT / FORM
    ══════════════════════════════════════════════════════════════════ */
    .contact{
      background: var(--bg);
      padding: 80px 0;
    }.production-service-landing-page .contact__inner{
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }.production-service-landing-page .contact__title{
      font-size: clamp(30px, 2.5vw, 38px);
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
      line-height: 1.4;
    }.production-service-landing-page .contact__sub{
      font-size: 27px;
      color: var(--gray);
      margin-bottom: 40px;
    }.production-service-landing-page .jotform-wrap{
      width: 100%;
    }.production-service-landing-page /* ══════════════════════════════════════════════════════════════════
       CTA BANNER (ระหว่าง form กับ footer)
    ══════════════════════════════════════════════════════════════════ */
    .cta-banner{
      position: relative;
      min-height: 340px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }.production-service-landing-page .cta-banner__bg{
      position: absolute;
      inset: 0;
      background-image: url('assets/06_Buttom_Section/01_Image_Buttom_Section.webp');
      background-size: cover;
      background-position: center 40%;
    }.production-service-landing-page .cta-banner__overlay{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.52);
    }.production-service-landing-page .cta-banner__content{
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 64px 32px;
    }.production-service-landing-page .cta-banner__title{
      font-size: clamp(34px, 3.5vw, 54px);
      font-weight: 700;
      color: var(--white);
      margin-bottom: 14px;
    }.production-service-landing-page .cta-banner__sub{
      font-size: clamp(26px, 2vw, 32px);
      color: rgba(255,255,255,0.80);
    }
    /* ══════════════════════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════════════════════ */
    @media (max-width: 900px){
      .production-service-landing-page .about__inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .production-service-landing-page .about__image { order: -1; }
      .production-service-landing-page .about__image .ph { min-height: 260px; }

      /* services: stack Internal บนสุด แล้ว 2 col */
      .production-service-landing-page .services__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      .production-service-landing-page .svc--internal {
        grid-column: 1 / 3;
        grid-row: auto;
      }

    }

    @media (max-width: 768px) {
.production-service-landing-page .hero__bg-ph { width: 100%; opacity: 0.25; }
      .production-service-landing-page .hero__content { max-width: 100%; }

      .production-service-landing-page .process__step { grid-template-columns: 72px 56px 1fr; column-gap: 16px; }
      .production-service-landing-page .process__step-label span { font-size: 23px; }

    }

    @media (max-width: 600px) {
      .production-service-landing-page .container { padding: 0 20px; }

      .production-service-landing-page .services__grid {
        grid-template-columns: 1fr;
      }
      .production-service-landing-page .svc--internal { grid-column: 1; }


      .production-service-landing-page .process__step { grid-template-columns: 52px 52px 1fr; column-gap: 12px; }
      .production-service-landing-page .process__step-icon { width: 52px; height: 52px; }
      .production-service-landing-page .process__step-label-col { padding-top: 14px; }
      .production-service-landing-page .process__step-content { padding-bottom: 32px; }
    }