:root{--green:#2f5d50;--ivory:#f2e9e4;--black:#040000;--muted:rgba(242,233,228,.68);--header-height:88px;font-family:"Noto Sans TC",sans-serif;color:var(--black);background:var(--ivory);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}figure,p,h1{margin:0}a:focus-visible{outline:2px solid var(--green);outline-offset:8px}
.site-header{height:var(--header-height);padding:0 4.2%;display:flex;align-items:center;justify-content:space-between;background:#faf8f5;gap:24px}
.brand{display:block;width:285px;max-width:55%;padding:14px 0}.brand img{width:100%;height:auto}
.site-header nav a{display:flex;align-items:center;gap:22px;font-size:14px;letter-spacing:.08em;padding:15px 0}.site-header nav a span:first-child{position:relative}.site-header nav a span:first-child:after{content:"";position:absolute;bottom:-9px;left:0;right:0;height:1px;background:var(--green)}.site-header nav [lang=en]{font-size:12px;letter-spacing:.12em;color:#666b65}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:700px;height:calc(100svh - var(--header-height));max-height:1100px}
.hero-story{position:relative;background:var(--green);color:var(--ivory);padding:62px 32px 54px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.chapter{position:absolute;left:9%;top:30px;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.story-content{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:420px;animation:arrive .9s ease-out both}
.eyebrow{font-size:14px;letter-spacing:.23em;margin-bottom:22px}.eyebrow span{margin:0 .5em;color:var(--muted)}
h1{font-size:clamp(36px,3.15vw,54px);line-height:1.6;font-weight:400;letter-spacing:.17em;padding-left:.17em}h1 span{display:block}
.architecture{margin-top:30px;width:152px;position:relative}.architecture img{width:152px;height:160px;object-fit:cover;object-position:20% center}.architecture figcaption{position:absolute;left:calc(100% + 9px);bottom:0;writing-mode:vertical-rl;white-space:nowrap;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.story-line{font-size:15px;letter-spacing:.1em;line-height:1.8;margin-top:25px;color:var(--ivory)}.mobile-break{display:none}

.story-baseline{position:absolute;bottom:26px;left:9%;font-size:12px;letter-spacing:.15em;color:var(--muted)}
.hero-visual{min-width:0;position:relative;overflow:hidden;background:#d4cbbd}.living-image{width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:unfold 1.3s ease-out both}
.hero-visual figcaption{position:absolute;bottom:27px;left:34px;right:34px;color:#fff;display:flex;align-items:end;justify-content:space-between;gap:20px;text-shadow:0 1px 5px #0009;z-index:1}.hero-visual figcaption span{font-size:15px;letter-spacing:.15em}.hero-visual figcaption small{font-size:12px;letter-spacing:.08em;white-space:nowrap}.hero-visual:after{content:"";position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#0004);pointer-events:none}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes unfold{from{opacity:.5;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@media(min-width:1600px){.architecture,.architecture img{width:180px}.architecture img{height:190px}.architecture{margin-top:36px}}
@media(max-height:820px) and (min-width:761px){.hero{min-height:620px}.hero-story{padding:55px 25px 50px}.eyebrow{margin-bottom:15px}h1{font-size:38px;line-height:1.5}.architecture{margin-top:20px;width:126px}.architecture img{width:126px;height:140px}.story-line{margin-top:20px}}
@media(max-width:1000px) and (min-width:761px){.hero{grid-template-columns:48% 52%}.hero-story{padding-left:22px;padding-right:22px}.hero-visual figcaption{left:22px;right:22px;flex-direction:column;align-items:start;gap:8px}.story-line{font-size:14px}h1{font-size:36px}}
@media(max-width:760px){:root{--header-height:74px}.site-header{padding:0 6%;gap:16px}.brand{width:222px;max-width:64%}.site-header nav a{font-size:12px;letter-spacing:.03em}.site-header nav [lang=en]{display:none}.hero{height:auto;min-height:0;max-height:none;grid-template-columns:1fr}.hero-story{padding:76px 24px 67px;min-height:610px}.chapter{left:7%;top:24px;font-size:12px}.eyebrow{font-size:13px;margin-bottom:18px}h1{font-size:39px;line-height:1.5;letter-spacing:.15em}.architecture{margin-top:24px;width:124px}.architecture img{width:124px;height:138px}.story-line{font-size:14px;margin-top:23px}.story-baseline{font-size:12px;left:7%;bottom:22px}.hero-visual{height:76svh;min-height:440px;max-height:740px}.hero-visual figcaption{left:24px;right:24px;bottom:24px;flex-wrap:wrap}.hero-visual figcaption span{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Floating white identity and Gora Kadan inspired right-side navigation. */
:root{--hero-dark:#14231d;background:var(--hero-dark)}
.site-header{position:absolute;inset:0 0 auto;height:100px;background:transparent;color:#fff;z-index:10;padding:0 4.2%;pointer-events:none}
.site-header .brand,.site-header .menu-toggle{pointer-events:auto}
.brand img,.menu-brand{filter:brightness(0) invert(1)}
.hero{height:100svh;min-height:740px;max-height:none}.hero-story{background:var(--hero-dark);padding-top:125px;padding-bottom:65px}.chapter{top:115px;color:rgba(255,255,255,.6)}
.site-header a:focus-visible,.menu-toggle:focus-visible,.menu-close:focus-visible,.menu-item:focus-visible{outline:1px solid #fff;outline-offset:6px}
.menu-toggle,.menu-close{font:inherit;color:#fff;border:0;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .25s}
.menu-toggle{position:fixed;top:12px;right:12px;border-radius:2px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.menu-toggle:hover{background:rgba(10,22,17,.55)}
.menu-lines{width:14px;display:grid;gap:3px}.menu-lines i{height:1px;width:14px;background:currentColor;display:block;transition:transform .3s}.menu-toggle:hover .menu-lines i:nth-child(2){transform:scaleX(.7)}
#site-menu{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;max-width:none;height:100%;max-height:none;background:transparent;color:#25372f;overflow:hidden}
#site-menu::backdrop{background:transparent}
.menu-reveal{position:absolute;right:0;top:0;bottom:0;width:clamp(480px,40vw,960px);overflow:hidden;border-radius:0;transform:translate3d(100%,0,0);transition:transform 1s cubic-bezier(.67,.31,.15,1)}
/* Opposing translations reveal a stationary glass panel without animating its clip-path. */
.menu-panel{position:absolute;inset:0;width:100%;height:100%;padding:11vh clamp(54px,4.5vw,110px) 9vh;display:flex;flex-direction:column;align-items:flex-start;overflow-y:auto;border-radius:inherit;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(48px);backdrop-filter:blur(48px);transform:translate3d(-100%,0,0);transition:transform 1s cubic-bezier(.67,.31,.15,1)}
#site-menu.over-light-section .menu-panel{background:rgba(185,196,188,.65)}
#site-menu[open] .menu-reveal,#site-menu[open] .menu-panel{will-change:transform}
#site-menu.is-open .menu-reveal,#site-menu.is-open .menu-panel{transform:translate3d(0,0,0)}
.menu-close{position:fixed;right:12px;top:12px;z-index:2;background:transparent;color:#25372f}
.menu-close__lines,.menu-close__symbol{grid-area:1/1;pointer-events:none;transition:opacity .35s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.menu-close__lines{width:14px;display:grid;gap:3px;opacity:1;transform:rotate(0)}
.menu-close__lines i{height:1px;width:14px;background:currentColor}
.menu-close__symbol{width:26px;height:26px;opacity:0;transform:rotate(-45deg) scale(.5)}
#site-menu.is-open .menu-close__lines{opacity:0;transform:rotate(45deg) scale(.5)}
#site-menu.is-open .menu-close__symbol{opacity:1;transform:rotate(0) scale(1)}
.home-page .menu-close{width:44px;height:44px}
.menu-close:hover{background:rgba(47,93,80,.06)}
.menu-close:focus-visible,.menu-item:focus-visible{outline-color:var(--green)}
#site-menu.opened-by-pointer .menu-close:focus-visible{outline:none}
.menu-brand{width:170px;max-width:76%;height:auto;flex-shrink:0;filter:none;margin:0 0 clamp(56px,9vh,100px)}
.menu-panel nav{width:100%;flex-shrink:0}
.menu-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;width:min(100%,440px);gap:clamp(28px,4.5vh,52px) clamp(40px,4vw,70px)}
.menu-list li{min-width:0}
.menu-item{position:relative;display:block;width:fit-content;padding:0;color:inherit;font-size:clamp(18px,1.55vw,23px);font-weight:300;line-height:1.7;letter-spacing:.14em}
.menu-number{position:absolute;left:-26px;top:.7em;font-size:9px;font-weight:400;line-height:1;letter-spacing:.04em;color:#747d77}
.menu-name{position:relative;display:block}
.menu-name small{display:block;font-size:10px;font-weight:400;line-height:1.6;letter-spacing:.12em;color:#606b64;margin-top:7px}
.menu-item[aria-disabled]{cursor:default}
.menu-item.current .menu-name:after{content:"";position:absolute;left:0;bottom:-12px;width:24px;height:1px;background:var(--green);opacity:.7;transition:width .3s ease}
.menu-item.current:hover .menu-name:after{width:100%}
.menu-item.current:hover{color:var(--green)}
.menu-motto{align-self:flex-start;flex-shrink:0;margin:auto 0 0;padding-top:54px;text-align:left;font-size:9px;font-weight:400;line-height:1.7;letter-spacing:.14em;color:#69746d}
.menu-motto span{display:block}
.menu-motto__zh{margin-bottom:10px;font-size:14px;letter-spacing:.12em;color:var(--green)}
/* Keep the document scrollbar visible so opening the menu never changes the layout width. */
#site-menu,.menu-panel{overscroll-behavior:contain}
@media(max-height:820px) and (min-width:761px){.hero{min-height:700px}.hero-story{padding-top:115px;padding-bottom:55px}.chapter{top:98px}}
@media(max-width:760px){
  .site-header{height:84px;padding:0 6%}.brand{max-width:68%;width:222px}.menu-toggle{top:4px;right:4px}
  .hero{height:auto;min-height:0}.hero-story{padding-top:136px;padding-bottom:70px;min-height:700px}.chapter{top:101px}
  .menu-reveal{inset:0;width:auto;border-radius:0}
  .menu-panel{padding:64px 40px 36px 54px}
  .menu-close{right:4px;top:4px;width:44px;height:44px}
  .menu-brand{width:174px;max-width:88%;margin-bottom:44px}
  .menu-list{grid-template-columns:1fr;gap:23px}
  .menu-item{font-size:19px;line-height:1.6;letter-spacing:.12em}
  .menu-number{left:-22px;font-size:9px}
  .menu-name small{font-size:9px;margin-top:4px;letter-spacing:.12em}
  .menu-item.current .menu-name:after{bottom:-9px;width:20px}
  .menu-motto{padding-top:44px;font-size:8px}
}
@media(max-height:620px) and (min-width:761px){.menu-panel{padding-top:48px;padding-bottom:36px}.menu-brand{margin-bottom:38px}.menu-list{row-gap:20px}.menu-motto{padding-top:36px}}
@media(prefers-reduced-motion:reduce){#site-menu,.menu-reveal,.menu-panel,.menu-toggle,.menu-close,.menu-name:after{transition:none}}

/* Desktop hero: image left, brand story right. */
@media(min-width:761px){
  .hero{grid-template-areas:"visual story"}
  .hero-visual{grid-area:visual}
  .hero-story{grid-area:story}
}

/* Paired brand carousel; both sides share one transition clock. */
.carousel{position:relative;gap:0;background:var(--hero-dark)}
.carousel .hero-story{padding:150px 32px 90px}
.carousel .story-content{max-width:520px;animation:none;transition:opacity .42s ease,transform .65s ease}
.carousel h1{font-size:clamp(30px,2.6vw,46px);line-height:1.55;letter-spacing:.11em}
.carousel .eyebrow{font-size:13px;letter-spacing:.18em;margin-bottom:20px}
.carousel .architecture{width:clamp(230px,23vw,360px);margin-top:26px}
.carousel .architecture img{width:100%;height:clamp(210px,28svh,330px);object-position:center}
.carousel .story-line{font-size:14px;margin-top:22px;max-width:92%;line-height:1.9}

.carousel .living-image{animation:none;transition:opacity .42s ease,transform 1.1s cubic-bezier(.2,.65,.2,1)}
.carousel .hero-visual figcaption{transition:opacity .42s ease}
.carousel.is-changing .story-content{opacity:0;transform:translateY(14px)}
.carousel.is-changing .living-image{opacity:0;transform:scale(1.035)}
.carousel.is-changing .hero-visual figcaption{opacity:0}
.carousel .hero-visual:after{inset:0;background:linear-gradient(#0005,transparent 22%,transparent 75%,#0005)}
.carousel-divider{position:absolute;left:0;top:0;bottom:0;width:1px;background:#f2e9e429;z-index:2;pointer-events:none}
.carousel-divider span{display:block;width:100%;height:100%;background:var(--ivory);transform:scaleY(var(--progress,0));transform-origin:top}
.carousel-controls{position:absolute;bottom:28px;left:9%;right:9%;display:flex;justify-content:flex-start;gap:clamp(8px,1.3vw,24px)}
.carousel-controls button{font:inherit;font-size:12px;letter-spacing:.06em;color:var(--ivory);background:none;border:0;border-bottom:1px solid transparent;min-height:44px;padding:10px 4px;cursor:pointer;opacity:.65}
.carousel-controls button[aria-current=true],.carousel-controls button:hover,.carousel-controls button:focus-visible{opacity:1;border-bottom-color:var(--ivory)}
.carousel-controls button:focus-visible{outline:1px solid var(--ivory);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-height:820px) and (min-width:761px){.carousel{min-height:740px}.carousel .hero-story{padding-top:135px;padding-bottom:80px}.carousel .architecture{margin-top:18px}.carousel .architecture img{height:220px}.carousel h1{font-size:34px}.carousel .eyebrow{margin-bottom:14px}.carousel .story-line{margin-top:16px}}
@media(max-width:1000px) and (min-width:761px){.carousel{grid-template-columns:1fr 1fr}.carousel h1{font-size:30px}.carousel .hero-story{padding-left:20px;padding-right:20px}.carousel .architecture{width:72%}.carousel .story-line{font-size:13px}}
@media(max-width:760px){.carousel{gap:18px}.carousel .hero-story{padding:145px 24px 95px;min-height:810px}.carousel .architecture{width:min(72vw,340px);margin-top:24px}.carousel .architecture img{height:260px}.carousel h1{font-size:34px}.carousel-divider{top:801px;left:12%;width:76%;height:1px}.carousel-divider span{transform:scaleX(var(--progress,0));transform-origin:left}.carousel-controls{left:7%;right:7%;bottom:25px}.carousel .hero-visual{height:75svh;min-height:440px}}
@media(max-width:760px){.carousel .hero-story{grid-row:1}.carousel-divider{position:absolute;top:auto;bottom:0;left:12%;margin:0;width:76%;height:1px}.carousel .hero-visual{grid-row:2}}

/* Timed carousel retains the reference's opposing image wipes. */
.hero-scroll{background:var(--hero-dark)}
.hero-scroll>.hero{position:relative;height:100svh}
.site-header{position:fixed}
.carousel .living-image{transform:scale(1.1) translateY(-30px);transition:transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.carousel .architecture{overflow:visible}
.carousel .architecture img{transform:scale(1.1) translateY(-15px);transition:transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.carousel .architecture img:not(.motion-ghost){clip-path:inset(0);overflow:hidden}
.motion-start--large{transition:none!important;transform:scale(1.1) translateY(30px)!important}
.motion-start--small{transition:none!important;transform:scale(1.1) translateY(15px)!important}
.motion-start--story{transition:none!important;opacity:0!important;transform:translateY(20px)!important}
.motion-start--caption{transition:none!important;opacity:0!important}
.motion-ghost{pointer-events:none}
.hero-visual>.motion-ghost--large{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:3;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .5s linear}
.hero-visual>.motion-ghost--large.is-wiped{clip-path:polygon(0 0,100% 0,100% 0,0 0)}
.hero-visual>.motion-ghost--base-large{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:1;transform:none}
.carousel .architecture>.motion-ghost--small{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:3;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .5s linear;transform:none}
.carousel .architecture>.motion-ghost--small.is-wiped{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
.carousel .architecture>.motion-ghost--base-small{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:1;transform:none}
.carousel .motion-enter--large{position:relative;z-index:3;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .5s linear,transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.carousel .motion-enter--large.is-revealed{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.carousel .architecture .motion-enter--small{position:relative;z-index:3;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:clip-path .5s linear,transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.carousel .architecture .motion-enter--small.is-revealed{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.carousel .architecture figcaption{z-index:4}
.carousel .hero-visual:after{z-index:2}
.carousel-controls{display:flex}
@media(max-width:760px){
  .hero-scroll{height:auto}
  .hero-scroll>.hero{position:relative;top:auto;height:auto}
  .site-header{position:absolute}
  .carousel .living-image,.carousel .architecture img{transform:none}
}

/* A quiet English line separates the headline from the moving inset photo. */
.carousel .hero-tagline{font-size:clamp(13px,1.05vw,16px);font-weight:300;line-height:1.7;letter-spacing:.055em;color:rgba(242,233,228,.8);margin-top:clamp(12px,1.8svh,22px);max-width:90%;text-wrap:balance}
.carousel .architecture{margin-top:clamp(54px,6svh,66px)}
@media(max-width:760px){.carousel .hero-tagline{font-size:13px;max-width:100%;margin-top:14px}.carousel .architecture{margin-top:36px}}

/* SASA reference geometry: 48:80 text/image columns and continuous scroll stories. */
.philosophy-scroll{--unit:calc(100vw / 144);display:flex;flex-direction:column;gap:calc(20 * var(--unit));padding:calc(20 * var(--unit)) 0;position:relative;background:#fff;color:var(--black);overflow:clip}
.principle-story{position:relative;width:calc(128 * var(--unit));margin:0 auto;display:grid;grid-template-columns:3fr 5fr;align-items:stretch}
.principle-reading{grid-column:1;grid-row:1;min-width:0}
.principle-reading-pin{position:sticky;top:var(--pin-top,25vh)}
.principle-text{display:flex;flex-direction:column;writing-mode:vertical-rl;width:max-content;max-width:100%;margin:0 auto;font-size:calc(1.4 * var(--unit));font-weight:300;line-height:2.428571;letter-spacing:0;white-space:nowrap}
.reading-line{position:relative;display:block;width:fit-content;height:fit-content}
.reading-base{opacity:.2}.reading-ink{position:absolute;inset:0;clip-path:inset(0 0 var(--unread,100%) 0);pointer-events:none;user-select:none}
.reading-line--lead{font-size:calc(2.4 * var(--unit));line-height:1.833333;letter-spacing:.1em;font-weight:300}
.reading-line--lead + .reading-line:not(.reading-line--lead){margin-right:calc(4 * var(--unit))}
.principle-images{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:calc(2 * var(--unit));padding-bottom:calc(180 * var(--unit));transform:translate3d(0,var(--gallery-y,0px),0)}
.principle-photo{position:relative;overflow:hidden;flex-shrink:0;aspect-ratio:1;background:#f2f0ed}
.principle-photo img{position:absolute;bottom:0;left:0;width:100%;height:150%;max-width:none;object-fit:cover;transform:translate3d(0,var(--image-y,0%),0)}
.principle-photo--main{width:100%;aspect-ratio:3/2}
.principle-photo--main img{height:125%}
.principle-photo--small{width:25%}
.principle-photo--secondary{width:50%;margin-left:27.5%}
.principle-display{position:absolute;left:calc(2 * var(--unit));bottom:calc(-2.6 * var(--unit));padding-left:calc(4.8 * var(--unit));color:#fff;line-height:1}
.principle-display>small{position:absolute;left:0;top:calc(.6 * var(--unit));font-family:"Bodoni 72",Didot,serif;font-size:calc(1.3 * var(--unit));line-height:1.54}
.principle-display>span{display:block;clip-path:inset(calc(1 * var(--unit)) 0 calc(2 * var(--unit)) 0);font-family:"Bodoni 72",Didot,"Times New Roman",serif;font-size:calc(12 * var(--unit));font-weight:400;letter-spacing:-.05em}
.principle-display>span>span{display:block;padding-right:.08em;transform:translateY(100%);transition:transform 1.5s cubic-bezier(.19,1,.22,1) .2s}
.principle-photo.is-revealed .principle-display>span>span{transform:translateY(0)}
.image-credit{position:absolute;right:10px;bottom:10px;font-size:10px;color:#fff;text-shadow:0 1px 4px #0009}
.principle-story:nth-of-type(even){grid-template-columns:5fr 3fr}
.principle-story:nth-of-type(even) .principle-reading{grid-column:2}
.principle-story:nth-of-type(even) .principle-images{grid-column:1}
.principle-story--craft .principle-photo--small{width:50%;align-self:flex-end}
.principle-story--craft .principle-photo--secondary{width:25%;margin-left:22.5%}
.principle-story--craft .principle-display{left:auto;right:calc(-.5 * var(--unit))}
.principle-story--trust{grid-template-columns:1fr 1fr}
.principle-story--trust .principle-photo--main{width:83.28125%;aspect-ratio:2/3}
.principle-story--trust .principle-photo--small{width:31.25%}
.principle-story--trust .principle-photo--secondary{width:31.25%;margin-left:34.375%}
.principle-story--land .principle-photo--small{align-self:flex-end}
.principle-story--land .principle-photo--secondary{margin-left:22.5%}
.site-header.on-light{color:var(--black)}
.site-header.on-light .brand{opacity:0;visibility:hidden}
.site-header.on-light .menu-toggle{color:var(--black);background:rgba(255,255,255,.65)}
@media(max-width:1023px){
 .philosophy-scroll{--unit:calc(100vw / 37.5);gap:calc(10 * var(--unit));padding:calc(10 * var(--unit)) 0}
 .principle-story,.principle-story:nth-of-type(even){width:84%;display:flex;flex-direction:column}
 .principle-images{display:contents;transform:none}
 .principle-photo--main{order:0}
 .principle-reading{order:1;height:calc(var(--reading-height,390px) + 100 * var(--unit));padding:calc(5 * var(--unit)) 0}
 .principle-text{font-size:calc(1.3 * var(--unit));line-height:2.3}
 .reading-line--lead{font-size:calc(2 * var(--unit));line-height:1.75}
 .reading-line--lead + .reading-line:not(.reading-line--lead){margin-right:calc(2 * var(--unit))}
 .principle-photo--small{order:2;width:34.92%;align-self:flex-start}
 .principle-photo--secondary{order:3;width:61.9%;margin:calc(1 * var(--unit)) 0 0 38.1%}
 .principle-story--craft .principle-photo--small{width:61.9%}
 .principle-story--craft .principle-photo--secondary{width:34.92%;margin-left:0}
 .principle-story--trust .principle-photo--main{width:66.6667%}
 .principle-story--trust .principle-photo--small{width:34.92%;align-self:flex-end}
 .principle-story--trust .principle-photo--secondary{width:34.92%;margin-left:27%}
 .principle-story--land .principle-photo--secondary{margin-left:0}
 .principle-display{left:calc(1 * var(--unit));bottom:calc(-1.1 * var(--unit));padding-left:calc(3.5 * var(--unit))}
 .principle-display>small{font-size:calc(1.2 * var(--unit));top:calc(.2 * var(--unit))}
 .principle-display>span{font-size:calc(5.2 * var(--unit));clip-path:inset(calc(.4 * var(--unit)) 0 calc(1 * var(--unit)) 0)}
 .image-credit{font-size:8px;right:6px;bottom:6px}
}
@media(prefers-reduced-motion:reduce){
 .principle-images{padding-bottom:0;transform:none}
 .principle-reading-pin{position:static}
 .principle-photo img{transform:none}
 .reading-ink{clip-path:none}
 .principle-display>span>span{transform:none}
 .principle-reading{height:auto}
}

/* Keep parallax on the same scroll timeline as the browser's page movement. */
@keyframes principle-gallery-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,125vw,0)}}
@keyframes principle-image-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--photo-travel,33.3333%),0)}}
@supports (animation-timeline:view()){
 .principle-story{view-timeline-name:--principle-scroll;view-timeline-axis:block;view-timeline-inset:0}
 .principle-images{animation:principle-gallery-scroll 1s linear both;animation-timeline:--principle-scroll;animation-range:cover 0% cover 100%}
 .principle-photo img{animation:principle-image-scroll 1s linear both;animation-timeline:--principle-scroll;animation-range:cover var(--photo-offset,0px) cover calc(100% + var(--photo-offset,0px))}
 .principle-photo--main{--photo-travel:20%}
 @media(max-width:1023px){
  .principle-images{animation:none}
  .principle-photo{view-timeline-name:--photo-scroll;view-timeline-axis:block;view-timeline-inset:0}
  .principle-photo img{animation-timeline:--photo-scroll;animation-range:cover 0% cover 100%}
 }
}
@supports not (animation-timeline:view()){
 .principle-images,.principle-photo img{transition:transform .16s ease-out}
}

/* Third screen: Good2Garden's quiet, centered film and scrolling greenery. */
.brand-film{position:relative;isolation:isolate;overflow:hidden;padding:64px 25px 96px;background:var(--hero-dark);color:#fff}
.brand-film__background{position:absolute;inset:0;z-index:-1;overflow:hidden}
.brand-film__background img{position:absolute;top:0;right:0;width:200%;height:110%;max-width:none;object-fit:cover;object-position:50% 5%;transform:translate3d(0,var(--film-y,0px),0);will-change:transform}
.brand-film__background:after{content:"";position:absolute;inset:0;background:linear-gradient(#14231d66,transparent 48%)}
.brand-film__content{position:relative}
.brand-film__copy{margin:0 0 25px;font-family:Arial,"Helvetica Neue",sans-serif;font-size:20px;font-weight:400;line-height:1.1;letter-spacing:.035em;text-align:center;text-shadow:0 1px 12px #14231d33}
.brand-film__frame{width:100%;max-width:732px;aspect-ratio:16/9;margin:0 auto;background:var(--hero-dark)}
.brand-film__poster{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:767px){
 .brand-film{min-height:80svh;padding:72px 20px 180px}
 .brand-film__copy{font-size:16px;line-height:1.2;letter-spacing:.015em}
}
@media(prefers-reduced-motion:reduce){.brand-film__background img{transform:none;will-change:auto}}

/* Contact: measured table spacing and counter-moving rectangular photo. */
.company-access{--access-unit:min(1px,.078125vw);position:relative;isolation:isolate;overflow:clip;padding:calc(320 * var(--access-unit)) 0;background:#fff;color:#303030}
.company-access__title{position:relative;z-index:2;width:calc(1140 * var(--access-unit));margin:0 auto calc(200 * var(--access-unit));font-family:inherit;font-size:clamp(30px,2.6vw,46px);font-weight:400;line-height:1.55;letter-spacing:.11em}
.company-access__title small{display:block;margin-top:18px;font-size:14px;font-weight:300;line-height:1.6;letter-spacing:.2em;color:#77716c}
.company-access__content{position:relative;z-index:2;width:calc(1140 * var(--access-unit));margin:0 auto}
.company-access__content:before{content:"";position:absolute;z-index:-1;left:calc(-292 * var(--access-unit));top:calc(-94 * var(--access-unit));width:calc(1080 * var(--access-unit));height:calc(800 * var(--access-unit));border-radius:0 calc(400 * var(--access-unit)) calc(400 * var(--access-unit)) 0;background:#ffffff30;pointer-events:none}
.company-access__table{width:calc(540 * var(--access-unit));margin:0 0 0 calc(183 * var(--access-unit));padding:0;font-family:inherit;font-size:calc(16 * var(--access-unit));font-weight:300;line-height:2}
.company-access__row{display:grid;grid-template-columns:calc(117 * var(--access-unit)) 1fr;align-items:start;margin-bottom:calc(32 * var(--access-unit));padding-bottom:calc(31 * var(--access-unit));border-bottom:1px solid #6f6b6c80}
.company-access__row:last-child{margin-bottom:0}
.company-access__row label{font-size:calc(17 * var(--access-unit));line-height:calc(24 * var(--access-unit));letter-spacing:.06em;cursor:pointer}
.company-access__row label>span{font-size:10px;vertical-align:top;color:var(--green);margin-left:3px}
.company-access__row label small{display:block;margin-top:6px;font-size:10px;font-weight:300;line-height:1.6;letter-spacing:.14em;color:#77716c}
#contact-form{scroll-margin-top:96px}
.contact-form__intro{margin-bottom:42px;font-size:14px;line-height:1.9;letter-spacing:.05em}
.contact-form__intro small{display:block;margin-top:8px;font-size:11px;color:#77716c}
.contact-form__field{min-width:0}
.contact-form__field input,.contact-form__field select,.contact-form__field textarea{display:block;width:100%;min-height:44px;margin:0;padding:7px 0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1.8;letter-spacing:.03em}
.contact-form__field input::placeholder,.contact-form__field textarea::placeholder{color:#858b86;opacity:1}
.contact-form__field select{cursor:pointer;padding-right:24px}
.contact-form__field select:invalid{color:#858b86}
.contact-form__field select option{color:#303030;background:#fff}
.contact-form__field textarea{min-height:164px;resize:vertical}
.contact-form__field input:focus-visible,.contact-form__field select:focus-visible,.contact-form__field textarea:focus-visible{outline:1px solid var(--green);outline-offset:5px}
.company-access__row:focus-within{border-color:var(--green)}
.contact-form__count{text-align:right;font-size:10px;color:#77716c;line-height:1.6}
.contact-form__error{margin-top:10px;font-size:12px;line-height:1.8;color:#974734}
.contact-form__actions{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.contact-form__submit{display:flex;align-items:center;justify-content:space-between;gap:56px;min-width:180px;min-height:48px;padding:12px 0;border:0;border-bottom:1px solid var(--green);background:transparent;color:var(--green);font:inherit;font-size:15px;letter-spacing:.1em;cursor:pointer}
.contact-form__submit span{font-size:22px;font-weight:300;transition:transform .25s}
.contact-form__submit:hover span{transform:translateX(4px)}
.contact-form__submit:focus-visible{outline:1px solid var(--green);outline-offset:6px}
.contact-form__status{max-width:100%;font-size:12px;line-height:1.9;color:var(--green)}
.company-access__portrait-wrap{position:absolute;z-index:0;right:50%;top:calc(322 * var(--access-unit));width:calc(436 * var(--access-unit));height:calc(720 * var(--access-unit));margin-right:calc(-686 * var(--access-unit))}
.company-access__portrait-wrap:before{content:"";position:absolute;z-index:-1;left:calc(-118 * var(--access-unit));top:calc(62 * var(--access-unit));width:calc(1263 * var(--access-unit));height:calc(592 * var(--access-unit));background:#ffffff80}
.company-access__portrait{position:relative;width:100%;height:100%;overflow:hidden;border-radius:0;transform:translate3d(var(--access-shift,200px),0,0);will-change:transform}
.company-access__portrait img{position:absolute;top:0;right:calc(-375 * var(--access-unit));width:calc(1080 * var(--access-unit));height:100%;max-width:none;object-fit:cover;transform:translate3d(calc(-1 * var(--access-shift,200px)),0,0);will-change:transform}
.company-access__portrait figcaption{position:absolute;bottom:14px;right:14px;padding:3px 5px;background:#f2e9e4b3;color:#303030;font-size:9px;line-height:1.5;letter-spacing:.1em}
@media(max-width:768px){
 .company-access{--access-unit:calc(100vw / 390);display:flex;flex-direction:column;align-items:flex-end;padding:calc(136 * var(--access-unit)) 0 calc(132 * var(--access-unit))}
 .company-access__title{order:0;width:100%;padding:0 calc(24 * var(--access-unit));margin-bottom:calc(64 * var(--access-unit));font-size:34px}
 .company-access__portrait-wrap{order:1;position:relative;right:auto;top:auto;width:calc(240 * var(--access-unit));height:calc(396 * var(--access-unit));margin:0 calc(35 * var(--access-unit)) calc(64 * var(--access-unit)) 0}
 .company-access__portrait-wrap:before{width:calc(366 * var(--access-unit));height:calc(268 * var(--access-unit));left:calc(-90 * var(--access-unit));top:calc(64 * var(--access-unit))}
 .company-access__portrait img{width:calc(594 * var(--access-unit));right:calc(-220 * var(--access-unit))}
 .company-access__content{order:2;width:100%;padding:0 calc(24 * var(--access-unit))}
 .company-access__content:before{left:0;top:0;width:calc(334 * var(--access-unit));height:calc(400 * var(--access-unit))}
 .company-access__table{width:100%;margin:0;padding:0;font-size:15px}
 .company-access__row{grid-template-columns:1fr;gap:16px;padding-bottom:31px;margin-bottom:32px}
 .company-access__row label{font-size:15px;line-height:24px}
 .company-access__row label small{font-size:10px}
 .contact-form__intro{margin-bottom:32px}
 .company-access__portrait figcaption{bottom:10px;right:10px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.company-access__portrait,.company-access__portrait img{transform:none;will-change:auto}}

/* Footer: small information above a full-width supplied brand signature. */
.site-footer{padding:0 35px;background:var(--hero-dark);color:var(--ivory);overflow:hidden}
.site-footer__content{display:flex;justify-content:space-between;gap:60px;padding:120px 0;border-top:1px solid rgba(242,233,228,.25)}
.site-footer__statement{padding-top:2px}
.site-footer__statement p{font-size:18px;font-weight:300;line-height:1.8;letter-spacing:.1em}
.site-footer__statement>small{display:block;margin-top:12px;font-size:11px;line-height:1.7;letter-spacing:.13em;color:rgba(242,233,228,.6)}
.site-footer__navigation{display:grid;grid-template-columns:1fr 1fr;width:400px;max-width:45%;gap:36px;flex-shrink:0}
.site-footer__group h2{margin:0 0 25px;font-size:12px;font-weight:300;line-height:1.7;letter-spacing:.12em;color:rgba(242,233,228,.55)}
.site-footer__group h2 small{display:block;margin-top:5px;font-size:9px;letter-spacing:.12em}
.site-footer__group ul{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.site-footer__group a,.site-footer__group [aria-disabled]{display:block;width:fit-content;font-size:14px;font-weight:300;line-height:1.7;letter-spacing:.1em;transition:opacity .25s}
.site-footer__group a small,.site-footer__group [aria-disabled] small{display:block;margin-top:5px;font-size:9px;line-height:1.6;letter-spacing:.08em;color:rgba(242,233,228,.55)}
.site-footer__group a:hover{opacity:.6}
.site-footer__meta{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:80px;color:rgba(242,233,228,.55)}
.site-footer__meta p{font-size:11px;font-weight:300;line-height:1.8;letter-spacing:.025em}
.site-footer__meta a{font-size:11px;line-height:1.8;letter-spacing:.1em;text-align:right}
.site-footer__meta a small{display:block;font-size:9px;letter-spacing:.08em}
.site-footer__meta a:hover{color:var(--ivory)}
.site-footer__wordmark{display:block;overflow:hidden}
.site-footer__wordmark picture{display:block}
.site-footer__wordmark img{display:block;width:100%;height:auto;filter:brightness(0) invert(1);opacity:.93;transform-origin:0 100%}
.site-footer__wordmark.has-reveal img{transform:translate3d(0,140%,0) skewY(10deg);transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
.site-footer__wordmark.is-revealed img{transform:translate3d(0,0,0) skewY(0)}
.site-footer a:focus-visible{outline:1px solid var(--ivory);outline-offset:6px}
.site-header.on-footer .menu-toggle{color:var(--ivory);background:rgba(255,255,255,.08)}
@media(max-width:760px){
 .site-footer{padding:0 24px}
 .site-footer__content{display:block;padding:96px 0 100px}
 .site-footer__statement p{font-size:16px}
 .site-footer__navigation{width:100%;max-width:none;margin-top:64px;gap:24px}
 .site-footer__meta{margin-bottom:64px;gap:16px}
 .site-footer__meta p{font-size:9px}
 .site-footer__meta a{font-size:10px}
 .site-footer__meta a small{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.site-footer__wordmark.has-reveal img{transform:none;transition:none}}

/* Shared fixed contact entry, outside page sections and the modal menu. */
.contact-orbit{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:20;width:64px;height:64px;display:block;border-radius:50%;color:var(--hero-dark);-webkit-tap-highlight-color:transparent}
.contact-orbit svg{display:block;width:100%;height:100%;overflow:visible}
.contact-orbit__surface{fill:#fff;fill-opacity:.96;stroke:#c9d0cb;stroke-width:.65}
.contact-orbit__ring{transform-origin:50px 50px;transition:transform .6s cubic-bezier(.2,.65,.3,1)}
.contact-orbit text{fill:currentColor;font-family:"Noto Sans TC",sans-serif;font-size:10.5px;font-weight:400;letter-spacing:.45px}
.contact-orbit__plus{fill:none;stroke:currentColor;stroke-width:1.5;transform-origin:50px 50px;transition:transform .4s ease}
.contact-orbit:hover .contact-orbit__ring{transform:rotate(18deg)}
.contact-orbit:hover .contact-orbit__plus{transform:rotate(90deg)}
.contact-orbit:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:760px){.contact-orbit{width:56px;height:56px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}.contact-orbit text{font-size:10px;letter-spacing:.3px}}
@media(prefers-reduced-motion:reduce){.contact-orbit__ring,.contact-orbit__plus{transition:none}}

/* Shared text actions: a fine rectangular frame with brand-green lettering. */
body a.outline-button, body button.outline-button {
 display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
 width: fit-content; max-width: 100%; min-width: 134px; min-height: 48px; gap: 8px;
 padding: 12px 20px; border: 1px solid #898c87; border-radius: 0;
 background: transparent; color: var(--green); font: inherit; font-size: 14px;
 font-weight: 400; line-height: 1.5; letter-spacing: .06em;
 text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
 cursor: pointer; transition: background .25s, border-color .25s;
}
body .outline-button > [aria-hidden="true"] { display: none; }
body .outline-button:hover { color: var(--green); background: #2f5d5008; border-color: var(--green); }
body .outline-button:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
body .outline-button[hidden] { display: none; }
body .news-copy.outline-button { min-width: 0; font-size: 11px; }
body .news-copy.outline-button small { display: none; }
body .home-live__arrows button { border-radius: 0; border-color: #898c87; color: var(--green); }
body .news-filters button { border: 1px solid #898c87; color: var(--green); background: transparent; }
body .news-filters button[aria-pressed=true], body .news-filters button[aria-pressed=true]:hover {
 color: var(--green); background: #2f5d500c; border-color: var(--green);
 text-decoration: underline; text-underline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) { body a.outline-button, body button.outline-button { transition: none; } }

/* The header and footer share the same outer alignment. */
:root { --page-edge: 3%; }
.site-header { padding-inline: var(--page-edge); }
body .menu-toggle, body .menu-close { right: var(--page-edge); }
.site-footer { padding-inline: var(--page-edge); }
.progress-page { --page-edge: 2.7%; }
@media (max-width: 1100px) and (min-width: 761px) {
 .progress-page { --page-edge: 25px; }
}
@media (max-width: 760px) {
 :root, .progress-page { --page-edge: 5%; }
}