/* October 5 feedback: share the homepage's 64/42/25px type scale and brand palette. */
:root{--ypn-navy:#001f3d;--ypn-orange:#e87a00;--ypn-amber:#a85700;--ypn-paper:#faf9f6}
.ypn-logo-group .ypn-client-link{display:flex;align-items:center;flex:none}.ypn-logo-group .ypn-client-link img{width:auto;max-width:220px;object-fit:contain}
#main-content.sv3{--navy:var(--ypn-navy);--orange:var(--ypn-orange);--amber:var(--ypn-amber);--paper:var(--ypn-paper);--cream:#f5efe4;--ink:var(--ypn-navy)}
#main-content.sv3 :is(.sv3-display,.sv3-display--long,.ab3-display,.ct3-display,.au3-name){font-size:clamp(36px,4.5vw,64px);line-height:1.15;letter-spacing:-.025em}
#main-content.sv3 :is(.sv3-step-n,.ct3-step-n,.ab3-why-n,.pl3-from-v,.pr3-price,.sv3-score-n){font-size:clamp(40px,4.2vw,60px);line-height:1.08}
#main-content.sv3 :is(.sv3-num,.ab3-pending dd){font-size:clamp(24px,2.3vw,32px);line-height:1.15}
#main-content.sv3 .sv3-sheet-code{font-size:clamp(20px,2vw,28px);left:24%;right:14%;white-space:nowrap}
#main-content.sv3 .sv3-section{padding-block:clamp(64px,7vw,96px)}
#main-content.sv3 .sv3-head-row{margin-bottom:40px}
#main-content.sv3 .sv3-services-t{font:400 clamp(20px,1.85vw,25px)/1.3 Besley,Georgia,serif}
#main-content.sv3 .sv3-services a:hover .sv3-services-t{font:400 clamp(20px,1.85vw,25px)/1.3 Besley,Georgia,serif;letter-spacing:0}
#main-content.sv3 .sv3-step{min-height:270px}
#main-content.sv3 .sv3-hero{min-height:690px}
#main-content.sv3 .sv3-hero-copy{padding-top:64px}
#main-content.sv3 .sv3-btn--orange{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1px #ffffff70}
#main-content.sv3 .sv3-btn--orange:hover{background:var(--orange);color:#fff}
.ypn-contact-section{background:#001f3d;color:#fff;padding:64px 0;font-family:"Muoto VAR",MuotoWeb,Arial,sans-serif}
.ypn-contact-grid{width:min(var(--ypn-content-max,1180px),calc(100% - 2 * var(--ypn-page-gutter,32px)));margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:none;gap:64px;align-items:center}
.ypn-contact-copy{padding:16px 0;min-width:0}
.ypn-contact-kicker{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:#e87a00;margin:0 0 18px!important}
#main-content .ypn-contact-copy :is(h1,h2){font-family:Besley,Georgia,serif;font-weight:400;font-size:clamp(36px,3.4vw,48px);line-height:1.2;letter-spacing:-.025em;margin:0 0 24px!important;color:#fff}
.ypn-contact-copy>p:not(.ypn-contact-kicker){font-size:17px;line-height:1.6;max-width:42ch;color:#d7e0e9;margin:0}
.ypn-contact-person{display:flex;gap:16px;align-items:center;margin:32px 0}
.ypn-contact-person img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.ypn-contact-person strong,.ypn-contact-person span{display:block;font-size:16px;line-height:1.5}.ypn-contact-person span{font-size:13px;color:#d7e0e9}
.ypn-contact-direct a{color:#fff;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.ypn-contact-section .ypn-form-card,.ypn-contact-section .ypn-form-success{background:#faf9f6;color:#001f3d;padding:32px;border-radius:16px;box-shadow:none}
.ypn-contact-section #contact-form{display:block;margin:0;padding:0}
#main-content .ypn-contact-section :is(#form-title,.ypn-form-success h2){font:400 25px/1.3 Besley,Georgia,serif;color:#001f3d;margin:0 0 8px;padding:0}
.ypn-contact-section .ypn-form-required{font-size:13px;color:#52606e;margin:0 0 24px}
.ypn-contact-section .ypn-field{margin:0 0 20px}
.ypn-contact-section label{display:block;font-size:15px;font-weight:600;line-height:1.4;margin:0 0 8px}
.ypn-contact-section label span{font-weight:400;color:#52606e;font-size:13px}
.ypn-contact-section :is(input,select,textarea){display:block;width:100%;border:1px solid #bdc7d0;border-radius:7px;padding:11px 12px;background:#fff;color:#001f3d;font:400 16px/1.3 "Muoto VAR",Arial,sans-serif;box-shadow:none;max-width:100%;box-sizing:border-box}
.ypn-contact-section textarea{resize:vertical;min-height:110px}
.ypn-contact-section :is(input,select,textarea):focus-visible{outline:2px solid #001f3d;outline-offset:2px}
.ypn-contact-section [aria-invalid=true]{border-color:#a22b20}
.ypn-contact-section .ypn-field-error{color:#a22b20;font-size:13px;margin:6px 0 0}
.ypn-contact-section button[type=submit]{display:inline-flex;gap:10px;align-items:center;padding:13px 20px;border:0;border-radius:99px;background:#001f3d;color:#fff;font:600 15px/1.3 "Muoto VAR",Arial,sans-serif;cursor:pointer}
.ypn-contact-section button[type=submit]:hover{background:#062b4e}.ypn-contact-section button:disabled{opacity:.7;cursor:wait}
.ypn-contact-section .ypn-form-privacy{margin:16px 0 0;font-size:12px;line-height:1.5;color:#52606e}
.ypn-contact-section :is(.ypn-form-alert,.ypn-form-note){background:#f5efe4;color:#001f3d;border-radius:8px;padding:12px;margin:0 0 16px;font-size:14px;line-height:1.5}
.ypn-contact-section .ypn-form-alert{background:#fdecea}.ypn-contact-section :is(.ypn-form-alert,.ypn-form-note) a{color:inherit;text-decoration:underline}
.ypn-contact-section .ypn-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ypn-contact-section [hidden],.ypn-cookie-banner[hidden]{display:none!important}
.ypn-contact-section .ypn-visually-hidden{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
/* Retire the former contact hero's more-specific form presentation. */
#main-content .ypn-contact-section .ypn-form-card,#main-content .ypn-contact-section .ypn-form-success{background:#faf9f6;padding:32px;border-radius:16px;box-shadow:none;border:0}
#main-content .ypn-contact-section .ypn-field label{font:600 15px/1.4 "Muoto VAR",Arial,sans-serif;text-transform:none;letter-spacing:0;margin-bottom:8px}
#main-content .ypn-contact-section .ypn-field :is(input,select,textarea){font:400 16px/1.3 "Muoto VAR",Arial,sans-serif;background:#fff;border:1px solid #bdc7d0;border-radius:7px;padding:11px 12px;min-height:46px}
#main-content .ypn-contact-section .ypn-field textarea{min-height:110px}
#main-content .ypn-contact-section .ypn-field :is(input,select,textarea):focus-visible{outline:2px solid #001f3d;outline-offset:2px;box-shadow:none}
#main-content .ypn-contact-section .ypn-field [aria-invalid=true]{border-color:#a22b20}
#main-content .ypn-contact-section #contact-form button[type=submit]{width:auto;height:auto;display:inline-flex;padding:13px 20px;font:600 15px/1.3 "Muoto VAR",Arial,sans-serif;background-color:#001f3d!important;color:#fff!important}
#main-content .ypn-contact-section #contact-form button[type=submit]:hover{background-color:#062b4e!important;color:#fff!important}
#main-content#main-content .ypn-contact-section .ypn-form-success h2{font:400 25px/1.3 Besley,Georgia,serif}
/* Shared cookie UI: approved YPN type, surfaces and controls in both languages. */
.ypn-cookie-banner,#ypn-cookie-settings{--cookie-navy:var(--ypn-navy,#001f3d);--cookie-paper:var(--ypn-paper,#faf9f6);--cookie-orange:var(--ypn-orange,#e87a00);box-sizing:border-box;background:var(--cookie-paper);color:var(--cookie-navy);border:1px solid #001f3d26;border-radius:24px;box-shadow:0 12px 48px #001f3d1f;font:400 16px/1.5 var(--ypn-font-body,"Muoto VAR",MuotoWeb,"Helvetica Neue",Arial,sans-serif);text-align:left}
.ypn-cookie-banner{position:fixed;bottom:24px;right:max(24px,calc((100vw - var(--ypn-content-max,1180px))/2));left:auto;z-index:10000;width:440px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;margin:0;padding:28px;display:block}
.ypn-cookie-banner h2,#ypn-cookie-settings h2{font:400 28px/1.25 var(--ypn-font-display,Besley,Georgia,serif);letter-spacing:-.7px;color:var(--cookie-navy);margin:0 44px 16px 0;text-transform:none}
.ypn-cookie-banner p,#ypn-cookie-settings>p{margin:0;color:#526174;font-size:16px;line-height:1.5}
.ypn-cookie-banner .ypn-cookie-actions,#ypn-cookie-settings .ypn-cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.ypn-cookie-banner .ypn-cookie-actions button,#ypn-cookie-settings .ypn-cookie-actions button{box-sizing:border-box;min-height:48px;border-radius:99px;padding:11px 18px;font:600 15px/1.4 var(--ypn-font-body,"Muoto VAR",MuotoWeb,"Helvetica Neue",Arial,sans-serif);border:1px solid var(--cookie-navy);background:var(--cookie-navy);color:#fff;white-space:normal;cursor:pointer;text-align:center;text-transform:none;letter-spacing:normal;box-shadow:none}
#ypn-cookie-settings .ypn-cookie-actions .ypn-cookie-outline{background:transparent;color:var(--cookie-navy)}
.ypn-cookie-banner .ypn-cookie-actions button:hover,#ypn-cookie-settings .ypn-cookie-actions button:hover{background:#062b4e;color:#fff}
.ypn-cookie-banner .ypn-cookie-preferences{display:block;width:100%;border:0;border-radius:99px;background:transparent;color:var(--cookie-navy);min-height:44px;padding:8px 0;margin:8px 0 0;font:400 15px/1.4 var(--ypn-font-body,"Muoto VAR",MuotoWeb,"Helvetica Neue",Arial,sans-serif);text-align:center;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ypn-cookie-banner button:focus-visible,#ypn-cookie-settings button:focus-visible{outline:3px solid var(--cookie-orange);outline-offset:4px}
#ypn-cookie-settings{width:520px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);padding:32px;overflow:auto;margin:auto}
#ypn-cookie-settings::backdrop{background:#001f3d66}
#ypn-cookie-settings .ypn-cookie-close{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:99px;background:transparent;color:var(--cookie-navy);cursor:pointer;box-shadow:none}
#ypn-cookie-settings .ypn-cookie-close svg{width:20px;height:20px}
#ypn-cookie-settings .ypn-cookie-close:hover{background:#f5efe4}
#ypn-cookie-settings .ypn-cookie-categories{margin-top:24px;border-top:1px solid #001f3d26}
#ypn-cookie-settings .ypn-cookie-category{position:relative;display:grid;grid-template-columns:1fr 52px;align-items:center;gap:24px;padding:20px 0;margin:0;border-bottom:1px solid #001f3d26;cursor:pointer;text-transform:none;letter-spacing:normal;line-height:1.5}
#ypn-cookie-settings .ypn-cookie-category strong{display:block;font-size:16px;font-weight:600;margin:0 0 4px;color:var(--cookie-navy)}
#ypn-cookie-settings .ypn-cookie-category-description{display:block;font-size:14px;line-height:1.5;color:#526174}
#ypn-cookie-settings .ypn-cookie-switch{position:relative;width:52px;height:44px;display:grid;place-items:center}
#ypn-cookie-settings .ypn-cookie-switch input{position:absolute;inset:0;width:52px;height:44px;opacity:0;margin:0;cursor:pointer}
#ypn-cookie-settings .ypn-cookie-track{pointer-events:none;display:block;width:44px;height:26px;background:#001f3d33;border:1px solid #001f3d40;border-radius:99px;position:relative}
#ypn-cookie-settings .ypn-cookie-track:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #001f3d26;transition:transform .15s}
#ypn-cookie-settings input:checked+.ypn-cookie-track{background:var(--cookie-navy)}
#ypn-cookie-settings input:checked+.ypn-cookie-track:after{transform:translateX(18px)}
#ypn-cookie-settings input:focus-visible+.ypn-cookie-track{outline:3px solid var(--cookie-orange);outline-offset:4px}
#ypn-cookie-settings input:disabled+.ypn-cookie-track{opacity:.5}
#ypn-cookie-settings .ypn-cookie-actions{margin-top:28px}
@media(max-width:900px){.ypn-contact-grid{grid-template-columns:1fr;gap:32px}.ypn-contact-copy{padding:0}.ypn-contact-copy>p:not(.ypn-contact-kicker){max-width:60ch}#main-content.sv3 .sv3-hero{min-height:0}}
@media(max-width:640px){.ypn-contact-section{padding:48px 0}#main-content .ypn-contact-section .ypn-form-card,#main-content .ypn-contact-section .ypn-form-success{padding:24px 20px}#main-content.sv3 .sv3-hero-copy{padding-top:40px}.ypn-cookie-banner{bottom:16px;left:16px;right:16px;width:auto;padding:24px}.ypn-cookie-banner h2,#ypn-cookie-settings h2{font-size:26px}.ypn-cookie-banner p,#ypn-cookie-settings>p{font-size:15px}#ypn-cookie-settings{padding:26px 24px}#ypn-cookie-settings .ypn-cookie-close{top:14px;right:14px}#ypn-cookie-settings .ypn-cookie-category{gap:16px}#ypn-cookie-settings .ypn-cookie-actions{grid-template-columns:1fr}}
html[lang="th"] #ypn-cookie-settings>p{text-wrap:balance}
html[lang="th"] .ypn-cookie-banner h2,html[lang="th"] #ypn-cookie-settings h2{letter-spacing:normal;line-height:1.35}
@media(prefers-reduced-motion:reduce){#ypn-cookie-settings .ypn-cookie-track:after{transition:none}}

/* Browser review: optical logo sizes account for each asset's transparent canvas. */
#main-content .ypn-logo-group{gap:24px;padding:0 12px;align-items:center}
#main-content .ypn-logo-group :is(.ypn-client-mark,.ypn-client-link){display:flex;align-items:center;justify-content:center;flex:0 0 152px;width:152px;height:80px}
#main-content#main-content .ypn-logo-group img{width:var(--logo-width,130px)!important;height:auto!important;max-width:none!important;max-height:none;object-fit:contain;flex:none}
.ypn-logo-group img[src*="ypn-client-future-management"]{--logo-width:164px}
.ypn-logo-group img[src*="ypn-client-live-promotions"]{--logo-width:130px}
.ypn-logo-group img[src*="ypn-client-ako-sila"]{--logo-width:66px}
.ypn-logo-group img[src*="ypn-client-mezone"]{--logo-width:84px}
.ypn-logo-group img[src*="ypn-client-red-knight"]{--logo-width:60px}
.ypn-logo-group img[src*="ypn-client-mango-global"]{--logo-width:124px}
.ypn-logo-group img[src*="client-natures-organics"]{--logo-width:112px}
.ypn-logo-group img[src*="client-phanganburi-vannee"]{--logo-width:118px}
.ypn-logo-group img[src*="client-atome-thailand"]{--logo-width:152px}
.ypn-logo-group img[src*="client-stratesia"]{--logo-width:140px}
#main-content #homepage-hero-2025 .customer-logos{margin:32px auto 0!important;padding:0 0 28px!important}
#main-content #homepage-hero-2025 .trust-line{margin:0 0 16px!important}
#main-content #homepage-hero-2025 .trust-line p{margin:0!important;font-size:15px;line-height:1.5}

/* A quieter service hero and its supporting strip share one contained surface. */
#main-content.sv3 .sv3-hero{min-height:0;grid-template-columns:minmax(0,56fr) minmax(0,44fr);border-radius:28px}
#main-content.sv3 .sv3-hero:has(+.sv3-ticker){border-radius:28px 28px 0 0}
#main-content.sv3 .sv3-hero-copy{padding:48px}
#main-content.sv3 .sv3-hero :is(.sv3-display,.sv3-display--long){font-size:clamp(36px,3.6vw,48px);line-height:1.18;max-width:none;margin:24px 0;text-wrap:pretty}
#main-content.sv3 .sv3-kicker{font-size:10px;line-height:1.5;letter-spacing:.12em}
#main-content.sv3 .sv3-hero-lede{font-size:16px;line-height:1.6}
#main-content.sv3 .sv3-actions{margin-top:28px}
#main-content.sv3 .sv3-hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;padding-top:0}
#main-content.sv3 .sv3-hero-facts>div{padding-top:16px}
#main-content.sv3 .sv3-hero-facts dt{font-size:10px;line-height:1.4;letter-spacing:.06em;margin-bottom:8px}
#main-content.sv3 .sv3-hero-facts .sv3-num{font-size:24px;line-height:1.2}
#main-content.sv3 .sv3-report-card{display:none}
#main-content.sv3>.sv3-ticker{width:min(var(--wrap),calc(100% - 2 * var(--ypn-page-gutter)));margin-inline:auto;border:0;border-radius:0 0 28px 28px}
#main-content.sv3 .sv3-ticker span{font:500 15px/1.4 var(--sans);padding-block:16px}
#main-content.sv3 .sv3-ticker span::after{width:4px;height:4px;margin-inline:24px}
/* Keep the review credit connected to the section it signs off. */
#main-content.sv3 .sv3-section:has(+.sv3-sign-wrap){padding-bottom:32px}
#main-content.sv3 .sv3-sign-wrap{padding-block:0 48px}
#main-content.sv3 .sv3-sign{padding-block:24px 0;border-bottom:0;gap:20px}
#main-content.sv3 .sv3-sign-photo{width:64px;height:64px;border-radius:12px}
#main-content.sv3 .sv3-sign-name{font-size:18px;line-height:1.4}
#main-content.sv3 .sv3-sign-cred{font-size:14px}
#main-content.sv3 .sv3-sign-date{font-size:12px}
/* The contact hero's navy continues behind the floating navigation. */
body:has(#main-content>.ypn-contact-section:first-child)>.body-wrapper{background:var(--ypn-navy)}
@media(max-width:900px){
 #main-content.sv3 .sv3-hero{grid-template-columns:1fr}
 #main-content.sv3 .sv3-hero-copy{padding:40px 32px}
 #main-content.sv3 .sv3-hero-media{aspect-ratio:16/9;min-height:0}
 #main-content.sv3 .sv3-hero-media>img{object-position:50% 35%}
}
@media(max-width:640px){
 #main-content #homepage-hero-2025 .customer-logos{margin-top:24px!important;padding-bottom:24px!important}
 #main-content #homepage-hero-2025 .trust-line{margin-bottom:12px!important}
 #main-content #homepage-hero-2025 .trust-line p{margin:0 auto!important;font-size:13px!important}
 #main-content .ypn-logo-group{gap:16px;padding-inline:8px}
 #main-content .ypn-logo-group :is(.ypn-client-mark,.ypn-client-link){flex-basis:140px;width:140px}
 #main-content.sv3 .sv3-hero{border-radius:20px}
 #main-content.sv3 .sv3-hero:has(+.sv3-ticker){border-radius:20px 20px 0 0}
 #main-content.sv3 .sv3-hero-copy{padding:32px 24px}
 #main-content.sv3 .sv3-hero :is(.sv3-display,.sv3-display--long){font-size:34px;letter-spacing:-.025em}
 #main-content.sv3 .sv3-hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
 #main-content.sv3 .sv3-hero-facts>div:last-child{grid-column:1/-1}
 #main-content.sv3 .sv3-hero-facts dt{min-height:0}
 #main-content.sv3>.sv3-ticker{border-radius:0 0 20px 20px}
 #main-content.sv3 .sv3-btn{height:48px;padding-inline:20px;font-size:14px}
 #main-content.sv3 .sv3-sign-wrap{padding-bottom:32px}
 #main-content.sv3 .sv3-sign{gap:12px 16px}
 #main-content.sv3 .sv3-sign-photo{width:48px;height:48px;align-self:start}
 #main-content.sv3 .sv3-sign-name{font-size:17px}
}

/* About: one introduction beside the complete team portrait. */
#main-content.ab3 > .ab3-hero {
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  min-height:480px;
  padding:0;
  background:var(--navy);
}
#main-content.ab3 .ab3-hero::before { content:none; }
#main-content.ab3 .ab3-hero-top {
  width:100%;
  padding:48px;
  margin:0;
  align-self:center;
}
#main-content.ab3 .ab3-hero-row { display:block; margin-top:24px; }
#main-content.ab3 .ab3-display {
  font-size:48px;
  line-height:1.18;
  letter-spacing:-1.2px;
  text-wrap:normal;
}
#main-content.ab3 .ab3-hero-name { color:var(--orange); }
#main-content.ab3 .ab3-lede { margin-top:24px; padding:0; font-size:16px; line-height:1.6; }
#main-content.ab3 .ab3-hero-contact { margin-top:28px; height:48px; padding-inline:24px; }
#main-content.ab3 .ab3-hero-photo { width:100%; margin:0!important; min-width:0; align-self:stretch; }
#main-content.ab3 .ab3-hero-photo img {
  width:100%;height:100%!important;aspect-ratio:auto!important;
  object-fit:cover;object-position:55% center;border-radius:0;
}
@media(max-width:900px) {
  #main-content.ab3 > .ab3-hero { grid-template-columns:1fr;min-height:0; }
  #main-content.ab3 .ab3-hero-top { padding:40px 32px; }
  #main-content.ab3 .ab3-lede { max-width:54ch; }
  #main-content.ab3 .ab3-hero-photo img { height:auto!important;aspect-ratio:3/2!important; }
}
@media(max-width:640px) {
  #main-content.ab3 .ab3-hero-top { padding:32px 24px; }
  #main-content.ab3 .ab3-display { font-size:36px;letter-spacing:-.9px; }
  #main-content.ab3 .ab3-hero .sv3-kicker { font-size:10px; }
}
/* Keep the team faces inside the registration hero's portrait crop. */
#main-content.sv3 .sv3-hero-media > img[src="/assets/ypn-team-portrait-clean.webp"] {
  object-position:80% 40%;
}