/* SB Master CI — 3 October 2026. Device-specific art; copy stays in HTML. */
:root{--grad-soft:linear-gradient(135deg,#FFFFFF 0%,var(--ci-paper) 45%,var(--ci-paper) 100%);--font:'LINE Seed Sans TH','Noto Sans Thai',Arial,sans-serif;--fs-h1:clamp(42px,4.3vw,64px)}
html{scroll-padding-top:130px}
.key{white-space:normal}
.skip-link{position:fixed;left:12px;top:-80px;z-index:200;background:var(--white);padding:12px 20px;border-radius:12px;color:var(--navy-950)}
.skip-link:focus{top:10px}
:focus-visible{outline:3px solid var(--blue-600);outline-offset:4px}
.bg-deep :focus-visible,.bg-navy :focus-visible{outline-color:var(--accent-yellow)}
.ic svg,.ico svg{width:23px;height:23px;display:block;flex-shrink:0}
.card{background:var(--white)}
.card.bg-deep{background:var(--navy-950)}
.bg-deep{background:var(--navy-950)}
.hero-shot{display:block;min-height:0;padding:64px 0 56px;background:var(--grad-soft)}
.hero-shot::before,.hero-shot::after,.cta-shot::before,.cta-shot::after{display:none}
.hero-shot .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:36px;align-items:center;width:100%}
.hero-summary{grid-column:1;grid-row:1;align-self:end}
.hero-summary h1{font-size:var(--fs-h1);line-height:1.22;letter-spacing:-1.2px;max-width:13ch;color:var(--navy-950)}
.hero-summary .eyebrow{font-size:11px;letter-spacing:1.1px;line-height:1.6}
.hero-details{grid-column:1;grid-row:2;align-self:start;padding-top:8px}
.hero-art{grid-column:2;grid-row:1 / span 2;align-self:center;border-radius:var(--r-visual);overflow:hidden;box-shadow:var(--sh-card)}
.sb-picture{display:block}
.sb-picture img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.hero-details .lead-bar{margin-bottom:24px}
.hero-details .lead-bar p{color:var(--text-secondary)}
.qualification-strip{padding:0 0 52px;background:var(--background)}
.qualification-strip .feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card)}
.qualification-strip .feat{max-width:none}
.feat .ic{background:var(--ice-blue);color:var(--blue-800)}
.feat span{color:var(--text-secondary)}
.qualification-strip+.wrap{margin-top:0!important;padding-bottom:16px}
.prod .shot,.ind-card .shot{aspect-ratio:auto;border-radius:0;display:flex;flex-direction:column}
.shot::after,.tl-item::after,.tl-item::before{display:none}
.shot-copy{position:static;padding:24px;background:var(--white);flex:1}
.shot-copy .eyebrow{color:var(--blue-800);font-size:11px;letter-spacing:1px}
.shot-copy h3{color:var(--navy-950);font-size:22px}
.shot-copy p{color:var(--text-secondary);font-size:15px}
.shot .sb-picture img,.ind-card .sb-picture img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;transform:none}
.tl-item{aspect-ratio:auto;background:var(--white);display:flex;flex-direction:column}
.tl-item .sb-picture img{height:auto;aspect-ratio:16/9;object-fit:contain;transform:none}
.tl-cap{position:static;flex:1;padding:16px;background:var(--white)}
.tl-cap b{color:var(--navy-950);text-shadow:none}
.tl-cap span{color:var(--text-secondary)}
.industry-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.text-link{display:inline-block;margin-top:14px;font-weight:700}
.cta-shot{display:block;padding:64px 0;min-height:0;background:var(--navy-950)}
.cta-shot .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:42px;width:100%}
.cta-copy{max-width:none}
.cta-art{border-radius:var(--r-visual);overflow:hidden}
@media(min-width:768px) and (max-width:1100px){.hero-shot .wrap{gap:24px}.hero-summary h1{font-size:44px}.hero-art{grid-row:1}.hero-details{grid-column:1 / -1;grid-row:2}.hero-details .small{max-width:60ch}.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
 :root{--fs-h1:clamp(36px,9vw,42px)}
 .hero-shot{padding:36px 0 40px;background:var(--grad-soft)}
 .hero-shot .wrap{grid-template-columns:minmax(0,1fr);gap:24px}
 .hero-summary{grid-column:1;grid-row:1;align-self:auto}
 .hero-summary h1{font-size:var(--fs-h1);color:var(--navy-950);max-width:none;line-height:1.25;letter-spacing:-.6px}
 .hero-shot .key{color:var(--blue-800)}
 .hero-shot .eyebrow{color:var(--blue-800)}
 .hero-art{grid-column:1;grid-row:2;width:100%;max-width:520px;justify-self:center}
 .hero-details{grid-column:1;grid-row:3;padding:0}
 .hero-shot p,.hero-shot .lead,.hero-shot .small.muted{color:var(--text-secondary);opacity:1}
 .sb-picture img,.shot .sb-picture img,.ind-card .sb-picture img,.tl-item .sb-picture img{aspect-ratio:4/5;height:auto;object-fit:contain}
 .qualification-strip{padding-bottom:32px}
 .qualification-strip .feats{grid-template-columns:1fr;padding:24px;gap:20px}
 .industry-grid{grid-template-columns:1fr}
 .cta-shot{padding:44px 0;background:var(--navy-950)}
 .cta-shot .wrap{grid-template-columns:minmax(0,1fr);gap:32px}
 .cta-copy{max-width:none}
 .cta-art{max-width:520px;justify-self:center;width:100%}
 .shot-copy{padding:22px}
 .brand img{max-width:210px;height:auto}
 .top .wrap{gap:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero-text-only .wrap{display:block}
.hero-text-only .hero-summary h1{max-width:22ch}
.hero-text-only .hero-details{max-width:68ch;padding-top:12px}
.hero-text-only{padding:48px 0}
/* Keep captions crisp and CTA contrast readable; demo note does not cover content. */
.shot-copy h3,.shot-copy p{text-shadow:none}
.demo-flag{position:static;max-width:none;border-radius:0;box-shadow:none;padding:12px;text-align:center}

/* Approved full-width reference layout. Narrow pain cards use portrait art. */
@media(min-width:1025px){
.hero-shot:not(.hero-text-only){position:relative;isolation:isolate;padding:54px 0 58px;min-height:640px;overflow:hidden}
.hero-shot:not(.hero-text-only) .wrap{display:block;position:static}
.hero-shot:not(.hero-text-only) .hero-art{position:absolute;inset:0;z-index:-2;border-radius:0;box-shadow:none}
.hero-shot:not(.hero-text-only) .hero-art img{height:100%;width:100%;object-fit:cover;object-position:right top}
.hero-shot:not(.hero-text-only)::after{display:block;content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--ci-paper) 98%,transparent),color-mix(in srgb,var(--ci-paper) 82%,transparent) 32%,color-mix(in srgb,var(--ci-paper) 0%,transparent) 58%)}
.hero-summary,.hero-details{max-width:49%}
.hero-summary h1{font-size:clamp(42px,4vw,62px);max-width:none;line-height:1.22}
.hero-details .feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.hero-details .feat{gap:8px;font-size:12px}.hero-details .feat span{font-size:11px}.hero-details .feat .ic{width:28px;min-width:28px;padding:3px;background:transparent}
.hero-details .small{max-width:52ch;font-size:11px}
.industry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cta-shot{position:relative;isolation:isolate;overflow:hidden;min-height:430px;padding:64px 0}
.cta-shot .wrap{display:block;position:static}.cta-copy{max-width:48%}
.cta-art{position:absolute;inset:0;z-index:-2;border-radius:0}.cta-art img{height:100%;object-fit:cover;object-position:right center}
.cta-shot::after{display:block;content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--navy-950) 4%,color-mix(in srgb,var(--ci-deep) 93%,transparent) 29%,transparent 66%)}
}
.hero-shot+.wrap{margin-top:0!important;padding-top:20px;padding-bottom:0}
.tl-item .sb-picture img{aspect-ratio:4/5;object-fit:contain}
.tl-cap{padding:12px}.tl-cap b{font-size:19px}.tl-cap span{font-size:13px}
.prod .shot-copy{padding:18px 20px 0}.prod .shot-copy h3{font-size:22px}
.prod-grid>.bg-deep{background:linear-gradient(145deg,var(--blue-600),var(--blue-800) 55%,var(--navy-900))}
.ind-card .shot-copy{padding:16px}.ind-card .shot-copy h3{font-size:20px}
@media(max-width:767px){
.hero-art{border-radius:0;box-shadow:none;max-width:none;width:calc(100% + 40px);margin-left:-20px;justify-self:start}
.hero-shot .wrap{gap:16px}.hero-details .feats{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0 24px}
.cta-art{border-radius:0;max-width:none;width:calc(100% + 40px);margin-left:-20px}.cta-shot{padding-bottom:0}
}

