/* SB Master CI — 3 October 2026. Device-specific art; copy stays in HTML. */
:root{--grad-soft:linear-gradient(135deg,#FFFFFF 0%,#F4F7FD 45%,#DBEBF9 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)}
.hero-details .btn{padding:0 20px;font-size:16px}
.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}
 .hero-shot .btn-secondary{background:var(--white);color:var(--blue-800);border-color:var(--blue-800)}
 .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}
.cta-shot .btn-accent{color:var(--navy-950)}
.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,rgba(244,250,255,.98),rgba(244,250,255,.82) 32%,rgba(244,250,255,0) 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,#050e33 4%,rgba(5,14,51,.93) 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,#076fe7,#0544bd 55%,#043185)}
.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}
}

:root{--grad-primary:linear-gradient(135deg,#0692f0,#076fe7 45%,#0544bd);--blue-600:#076fe7;--blue-800:#0544bd}
.btn-primary{background:linear-gradient(135deg,#0787ff,#0057dd 60%,#0544bd)}
.hero-summary .key{color:#076fe7}
: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,rgba(5,14,51,.78),rgba(5,14,51,.52) 38%,transparent 65%)}
.cta-shot--overlay .btn-row{margin-top:24px}
/* 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:#0c1939}
 .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:#eaf4fc;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,#0c1939 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:#cbd8ec}
 .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:#e5edf7}
 .cta-shot--overlay .btn{width:100%;min-height:56px;padding:12px 14px;border-radius:999px;font-size:clamp(1rem,.7rem + 1.8vw,1.125rem);background:#fff;color:#0c1939;border:1px solid #fff;box-shadow:none}
 .cta-shot--overlay .btn:is(:hover,:active,:focus-visible){background:#fff;color:#0c1939;border-color:#fff;box-shadow:none}
}

/* Larger, cool-toned homepage invitation with a white consultation button. */
#your-next-step{--accent-yellow:#b8e8ff}
#your-next-step .eyebrow{
 color:#c8e8ff;font-size:clamp(.75rem,.6rem + .45vw,1rem);
}
#your-next-step h2{
 color:#fff;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:#e5f3ff;font-size:clamp(1.25rem,1rem + .7vw,1.625rem);
 line-height:1.75;text-wrap:balance;
}
#your-next-step .btn{
 background:#fff;color:#0c1939;border:1px solid #fff;
 font-size:clamp(1.125rem,1rem + .4vw,1.375rem);font-weight:700;
 min-height:60px;padding:14px 28px;box-shadow:0 8px 24px #06173726;
}
#your-next-step .btn:is(:hover,:active,:focus-visible){
 background:#fff;color:#064b96;border-color:#fff;box-shadow:0 8px 24px #06173726;
}
#your-next-step .btn:focus-visible{outline:3px solid #b8e8ff;outline-offset:4px}

/* 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 #1466bc;border-radius:16px;background:#0b3f83;color:#fff;
 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}
}