/* Home reference: 160px from page top on desktop, 132px on mobile.
   Fixed site header = 80/64px; the remaining breathing room = 80/68px. */
:root {
  --hero-top-gap: 80px;
  --hero-copy-top: calc(var(--header-height,80px) + var(--hero-top-gap));
  --hero-kicker-gap: 20px;
  --hero-lead-gap: 28px;
  --hero-action-gap: 26px;
  --hero-kicker-line: calc(var(--type-kicker-size-en,24px) * var(--type-kicker-leading,1.25));
}
html[data-language="th"] { --hero-kicker-line: calc(var(--type-kicker-size-th,26px) * var(--type-kicker-leading,1.25)); }
@media(max-width:767px) { :root { --hero-top-gap:68px; --hero-lead-gap:22px; } }

/* Shared text rhythm; page-owned widths, type roles, colors and imagery remain. */
[data-hero-copy] > :is([data-type="kicker"],[data-hero-kicker]) { margin:0 0 var(--hero-kicker-gap); }
[data-hero-copy] > h1 { margin:0; padding-block:0; }
[data-hero-copy] > :is([data-type="hero-body"],.intro-copy),
[data-hero-copy] > p[data-type="hero-body"] { margin:var(--hero-lead-gap) 0 0; }
/* Short corporate standfirsts share a wider measure. data-phrase uses the
   existing Thai phrase wrapping and releases overlong phrases on small screens.
   Typography stays entirely with the registered hero-body role. */
[data-hero-copy] > [data-hero-standfirst]:not([data-hero-standfirst="en"]),
html[data-language="en"] [data-hero-copy] > [data-hero-standfirst="en"] { max-width:min(100%,56ch); text-wrap:balance; }
/* English editorial groups preserve complete thoughts while allowing a phrase
   wider than a phone to wrap normally. No font size or weight is overridden. */
[data-hero-standfirst] .hero-copy-phrase { display:inline-block; max-width:100%; vertical-align:top; }
@media(min-width:768px) {
  html[data-language="en"] [data-hero-copy] > [data-hero-title-lines] { max-width:100%; }
  html[data-language="en"] [data-hero-title-lines] > .hero-title-line { display:block; }
}
html[data-language="en"] .services-hero__copy { width:min(100%,1100px); }
html[data-language="en"] .services-hero__copy > [data-hero-standfirst] { max-width:min(100%,56ch); }
@media(min-width:768px) {
  html[data-language="en"] .services-hero__veil { background:linear-gradient(90deg,rgb(247 249 250 / .98) 0%,rgb(247 249 250 / .94) 50%,rgb(247 249 250 / .64) 76%,transparent 100%); }
}
.hero__content > .text-action,
:is(.ss2-hero__actions,.mt-hero__actions,.pl-hero__actions,.sf-hero__actions,.career-hero__actions),
.services-hero__copy > .services-primary-action,
.ab-hero__inner > .ab-pill { margin-top:var(--hero-action-gap); margin-bottom:0; }

/* Text anchors are independent of viewport height and neighbouring image height. */
.hero,.ab-hero,.career-hero { align-items:start; }
.hero__content,.ab-hero__inner,.career-hero__content { padding-top:var(--hero-copy-top); }
.services-hero__grid { align-items:start; padding-top:var(--hero-copy-top); }
.esg-hero { align-items:flex-start; }
.esg-hero,.pf-hero,.sf-hero,.pl-hero,.mt-hero,.nr-masthead,.pr-hero,.na-head { padding-top:var(--hero-copy-top); }
.pl-hero { align-items:start; }
.sf-hero__grid,.pl-hero__grid,.mt-hero__grid { align-items:start; }
.mt-hero__copy,.sf-hero__copy,.pl-hero__copy { align-self:start; }
.pf-hero__inner { align-items:start; }
.pf-hero__aside { align-self:start; margin-top:var(--hero-lead-gap); padding-top:0; border-top:0; }
@media(min-width:1024px) { .pf-hero__aside { margin-top:0; } }
.ss2-hero__content { justify-content:flex-start; padding-top:var(--hero-copy-top); }
/* Stack the photo after the copy only while it is an in-flow grid item.
   Desktop uses an absolute photo; grid placement would constrain its height. */
@media(max-width:1023px) {
  .ss2-hero__content { grid-row:1; grid-column:1; }
  .ss2-hero__media { grid-row:2; grid-column:1; }
}

/* Inset Contact image: its text uses the same page anchor inside the image plate. */
.ct-hero { padding-top:calc(var(--header-height,80px) + 24px); }
.ct-hero__plate { align-items:flex-start; }
.ct-hero__copy { padding-top:calc(var(--hero-top-gap) - 24px); }
.ct-hero__veil { background:linear-gradient(90deg,rgb(10 17 66 / .82),rgb(10 17 66 / .45) 65%,rgb(10 17 66 / .2)); }

/* Newsroom keeps its editorial rule and parallel introduction. */
.nr-kicker { color:var(--infra-blue); }
.nr-masthead__inner { align-items:start; }
@media(min-width:720px) {
  .nr-masthead__intro { padding-top:calc(var(--hero-kicker-line) + var(--hero-kicker-gap)); }
}

/* Utility pages retain their existing reading hierarchy. */
.nf-message { align-items:start; padding-top:var(--hero-copy-top); }
.nf-message__grid { align-items:start; }

/* Blog landings have an in-flow sticky header: add breathing room once. */
.ti-blog .hub-intro { padding-top:var(--hero-top-gap); }
.ti-blog .archive-page,.ti-blog .search-page { position:relative; padding-top:var(--hero-top-gap); }
.ti-blog .archive-intro { padding-top:0; }
.ti-blog :is(.archive-page,.search-page) > .back-link { position:absolute; top:calc(var(--hero-top-gap) - 44px); margin:0; }
.ti-blog .hub-intro [data-hero-kicker],
.ti-blog .search-page > [data-hero-kicker] { margin-top:0; margin-bottom:var(--hero-kicker-gap); }
.ti-blog .hub-intro h1,.ti-blog .search-page > h1 { margin:0; }
.ti-blog .hub-intro .intro-copy,.ti-blog .search-page > .intro-copy { margin-top:var(--hero-lead-gap); }

/* The standalone Blog uses the same layout tokens, without the integration scope. */
body:not(.blog-page) .hub-intro { padding-top:var(--hero-top-gap); }
body:not(.blog-page) :is(.archive-page,.search-page) { position:relative; padding-top:var(--hero-top-gap); }
body:not(.blog-page) .archive-intro { padding-top:0; }
body:not(.blog-page) :is(.archive-page,.search-page) > .back-link { position:absolute; top:calc(var(--hero-top-gap) - 44px); margin:0; }