/* ลบการเขียนทับ --grad-primary ออก 21 ต.ค. 69 — ของเดิมสว่างเกิน
   ตัวหนังสือขาวบนปุ่มได้ค่าความต่างสีแค่ 3.29 (ต้องได้ 4.5)
   กลับไปใช้ค่าใน site.css ซึ่งได้ 4.74 ผ่านเกณฑ์ */
:root{--blue-600:var(--ci-teal);--blue-800:var(--ci-teal)}
.hero-summary .key{color:var(--blue-800)}
:root{--sp-section:clamp(44px,4.5vw,64px)}
@media(max-width:767px){:root{--sp-section:44px}}
@media(min-width:1025px){.cta-art img{object-position:right top}}

/* Homepage closing invitation: readable copy over the same responsive artwork. */
.cta-shot--overlay{display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden;min-height:540px;padding:56px 0;background:var(--navy-950)}
.cta-shot--overlay .wrap{display:block;position:static;z-index:auto;width:100%}
.cta-shot--overlay .cta-copy{position:relative;z-index:2;max-width:48%}
.cta-shot--overlay .cta-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;border-radius:0}
.cta-shot--overlay .cta-art img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:right top}
.cta-shot--overlay::before{display:none}
.cta-shot--overlay::after{display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--ci-deep) 78%,transparent),color-mix(in srgb,var(--ci-deep) 52%,transparent) 38%,transparent 65%)}
/* Match the homepage mobile hero: top artwork fades into a navy copy panel. */
@media(max-width:767px){
 .cta-shot--overlay{display:block;min-height:0;width:calc(100% - 12px);margin:10px 12px 0 0;padding:0;border-radius:0 24px 24px 0;background:var(--ci-deep)}
 .cta-shot--overlay .wrap{padding:230px 24px 28px}
 .cta-shot--overlay .cta-copy{max-width:none}
 .cta-shot--overlay .cta-art{inset:0 0 auto;height:320px;background:var(--ci-paper);isolation:isolate}
 .cta-shot--overlay .cta-art img{height:320px;object-position:center 30%}
 .cta-shot--overlay .cta-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 100px,#0c19399e 215px,var(--ci-deep) 320px);pointer-events:none}
 .cta-shot--overlay::after{display:none}
 .cta-shot--overlay .eyebrow{font-size:10px;letter-spacing:.1em;line-height:1.6;margin:0 0 14px;color:var(--ci-mint)}
 .cta-shot--overlay .eyebrow::before{display:none}
 .cta-shot--overlay h2{font-size:clamp(1.875rem,1rem + 5vw,2.75rem);line-height:1.2;letter-spacing:-.015em;margin:0}
 .cta-shot--overlay .lead{font-size:1.125rem;line-height:1.8;margin:22px 0 0;color:var(--ci-paper)}
}

