/* Full lowercase identity: the wordmark has reserved space at every width. */
:root {scroll-padding-top:132px;}
.site-header {background:#f8f5ef;}
.header-inner {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 24px;padding-block:14px 3px;min-height:0;}
.header-inner > .brand.brand-v4 {grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px;max-width:250px;min-height:50px;letter-spacing:0;}
/* Live type uses the same Noto Sans 600 as the reference Fastwork CTA.
   Keep the Latin brand identical across all interface languages. */
.brand.brand-v4 {color:#3e5f82;background:transparent;border:0;box-shadow:none;text-decoration:none;}
.brand-v4 .brand-wordmark {display:block;font-family:"Noto Sans",Arial,sans-serif;font-weight:600;font-style:normal;font-size:34px;line-height:1.35;letter-spacing:0;white-space:nowrap;color:inherit;background:transparent;text-transform:none;font-synthesis:none;}
.header-inner > .brand.brand-v4 {justify-content:center;}
.header-inner > .header-actions {grid-column:2;grid-row:1;display:flex;margin:0;}
.header-inner > .page-nav,
html:not([lang="en"]) .header-inner > .page-nav {grid-column:1/-1;grid-row:2;order:0;min-width:0;width:100%;justify-content:flex-start;overflow-x:auto;}
.footer-brand.brand-v4 {display:block;max-width:270px;min-height:48px;letter-spacing:0;}
.footer-brand.brand-v4 .brand-wordmark {font-size:38px;}
.hero h1,
html:not([lang="en"]) .hero h1 {font-size:clamp(42px,4.6vw,66px);line-height:1.3;letter-spacing:-1.9px;max-width:730px;text-wrap:balance;}
html:is([lang="th"],[lang="my"],[lang="hi"]) .hero h1 {line-height:1.5;letter-spacing:0;}
.hero .hero-intro {max-width:650px;line-height:1.95;}
/* Photo layers own the atmosphere; retained labels remain foreground copy. */
.hero-board {background:transparent;}
.hero-board::after {display:none;}
@media(min-width:951px){.hero-board {z-index:0;pointer-events:none;}}
@media(max-width:950px){.header-inner>.brand.brand-v4{max-width:230px}.brand-v4 .brand-wordmark{font-size:32px}.hero h1,html:not([lang="en"]) .hero h1{font-size:clamp(39px,5vw,55px)}}

@media(max-width:650px){
 :root {scroll-padding-top:120px;}
 .header-inner {grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding-block:8px 1px;}
 .header-inner>.brand.brand-v4 {grid-column:1;grid-row:1;max-width:205px;width:100%;min-height:44px;gap:0;}
 .header-inner>.brand-v4 .brand-wordmark {font-size:clamp(22px,6.4vw,28px);}
 .header-inner>.header-actions {display:flex;grid-column:2;grid-row:1;align-items:center;justify-content:flex-end;min-width:0;}
 .header-actions>.language-controls {display:flex;gap:3px;}
 .header-inner>.page-nav,html:not([lang="en"]) .header-inner>.page-nav {grid-row:2;gap:21px;padding-block:4px;}
 .hero h1,html:not([lang="en"]) .hero h1 {font-size:clamp(35px,8.7vw,46px);line-height:1.35;letter-spacing:-.8px;}
 html:is([lang="th"],[lang="my"],[lang="hi"]) .hero h1 {line-height:1.55;letter-spacing:0;}
 .atmosphere-hero>.ambient-frame>.ambient-layer {height:calc(100% + 16px);}
 .hero-board {height:190px;min-height:190px;border:0;margin:0;}
 .hero-board .hero-image-label {top:19px;left:0;right:auto;}
 .hero-board .studio-caption {left:auto;right:0;bottom:21px;max-width:250px;background:#f8f5efc9;backdrop-filter:none;}
 .hero-index {margin-top:0;}
 .footer-brand.brand-v4 .brand-wordmark {font-size:34px;}
 .atmosphere {scroll-margin-top:120px;}
}
@media(max-width:370px){.header-inner{column-gap:7px}.hero h1,html:not([lang="en"]) .hero h1{font-size:34px}}
@media print {.ambient-frame {display:none!important}.brand-v4 .brand-wordmark {font-size:28px}}

/* The optional motion control stays accessible without crowding the header. */
.footer-right .motion-toggle {align-self:flex-end;min-width:44px;min-height:44px;color:#3e5f82;}
@media(max-width:650px){.footer-right .motion-toggle{align-self:flex-start;}}