/* Interior page identities, shared Thai typesetting. */
@font-face { font-family:"ScaleUP Thai"; src:url("../fonts/NotoSansThai.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
html body { font-family:"ScaleUP Thai",sans-serif; }
html body :is(h1,h2,h3,h4,h5,h6,button,input,select,textarea) { font-family:inherit; }
html body :is(h1,h2,h3,h4,h5,h6,.service-panel__word) { letter-spacing:normal; font-feature-settings:normal; }
html body :is(h1,h2,h3) { line-height:1.4; }
.page-hero { background:var(--background); padding:64px 0; overflow:hidden; }
.page-hero::before,.page-hero::after,.page-hero__visual::after { content:none; }
.page-hero h1 { font-size:clamp(36px,4.1vw,64px); line-height:1.4; letter-spacing:normal; text-wrap:balance; padding-block:.08em; }
.page-hero__content { min-width:0; }
.page-hero__summary { font-size:clamp(17px,1.4vw,21px); line-height:1.85; margin-top:20px; }
.page-hero__visual { box-shadow:none; border-radius:8px; }
.page-hero__visual,.page-hero__visual img { min-height:0; height:420px; }
.page-hero .page-kicker { margin-bottom:16px; }
.hero-directory { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-top:28px; max-width:660px; }
.hero-directory a { padding:14px 0; border-bottom:1px solid var(--border); font-size:14px; color:var(--foreground); text-decoration:none; }
.hero-directory a:hover { color:var(--primary); }
.hero-directory a:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
/* Services: an editorial directory with a smaller, framed team photograph. */
.page-hero--services { border-bottom:1px solid var(--border); }
.page-hero--services .page-hero__grid { grid-template-columns:1.35fr .65fr; gap:72px; align-items:end; }
.page-hero--services .page-hero__visual { margin-bottom:18px; border-radius:0; border-top:8px solid var(--primary); }
.page-hero--services .page-hero__visual,.page-hero--services .page-hero__visual img { height:360px; }
.page-hero--services .page-hero__summary { max-width:660px; }
/* Recruitment: a photograph on the left, a clear candidate-search brief on the right. */
.page-hero--recruitment { background:var(--soft-brand); }
.page-hero--recruitment .page-hero__grid { grid-template-columns:.9fr 1.1fr; gap:72px; }
.page-hero--recruitment .page-hero__visual { grid-column:1; grid-row:1; border-radius:160px 160px 12px 12px; }
.page-hero--recruitment .page-hero__content { grid-column:2; }
.page-hero--recruitment .page-hero__visual,.page-hero--recruitment .page-hero__visual img { height:510px; }
/* Workshop: immersive photography with a solid, readable foreground. */
.page-hero--synergy { min-height:620px; color:#fff; background:#202724; padding:80px 0; }
.page-hero--synergy .page-hero__grid { display:block; }
.page-hero--synergy .page-hero__content { max-width:660px; }
.page-hero--synergy .page-hero__visual { position:absolute; inset:0; width:100%; height:100%; border-radius:0; z-index:-2; }
.page-hero--synergy .page-hero__visual img { width:100%; height:100%; object-position:70% 40%; }
.page-hero--synergy::after { content:""; position:absolute; inset:0; width:auto; height:auto; border-radius:0; filter:none; background:linear-gradient(90deg,#12231ff5 5%,#12231fdc 42%,#12231f40 100%); z-index:-1; }
.page-hero--synergy .page-kicker { color:#fac6bd; }
.page-hero--synergy .page-hero__summary { color:#eee; }
.page-hero--synergy .button--secondary { color:#fff; border-color:#ffffff80; background:#172b25; }
/* Digital: wide portfolio showcase under a centered project introduction. */
.page-hero--web { background:var(--muted); padding-bottom:0; }
.page-hero--web .page-hero__grid { grid-template-columns:1fr; gap:40px; text-align:center; }
.page-hero--web .page-hero__content { max-width:900px; margin-inline:auto; }
.page-hero--web h1,.page-hero--web .page-hero__summary { margin-inline:auto; }
.page-hero--web h1 br { display:none; }
.page-hero--web .button-row { justify-content:center; }
.page-hero--web .page-hero__visual { width:min(100%,1040px); margin-inline:auto; border:10px solid var(--card); border-bottom:0; border-radius:18px 18px 0 0; }
.page-hero--web .page-hero__visual,.page-hero--web .page-hero__visual img { height:380px; object-fit:cover; object-position:top; }
/* About: story spread; contact: compact invitation. */
.page-hero--about .page-hero__grid { grid-template-columns:1fr 1fr; gap:80px; }
.page-hero--about .page-hero__visual { grid-row:1; grid-column:1; border-radius:0; }
.page-hero--about .page-hero__content { grid-column:2; border-left:3px solid var(--primary); padding-left:32px; }
.page-hero--about .page-hero__visual,.page-hero--about .page-hero__visual img { height:460px; }
.page-hero--contact { background:#861d2d; color:#fff6f0; }
.page-hero--contact .page-kicker { color:#ffd1c4; }
.page-hero--contact .page-hero__summary { color:#ffe6de; }
.page-hero--contact .page-hero__grid { grid-template-columns:1.5fr .5fr; gap:56px; }
.page-hero--contact .page-hero__visual { border-radius:50%; width:260px; height:260px; justify-self:end; border:6px solid #ffffff26; }
.page-hero--contact .page-hero__visual img { height:100%; }
.page-hero--contact h1 br { display:none; }
.page-hero--contact .button--primary { background:#fff3e9; color:#741627; }
/* DISC: all four styles share equal visual weight, before the quiz. */
.page-hero--disc .page-hero__grid { grid-template-columns:1fr; gap:36px; }
.page-hero--disc .page-hero__content { max-width:840px; margin:auto; text-align:center; }
.page-hero--disc .page-hero__summary { max-width:720px; margin-inline:auto; }
.page-hero--disc h1 br { display:none; }
.hero-disc-styles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:1000px; width:100%; margin:auto; }
.hero-disc-style { display:grid; justify-items:center; padding:18px 12px; border-top:3px solid var(--disc); background:color-mix(in srgb,var(--disc) 10%,var(--card)); }
.hero-disc-style:nth-child(1){--disc:#159365}.hero-disc-style:nth-child(2){--disc:#e34a57}.hero-disc-style:nth-child(3){--disc:#1789b2}.hero-disc-style:nth-child(4){--disc:#b78512}
.hero-disc-style strong { color:var(--disc); font-size:30px; }
.hero-disc-style img { width:100%; height:170px; object-fit:contain; }
.hero-disc-style span { font-size:14px; text-align:center; line-height:1.7; }
.page-hero--career { border-bottom:8px solid var(--primary); background:var(--muted); }
.page-hero--generic { border-bottom:1px solid var(--border); padding-block:48px; }
@media(max-width:1000px) {
 .page-hero__grid,.page-hero--services .page-hero__grid,.page-hero--recruitment .page-hero__grid,.page-hero--about .page-hero__grid { gap:32px; }
 .page-hero--contact .page-hero__visual { width:200px; height:200px; }
 .page-hero--synergy .page-hero__content { max-width:570px; }
}
@media(max-width:767px) {
 .page-hero { padding:36px 0; }
 .page-hero h1 { font-size:clamp(30px,7.6vw,42px); line-height:1.45; }
 .page-hero__grid,.page-hero--services .page-hero__grid,.page-hero--recruitment .page-hero__grid,.page-hero--about .page-hero__grid,.page-hero--contact .page-hero__grid { grid-template-columns:minmax(0,1fr); gap:28px; }
 .page-hero--recruitment .page-hero__content,.page-hero--about .page-hero__content { grid-column:auto; }
 .page-hero--recruitment .page-hero__visual,.page-hero--about .page-hero__visual { grid-row:auto; grid-column:auto; }
 .page-hero__visual,.page-hero__visual img,.page-hero--services .page-hero__visual,.page-hero--services .page-hero__visual img,.page-hero--recruitment .page-hero__visual,.page-hero--recruitment .page-hero__visual img,.page-hero--about .page-hero__visual,.page-hero--about .page-hero__visual img { height:280px; }
 .page-hero--services .page-hero__visual { margin:0; }
 .page-hero--recruitment .page-hero__visual { border-radius:80px 80px 8px 8px; }
 .page-hero--about .page-hero__content { padding-left:20px; }
 .page-hero--synergy { min-height:580px; display:flex; align-items:end; }
 .page-hero--synergy .page-hero__visual,.page-hero--synergy .page-hero__visual img { height:100%; }
 .page-hero--synergy::after { background:linear-gradient(0deg,#12231ff5 10%,#12231fe0 55%,#12231f45); }
 .page-hero--synergy .page-hero__visual img { object-position:65% center; }
 .page-hero--web { padding-bottom:0; }
 .page-hero--web .page-hero__visual,.page-hero--web .page-hero__visual img { height:230px; }
 .page-hero--contact .page-hero__visual { display:none; }
 .hero-directory { gap:0 16px; }
 .hero-directory a { font-size:12px; }
 .hero-disc-styles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .hero-disc-style img { height:130px; }
 .page-hero--disc .page-hero__grid { gap:24px; }
}