/* Larger, cool-toned homepage invitation with a var(--white) consultation button. */
/* ลบออก 21 ต.ค. 69 — บรรทัดนี้เปลี่ยนสีเหลืองของแบรนด์เป็นฟ้าอ่อน var(--ci-mint)
   ทำให้ปุ่ม 'ปรึกษาฟรีวันนี้' เป็นฟ้าอ่อนบนพื้นเข้ม และตัวหนังสือฟ้าอ่อนด้วย
   ค่าความต่างสีเหลือ 1.02 = มองไม่เห็นปุ่ม */
#your-next-step .eyebrow{
 color:var(--ci-paper);font-size:clamp(.75rem,.6rem + .45vw,1rem);
}
#your-next-step h2{
 color:var(--white);font-size:clamp(2.625rem,2rem + 2.6vw,4.75rem);
 font-weight:700;line-height:1.22;letter-spacing:-.015em;text-wrap:balance;
}
#your-next-step .lead{
 color:var(--ci-paper);font-size:clamp(1.25rem,1rem + .7vw,1.625rem);
 line-height:1.75;text-wrap:balance;
}

/* Match the product section title to the prominent business heading. */
#products>.wrap>div:first-child>h2{
 display:block;width:fit-content;max-width:100%;padding:16px 24px;
 border:1px solid var(--ci-teal);border-radius:16px;background:var(--ci-teal);color:var(--white);
 box-shadow:0 8px 24px #0b3f831a;line-height:1.45;margin-bottom:16px;text-wrap:wrap;
}
@media(max-width:650px){
 #products>.wrap>div:first-child>h2{padding:14px 18px;border-radius:14px}
}